cinnecta-ui/lib/components/SelectOnly.js

"use strict";

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

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

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

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

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

var _Shimmer = _interopRequireDefault(require("./Shimmer"));

var _reactWithStyles = require("react-with-styles");

var _withStyles = require("../helpers/withStyles");

var _CinnectaTheme = _interopRequireDefault(require("../themes/CinnectaTheme"));

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, 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; }

var propTypes = _objectSpread({}, _reactWithStyles.withStylesPropTypes, {
  actionLink: _propTypes.default.string,
  autoCapitalize: _propTypes.default.bool,
  autoComplete: _propTypes.default.oneOf(['off', 'on']),
  autoCorrect: _propTypes.default.any,
  autoFocus: _propTypes.default.bool,
  book: _propTypes.default.bool,
  borderless: _propTypes.default.bool,
  clearable: _propTypes.default.bool,
  closeMenuOnSelect: _propTypes.default.bool,
  defaultValue: _propTypes.default.object,
  disabled: _propTypes.default.bool,
  flat: _propTypes.default.bool,
  floating: _propTypes.default.bool,
  focusBorderless: _propTypes.default.bool,
  id: _propTypes.default.string,
  inline: _propTypes.default.bool,
  inputRef: _propTypes.default.func,
  insidePrefix: _propTypes.default.bool,
  insideSuffix: _propTypes.default.bool,
  invalid: _propTypes.default.bool,
  inverse: _propTypes.default.bool,
  loading: _propTypes.default.bool,
  large: _propTypes.default.bool,
  loadingMessage: _propTypes.default.string,
  mask: _propTypes.default.func,
  maxLength: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  multiple: _propTypes.default.bool,
  name: _propTypes.default.string.isRequired,
  noOptionsMessage: _propTypes.default.string,
  onBlur: _propTypes.default.func,
  onChange: _propTypes.default.func,
  onClear: _propTypes.default.func,
  onCreateOption: _propTypes.default.func,
  onFocus: _propTypes.default.func,
  onKeyDown: _propTypes.default.func,
  placeholder: _propTypes.default.string,
  prefix: _propTypes.default.object,
  prefixSeparator: _propTypes.default.bool,
  readOnly: _propTypes.default.bool,
  refForFocus: _propTypes.default.func,
  removeMargins: _propTypes.default.bool,
  removePrefixSpacing: _propTypes.default.bool,
  removeSuffixSpacing: _propTypes.default.bool,
  right: _propTypes.default.bool,
  shimmer: _propTypes.default.bool,
  showFakeValuePlaceholder: _propTypes.default.bool,
  showOverflowEllipsis: _propTypes.default.bool,
  small: _propTypes.default.bool,
  spellCheck: _propTypes.default.any,
  suffix: _propTypes.default.object,
  suffixSeparator: _propTypes.default.bool,
  suffixText: _propTypes.default.any,
  type: _propTypes.default.string,
  underlineFocus: _propTypes.default.bool,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array])
});

