@vtex/styleguide/lib/EXPERIMENTAL_Select/index.js

> VTEX Styleguide React components ([Docs](https://vtex.github.io/styleguide))

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _v = require("uuid/v4");

var _v2 = _interopRequireDefault(_v);

var _reactSelect = require("react-select");

var _reactSelect2 = _interopRequireDefault(_reactSelect);

var _Creatable = require("react-select/lib/Creatable");

var _Creatable2 = _interopRequireDefault(_Creatable);

var _ClearIndicator = require("./ClearIndicator");

var _ClearIndicator2 = _interopRequireDefault(_ClearIndicator);

var _colors = require("./colors");

var _colors2 = _interopRequireDefault(_colors);

var _Control = require("./Control");

var _Control2 = _interopRequireDefault(_Control);

var _DropdownIndicator = require("./DropdownIndicator");

var _DropdownIndicator2 = _interopRequireDefault(_DropdownIndicator);

var _MultiValueRemove = require("./MultiValueRemove");

var _MultiValueRemove2 = _interopRequireDefault(_MultiValueRemove);

var _Placeholder = require("./Placeholder");

var _Placeholder2 = _interopRequireDefault(_Placeholder);

var _Option = require("./Option");

var _Option2 = _interopRequireDefault(_Option);

var _styles = require("./styles");

var _withForwardedRef = require("../../modules/withForwardedRef");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

var getOptionValue = function getOptionValue(option) {
  return JSON.stringify(option.value);
};

var Select =
/*#__PURE__*/
function (_Component) {
  _inheritsLoose(Select, _Component);

  function Select(props) {
    var _this;

    _this = _Component.call(this, props) || this;
    _this.inputId = "react-select-input-" + (0, _v2.default)();
    return _this;
  }

  var _proto = Select.prototype;

  _proto.render = function render() {
    var _this$props = this.props,
        forwardedRef = _this$props.forwardedRef,
        autoFocus = _this$props.autoFocus,
        creatable = _this$props.creatable,
        defaultValue = _this$props.defaultValue,
        disabled = _this$props.disabled,
        errorMessage = _this$props.errorMessage,
        formatCreateLabel = _this$props.formatCreateLabel,
        label = _this$props.label,
        loading = _this$props.loading,
        searchable = _this$props.searchable,
        multi = _this$props.multi,
        noOptionsMessage = _this$props.noOptionsMessage,
        onChange = _this$props.onChange,
        onSearchInputChange = _this$props.onSearchInputChange,
        options = _this$props.options,
        placeholder = _this$props.placeholder,
        size = _this$props.size,
        value = _this$props.value,
        valuesMaxHeight = _this$props.valuesMaxHeight,
        clearable = _this$props.clearable,
        defaultMenuIsOpen = _this$props.defaultMenuIsOpen,
        components = _this$props.components,
        menuPosition = _this$props.menuPosition;
    var reactSelectComponentProps = {
      menuPosition: menuPosition,
      defaultMenuIsOpen: defaultMenuIsOpen,
      ref: forwardedRef,
      autoFocus: autoFocus,
      className: "pointer bw1 " + (0, _styles.getFontClassNameFromSize)(size),
      errorMessage: errorMessage,
      size: size,
      components: _extends({
        ClearIndicator: _ClearIndicator2.default,
        Control: _Control2.default,
        DropdownIndicator: _DropdownIndicator2.default,
        IndicatorSeparator: function IndicatorSeparator() {
          return null;
        },
        MultiValueRemove: _MultiValueRemove2.default,
        Placeholder: _Placeholder2.default,
        Option: _Option2.default
      }, components),
      defaultValue: defaultValue,
      formatCreateLabel: formatCreateLabel,
      getOptionValue: getOptionValue,
      isClearable: clearable,
      isDisabled: disabled,
      isLoading: loading,
      isSearchable: searchable,
      isMulti: multi,
      noOptionsMessage: noOptionsMessage,
      inputId: this.inputId,
      onInputChange: function onInputChange(value, _ref) {
        var action = _ref.action;

        if (action === 'input-change' && typeof onSearchInputChange === 'function') {
          onSearchInputChange(value);
        }
      },
      onChange: onChange,
      options: options,
      placeholder: placeholder,
      styles: {
        control: function control(style, state) {
          var isFocused = state.isFocused;
          return _extends({}, style, {
            '&:hover': {
              borderColor: errorMessage ? _colors2.default.red : isFocused ? _colors2.default['muted-2'] : _colors2.default['muted-3']
            },
            boxShadow: 'none',
            borderColor: errorMessage ? _colors2.default.red : isFocused ? _colors2.default['muted-2'] : _colors2.default['muted-4'],
            borderWidth: '.125rem'
          });
        },
        menu: function menu(style) {
          return _extends({}, style, {
            marginTop: 0
          });
        },
        multiValue: function multiValue(style, state) {
          return _extends({}, style, {
            backgroundColor: state.isDisabled ? _colors2.default['muted-4'] : _colors2.default.aliceBlue,
            ':hover': {
              transition: '.15s ease-in-out',
              backgroundColor: _colors2.default['hover-action-secondary']
            },
            borderRadius: 100,
            padding: (0, _styles.getTagPaddingFromSize)(size),
            position: 'relative'
          });
        },
        multiValueLabel: function multiValueLabel(style, state) {
          return _extends({}, style, {
            padding: '0.125rem',
            paddingRight: 0,
            fontWeight: 500,
            fontSize: size === 'large' ? '100%' : style.fontSize,
            color: state.isDisabled ? _colors2.default.gray : _colors2.default['c-on-base']
          });
        },
        multiValueRemove: function multiValueRemove(style, state) {
          return _extends({}, style, {
            color: state.isDisabled ? _colors2.default.gray : _colors2.default['muted-1'],
            ':hover': {
              backgroundColor: 'transparent',
              color: _colors2.default.blue
            }
          });
        },
        option: function option(style, state) {
          return _extends({}, style, {
            cursor: 'pointer',
            backgroundColor: state.isFocused ? _colors2.default['hover-action-secondary'] : 'transparent',
            color: _colors2.default['c-muted-1']
          });
        },
        valueContainer: function valueContainer(style, state) {
          return _extends({}, style, {
            cursor: 'pointer',
            paddingLeft: state.isMulti && state.hasValue ? '.25rem' : '1rem',
            paddingRight: '.25rem',
            backgroundColor: state.isDisabled ? _colors2.default.lightGray : style.backgroundColor,
            maxHeight: valuesMaxHeight + "px",
            overflowY: 'auto'
          });
        }
      },
      theme: function theme(_theme) {
        return _extends({}, _theme, {
          spacing: _extends({}, _theme.spacing, {
            controlHeight: (0, _styles.getControlHeightFromSize)(size)
          })
        });
      },
      value: value
    };
    return _react2.default.createElement("div", {
      className: "flex flex-column"
    }, label && _react2.default.createElement("label", {
      className: (0, _classnames2.default)('dib mb3 w-100 c-on-base', {
        't-small': size !== 'large',
        't-body': size === 'large'
      })
    }, label), creatable ? _react2.default.createElement(_Creatable2.default, reactSelectComponentProps) : _react2.default.createElement(_reactSelect2.default, reactSelectComponentProps), errorMessage && _react2.default.createElement("span", {
      className: "c-danger f6 mt3 lh-title"
    }, errorMessage));
  };

  return Select;
}(_react.Component);

Select.defaultProps = {
  multi: true,
  searchable: true,
  placeholder: 'Select...',
  size: 'regular',
  clearable: true,
  defaultMenuIsOpen: false
};

var OptionShape = _propTypes2.default.shape({
  /** Text that gets rendered for the option. */
  label: _propTypes2.default.string.isRequired,

  /** Underlying value, e.g., an id. */
  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]).isRequired
});

