react-life-design/src/MultiSelect/MultiSelect.tsx

import * as React from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/lib/animated';

import Colors from '../Colors';
import TextHelper from '../TextHelper';
import Sizes from '../Sizes';

export interface IProps {
  options?: any;
  loadOptions?: Object[];
  placeholder?: string;
  onChange?: (e?: any) => any;
  isDisabled?: boolean;
  cacheOptions?: boolean;
  defaultOptions?: boolean;
  async?: boolean;
  value?: any;
  noOptionsMessage?: any;
}

const selectStyles = {
  control: (styles: Object) => ({
    ...styles,
    border: '0 none',
    borderRadius: 0,
    outline: 0,
    boxShadow: '0 none',
    borderBottom: `1px solid ${Colors.codGray}`,
    backgroundColor: 'transparent',
    padding: 0,
    fontFamily: TextHelper.fontVariant('medium'),
  }),
  option: () => ({
    marginBottom: `${Sizes.s4}px`,
    cursor: 'pointer',
  }),
  multiValue: () => ({
    backgroundColor: Colors.mongeral,
    borderRadius: '20px',
    color: 'white',
    display: 'flex',
    marginRight: '10px',
    marginBottom: `${Sizes.s1}px`,
    padding: `${Sizes.s1}px ${Sizes.s2}px`,
  }),
  clearIndicator:  () => ({
    display: 'none',
  }),
  dropdownIndicator:  () => ({
    display: 'none',
  }),
  indicatorSeparator:  () => ({
    display: 'none',
  }),
  multiValueLabel: (styles: Object) => ({
    ...styles,
    color: 'white',
  }),
  menu: (styles: Object) => ({
    ...styles,
    border: '0 none',
    borderRadius: 0,
    marginTop: 0,
    boxShadow: `0 3px 6px 0 ${Colors.line}`,
    borderTop: `1px solid ${Colors.codGray}`,
    padding: `${Sizes.s4}px ${Sizes.s4}px 0`,
    zIndex: 9999,
  }),
  menuList: (styles: Object, {}) => ({
    ...styles,
    fontFamily: TextHelper.fontVariant('medium'),
    height: '215px',
  }),
  valueContainer: (styles: Object, {}) => ({
    ...styles,
    padding: 0,
  }),
};

export default class MultiSelect extends React.PureComponent<IProps> {
  render () {
    return (
      <Select
        {...this.props}
        components={makeAnimated()}
        styles={selectStyles}
        isMulti
      />
    );
  }
}