# All files / elements/forms/SelectField utils.js

85.71% Statements 24/28
87.5% Branches 14/16
76.47% Functions 13/17
85.71% Lines 24/28

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    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
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119

    10x

    219x
    219x
    219x
    219x
    219x
    9x
    9x
    2x
    7x
    1x

    9x

    219x
    2x

    115x

    115x

    115x

    115x

    115x
    6x

    9x

    11x

    104x

    115x

     import {
      defaultControlStyles,
      resolveBoxShadow,
      resolveColor,
      resolveZIndex,
    } from 'src/utils/styledHelpers';
    import { getGlobalOverrides } from 'src/global-styles';

    export const styleOverridesBase = ({ ...props }) => {
      const {
        menuElevation,
        menuZIndex,
        styleOverrides,
      } = props;
      const globalOverrides = getGlobalOverrides(props);
      const multiValueMargin = 2;
      const styleZIndex = menuZIndex || resolveZIndex(menuElevation, globalOverrides);
      const resolveBackground = ({ isFocused, isSelected }) => {
        let background = 'inherit';
        if (isFocused) {
          background = resolveColor('brandLinkHover', globalOverrides);
        } else if (isSelected) {
          background = resolveColor('brandLink', globalOverrides);
        }
        return background;
      };
      return {
        clearIndicator: provided => ({
          ...provided,
          padding: '0',
          ...styleOverrides.clearIndicator,
        }),
        control: () => ({
          border: '0',
          boxShadow: 'none',
          display: 'flex',
          minHeight: '0',
          ...styleOverrides.control,
        }),
        dropdownIndicator: provided => ({
          ...provided,
          padding: '0',
          ...styleOverrides.dropdownIndicator,
        }),
        indicatorsContainer: provided => ({
          ...provided,
          bottom: '0',
          justifyContent: 'flex-end',
          padding: '0',
          ...styleOverrides.indicatorsContainer,
        }),
        indicatorSeparator: () => ({
          display: 'none',
          ...styleOverrides.indicatorSeparator,
        }),
        input: styles => null,
        menu: provided => ({
          ...provided,
          boxShadow: resolveBoxShadow(menuElevation, globalOverrides),
          left: '0',
          marginBottom: '0',
          marginTop: '2px',
          padding: '8px 0',
          position: 'absolute',
          width: '100%',
          zIndex: styleZIndex,
          ...styleOverrides.menu,
        }),
        menuPortal: provided => ({
          ...provided,
          zIndex: styleZIndex,
          ...styleOverrides.menuPortal,
        }),
        multiValue: () => ({
          backgroundColor: 'rgba(0, 0, 0, 0.1)',
          borderRadius: '4px',
          display: 'flex',
          fontSize: '80%',
          margin: multiValueMargin,
          padding: '4px',
          ...styleOverrides.multiValue,
        }),
        multiValueLabel: () => ({
          padding: '0 4px',
          ...styleOverrides.multiValueLabel,
        }),
        multiValueRemove: () => ({
          alignItems: 'center',
          cursor: 'pointer',
          display: 'flex',
          ...styleOverrides.multiValueRemove,
        }),
        option: (styles, { isFocused, isSelected }) => ({
          background: resolveBackground({ isFocused, isSelected }),
          color: isFocused || isSelected ? resolveColor('white', globalOverrides) : 'inherit',
          padding: '8px 16px',
          ...styleOverrides.option,
        }),
        placeholder: () => ({
          color: resolveColor(defaultControlStyles.placeholderColor, globalOverrides),
          ...styleOverrides.placeholder,
        }),
        singleValue: () => ({
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
          ...styleOverrides.singleValue,
        }),
        valueContainer: (provided, { hasValue, isMulti }) => ({
          ...provided,
          flex: '1 1 0',
          flexWrap: isMulti ? 'wrap' : 'nowrap',
          margin: hasValue && isMulti ? multiValueMargin * -1.5 : null,
          padding: '0',
          ...styleOverrides.valueContainer,
        }),
      };
    };