var defaultProps = {
  options: [],
  placeholder: 'Selecione...',
  clearable: false,
  closeMenuOnSelect: true,
  noOptionsMessage: 'Sem opções...'
};
var selectStyles = {
  option: function option(base, state) {
    return {
      //...base,
      appearance: 'none',
      borderWidth: 0,
      height: _CinnectaTheme.default.units(2),
      paddingTop: _CinnectaTheme.default.units(0.25),
      paddingRight: _CinnectaTheme.default.units(0.75),
      paddingBottom: _CinnectaTheme.default.units(0.25),
      paddingLeft: _CinnectaTheme.default.units(0.75),
      borderRadius: _CinnectaTheme.default.radius,
      fontSize: _CinnectaTheme.default.units(0.95),
      display: 'flex',
      alignItems: 'center',
      outline: 0,
      position: 'relative',
      margin: 0,
      fontWeight: 500,
      fontFamily: _CinnectaTheme.default.font.default,
      cursor: 'pointer',
      boxSizing: 'border-box',
      background: state.isSelected ? _CinnectaTheme.default.color.blueGrayDark : state.isFocused ? _CinnectaTheme.default.color.grayLight : _CinnectaTheme.default.color.white,
      color: state.isSelected ? _CinnectaTheme.default.color.white : _CinnectaTheme.default.color.primary,
      whiteSpace: 'nowrap',
      '&:hover': {
        background: !state.isSelected && _CinnectaTheme.default.color.blueGrayLight
      },
      '&:active': {
        background: !state.isSelected && _CinnectaTheme.default.color.blueGray
      }
    };
  },
  menu: function menu(base, state) {
    return {
      //...base,
      position: 'absolute',
      marginTop: _CinnectaTheme.default.units(.25),
      top: '100%',
      backgroundColor: _CinnectaTheme.default.color.white,
      boxShadow: "0 ".concat(_CinnectaTheme.default.units(0.5), " ").concat(_CinnectaTheme.default.units(0.75), " ").concat(_CinnectaTheme.default.units(-0.45), " ").concat(_CinnectaTheme.default.color.shadow),
      padding: _CinnectaTheme.default.units(0.5),
      borderRadius: _CinnectaTheme.default.radius,
      borderWidth: 1,
      borderStyle: 'solid',
      borderColor: _CinnectaTheme.default.color.blueGrayLight,
      zIndex: 2,
      minWidth: '100%',
      boxSizing: 'border-box' //transform: 'translate(0, -10%)',
      //transition: 'opacity 200ms ease-out, transform 300ms ease-out'

    };
  },
  menuList: function menuList(base) {
    return _objectSpread({}, base, {
      padding: 0
    });
  },
  control: function control(base) {
    return {
      //...base,
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      flex: 1,
      flexWrap: 'wrap',
      position: 'relative',
      boxSizing: 'border-box'
    };
  },
  container: function container() {
    return {
      width: '100%'
    };
  },
  indicatorSeparator: function indicatorSeparator() {
    return {
      display: 'none'
    };
  },
  dropdownIndicator: function dropdownIndicator(base, state) {
    return _objectSpread({}, base, {
      fill: _CinnectaTheme.default.color.grayDark,
      color: state.isFocused ? _CinnectaTheme.default.color.grayDarker : _CinnectaTheme.default.color.grayDark,
      opacity: 1,
      width: 32,
      '&:hover': {
        color: _CinnectaTheme.default.color.grayDarker
      }
    });
  },
  singleValue: function singleValue(base, state) {
    return _objectSpread({}, base, {
      transition: 'opacity 300ms',
      color: _CinnectaTheme.default.color.grayDarker,
      position: 'static',
      transform: 'none',
      maxWidth: '100%',
      order: 2
    });
  },
  input: function input(base) {
    return _objectSpread({}, base, {
      color: _CinnectaTheme.default.color.grayDarker,
      margin: 0,
      padding: 0,
      order: 1
    });
  },
  placeholder: function placeholder(base) {
    return _objectSpread({}, base, {
      color: _CinnectaTheme.default.input.placeholderColor,
      position: 'static',
      transform: 'none',
      order: 2
    });
  },
  multiValue: function multiValue(base) {
    return _objectSpread({}, base, {
      background: _CinnectaTheme.default.color.gray,
      color: _CinnectaTheme.default.color.grayDarker
    });
  },
  multiValueRemove: function multiValueRemove(base) {
    return _objectSpread({}, base, {
      borderRadius: '50%',
      height: 18,
      width: 18,
      padding: 0,
      marginTop: 2,
      marginLeft: 4,
      marginRight: 2,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      color: _CinnectaTheme.default.color.grayDarker,
      fill: _CinnectaTheme.default.color.grayDarker,
      '&:hover': {
        background: _CinnectaTheme.default.color.shadowWeak,
        color: _CinnectaTheme.default.color.grayDarker,
        fill: _CinnectaTheme.default.color.grayDarker
      }
    });
  },
  multiValueLabel: function multiValueLabel(base) {
    return _objectSpread({}, base, {
      color: _CinnectaTheme.default.color.grayDarker
    });
  }
};

