@pubsweet/ui/dist/molecules/Select.js

React component library for use in pubsweet apps

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

var _react = _interopRequireDefault(require("react"));

var _styledComponents = require("styled-components");

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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

var StyledSelect = function StyledSelect(props) {
  var theme = props.theme,
      rest = _objectWithoutProperties(props, ["theme"]);

  var borderStyle = theme.borderStyle,
      borderWidth = theme.borderWidth,
      colorBackground = theme.colorBackground,
      colorBackgroundHue = theme.colorBackgroundHue,
      colorBorder = theme.colorBorder,
      colorPrimary = theme.colorPrimary,
      colorTextPlaceholder = theme.colorTextPlaceholder,
      colorText = theme.colorText,
      colorTextReverse = theme.colorTextReverse,
      fontInterface = theme.fontInterface,
      fontSizeBase = theme.fontSizeBase,
      gridUnit = theme.gridUnit,
      lineHeightBase = theme.lineHeightBase;
  var stylesFromTheme = {
    container: function container(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        minWidth: '200px'
      });
    },
    control: function control(base, state) {
      var myBase = {
        backgroundColor: colorBackground,
        border: 0,
        borderBottom: "".concat(borderWidth, " ").concat(borderStyle, " ").concat(colorBorder),
        borderRadius: 0,
        color: colorText,
        display: 'flex',
        flex: '0 1 auto',
        fontFamily: fontInterface,
        fontSize: fontSizeBase,
        lineHeight: lineHeightBase,
        padding: gridUnit
      };

      if (state.isFocused) {
        return _objectSpread(_objectSpread({}, myBase), {}, {
          borderBottom: "".concat(borderWidth, " ").concat(borderStyle, " ").concat(colorPrimary)
        });
      }

      return myBase;
    },
    indicatorSeparator: function indicatorSeparator(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        display: 'none'
      });
    },
    input: function input(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        margin: 0
      });
    },
    menu: function menu(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        border: "".concat(borderWidth, " ").concat(borderStyle, " ").concat(colorBorder),
        borderRadius: 0,
        boxShadow: 'none',
        flex: '0 1 100%',
        marginTop: gridUnit / 4
      });
    },
    menuList: function menuList(base) {
      return _objectSpread({}, base);
    },
    option: function option(base, state) {
      var myBase = _objectSpread(_objectSpread({}, base), {}, {
        backgroundColor: colorBackground,
        color: colorText,
        fontFamily: fontInterface,
        fontSize: fontSizeBase,
        lineHeight: lineHeightBase
      });

      if (state.isSelected) {
        return _objectSpread(_objectSpread({}, myBase), {}, {
          backgroundColor: colorPrimary,
          color: colorTextReverse
        });
      }

      if (state.isFocused) {
        return _objectSpread(_objectSpread({}, myBase), {}, {
          backgroundColor: colorBackgroundHue,
          color: colorText
        });
      }

      if (state.isDisabled) {
        return _objectSpread(_objectSpread({}, myBase), {}, {
          ':active': _objectSpread(_objectSpread({}, base[':active']), {}, {
            backgroundColor: colorBackground
          }),
          backgroundColor: colorBackground,
          color: colorBorder,
          cursor: 'not-allowed'
        });
      }

      return _objectSpread({}, myBase);
    },
    placeholder: function placeholder(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        margin: 0,
        color: colorTextPlaceholder
      });
    },
    valueContainer: function valueContainer(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        padding: 0
      });
    },
    multiValue: function multiValue(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        color: colorText,
        backgroundColor: colorBackgroundHue
      });
    },
    multiValueLabel: function multiValueLabel(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        color: colorText
      });
    },
    multiValueRemove: function multiValueRemove(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        color: colorText,
        ':hover': {
          backgroundColor: colorBackgroundHue,
          color: colorPrimary
        }
      });
    },
    dropdownIndicator: function dropdownIndicator(base, state) {
      return _objectSpread(_objectSpread({}, base), {}, {
        padding: 6,
        transition: 'all .2s ease',
        transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : null
      });
    },
    menuPlacement: function menuPlacement(base) {
      return _objectSpread({}, base);
    },
    singleValue: function singleValue(base, state) {
      return _objectSpread(_objectSpread({}, base), {}, {
        opacity: state.isDisabled ? 0.5 : 1,
        transition: 'opacity 300ms'
      });
    },
    singleValueRemove: function singleValueRemove(base) {
      return _objectSpread({}, base);
    },
    clearIndicator: function clearIndicator(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        margin: 0,
        color: colorText,
        ':hover': {
          color: colorPrimary
        }
      });
    },
    loadingIndicator: function loadingIndicator(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        color: colorTextPlaceholder
      });
    }
  };
  return /*#__PURE__*/_react["default"].createElement(_reactSelect["default"], _extends({
    classNamePrefix: "react-select"
  }, rest, {
    styles: stylesFromTheme
  }));
};

var _default = (0, _styledComponents.withTheme)(StyledSelect);

exports["default"] = _default;