@wix/design-system/dist/cjs/Dropdown/Dropdown.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defaultTo = _interopRequireDefault(require("lodash/defaultTo"));
var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
var _sortBy = _interopRequireDefault(require("lodash/sortBy"));
var _InputWithOptions2 = _interopRequireDefault(require("../InputWithOptions"));
var _DropdownSt = require("./Dropdown.st.css.js");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
function _superPropGet(t, o, e, r) { var p = (0, _get2["default"])((0, _getPrototypeOf2["default"])(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
var NO_SELECTED_ID = null;
var DROPDOWN_DOUBLE_CLICK_THRESHOLD = 200;
var OPEN_KEYS = ['Enter', 'Spacebar', ' ', 'ArrowUp', 'ArrowDown'];
var Dropdown = /*#__PURE__*/function (_InputWithOptions) {
  function Dropdown(props) {
    var _this;
    (0, _classCallCheck2["default"])(this, Dropdown);
    _this = _callSuper(this, Dropdown, [props]);
    _this.state = _objectSpread({
      value: '',
      selectedId: NO_SELECTED_ID
    }, Dropdown.getNextState(props, (0, _defaultTo["default"])(props.selectedId, props.initialSelectedId)));
    return _this;
  }
  (0, _inherits2["default"])(Dropdown, _InputWithOptions);
  return (0, _createClass2["default"])(Dropdown, [{
    key: "isSelectedIdControlled",
    value: function isSelectedIdControlled() {
      return typeof this.props.selectedId !== 'undefined';
    }
  }, {
    key: "getSelectedId",
    value: function getSelectedId() {
      return this.isSelectedIdControlled() ? this.props.selectedId : this.state.selectedId;
    }
  }, {
    key: "shouldOpenDropdown",
    value: function shouldOpenDropdown(key) {
      return OPEN_KEYS.includes(key);
    }
  }, {
    key: "_onOpenChange",
    value: function _onOpenChange(open, reason) {
      _superPropGet(Dropdown, "_onOpenChange", this, 3)([open, reason, DROPDOWN_DOUBLE_CLICK_THRESHOLD]);
    }

    /**
     * Updates the value by the selectedId.
     * If selectedId is not found in options, then value is NOT changed.
     */
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      if (nextProps.selectedId !== this.props.selectedId || !Dropdown.isOptionsEqual(this.props.options, nextProps.options)) {
        this.setState(Dropdown.getNextState(nextProps, nextProps.selectedId, this.state.selectedId));
      }
    }
  }, {
    key: "inputClasses",
    value: function inputClasses() {
      var _this$props = this.props,
        noBorder = _this$props.noBorder,
        allowTextSelection = _this$props.allowTextSelection;
      return (0, _DropdownSt.st)(_DropdownSt.classes.showPointer, {
        noBorder: noBorder,
        allowTextSelection: allowTextSelection
      });
    }
  }, {
    key: "dropdownAdditionalProps",
    value: function dropdownAdditionalProps() {
      return {
        selectedId: this.getSelectedId(),
        value: this.state.value,
        tabIndex: -1,
        withArrow: false,
        size: ['tiny', 'small'].includes(this.props.size) ? 'small' : 'medium'
      };
    }
  }, {
    key: "inputAdditionalProps",
    value: function inputAdditionalProps() {
      return {
        disableEditing: true,
        readOnly: this.props.readOnly,
        value: this.state.value,
        role: 'combobox',
        ariaHaspopup: 'listbox'
      };
    }
  }, {
    key: "_onSelect",
    value: function _onSelect(option) {
      if (!this.isSelectedIdControlled()) {
        this.setState({
          value: this.props.valueParser(option),
          selectedId: option.id
        });
      }
      _superPropGet(Dropdown, "_onSelect", this, 3)([option]);
    }
  }, {
    key: "_onChange",
    value: function _onChange(event) {
      this.setState({
        value: event.target.value
      });
      _superPropGet(Dropdown, "_onChange", this, 3)([event]);
    }
  }], [{
    key: "isOptionsEqual",
    value: function isOptionsEqual(optionsA, optionsB) {
      return (0, _isEqual["default"])((0, _sortBy["default"])(optionsA, 'id'), (0, _sortBy["default"])(optionsB, 'id'));
    }
  }, {
    key: "getNextState",
    value: function getNextState(props, selectedId) {
      if (typeof selectedId !== 'undefined') {
        var option = props.options.find(function (_option) {
          return _option.id === selectedId;
        });
        if (option) {
          var value = props.valueParser(option) || '';
          return {
            value: value,
            selectedId: selectedId
          };
        }
      }
      return {
        value: '',
        selectedId: NO_SELECTED_ID
      };
    }
  }]);
}(_InputWithOptions2["default"]);
Dropdown.defaultProps = _objectSpread({
  allowTextSelection: true
}, _InputWithOptions2["default"].defaultProps);
Dropdown.displayName = 'Dropdown';
var _default = exports["default"] = Dropdown;