saagie-ui/src/react/core/atoms/formControlSelect/FormControlSelect.js

Saagie UI from Saagie Design System

/* eslint prefer-const: 0 */
import React, { forwardRef } from 'react';
import PropTypes from 'prop-types';
import Select from 'react-select';
import Creatable from 'react-select/creatable';
import AsyncSelect from 'react-select/async';
import classnames from 'classnames';
import {
  FormControlSelectThemeDefault, groupStyles, groupTitleStyles, groupBadgeStyles,
} from './themes/FormControlSelectThemeDefault';
import { modifierCSS } from '../../../helpers';

const propTypes = {
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
  className: PropTypes.string,
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
  /**
   * The Select size.
   */
  size: PropTypes.oneOf(['', 'sm']),
  isAsync: PropTypes.bool,
  isCreatable: PropTypes.bool,
  isDanger: PropTypes.bool,
  isDisabled: PropTypes.bool,
  isGroupOption: PropTypes.bool,
  isPrimary: PropTypes.bool,
  isSuccess: PropTypes.bool,
  isWarning: PropTypes.bool,
  menuPlacement: PropTypes.oneOf(['auto', 'top', 'bottom']),
  theme: PropTypes.objectOf(PropTypes.func),
};

const defaultProps = {
  tag: Select,
  className: '',
  defaultClassName: 'sui-a-form-control',
  size: '',
  isAsync: false,
  isCreatable: false,
  isDanger: false,
  isDisabled: false,
  isGroupOption: false,
  isPrimary: false,
  isSuccess: false,
  isWarning: false,
  menuPlacement: 'auto',
  theme: { '': () => ({}) },
};

export const FormControlSelect = forwardRef((props, ref) => {
  let {
    tag: Tag,
    defaultClassName,
    className,
    size,
    isAsync,
    isCreatable,
    isDanger,
    isGroupOption,
    isPrimary,
    isSuccess,
    isWarning,
    theme,
    ...attributes
  } = props;

  const classes = classnames(
    defaultClassName,
    className,
    modifierCSS(size),
    {
      'as--danger': isDanger,
      'as--primary': isPrimary,
      'as--success': isSuccess,
      'as--warning': isWarning,
    }
  );

  const styles = { ...FormControlSelectThemeDefault, ...theme };

  if (isCreatable) {
    Tag = Creatable;
  }

  if (isAsync) {
    Tag = AsyncSelect;
  }

  if (isGroupOption) {
    const formatGroupLabel = (data) => (
      <div style={groupStyles}>
        <span style={groupTitleStyles}>{data.label}</span>
        <span style={groupBadgeStyles}>{data.options.length}</span>
      </div>
    );

    return (
      <Tag
        className={classes}
        classNamePrefix={defaultClassName}
        formatGroupLabel={formatGroupLabel}
        styles={styles}
        ref={ref}
        {...attributes}
      />
    );
  }

  return (
    <Tag
      className={classes}
      classNamePrefix={defaultClassName}
      styles={styles}
      ref={ref}
      {...attributes}
    />
  );
});

FormControlSelect.propTypes = propTypes;
FormControlSelect.defaultProps = defaultProps;