React-Select-bootstrap4

[ex-tag]

@ihor - This is a react-select-bootstrap4 styling. Written in typescript and tested on Safari. Have not tested on Chrome or Firefox. I don't wish to maintain my own repository or turn this into a PR. But hopeful you can use this code to patch react-select for bootstrap v4 and the upcoming v5.

import React, { memo, FunctionComponent } from 'react';
import ReactSelect from 'react-select';

interface Props {
  [key: string]: any;
}

const Select: FunctionComponent<Props> = memo(props => {
  const { color = 'secondary' } = props;

  let backgroundColor: string = '#5a6268';
  // let border: string = '#545b62';
  let textColor: string = '#fff';

  if (color === 'primary') {
    backgroundColor = '#0069d9';
    // border = '#0062cc';
    textColor = '#fff';
  }

  let selectStyle = {
    control: (provided: any) => ({
      ...provided,
      margin: 0,
      borderWidth: 0,
      boxShadow: 'none',
      backgroundColor: '#fff',
      overflow: 'visible',
      height: 'calc(1.5em + .75rem + 2px)',
      borderRadius: '.25rem',
      cursor: 'text',
      lineHeight: 1.5,
      fontWeight: 400,
      backgroundClip: 'padding-box',
      textShadow: 'none',
      borderTopRightRadius: 0,
      borderBottomLeftRadius: 0,
      textAlign: 'start',
      textIndent: 0
    }),
    valueContainer: (provided: any, state: any) => ({
      ...provided,
      borderWidth: 1,
      borderStyle: 'solid',
      borderColor: state.selectProps.menuIsOpen ? '#66afe9' : '#ced4da',
      borderTopLeftRadius: 4,
      borderBottomLeftRadius: 4,
      transition: 'border-color .15s ease-in-out, box-shadow .15s ease-in-out',
      boxShadow: state.selectProps.menuIsOpen ? '0 0 0 .2rem rgba(0, 123, 255, .25)' : 'none',
      ':focus': {
        outline: 0,
      }
    }),
    placeholder: () => ({
      color: '#6c757d'
      // textAlign: 'start'
    }),
    indicatorSeparator: () => ({
      display: 'none',
    }),
    menu: (provided: any) => ({
      ...provided,
      zIndex: 1000,
      padding: '.5rem 0',
      margin: '.375rem 0 0',
      border: '1px solid rgba(0, 0, 0, .15)',
      boxShadow: '0 .25rem .75rem rgba(0, 0, 0, .1)'
    }),
    menuList: (provided: any) => ({
      ...provided,
      padding: 0
    }),
    option: (provided: any, state: any) => ({
      ...provided,
      padding: '.25rem 1.5rem',
      cursor: 'pointer',
      whiteSpace: 'nowrap',
      clear: 'both',
      color: state.isSelected ? '#fff' : '#16181b',
      backgroundColor: state.isSelected ? backgroundColor : 'transparent',
      ':hover:not(:active)': {
        color: state.isSelected ? '#fff' : '#16181b',
        backgroundColor: state.isSelected ? backgroundColor : '#f8f9fa'
      },
      ':active': {
        color: '#fff',
        textDecoration: 'none',
        backgroundColor
      },
      ':focus': {
        outline: '5px auto -webkit-focus-ring-color'
      }
    })
  };

  const dropdownIndicatorStyle = {
    cursor: 'pointer',
    color: textColor,
    marginLeft: -1,
    border: '1px solid transparent',
    borderRadius: '.25em',
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    padding: '.375rem .75rem',
    display: 'inline-block',
    // textTransform: 'none',
    // position: 'relative',
    zIndex: 2,
    // textShadow: 'none',
    // textIndent: 0,
    // alignItems: 'flex-start',
    // overflow: 'visible',
    // fontWeight: 400,
    // fontSize: '1rem',
    // lineHeight: 1.5,
    // textAlign: 'center',
    // verticalAlign: 'middle',
    transition: 'color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out',
    ':hover': {
      textDecoration: 'none'
    },
    '::after': {
      display: 'inline-block',
      marginLeft: '.255em',
      verticalAlign: '.255em',
      content: '',
      borderTop: '.3em solid',
      borderRight: '.3em solid transparent',
      borderBottom: 0,
      borderLeft: '.3em solid transparent'
    }
  };

  const DropdownIndicator = ({ innerRef, innerProps }: any) => (
    <button type="button" aria-haspopup="true" aria-expanded="true"
      className={`dropdown-toggle btn btn-${color}`}
      style={dropdownIndicatorStyle} ref={innerRef} {...innerProps}>
        <span className="sr-only">Toggle Dropdown</span>
    </button>
  );

  return (
    <ReactSelect {...props}
      components={{ DropdownIndicator }}
      styles={selectStyle}
    />
  );
});

export default Select;