choerodon-ui/pro/lib/select/Select.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

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

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

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

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

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

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

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

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

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

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

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

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

var _tslib = require("tslib");

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

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

var _omit = _interopRequireDefault(require("lodash/omit"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _isEqual = _interopRequireDefault(require("lodash/isEqual"));

var _isNil = _interopRequireDefault(require("lodash/isNil"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _defer = _interopRequireDefault(require("lodash/defer"));

var _isPlainObject = _interopRequireDefault(require("lodash/isPlainObject"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _menu = _interopRequireWildcard(require("../../../lib/rc-components/menu"));

var _tag = _interopRequireDefault(require("../../../lib/tag"));

var _KeyCode = _interopRequireDefault(require("../../../lib/_util/KeyCode"));

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _configure = require("../../../lib/configure");

var _TriggerField2 = _interopRequireDefault(require("../trigger-field/TriggerField"));

var _autobind = _interopRequireDefault(require("../_util/autobind"));

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

var _OptGroup = _interopRequireDefault(require("../option/OptGroup"));

var _enum = require("../data-set/enum");

var _DataSet = _interopRequireDefault(require("../data-set/DataSet"));

var _spin = _interopRequireDefault(require("../spin"));

var _EventManager = require("../_util/EventManager");

var _normalizeOptions = _interopRequireDefault(require("../option/normalizeOptions"));

var _localeContext = require("../locale-context");

var ObjectChainValue = _interopRequireWildcard(require("../_util/ObjectChainValue"));

var _isEmpty = _interopRequireDefault(require("../_util/isEmpty"));

var _isSame = _interopRequireDefault(require("../_util/isSame"));

var _isSameLike = _interopRequireDefault(require("../_util/isSameLike"));

var _isIE = _interopRequireDefault(require("../_util/isIE"));

function _createSuper(Derived) {
  function isNativeReflectConstruct() {
    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
    if (Reflect.construct.sham) return false;
    if (typeof Proxy === "function") return true;

    try {
      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
      return true;
    } catch (e) {
      return false;
    }
  }

  return function () {
    var Super = (0, _getPrototypeOf2["default"])(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return (0, _possibleConstructorReturn2["default"])(this, result);
  };
}

function updateActiveKey(menu, activeKey) {
  var store = menu.getStore();
  var menuId = menu.getEventKey();
  var state = store.getState();
  store.setState({
    activeKey: (0, _objectSpread3["default"])({}, state.activeKey, (0, _defineProperty2["default"])({}, menuId, activeKey))
  });
}

function defaultSearchMatcher(_ref) {
  var record = _ref.record,
      text = _ref.text,
      textField = _ref.textField;

  if (record.get(textField) && (0, _isString["default"])(record.get(textField))) {
    return record.get(textField).indexOf(text) !== -1;
  }
}

var DISABLED_FIELD = '__disabled';
exports.DISABLED_FIELD = DISABLED_FIELD;
var MORE_KEY = '__more__';
exports.MORE_KEY = MORE_KEY;

function defaultOnOption(_ref2) {
  var record = _ref2.record;
  return {
    disabled: record.get(DISABLED_FIELD)
  };
}

function getItemKey(record, text, value) {
  return "item-".concat(value || record.id, "-").concat(((0, _react.isValidElement)(text) ? text.key : text) || record.id);
}

function getSimpleValue(value, valueField) {
  if ((0, _isPlainObject["default"])(value)) {
    return ObjectChainValue.get(value, valueField);
  }

  return value;
}

var Select =
/*#__PURE__*/
function (_TriggerField) {
  (0, _inherits2["default"])(Select, _TriggerField);

  var _super = _createSuper(Select);

  function Select() {
    var _this;

    (0, _classCallCheck2["default"])(this, Select);
    _this = _super.apply(this, arguments);
    _this.comboOptions = new _DataSet["default"]();
    _this.doSearch = (0, _debounce["default"])(function (value) {
      if ((0, _isString["default"])(_this.searchMatcher)) {
        _this.searchRemote(value);
      }

      _this.handleSearch(value);
    }, 500);
    return _this;
  }

  (0, _createClass2["default"])(Select, [{
    key: "saveMenu",
    value: function saveMenu(node) {
      this.menu = node;
    }
  }, {
    key: "checkValue",
    value: function checkValue() {
      var _this2 = this;

      this.checkValueReaction = (0, _mobx.reaction)(function () {
        return _this2.cascadeOptions;
      }, function () {
        return _this2.processSelectedData();
      });
    }
  }, {
    key: "checkCombo",
    value: function checkCombo() {
      var _this3 = this;

      this.checkComboReaction = (0, _mobx.reaction)(function () {
        return _this3.getValue();
      }, function (value) {
        return _this3.generateComboOption(value);
      });
    }
  }, {
    key: "clearCheckValue",
    value: function clearCheckValue() {
      if (this.checkValueReaction) {
        this.checkValueReaction();
        this.checkValueReaction = undefined;
      }
    }
  }, {
    key: "clearCheckCombo",
    value: function clearCheckCombo() {
      if (this.checkComboReaction) {
        this.checkComboReaction();
        this.checkComboReaction = undefined;
      }
    }
  }, {
    key: "clearReaction",
    value: function clearReaction() {
      this.clearCheckValue();
      this.clearCheckCombo();
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "componentWillMount", this).call(this);
      var _this$props = this.props,
          checkValueOnOptionsChange = _this$props.checkValueOnOptionsChange,
          combo = _this$props.combo;

      if (checkValueOnOptionsChange) {
        this.checkValue();
      }

      if (combo) {
        this.checkCombo();
        this.generateComboOption(this.getValue());
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "componentWillUnmount", this).call(this);
      this.doSearch.cancel();
      this.clearReaction();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
      var _this$props2 = this.props,
          checkValueOnOptionsChange = _this$props2.checkValueOnOptionsChange,
          combo = _this$props2.combo;

      if (checkValueOnOptionsChange && !nextProps.checkValueOnOptionsChange) {
        this.clearCheckValue();
      }

      if (!checkValueOnOptionsChange && nextProps.checkValueOnOptionsChange) {
        this.checkValue();
      }

      if (combo && !nextProps.combo) {
        this.removeComboOptions();
        this.clearCheckCombo();
      }

      if (!combo && nextProps.combo) {
        this.checkCombo();

        if ('value' in nextProps) {
          this.generateComboOption(nextProps.value);
        }
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.forcePopupAlign();
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _omit["default"])((0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "getOtherProps", this).call(this), ['searchable', 'searchMatcher', 'paramMatcher', 'combo', 'commonItem', 'maxCommonTagPlaceholder', 'maxCommonTagCount', 'maxCommonTagTextLength', 'multiple', 'value', 'name', 'options', 'optionsFilter', 'dropdownMatchSelectWidth', 'dropdownMenuStyle', 'checkValueOnOptionsChange', 'primitiveValue', 'optionRenderer', 'notFoundContent', 'pagingOptionContent', 'onOption', 'noCache', 'reverse', 'selectAllButton']);
      return otherProps;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return (0, _objectSpread3["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "getObservableProps", this).call(this, props, context), {
        children: props.children,
        options: props.options,
        combo: props.combo,
        commonItem: props.commonItem,
        primitiveValue: props.primitiveValue,
        searchMatcher: props.searchMatcher,
        paramMatcher: props.paramMatcher,
        searchable: props.searchable,
        dropdownMatchSelectWidth: props.dropdownMatchSelectWidth,
        selectReverse: props.reverse,
        optionsFilter: props.optionsFilter
      });
    }
  }, {
    key: "getMenuPrefixCls",
    value: function getMenuPrefixCls() {
      return "".concat(this.prefixCls, "-dropdown-menu");
    }
  }, {
    key: "renderMultipleHolder",
    value: function renderMultipleHolder() {
      var name = this.name,
          multiple = this.multiple;

      if (multiple) {
        return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "renderMultipleHolder", this).call(this);
      }

      return _react["default"].createElement("input", {
        key: "value",
        type: "hidden",
        value: this.toValueString(this.getValue()) || '',
        name: name,
        onChange: _noop["default"]
      });
    }
  }, {
    key: "getNotFoundContent",
    value: function getNotFoundContent() {
      var notFoundContent = this.props.notFoundContent;

      if (notFoundContent !== undefined) {
        return notFoundContent;
      }

      return (0, _configure.getConfig)('renderEmpty')('Select');
    }
  }, {
    key: "getPagingOptionContent",
    value: function getPagingOptionContent() {
      var pagingOptionContent = this.props.pagingOptionContent;

      if (pagingOptionContent !== undefined) {
        return pagingOptionContent;
      }

      return (0, _configure.getConfig)('selectPagingOptionContent');
    }
  }, {
    key: "getOtherNextNode",
    value: function getOtherNextNode() {
      var _this4 = this;

      var options = this.options,
          textField = this.textField,
          valueField = this.valueField,
          commonItem = this.observableProps.commonItem,
          _this$props3 = this.props,
          maxCommonTagCount = _this$props3.maxCommonTagCount,
          maxCommonTagPlaceholder = _this$props3.maxCommonTagPlaceholder,
          maxCommonTagTextLength = _this$props3.maxCommonTagTextLength;

      if (!options) {
        return undefined;
      }

      var values = this.getValues();

      if (commonItem) {
        var valueLength = commonItem.length;
        var tags = commonItem.slice(0, maxCommonTagCount).map(function (item) {
          var text = item;
          var textRecord;
          options.map(function (record) {
            if (record.get(valueField) === item) {
              text = maxCommonTagTextLength && (0, _isString["default"])(record.get(textField)) && record.get(textField).length > maxCommonTagTextLength ? "".concat(record.get(textField).slice(0, maxCommonTagTextLength), "...") : record.get(textField);
              textRecord = record;
            }

            return null;
          });
          return _react["default"].createElement(_tag["default"], {
            key: item,
            className: values.includes(item) ? "".concat(_this4.prefixCls, "-common-item ").concat(_this4.prefixCls, "-common-item-selected") : "".concat(_this4.prefixCls, "-common-item"),
            // @ts-ignore
            onClick: function onClick() {
              return _this4.handleCommonItemClick(textRecord);
            }
          }, text);
        });

        if (valueLength > maxCommonTagCount) {
          var content = "+ ".concat(valueLength - Number(maxCommonTagCount), " ...");

          if (maxCommonTagPlaceholder) {
            var omittedValues = commonItem.slice(maxCommonTagCount, valueLength);
            content = typeof maxCommonTagPlaceholder === 'function' ? maxCommonTagPlaceholder(omittedValues) : maxCommonTagPlaceholder;
          }

          tags.push(_react["default"].createElement(_tag["default"], {
            className: "".concat(this.prefixCls, "-common-item"),
            key: "maxCommonTagPlaceholder"
          }, content));
        }

        return _react["default"].createElement("div", {
          className: "".concat(this.prefixCls, "-common-item-wrapper")
        }, _react["default"].createElement("span", {
          className: "".concat(this.prefixCls, "-common-item-label")
        }, (0, _localeContext.$l)('Select', 'common_item')), tags);
      }
    }
  }, {
    key: "getMenu",
    value: function getMenu() {
      var _this5 = this;

      var menuProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var options = this.options,
          textField = this.textField,
          valueField = this.valueField,
          _this$props4 = this.props,
          dropdownMenuStyle = _this$props4.dropdownMenuStyle,
          optionRenderer = _this$props4.optionRenderer,
          onOption = _this$props4.onOption;

      if (!options) {
        return null;
      }

      var menuDisabled = this.isDisabled();
      var groups = options.getGroups();
      var optGroups = [];
      var selectedKeys = [];
      /**
       * fixed when ie the scroll width would cover the item width
       */

      var IeMenuStyle = !this.dropdownMatchSelectWidth && (0, _isIE["default"])() ? {
        padding: '.08rem'
      } : {};
      var IeItemStyle = !this.dropdownMatchSelectWidth && (0, _isIE["default"])() ? {
        overflow: 'visible'
      } : {};
      this.filteredOptions.forEach(function (record) {
        var previousGroup;
        groups.every(function (field) {
          var label = record.get(field);

          if (label !== undefined) {
            if (!previousGroup) {
              previousGroup = optGroups.find(function (item) {
                return item.props.title === label;
              });

              if (!previousGroup) {
                previousGroup = _react["default"].createElement(_menu.ItemGroup, {
                  key: "group-".concat(label),
                  title: label
                }, []);
                optGroups.push(previousGroup);
              }
            } else {
              var children = previousGroup.props.children;
              previousGroup = children.find(function (item) {
                return item.props.title === label;
              });

              if (!previousGroup) {
                previousGroup = _react["default"].createElement(_menu.ItemGroup, {
                  key: "group-".concat(label),
                  title: label
                }, []);
                children.push(previousGroup);
              }
            }

            return true;
          }

          return false;
        });
        var value = record.get(valueField);
        var text = record.get(textField);
        var optionProps = onOption({
          dataSet: options,
          record: record
        });
        var optionDisabled = menuDisabled || optionProps && optionProps.disabled;
        var key = getItemKey(record, text, value);

        if (!('selectedKeys' in menuProps) && _this5.isSelected(record)) {
          selectedKeys.push(key);
        }

        var itemContent = optionRenderer ? optionRenderer({
          dataSet: options,
          record: record,
          text: text,
          value: value
        }) : text;

        var option = _react["default"].createElement(_menu.Item, (0, _extends2["default"])({
          style: IeItemStyle
        }, optionProps, {
          key: key,
          value: record,
          disabled: optionDisabled
        }), itemContent);

        if (previousGroup) {
          var children = previousGroup.props.children;
          children.push(option);
        } else {
          optGroups.push(option);
        }
      });

      if (!optGroups.length) {
        optGroups.push(_react["default"].createElement(_menu.Item, {
          key: "no_data",
          disabled: true,
          checkable: false
        }, this.loading ? ' ' : this.getNotFoundContent()));
      }

      var menuPrefix = this.getMenuPrefixCls();
      return _react["default"].createElement(_menu["default"], (0, _extends2["default"])({
        ref: this.saveMenu,
        disabled: menuDisabled,
        defaultActiveFirst: true,
        multiple: this.menuMultiple,
        selectedKeys: selectedKeys,
        prefixCls: menuPrefix,
        onClick: this.handleMenuClick,
        style: (0, _objectSpread3["default"])({}, IeMenuStyle, {}, dropdownMenuStyle),
        focusable: false
      }, menuProps), optGroups, options.paging && options.currentPage < options.totalPage && _react["default"].createElement(_menu.Item, {
        key: MORE_KEY,
        checkable: false,
        className: "".concat(menuPrefix, "-item-more")
      }, this.getPagingOptionContent()));
    }
  }, {
    key: "getPopupProps",
    value: function getPopupProps() {
      var options = this.options,
          textField = this.textField,
          valueField = this.valueField;
      return {
        dataSet: options,
        textField: textField,
        valueField: valueField
      };
    }
  }, {
    key: "renderSelectAll",
    value: function renderSelectAll() {
      var selectAllButton = this.props.selectAllButton;

      if (this.multiple && selectAllButton) {
        return _react["default"].createElement("div", {
          key: "check-all",
          className: "".concat(this.prefixCls, "-select-all-none")
        }, _react["default"].createElement("span", {
          onClick: this.chooseAll
        }, (0, _localeContext.$l)('Select', 'select_all')), this.selectReverse && _react["default"].createElement("span", {
          onClick: this.chooseRe
        }, (0, _localeContext.$l)('Select', 'select_re')), _react["default"].createElement("span", {
          onClick: this.unChooseAll
        }, (0, _localeContext.$l)('Select', 'unselect_all')));
      }
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      var menu = _react["default"].createElement(_spin["default"], {
        key: "menu",
        spinning: this.loading
      }, this.getMenu());

      return [this.renderSelectAll(), menu];
    }
  }, {
    key: "getPopupStyleFromAlign",
    value: function getPopupStyleFromAlign(target) {
      var isFlat = this.props.isFlat;

      if (target) {
        var width = (0, _UnitConvertor.pxToRem)(target.getBoundingClientRect().width);

        if (width !== undefined) {
          if (this.dropdownMatchSelectWidth && !isFlat) {
            return {
              width: width
            };
          }

          return {
            minWidth: width
          };
        }
      }
    }
  }, {
    key: "getTriggerIconFont",
    value: function getTriggerIconFont() {
      return this.searchable && this.isFocused && !this.isReadOnly() ? 'search' : 'baseline-arrow_drop_down';
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      var menu = this.menu;
      /**
       * 修复ie出现点击backSpace的页面回到上一页问题
       */

      if ((0, _isIE["default"])()) {
        if (e.keyCode === _KeyCode["default"].BACKSPACE) {
          e.preventDefault();
        }
      }

      if (!this.isDisabled() && !this.isReadOnly() && menu) {
        if (this.popup && menu.onKeyDown(e)) {
          (0, _EventManager.stopEvent)(e);
        } else {
          switch (e.keyCode) {
            case _KeyCode["default"].RIGHT:
            case _KeyCode["default"].DOWN:
              this.handleKeyDownPrevNext(e, menu, 1);
              break;

            case _KeyCode["default"].LEFT:
            case _KeyCode["default"].UP:
              this.handleKeyDownPrevNext(e, menu, -1);
              break;

            case _KeyCode["default"].END:
            case _KeyCode["default"].PAGE_DOWN:
              this.handleKeyDownFirstLast(e, menu, 1);
              break;

            case _KeyCode["default"].HOME:
            case _KeyCode["default"].PAGE_UP:
              this.handleKeyDownFirstLast(e, menu, -1);
              break;
            // case KeyCode.ENTER:
            //   this.handleKeyDownEnter(e);
            //   break;

            case _KeyCode["default"].ESC:
              this.handleKeyDownEsc(e);
              break;

            case _KeyCode["default"].SPACE:
              this.handleKeyDownSpace(e);
              break;

            default:
          }
        }
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "handleKeyDown", this).call(this, e);
    }
  }, {
    key: "isMultipleBlockDisabled",
    value: function isMultipleBlockDisabled(v) {
      var options = this.options,
          onOption = this.props.onOption;
      var findRecord = this.findByValue(v);
      var optionProps = findRecord ? onOption({
        dataSet: options,
        record: findRecord
      }) : undefined;
      var optionDisabled = optionProps && optionProps.disabled;
      return findRecord && findRecord.get(DISABLED_FIELD) === true || optionDisabled || this.isDisabled();
    }
  }, {
    key: "handleKeyDownFirstLast",
    value: function handleKeyDownFirstLast(e, menu, direction) {
      (0, _EventManager.stopEvent)(e); // TreeSelect event conflict

      if (!menu.tree) {
        var children = menu.getFlatInstanceArray();
        var activeItem = children[direction < 0 ? 0 : children.length - 1];

        if (activeItem) {
          if (!this.editable || this.popup) {
            updateActiveKey(menu, activeItem.props.eventKey);
          }

          if (!this.editable && !this.popup) {
            this.choose(activeItem.props.value);
          }
        }
      }
    }
  }, {
    key: "handleKeyDownPrevNext",
    value: function handleKeyDownPrevNext(e, menu, direction) {
      if (!this.multiple && !this.editable && !menu.tree) {
        var activeItem = menu.step(direction);

        if (activeItem) {
          updateActiveKey(menu, activeItem.props.eventKey);
          this.choose(activeItem.props.value);
        }

        e.preventDefault();
      } else if (e === _KeyCode["default"].DOWN) {
        this.expand();
        e.preventDefault();
      }
    } // handleKeyDownEnter(_e) {
    // }

  }, {
    key: "handleKeyDownEsc",
    value: function handleKeyDownEsc(e) {
      if (this.popup) {
        e.preventDefault();
        this.collapse();
      }
    }
  }, {
    key: "handleKeyDownSpace",
    value: function handleKeyDownSpace(e) {
      if (!this.editable) {
        e.preventDefault();

        if (!this.popup) {
          this.expand();
        }
      }
    }
  }, {
    key: "handleBlur",
    value: function handleBlur(e) {
      if (!e.isDefaultPrevented()) {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "handleBlur", this).call(this, e);
        this.resetFilter();
      }
    }
  }, {
    key: "expand",
    value: function expand() {
      var filteredOptions = this.filteredOptions;

      if (filteredOptions && filteredOptions.length) {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "expand", this).call(this);
      }
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur(value) {
      var _this6 = this;

      if (value) {
        var data = this.comboOptions.data;
        this.options.ready().then(function () {
          var record = _this6.findByTextWithValue(value, data);

          if (record) {
            _this6.choose(record);
          }
        });
      } else if (!this.multiple) {
        this.setValue(this.emptyValue);
      }
    }
  }, {
    key: "findByTextWithValue",
    value: function findByTextWithValue(text, data) {
      var textField = this.textField;
      var records = [].concat((0, _toConsumableArray2["default"])(data), (0, _toConsumableArray2["default"])(this.filteredOptions)).filter(function (record) {
        return (0, _isSameLike["default"])(record.get(textField), text);
      });

      if (records.length > 1) {
        var valueField = this.valueField,
            primitive = this.primitive;
        var value = this.getValue();

        if (value) {
          var found = records.find(function (record) {
            return (0, _isSameLike["default"])(record.get(valueField), primitive ? value : value[valueField]);
          });

          if (found) {
            return found;
          }
        }
      }

      return records[0];
    }
  }, {
    key: "findByText",
    value: function findByText(text) {
      var textField = this.textField;
      return this.optionsWithCombo.find(function (record) {
        return (0, _isSameLike["default"])(record.get(textField), text);
      });
    }
  }, {
    key: "findByValue",
    value: function findByValue(value) {
      var valueField = this.valueField;

      var autoType = this.getProp('type') === _enum.FieldType.auto;

      value = getSimpleValue(value, valueField);
      return this.optionsWithCombo.find(function (record) {
        return autoType ? (0, _isSameLike["default"])(record.get(valueField), value) : (0, _isSame["default"])(record.get(valueField), value);
      });
    }
  }, {
    key: "isSelected",
    value: function isSelected(record) {
      var valueField = this.valueField;

      var autoType = this.getProp('type') === _enum.FieldType.auto;

      return this.getValues().some(function (value) {
        var simpleValue = getSimpleValue(value, valueField);
        return autoType ? (0, _isSameLike["default"])(record.get(valueField), simpleValue) : (0, _isSame["default"])(record.get(valueField), simpleValue);
      });
    }
  }, {
    key: "generateComboOption",
    value: function generateComboOption(value, callback) {
      var _this7 = this;

      var currentComboOption = this.currentComboOption,
          textField = this.textField,
          valueField = this.valueField;

      if (value) {
        if ((0, _mobx.isArrayLike)(value)) {
          value.forEach(function (v) {
            return !(0, _isNil["default"])(v) && _this7.generateComboOption(v);
          });
        } else {
          var found = this.findByText(value) || this.findByValue(value);

          if (found) {
            var text = found.get(textField);

            if (text !== value && callback) {
              callback(text);
            }

            this.removeComboOption();
          } else if (currentComboOption) {
            currentComboOption.set(textField, value);
            currentComboOption.set(valueField, value);
          } else {
            this.createComboOption(value);
          }
        }
      } else {
        this.removeComboOption();
      }
    }
  }, {
    key: "createComboOption",
    value: function createComboOption(value) {
      var _this$comboOptions$cr;

      var textField = this.textField,
          valueField = this.valueField,
          menu = this.menu;
      var record = this.comboOptions.create((_this$comboOptions$cr = {}, (0, _defineProperty2["default"])(_this$comboOptions$cr, textField, value), (0, _defineProperty2["default"])(_this$comboOptions$cr, valueField, value), _this$comboOptions$cr), 0);

      if (menu) {
        updateActiveKey(menu, getItemKey(record, value, value));
      }
    }
  }, {
    key: "removeComboOptions",
    value: function removeComboOptions() {
      var _this8 = this;

      this.comboOptions.forEach(function (record) {
        return _this8.removeComboOption(record);
      });
    }
  }, {
    key: "removeComboOption",
    value: function removeComboOption(record) {
      if (!record) {
        record = this.currentComboOption;
      }

      if (record && !this.isSelected(record)) {
        this.comboOptions.remove(record);
      }
    }
  }, {
    key: "handlePopupAnimateAppear",
    value: function handlePopupAnimateAppear() {}
  }, {
    key: "getValueKey",
    value: function getValueKey(v) {
      if ((0, _mobx.isArrayLike)(v)) {
        return v.map(this.getValueKey, this).join(',');
      }

      var autoType = this.getProp('type') === _enum.FieldType.auto;

      var value = getSimpleValue(v, this.valueField);
      return autoType && !(0, _isNil["default"])(value) ? value.toString() : value;
    }
  }, {
    key: "handlePopupAnimateEnd",
    value: function handlePopupAnimateEnd(_key, _exists) {}
  }, {
    key: "handleMenuClick",
    value: function handleMenuClick(_ref3) {
      var key = _ref3.key,
          value = _ref3.item.props.value;

      if (key === MORE_KEY) {
        this.options.queryMore(this.options.currentPage + 1);
      } else if (this.multiple && this.isSelected(value)) {
        this.unChoose(value);
      } else {
        this.choose(value);
      }
    }
  }, {
    key: "handleCommonItemClick",
    value: function handleCommonItemClick(value) {
      if (this.multiple && this.isSelected(value)) {
        this.unChoose(value);
      } else {
        this.choose(value);
      }
    }
  }, {
    key: "handleOptionSelect",
    value: function handleOptionSelect(record) {
      this.prepareSetValue.apply(this, (0, _toConsumableArray2["default"])((0, _mobx.isArrayLike)(record) ? record.map(this.processRecordToObject, this) : [this.processRecordToObject(record)]));
    }
  }, {
    key: "handleOptionUnSelect",
    value: function handleOptionUnSelect(record) {
      var valueField = this.valueField;
      var newValues = (0, _mobx.isArrayLike)(record) ? record.map(function (r) {
        return r.get(valueField);
      }) : [record.get(valueField)];
      this.removeValues(newValues, -1);
    }
  }, {
    key: "handleSearch",
    value: function handleSearch(_text) {}
  }, {
    key: "setText",
    value: function setText(text) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "setText", this).call(this, text);

      if (this.searchable) {
        this.doSearch(text);
      }
    }
  }, {
    key: "searchRemote",
    value: function searchRemote(value) {
      var field = this.field,
          searchMatcher = this.searchMatcher;

      if (field && (0, _isString["default"])(searchMatcher)) {
        field.setLovPara(searchMatcher, value === '' ? undefined : value);
      }
    }
    /**
     * 该方法会被onChange和onCompositionend触发
     * @param e 改变事件
     */

  }, {
    key: "handleChange",
    value: function handleChange(e) {
      var _this9 = this;

      var target = e.target,
          value = e.target.value,
          type = e.type;
      var restricted = this.restrictInput(value);

      if (restricted !== value) {
        var selectionEnd = target.selectionEnd + restricted.length - value.length;
        target.value = restricted;
        target.setSelectionRange(selectionEnd, selectionEnd);
      }

      this.setText(restricted);

      if (this.observableProps.combo) {
        if (type !== 'compositionend') {
          this.generateComboOption(restricted, function (text) {
            return _this9.setText(text);
          });
        }
      }

      if (!this.popup) {
        this.expand();
      }
    }
  }, {
    key: "processRecordToObject",
    value: function processRecordToObject(record) {
      var primitive = this.primitive,
          valueField = this.valueField; // 如果为原始值那么 restricted 失效

      var restricted = this.restrictInput(record.get(valueField));
      return primitive ? restricted : record.toData();
    }
  }, {
    key: "processObjectValue",
    value: function processObjectValue(value, textField) {
      if (!(0, _isNil["default"])(value)) {
        if ((0, _isPlainObject["default"])(value)) {
          return ObjectChainValue.get(value, textField);
        }

        var found = this.findByValue(value);

        if (found) {
          return found.get(textField);
        }
      }
    }
  }, {
    key: "processLookupValue",
    value: function processLookupValue(value) {
      var field = this.field,
          textField = this.textField,
          primitive = this.primitive;

      if (primitive && field && field.lookup) {
        return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "processValue", this).call(this, field.getText(value));
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "processValue", this).call(this, this.processObjectValue(value, textField));
    }
  }, {
    key: "processValue",
    value: function processValue(value) {
      var text = this.processLookupValue(value);

      if ((0, _isEmpty["default"])(text)) {
        if ((0, _isPlainObject["default"])(value)) {
          return ObjectChainValue.get(value, this.valueField) || '';
        }

        return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "processValue", this).call(this, value);
      }

      return text;
    }
  }, {
    key: "clear",
    value: function clear() {
      var _this10 = this;

      var values = this.getValues();
      var valueLength = values.length;
      var _this$props5 = this.props,
          _this$props5$maxTagCo = _this$props5.maxTagCount,
          maxTagCount = _this$props5$maxTagCo === void 0 ? valueLength : _this$props5$maxTagCo,
          _this$props5$onClear = _this$props5.onClear,
          onClear = _this$props5$onClear === void 0 ? _noop["default"] : _this$props5$onClear,
          _this$props5$onOption = _this$props5.onOption,
          onOption = _this$props5$onOption === void 0 ? _noop["default"] : _this$props5$onOption,
          options = this.options;
      this.setText(undefined);

      if (this.multiple) {
        var valuesDisabled = values.slice(0, maxTagCount).filter(function (v) {
          var recordItem = _this10.findByValue(v);

          var findRecord = _this10.findByValue(v);

          var optionProps = findRecord ? onOption({
            dataSet: options,
            record: findRecord
          }) : undefined;
          var optionDisabled = optionProps && optionProps.disabled;
          return recordItem && recordItem.get(DISABLED_FIELD) === true || optionDisabled;
        });
        var multipleValue = valuesDisabled.length > 0 ? valuesDisabled : this.emptyValue;
        this.setValue(multipleValue);
      } else {
        this.setValue(this.emptyValue);
      }

      this.rangeValue = this.isFocused ? [undefined, undefined] : undefined;
      onClear();
      this.removeComboOptions();
    } // 当触发清空操作时候会导致两次触发onchange可搜索不需要设置值

  }, {
    key: "setRangeTarget",
    value: function setRangeTarget(target) {
      var _this11 = this;

      if (this.text !== undefined) {
        if (!this.searchable) {
          this.prepareSetValue(this.text);
        }

        this.setText();
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "setRangeTarget", this).call(this, target);
      (0, _defer["default"])(function () {
        return _this11.isFocused && _this11.select();
      });
    }
  }, {
    key: "resetFilter",
    value: function resetFilter() {
      this.setText(undefined);
      this.removeComboOption();
      this.forcePopupAlign();
    }
  }, {
    key: "reset",
    value: function reset() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "reset", this).call(this);
      this.resetFilter();
    }
  }, {
    key: "unChoose",
    value: function unChoose(record) {
      if (record) {
        this.handleOptionUnSelect(record);
      }
    }
  }, {
    key: "choose",
    value: function choose(record) {
      if (!this.multiple) {
        this.collapse();
      }

      if (record) {
        this.handleOptionSelect(record);
      }
    }
  }, {
    key: "chooseAll",
    value: function chooseAll() {
      var options = this.options,
          onOption = this.props.onOption;
      var selectedOptions = this.filteredOptions.filter(function (record) {
        var optionProps = onOption({
          dataSet: options,
          record: record
        });
        var optionDisabled = optionProps && optionProps.disabled;
        return !optionDisabled;
      });
      this.choose(selectedOptions);
    }
    /**
     * 反选
     */

  }, {
    key: "chooseRe",
    value: function chooseRe() {
      var options = this.options,
          valueField = this.valueField,
          onOption = this.props.onOption;
      var values = this.getValues();
      var selectedOptions = this.filteredOptions.filter(function (record) {
        var optionProps = onOption({
          dataSet: options,
          record: record
        });
        var value = record.get(valueField);
        var optionDisabled = optionProps && optionProps.disabled;
        var optionIsSelect = values.some(function (v) {
          if ((0, _typeof2["default"])(v) === 'object') {
            return v[valueField] === value;
          }

          return v === value;
        });
        return !optionDisabled && !optionIsSelect || optionDisabled && optionIsSelect;
      });
      this.setValue(selectedOptions.map(this.processRecordToObject, this));
    }
  }, {
    key: "unChooseAll",
    value: function unChooseAll() {
      this.clear();
    }
  }, {
    key: "handlePopupHiddenChange",
    value: function handlePopupHiddenChange(hidden) {
      var field = this.field;
      var noCache = this.getProp('noCache');

      if (!hidden) {
        if (field) {
          field.fetchLookup(noCache);
        }

        this.forcePopupAlign();
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "handlePopupHiddenChange", this).call(this, hidden);
    }
  }, {
    key: "processSelectedData",
    value: function () {
      var _processSelectedData = (0, _asyncToGenerator2["default"])(
      /*#__PURE__*/
      _regenerator["default"].mark(function _callee() {
        var _this12 = this;

        var values, field, filteredOptions, combo;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                this.comboOptions.removeAll();
                values = this.getValues();
                field = this.field;

                if (!field) {
                  _context.next = 6;
                  break;
                }

                _context.next = 6;
                return field.ready();

              case 6:
                filteredOptions = this.filteredOptions, combo = this.observableProps.combo;
                (0, _mobx.runInAction)(function () {
                  var newValues = values.filter(function (value) {
                    var record = _this12.findByValue(value);

                    if (record) {
                      return true;
                    }

                    if (combo) {
                      _this12.createComboOption(value);

                      return true;
                    }

                    return false;
                  });

                  if (_this12.text && combo) {
                    _this12.generateComboOption(_this12.text);
                  }

                  if (field && field.get('cascadeMap') && filteredOptions.length && !(0, _isEqual["default"])(newValues, values)) {
                    _this12.setValue(_this12.multiple ? newValues : newValues[0]);
                  }
                });

              case 8:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function processSelectedData() {
        return _processSelectedData.apply(this, arguments);
      }

      return processSelectedData;
    }()
  }, {
    key: "searchData",
    value: function searchData(data, text) {
      var _this13 = this;

      var searchable = this.searchable,
          searchMatcher = this.searchMatcher;
      return searchable && text && typeof searchMatcher === 'function' ? data.filter(function (r) {
        return _this13.matchRecordBySearch(r, text);
      }) : data;
    }
  }, {
    key: "matchRecordBySearch",
    value: function matchRecordBySearch(record, text) {
      var textField = this.textField,
          valueField = this.valueField,
          searchable = this.searchable,
          searchMatcher = this.searchMatcher;
      return !(searchable && text && typeof searchMatcher === 'function') || searchMatcher({
        record: record,
        text: text,
        textField: textField,
        valueField: valueField
      });
    }
  }, {
    key: "searchMatcher",
    get: function get() {
      var _this$observableProps = this.observableProps.searchMatcher,
          searchMatcher = _this$observableProps === void 0 ? defaultSearchMatcher : _this$observableProps;
      return searchMatcher;
    }
  }, {
    key: "paramMatcher",
    get: function get() {
      var paramMatcher = this.observableProps.paramMatcher;
      return paramMatcher;
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      var label = this.getProp('label');
      return {
        valueMissing: (0, _localeContext.$l)('Select', label ? 'value_missing' : 'value_missing_no_label', {
          label: label
        })
      };
    }
  }, {
    key: "textField",
    get: function get() {
      return this.getProp('textField') || 'meaning';
    }
  }, {
    key: "valueField",
    get: function get() {
      return this.getProp('valueField') || 'value';
    }
  }, {
    key: "currentComboOption",
    get: function get() {
      var _this14 = this;

      return this.comboOptions.filter(function (record) {
        return !_this14.isSelected(record);
      })[0];
    }
  }, {
    key: "filteredOptions",
    get: function get() {
      var text = this.text;
      var optionsWithCombo = this.optionsWithCombo,
          optionsFilter = this.observableProps.optionsFilter;
      return this.searchData(optionsFilter ? optionsWithCombo.filter(optionsFilter) : optionsWithCombo, text);
    }
  }, {
    key: "optionsWithCombo",
    get: function get() {
      return [].concat((0, _toConsumableArray2["default"])(this.comboOptions.data), (0, _toConsumableArray2["default"])(this.cascadeOptions));
    }
  }, {
    key: "cascadeOptions",
    get: function get() {
      var record = this.record,
          field = this.field,
          options = this.options,
          searchMatcher = this.searchMatcher;
      var data = options.data;

      if (field && !(0, _isString["default"])(searchMatcher)) {
        var cascadeMap = field.get('cascadeMap');

        if (cascadeMap) {
          if (record) {
            var cascades = Object.keys(cascadeMap);
            return data.filter(function (item) {
              return cascades.every(function (cascade) {
                return (0, _isSameLike["default"])(record.get(cascadeMap[cascade]), item.get(cascade));
              });
            });
          }

          return [];
        }
      }

      return data;
    }
  }, {
    key: "editable",
    get: function get() {
      var combo = this.observableProps.combo;
      return !this.isReadOnly() && (!!this.searchable || !!combo);
    }
  }, {
    key: "searchable",
    get: function get() {
      var _this$observableProps2 = this.observableProps.searchable,
          searchable = _this$observableProps2 === void 0 ? (0, _configure.getConfig)('selectSearchable') : _this$observableProps2;
      return !!searchable;
    }
  }, {
    key: "multiple",
    get: function get() {
      return !!this.getProp('multiple');
    }
  }, {
    key: "menuMultiple",
    get: function get() {
      return this.multiple;
    }
  }, {
    key: "options",
    get: function get() {
      var field = this.field,
          textField = this.textField,
          valueField = this.valueField,
          multiple = this.multiple,
          _this$observableProps3 = this.observableProps,
          children = _this$observableProps3.children,
          options = _this$observableProps3.options;
      return options || field && field.options || (0, _normalizeOptions["default"])({
        textField: textField,
        valueField: valueField,
        disabledField: DISABLED_FIELD,
        multiple: multiple,
        children: children
      });
    }
  }, {
    key: "primitive",
    get: function get() {
      var type = this.getProp('type');
      return this.observableProps.primitiveValue !== false && type !== _enum.FieldType.object;
    }
  }, {
    key: "dropdownMatchSelectWidth",
    get: function get() {
      var _this$observableProps4 = this.observableProps.dropdownMatchSelectWidth,
          dropdownMatchSelectWidth = _this$observableProps4 === void 0 ? (0, _configure.getConfig)('dropdownMatchSelectWidth') : _this$observableProps4;
      return dropdownMatchSelectWidth;
    }
  }, {
    key: "selectReverse",
    get: function get() {
      var _this$observableProps5 = this.observableProps.selectReverse,
          selectReverse = _this$observableProps5 === void 0 ? (0, _configure.getConfig)('selectReverse') : _this$observableProps5;
      return selectReverse;
    }
  }, {
    key: "loading",
    get: function get() {
      var field = this.field,
          options = this.options;
      return options.status === _enum.DataSetStatus.loading || !!field && field.pending.length > 0;
    }
  }]);
  return Select;
}(_TriggerField2["default"]);

exports.Select = Select;
Select.displayName = 'Select';
Select.propTypes = (0, _objectSpread3["default"])({
  /**
   * 复合输入值
   * @default false
   */
  combo: _propTypes["default"].bool,

  /**
   * 常用项
   * @default undefined
   */
  commonItem: _propTypes["default"].array,

  /**
   * 多值标签超出最大数量时的占位描述
   */
  maxCommonTagPlaceholder: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),

  /**
   * 多值标签最大数量
   */
  maxCommonTagCount: _propTypes["default"].number,

  /**
   * 多值标签文案最大长度
   */
  maxCommonTagTextLength: _propTypes["default"].number,

  /**
   * 过滤器
   * @default false
   */
  searchable: _propTypes["default"].bool,

  /**
   * 搜索匹配器。 当为字符串时，作为lookup的参数名来重新请求值列表。
   */
  searchMatcher: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),

  /**
   * 参数匹配器。 当为字符串时，参数拼接。
   */
  paramMatcher: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),

  /**
   * 是否为原始值
   * true - 选项中valueField对应的值
   * false - 选项值对象
   */
  primitiveValue: _propTypes["default"].bool,

  /**
   * 渲染Option文本的钩子
   * @example
   * ```js
   * <Select
   *   {...props}
   *   optionRenderer={({ dataSet, record, text, value }) => text + '$'}
   * />
   * ```
   */
  optionRenderer: _propTypes["default"].func,

  /**
   * 当下拉列表为空时显示的内容
   */
  notFoundContent: _propTypes["default"].node,

  /**
   * 渲染分页 Item 内容
   */
  pagingOptionContent: _propTypes["default"].node,

  /**
   * 设置选项属性，如 disabled;
   */
  onOption: _propTypes["default"].func,

  /**
   * 下拉时自动重新查询
   */
  noCache: _propTypes["default"].bool,

  /**
   * 下拉框匹配输入框宽度
   * @default true
   */
  dropdownMatchSelectWidth: _propTypes["default"].bool,

  /**
   * 多选时显示全选按钮;
   * @default true
   */
  selectAllButton: _propTypes["default"].bool,

  /**
   * 多选是否开启反选
   * @default false
   */
  reverse: _propTypes["default"].bool
}, _TriggerField2["default"].propTypes);
Select.defaultProps = (0, _objectSpread3["default"])({}, _TriggerField2["default"].defaultProps, {
  suffixCls: 'select',
  combo: false,
  checkValueOnOptionsChange: true,
  onOption: defaultOnOption,
  selectAllButton: true
});
Select.Option = _Option["default"];
Select.OptGroup = _OptGroup["default"];
Select.__PRO_SELECT = true;
(0, _tslib.__decorate)([_mobx.computed], Select.prototype, "searchMatcher", null);
(0, _tslib.__decorate)([_mobx.computed], Select.prototype, "paramMatcher", null);
(0, _tslib.__decorate)([_mobx.computed], Sel