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,
    }),
  };
};