All files / elements/forms/SelectField component.js

100% Statements 14/14
100% Branches 6/6
100% Functions 2/2
100% Lines 14/14

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 120 121 122 123 124                          10x                           10x               111x 111x 111x 111x 2x 1x                               1x                               109x 1x                             108x                             10x                   10x                    
import React from 'react';
import PropTypes from 'prop-types';
import {
  control,
  refType,
} from 'src/utils/styledHelpers';
import { removeSomeProps } from 'src/utils/componentHelpers';
import Select from 'react-select';
import Creatable from 'react-select/creatable';
import AsyncSelect from 'react-select/async';
import AsyncCreatableSelect from 'react-select/async-creatable';
import { styleOverridesBase } from './utils';
 
const propsToTrim = [
  ...Object.keys(control.propTypes),
  'chipBg',
  'formStyle',
  'isCreatable',
  'isDisabled',
  'isFocused',
  'labelText',
  'menuSelectedBg',
  'menuSelectedColor',
  'multiple',
  'styleOverrides',
  'validationError',
];
export const SelectComponent = ({ children, ...props }) => {
  const {
    inputRef,
    isAsync,
    isCreatable,
    isDisabled,
    isFocused,
    multiple,
  } = props;
  const styles = styleOverridesBase(props);
  const trimmedProps = removeSomeProps(props, propsToTrim);
  if (isAsync) {
    if (isCreatable) {
      return (
        <AsyncCreatableSelect
          ref={inputRef}
          className="grape-ui-select-container"
          classNamePrefix="grape-ui-select"
          isDisabled={isDisabled}
          isFocused={isFocused}
          isMulti={multiple}
          styles={styles}
          {...trimmedProps}
          isClearable
        >
          {children}
        </AsyncCreatableSelect>
      );
    }
    return (
      <AsyncSelect
        ref={inputRef}
        className="grape-ui-select-container"
        classNamePrefix="grape-ui-select"
        isDisabled={isDisabled}
        isFocused={isFocused}
        isMulti={multiple}
        styles={styles}
        {...trimmedProps}
        isClearable
      >
        {children}
      </AsyncSelect>
    );
  }
  if (isCreatable) {
    return (
      <Creatable
        ref={inputRef}
        className="grape-ui-select-container"
        classNamePrefix="grape-ui-select"
        isDisabled={isDisabled}
        isFocused={isFocused}
        isMulti={multiple}
        styles={styles}
        {...trimmedProps}
      >
        {children}
      </Creatable>
    );
  }
  return (
    <Select
      ref={inputRef}
      className="grape-ui-select-container"
      classNamePrefix="grape-ui-select"
      isDisabled={isDisabled}
      isFocused={isFocused}
      isMulti={multiple}
      styles={styleOverridesBase(props)}
      {...trimmedProps}
    >
      {children}
    </Select>
  );
};
SelectComponent.propTypes = {
  children: PropTypes.any,
  inputRef: refType,
  isAsync: PropTypes.bool,
  isCreatable: PropTypes.bool,
  isDisabled: PropTypes.bool,
  isFocused: PropTypes.bool,
  multiple: PropTypes.bool,
  styleOverrides: PropTypes.object,
};
SelectComponent.defaultProps = {
  children: null,
  inputRef: () => {},
  isAsync: false,
  isCreatable: false,
  isDisabled: false,
  isFocused: false,
  multiple: false,
  styleOverrides: {},
};