All files / owid-grapher/clientUtils react-select.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1x
1x
1x
1x
4x
4x
4x
4x
4x
4x
4x
4x
4x
4x
4x
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { CSSObjectWithLabel, StylesConfig } from "react-select"
 
export const getStylesForTargetHeight = (
    targetHeight: number
): StylesConfig<any, any, any> => {
    // Taken from https://github.com/JedWatson/react-select/issues/1322#issuecomment-591189551
    return {
        control: (provided: CSSObjectWithLabel): any => ({
            ...provided,
            minHeight: "initial",
        }),
        valueContainer: (provided: CSSObjectWithLabel): any => ({
            ...provided,
            height: `${targetHeight - 1 - 1}px`,
            padding: "0 4px",
            flexWrap: "nowrap",
        }),
        clearIndicator: (provided: CSSObjectWithLabel): any => ({
            ...provided,
            padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
        }),
        dropdownIndicator: (provided: CSSObjectWithLabel): any => ({
            ...provided,
            padding: `${(targetHeight - 20 - 1 - 1) / 2}px`,
        }),
        option: (provided: CSSObjectWithLabel): any => ({
            ...provided,
            paddingTop: "5px",
            paddingBottom: "5px",
        }),
        menu: (provided: CSSObjectWithLabel): any => ({
            ...provided,
            zIndex: 10000,
        }),
    }
}