var SelectOnly = function SelectOnly(_ref) {
  var autocomplete = _ref.autocomplete,
      autoFocus = _ref.autoFocus,
      book = _ref.book,
      borderless = _ref.borderless,
      clearable = _ref.clearable,
      css = _ref.css,
      closeMenuOnSelect = _ref.closeMenuOnSelect,
      defaultValue = _ref.defaultValue,
      disabled = _ref.disabled,
      flat = _ref.flat,
      floating = _ref.floating,
      focusBorderless = _ref.focusBorderless,
      id = _ref.id,
      inline = _ref.inline,
      inputRef = _ref.inputRef,
      insidePrefix = _ref.insidePrefix,
      insideSuffix = _ref.insideSuffix,
      invalid = _ref.invalid,
      inverse = _ref.inverse,
      large = _ref.large,
      loading = _ref.loading,
      multiple = _ref.multiple,
      name = _ref.name,
      _noOptionsMessage = _ref.noOptionsMessage,
      onBlur = _ref.onBlur,
      onChange = _ref.onChange,
      onClear = _ref.onClear,
      onCreateOption = _ref.onCreateOption,
      onFocus = _ref.onFocus,
      onKeyDown = _ref.onKeyDown,
      options = _ref.options,
      placeholder = _ref.placeholder,
      prefix = _ref.prefix,
      prefixSeparator = _ref.prefixSeparator,
      readOnly = _ref.readOnly,
      refForFocus = _ref.refForFocus,
      removeMargins = _ref.removeMargins,
      removePrefixSpacing = _ref.removePrefixSpacing,
      removeSuffixSpacing = _ref.removeSuffixSpacing,
      shimmer = _ref.shimmer,
      showFakeValuePlaceholder = _ref.showFakeValuePlaceholder,
      showOverflowEllipsis = _ref.showOverflowEllipsis,
      small = _ref.small,
      spellCheck = _ref.spellCheck,
      styles = _ref.styles,
      suffix = _ref.suffix,
      suffixSeparator = _ref.suffixSeparator,
      suffixText = _ref.suffixText,
      underlineFocus = _ref.underlineFocus,
      value = _ref.value;
  return _react.default.createElement("div", css(styles.selectOnly, !inline && styles.block, borderless && styles.borderless, disabled && styles.selectOnly_disabled, invalid && styles.selectOnly_invalid, flat && styles.selectOnly_flat, floating && styles.selectOnly_floating, focusBorderless && styles.selectOnly_focusBorderless, loading && styles.selectOnly_disabled, small && styles.selectOnly_small, removeMargins && styles.noMargin, insidePrefix && styles.selectOnly_insidePrefix, insideSuffix && styles.selectOnly_insideSuffix), shimmer && _react.default.createElement("div", css(styles.shimmer), _react.default.createElement(_Shimmer.default, {
    width: "100%",
    height: "100%"
  })), prefix && _react.default.createElement(_react.Fragment, null, _react.default.createElement("div", css(styles.selectOnly__prefix, removePrefixSpacing && styles.noPadding), prefix), prefixSeparator && _react.default.createElement("div", css(styles.separator, styles.separator_prefix, removePrefixSpacing && styles.noMargin))), onCreateOption ? _react.default.createElement(_Creatable.default, {
    closeMenuOnSelect: closeMenuOnSelect,
    formatCreateLabel: function formatCreateLabel(value) {
      return "Criar \"".concat(value, "\"");
    },
    defaultValue: defaultValue,
    isDisabled: disabled || loading,
    isLoading: loading,
    isClearable: clearable,
    isMulti: multiple,
    isSearchable: autocomplete,
    isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) {
      var isNotDuplicated = !selectOptions.map(function (option) {
        return option.label;
      }).includes(inputValue);
      var isNotEmpty = inputValue !== '';
      return isNotEmpty && isNotDuplicated;
    },
    name: name,
    noOptionsMessage: function noOptionsMessage() {
      return _noOptionsMessage;
    },
    onBlur: onBlur,
    onChange: onChange,
    onCreateOption: onCreateOption,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    options: options,
    placeholder: placeholder,
    styles: selectStyles,
    theme: function theme(_theme) {
      return _objectSpread({}, _theme, {
        width: '100%',
        borderRadius: 0,
        colors: _objectSpread({}, _theme.colors, {
          text: 'orangered',
          primary25: _CinnectaTheme.default.color.blueGray,
          primary: _CinnectaTheme.default.color.primary
        })
      });
    },
    value: value
  }) : _react.default.createElement(_reactSelect.default, {
    closeMenuOnSelect: closeMenuOnSelect,
    defaultValue: defaultValue,
    isDisabled: disabled,
    isLoading: loading,
    isClearable: clearable,
    isMulti: multiple,
    isSearchable: autocomplete,
    name: name,
    noOptionsMessage: function noOptionsMessage() {
      return _noOptionsMessage;
    },
    onBlur: onBlur,
    onChange: onChange,
    onFocus: onFocus,
    onKeyDown: onKeyDown,
    options: options,
    placeholder: placeholder,
    styles: selectStyles,
    theme: function theme(_theme2) {
      return _objectSpread({}, _theme2, {
        width: '100%',
        borderRadius: 0,
        colors: _objectSpread({}, _theme2.colors, {
          text: 'orangered',
          primary25: _CinnectaTheme.default.color.blueGray,
          primary: _CinnectaTheme.default.color.primary
        })
      });
    },
    value: value
  }), suffix && _react.default.createElement(_react.Fragment, null, suffixSeparator && _react.default.createElement("div", css(styles.separator, styles.separator_suffix, removeSuffixSpacing && styles.noMargin)), _react.default.createElement("div", css(styles.selectOnly__suffix, removeSuffixSpacing && styles.noPadding), suffix)));
};

