@cbinsights/fds/lib/components/SmartInput/CustomSelectUtils.js

Form: A design system by CB Insights

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _styleConstants = _interopRequireDefault(require("../../dictionary/js/styleConstants"));

var _CustomValueContainer = _interopRequireDefault(require("./CustomSelectComponents/CustomValueContainer"));

var _CustomClearIndicator = _interopRequireDefault(require("./CustomSelectComponents/CustomClearIndicator"));

var _CustomInput = _interopRequireDefault(require("./CustomSelectComponents/CustomInput"));

var _CustomMultiValue = _interopRequireDefault(require("./CustomSelectComponents/CustomMultiValue"));

var _CustomSingleValue = _interopRequireDefault(require("./CustomSelectComponents/CustomSingleValue"));

var _CustomMenuList = _interopRequireDefault(require("./CustomSelectComponents/CustomMenuList"));

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

var SEARCH_BTN_OFFSET = 102;

var noopComponent = function noopComponent() {
  return null;
};

var customComponents = {
  DropdownIndicator: noopComponent,
  IndicatorSeparator: noopComponent,
  NoOptionsMessage: noopComponent,
  MultiValueRemove: noopComponent,
  ValueContainer: _CustomValueContainer.default,
  ClearIndicator: _CustomClearIndicator.default,
  Input: _CustomInput.default,
  MultiValue: _CustomMultiValue.default,
  MenuList: _CustomMenuList.default,
  SingleValue: _CustomSingleValue.default
};
exports.customComponents = customComponents;

var customThemes = function customThemes(theme) {
  return _objectSpread(_objectSpread({}, theme), {}, {
    colors: _objectSpread(_objectSpread({}, theme.colors), {}, {
      primary50: _styleConstants.default.COLOR_AQUA
    }),
    spacing: _objectSpread(_objectSpread({}, theme.spacing), {}, {
      controlHeight: 32,
      baseUnit: 0
    })
  });
};

exports.customThemes = customThemes;

var customStyles = function customStyles(useStylesForHeader) {
  var focusedOptionColor = useStylesForHeader ? _styleConstants.default.COLOR_AQUA : 'rgba(64, 64, 64, 0.08)';
  return {
    container: function container(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        width: '100%',
        fontSize: "".concat(_styleConstants.default.FONT_SIZE_L, " !important")
      });
    },
    input: function input(base, state) {
      var _state$selectProps, _state$selectProps2, _state$selectProps3, _state$selectProps4, _state$selectProps4$v, _state$selectProps5, _state$selectProps6, _state$selectProps6$v;

      var isFocused = (state === null || state === void 0 ? void 0 : (_state$selectProps = state.selectProps) === null || _state$selectProps === void 0 ? void 0 : _state$selectProps.isFocused) || (state === null || state === void 0 ? void 0 : (_state$selectProps2 = state.selectProps) === null || _state$selectProps2 === void 0 ? void 0 : _state$selectProps2.menuIsOpen);
      var isLastCursorPosition = Array.isArray(state === null || state === void 0 ? void 0 : (_state$selectProps3 = state.selectProps) === null || _state$selectProps3 === void 0 ? void 0 : _state$selectProps3.value) ? (state === null || state === void 0 ? void 0 : (_state$selectProps4 = state.selectProps) === null || _state$selectProps4 === void 0 ? void 0 : (_state$selectProps4$v = _state$selectProps4.value) === null || _state$selectProps4$v === void 0 ? void 0 : _state$selectProps4$v.length) === (state === null || state === void 0 ? void 0 : (_state$selectProps5 = state.selectProps) === null || _state$selectProps5 === void 0 ? void 0 : _state$selectProps5.cursorPosition) || (state === null || state === void 0 ? void 0 : (_state$selectProps6 = state.selectProps) === null || _state$selectProps6 === void 0 ? void 0 : (_state$selectProps6$v = _state$selectProps6.value) === null || _state$selectProps6$v === void 0 ? void 0 : _state$selectProps6$v.length) === 0 : true;
      return _objectSpread(_objectSpread({}, base), {}, {
        color: _styleConstants.default.COLOR_SLATE,
        flex: 'none',
        cursor: 'pointer',
        display: useStylesForHeader && isLastCursorPosition ? 'block' : 'inline-grid',
        flexGrow: useStylesForHeader && isFocused && isLastCursorPosition ? 1 : 0,
        overflow: useStylesForHeader ? 'hidden' : 'inherit',
        ':after': useStylesForHeader ? {
          maxWidth: isLastCursorPosition ? '100%' : 'inherit',
          whiteSpace: 'nowrap'
        } : {},
        input: {
          boxShadow: 'none !important',
          minHeight: 'var(--space-xl)'
        }
      });
    },
    menu: function menu(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        width: useStylesForHeader ? "calc(100% + ".concat(SEARCH_BTN_OFFSET, "px)") : '100%',
        zIndex: Number(_styleConstants.default.ZINDEX_MODAL),
        margin: '1px 0'
      });
    },
    menuList: function menuList(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        borderRadius: _styleConstants.default.SPACE_XS,
        maxHeight: 'none'
      });
    },
    option: function option(base, state) {
      return _objectSpread(_objectSpread({}, base), {}, {
        backgroundColor: state.isFocused ? focusedOptionColor : 'inherit',
        color: state.isFocused && useStylesForHeader ? _styleConstants.default.COLOR_WHITE : _styleConstants.default.COLOR_SLATE
      });
    },
    control: function control(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        paddingLeft: useStylesForHeader ? '12px' : _styleConstants.default.SPACE_S,
        border: 'none !important',
        boxShadow: 'none',
        borderRadius: useStylesForHeader ? "".concat(_styleConstants.default.SPACE_XS, " 0 0 ").concat(_styleConstants.default.SPACE_XS) : _styleConstants.default.SPACE_XS
      });
    },
    multiValue: function multiValue() {
      return {
        margin: useStylesForHeader ? '0 3px' : '0 2px'
      };
    },
    singleValue: function singleValue(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        color: _styleConstants.default.COLOR_SLATE
      });
    },
    multiValueLabel: function multiValueLabel() {
      return {};
    },
    placeholder: function placeholder(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        color: _styleConstants.default.FONT_COLOR_HINT,
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis'
      });
    },
    valueContainer: function valueContainer(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        whiteSpace: useStylesForHeader ? 'nowrap' : 'normal',
        overflow: 'auto',
        textOverflow: 'ellipsis',
        flexWrap: useStylesForHeader ? 'nowrap' : 'wrap',
        msOverflowStyle: 'none',
        scrollbarWidth: 'none',
        '&::-webkit-scrollbar': {
          width: '0',
          display: 'none'
        }
      });
    }
  };
};

exports.customStyles = customStyles;