var OptionsShape = _propTypes2.default.arrayOf(OptionShape);

var GroupedOptionsShape = _propTypes2.default.arrayOf(_propTypes2.default.shape({
  label: _propTypes2.default.string,
  options: OptionsShape
}));

Select.propTypes = {
  /** @ignore Forwarded Ref */
  forwardedRef: _withForwardedRef.refShape,

  /** The CSS position value of the menu */
  menuPosition: _propTypes2.default.oneOf(['absolute', 'fixed']),

  /** Select auto focus */
  autoFocus: _propTypes2.default.bool,

  /** Should clear button appear */
  clearable: _propTypes2.default.bool,

  /** Creatable options. */
  creatable: _propTypes2.default.bool,

  /** Default value */
  defaultValue: _propTypes2.default.oneOfType([_propTypes2.default.string, OptionShape, OptionsShape]),

  /** Disables Select */
  disabled: _propTypes2.default.bool,

  /** Error message, e.g., validation error message. */
  errorMessage: _propTypes2.default.string,

  /** Gets the label for the "Create new..." option in the menu. ({inputValue}) => string | null */
  formatCreateLabel: _propTypes2.default.func,

  /** Label text. */
  label: _propTypes2.default.string,

  /** Is the select in a state of loading (async). */
  loading: _propTypes2.default.bool,

  /** Text to display when loading options */
  loadingMessage: _propTypes2.default.string,

  /** Support disabling search input and only allow select to change values. */
  searchable: _propTypes2.default.bool,

  /** Support multiple selected options. */
  multi: _propTypes2.default.bool,

  /** Text to display when there are no options. ({inputValue}) => string | null */
  noOptionsMessage: _propTypes2.default.func,

  /** onChange handler: (option) => void */
  onChange: _propTypes2.default.func.isRequired,

  /** Handle events on search input */
  onSearchInputChange: _propTypes2.default.func,

  /** Array of options. Options have the shape { label, value }. */
  options: _propTypes2.default.oneOfType([OptionsShape, GroupedOptionsShape]),

  /** Text for the select value.  */
  placeholder: _propTypes2.default.string,

  /** Select size */
  size: _propTypes2.default.oneOf(['small', 'regular', 'large']),

  /** Value of the select. */
  value: _propTypes2.default.oneOfType([OptionShape, OptionsShape]),

  /** Max height (in _px_) of the selected values container */
  valuesMaxHeight: _propTypes2.default.number,

  /** If its options are initially shown */
  defaultMenuIsOpen: _propTypes2.default.bool,

  /** Compositional components that are used in react-select. */
  components: _propTypes2.default.object
};
exports.default = (0, _withForwardedRef.withForwardedRef)(Select);