SelectOnly.propTypes = propTypes;
SelectOnly.defaultProps = defaultProps;
var SelectOnlyWithStyles = (0, _withStyles.withStyles)(function (_ref2) {
  var input = _ref2.input,
      color = _ref2.color,
      shadow = _ref2.shadow;
  return {
    selectOnly: _objectSpread({}, input.default, {
      display: 'inline-flex',
      position: 'relative',
      flexWrap: 'nowrap',
      alignItems: 'center',
      boxSizing: 'border-box',
      minHeight: 40,
      ':focus-within': _objectSpread({}, input.focus)
    }),
    selectOnly_focusBorderless: {
      ':focus-within': {
        borderWidth: 0
      }
    },
    selectOnly_insidePrefix: {
      height: 38
    },
    selectOnly_insideSuffix: {
      height: 38
    },
    selectOnly_disabled: _objectSpread({}, input.disabled),
    selectOnly_invalid: _objectSpread({}, input.invalid),
    selectOnly_flat: {
      borderColor: color.blueGray,
      background: color.white
    },
    selectOnly_floating: _objectSpread({}, shadow.level1, {
      background: color.white,
      borderColor: color.white
    }),
    selectOnly_small: _objectSpread({}, input.small),
    noMargin: {
      marginTop: 0,
      marginRight: 0,
      marginBottom: 0,
      marginLeft: 0
    },
    noPadding: {
      paddingTop: 0,
      paddingRight: 0,
      paddingBottom: 0,
      paddingLeft: 0
    },
    selectOnly__input: _objectSpread({}, input.default, {
      border: 0,
      margin: 0,
      background: color.transparent,
      width: '100%',
      height: 'auto',
      paddingTop: input.verticalPadding,
      paddingRight: input.horizontalPadding,
      paddingBottom: input.verticalPadding,
      paddingLeft: input.horizontalPadding,
      boxSizing: 'border-box',
      '::-ms-clear': {
        display: 'none'
      },
      ':focus': {
        outline: 'none',
        boxShadow: 'none',
        border: 0
      }
    }),
    selectOnly__input_ellipsis: {
      textOverflow: 'ellipsis'
    },
    selectOnly__input_defaultPlaceholder: {
      '::placeholder': {
        color: input.placeholderColor,
        opacity: 1
      }
    },
    selectOnly__input_fakeValuePlaceholder: {
      '::placeholder': {
        color: input.color,
        opacity: 1
      }
    },
    selectOnly__input_inversePlaceholder: {
      '::placeholder': {
        color: color.white,
        opacity: 1
      }
    },
    selectOnly__prefix: {
      paddingLeft: input.horizontalPadding,
      flexShrink: 0
    },
    selectOnly__suffix: {
      paddingRight: input.horizontalPadding,
      flexShrink: 0
    },
    separator: {
      width: 1,
      height: 24,
      background: color.gray,
      flexShrink: 0
    },
    separator_prefix: {
      marginLeft: input.horizontalPadding
    },
    separator_suffix: {
      marginRight: input.horizontalPadding
    },
    block: {
      display: 'flex',
      width: '100%'
    },
    borderless: {
      borderColor: input.background
    },
    shimmer: {
      position: 'absolute',
      width: '100%',
      height: '100%',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    }
  };
})(SelectOnly);
var _default = SelectOnlyWithStyles;
exports.default = _default;