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")["default"];

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

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

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

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

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

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

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

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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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 _debounce = _interopRequireDefault(require("lodash/debounce"));

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

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

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

var _isFunction = _interopRequireDefault(require("lodash/isFunction"));

var _isObject = _interopRequireDefault(require("lodash/isObject"));

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 _classnames = _interopRequireDefault(require("classnames"));

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 _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 = _interopRequireWildcard(require("../option/normalizeOptions"));

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

var _ObjectChainValue = _interopRequireDefault(require("../_util/ObjectChainValue"));

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

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

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

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

var _utils = require("../data-set/utils");

var _TextField = _interopRequireDefault(require("../text-field/TextField"));

var _icon = _interopRequireDefault(require("../icon"));

var _enum2 = require("../text-field/enum");

var _enum3 = require("../form/enum");

var _utils2 = require("../field/utils");

function updateActiveKey(menu, activeKey) {
  var store = menu.getStore();
  var menuId = menu.getEventKey();
  var state = store.getState();
  store.setState({
    activeKey: (0, _objectSpread3["default"])((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;
  }
}

function isSearchTextEmpty(text) {
  return (0, _mobx.isArrayLike)(text) ? !text.length : !text;
}

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(( /*#__PURE__*/(0, _react.isValidElement)(text) ? text.key : text) || record.id);
}

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

  return value;
}

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

  var _super = (0, _createSuper2["default"])(Select);

  function Select() {
    var _this;

    (0, _classCallCheck2["default"])(this, Select);
    _this = _super.apply(this, arguments);
    _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: "range",
    get: function get() {
      if (this.multiple && (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "range", this)) {
        return false;
      }

      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "range", this);
    }
  }, {
    key: "searchText",
    get: function get() {
      if (this.isSearchFieldInPopup()) {
        return this.$searchText;
      }

      return this.text;
    },
    set: function set(searchText) {
      this.$searchText = searchText;
    }
  }, {
    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 _this2 = this;

      var comboOptions = this.comboOptions;
      return comboOptions && comboOptions.filter(function (record) {
        return !_this2.isSelected(record);
      })[0];
    }
  }, {
    key: "filteredOptions",
    get: function get() {
      var optionsWithCombo = this.optionsWithCombo,
          optionsFilter = this.optionsFilter;
      return this.searchData(optionsFilter ? optionsWithCombo.filter(optionsFilter) : optionsWithCombo);
    }
  }, {
    key: "optionsWithCombo",
    get: function get() {
      var comboOptions = this.comboOptions;
      return comboOptions ? [].concat((0, _toConsumableArray2["default"])(comboOptions.data), (0, _toConsumableArray2["default"])(this.cascadeOptions)) : 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', this.record);

        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: "searchable",
    get: function get() {
      var _this$observableProps2 = this.observableProps.searchable,
          searchable = _this$observableProps2 === void 0 ? this.getContextConfig('selectSearchable') : _this$observableProps2;
      return !!searchable;
    }
  }, {
    key: "reserveParam",
    get: function get() {
      var _this$observableProps3 = this.observableProps.reserveParam,
          reserveParam = _this$observableProps3 === void 0 ? this.getContextConfig('selectReserveParam') : _this$observableProps3;
      return reserveParam;
    }
  }, {
    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$observableProps4 = this.observableProps,
          children = _this$observableProps4.children,
          options = _this$observableProps4.options;
      return options || field && field.getOptions(this.record) || (0, _normalizeOptions["default"])({
        textField: textField,
        valueField: valueField,
        disabledField: DISABLED_FIELD,
        multiple: multiple,
        children: children,
        getConfig: this.getContextConfig
      });
    }
  }, {
    key: "primitive",
    get: function get() {
      return this.observableProps.primitiveValue !== false && this.getProp('type') !== _enum.FieldType.object;
    }
  }, {
    key: "saveMenu",
    value: function saveMenu(node) {
      this.menu = node;
    }
  }, {
    key: "getSearchFieldProps",
    value: function getSearchFieldProps() {
      var _this$props$searchFie = this.props.searchFieldProps,
          searchFieldProps = _this$props$searchFie === void 0 ? {} : _this$props$searchFie;
      return searchFieldProps;
    }
  }, {
    key: "isSearchFieldInPopup",
    value: function isSearchFieldInPopup() {
      var searchFieldInPopup = this.props.searchFieldInPopup;
      return searchFieldInPopup;
    }
  }, {
    key: "isEmpty",
    value: function isEmpty() {
      return (this.isEditableLike() || (0, _isEmpty2["default"])(this.text)) && (0, _utils2.isFieldValueEmpty)(this.getValue(), this.range, this.multiple, this.valueField, this.textField) && this.isRenderEmpty();
    }
  }, {
    key: "isEditable",
    value: function isEditable() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "isEditable", this).call(this) && (this.searchable && !this.isSearchFieldInPopup() || !!this.observableProps.combo);
    }
  }, {
    key: "checkValue",
    value: function checkValue() {
      var _this3 = this;

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

      this.checkComboReaction = (0, _mobx.reaction)(function () {
        return _this4.getValue();
      }, function (value) {
        return _this4.generateComboOption(value);
      });
    }
  }, {
    key: "clearCheckValue",
    value: function clearCheckValue() {
      if (this.checkValueReaction) {
        this.checkValueReaction();
        delete this.checkValueReaction;
      }
    }
  }, {
    key: "clearCheckCombo",
    value: function clearCheckCombo() {
      if (this.checkComboReaction) {
        this.checkComboReaction();
        delete this.checkComboReaction;
      }
    }
  }, {
    key: "clearReaction",
    value: function clearReaction() {
      this.clearCheckValue();
      this.clearCheckCombo();
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      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: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "getOmitPropsKeys", this).call(this).concat(['searchable', 'reserveParam', 'searchMatcher', 'searchFieldInPopup', 'searchFieldProps', 'paramMatcher', 'combo', 'commonItem', 'maxCommonTagPlaceholder', 'maxCommonTagCount', 'maxCommonTagTextLength', 'multiple', 'value', 'name', 'options', 'optionsFilter', 'dropdownMatchSelectWidth', 'dropdownMenuStyle', 'checkValueOnOptionsChange', 'primitiveValue', 'optionRenderer', 'notFoundContent', 'pagingOptionContent', 'onOption', 'noCache', 'reverse', 'selectAllButton', 'optionTooltip', 'defaultActiveFirstOption']);
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return (0, _objectSpread3["default"])((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,
        reserveParam: props.reserveParam,
        dropdownMatchSelectWidth: props.dropdownMatchSelectWidth,
        defaultActiveFirstOption: props.defaultActiveFirstOption,
        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 /*#__PURE__*/_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 this.getContextConfig('renderEmpty')('Select');
    }
  }, {
    key: "getPagingOptionContent",
    value: function getPagingOptionContent() {
      var pagingOptionContent = this.props.pagingOptionContent;

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

      return this.getContextConfig('selectPagingOptionContent');
    }
  }, {
    key: "getOtherNextNode",
    value: function getOtherNextNode() {
      var _this5 = this;

      var commonItem = this.observableProps.commonItem;

      if (commonItem) {
        var options = this.options;

        if (!options) {
          return undefined;
        }

        var textField = this.textField,
            valueField = this.valueField,
            _this$props3 = this.props,
            maxCommonTagCount = _this$props3.maxCommonTagCount,
            maxCommonTagPlaceholder = _this$props3.maxCommonTagPlaceholder,
            maxCommonTagTextLength = _this$props3.maxCommonTagTextLength;
        var values = this.getValues();
        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 /*#__PURE__*/_react["default"].createElement(_tag["default"], {
            key: item,
            className: values.includes(item) ? "".concat(_this5.prefixCls, "-common-item ").concat(_this5.prefixCls, "-common-item-selected") : "".concat(_this5.prefixCls, "-common-item"),
            // @ts-ignore
            onClick: function onClick() {
              return _this5.handleCommonItemClick(textRecord);
            }
          }, text);
        });

        if (maxCommonTagCount && 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( /*#__PURE__*/_react["default"].createElement(_tag["default"], {
            className: "".concat(this.prefixCls, "-common-item"),
            key: "maxCommonTagPlaceholder"
          }, content));
        }

        return /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(this.prefixCls, "-common-item-wrapper")
        }, /*#__PURE__*/_react["default"].createElement("span", {
          className: "".concat(this.prefixCls, "-common-item-label")
        }, (0, _localeContext.$l)('Select', 'common_item')), tags);
      }
    }
  }, {
    key: "getMenuItem",
    value: function getMenuItem(_ref3) {
      var record = _ref3.record,
          text = _ref3.text,
          value = _ref3.value;
      var options = this.options,
          optionRenderer = this.props.optionRenderer;
      return optionRenderer ? optionRenderer({
        dataSet: options,
        record: record,
        text: text,
        value: value
      }) : text;
    }
  }, {
    key: "getMenu",
    value: function getMenu() {
      var _this6 = this;

      var menuProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var options = this.options,
          groupRenderer = this.props.groupRenderer;

      if (!options) {
        return null;
      }

      var _this$context = this.context,
          getTooltip = _this$context.getTooltip,
          getTooltipTheme = _this$context.getTooltipTheme,
          getTooltipPlacement = _this$context.getTooltipPlacement;
      var menuDisabled = this.disabled,
          textField = this.textField,
          valueField = this.valueField,
          _this$props4 = this.props,
          dropdownMenuStyle = _this$props4.dropdownMenuStyle,
          onOption = _this$props4.onOption,
          _this$props4$optionTo = _this$props4.optionTooltip,
          optionTooltip = _this$props4$optionTo === void 0 ? getTooltip('select-option') : _this$props4$optionTo;
      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);
          var renderLable = label;

          if (groupRenderer && typeof groupRenderer === 'function') {
            renderLable = groupRenderer({
              record: record,
              dataSet: options,
              text: label,
              value: label
            });
          }

          if (label !== undefined) {
            var groupKey = "group-".concat(label);

            if (!previousGroup) {
              previousGroup = optGroups.find(function (item) {
                return item.key === groupKey;
              });

              if (!previousGroup) {
                previousGroup = /*#__PURE__*/_react["default"].createElement(_menu.ItemGroup, {
                  key: groupKey,
                  title: renderLable
                }, []);
                optGroups.push(previousGroup);
              }
            } else {
              var children = previousGroup.props.children;
              previousGroup = children.find(function (item) {
                return item.key === groupKey;
              });

              if (!previousGroup) {
                previousGroup = /*#__PURE__*/_react["default"].createElement(_menu.ItemGroup, {
                  key: groupKey,
                  title: renderLable
                }, []);
                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 key = getItemKey(record, text, value);

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

        var itemContent = _this6.getMenuItem({
          record: record,
          text: text,
          value: value
        });

        var recordValues = record.get(_normalizeOptions.OTHER_OPTION_PROPS) || {};
        var itemProps = (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, recordValues), {}, {
          style: (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, IeItemStyle), recordValues.style),
          key: key,
          value: record,
          disabled: menuDisabled,
          tooltip: optionTooltip,
          tooltipTheme: getTooltipTheme('select-option'),
          tooltipPlacement: getTooltipPlacement('select-option')
        });
        var mergedProps = optionProps ? (0, _objectSpread3["default"])((0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, optionProps), itemProps), {}, {
          className: (0, _classnames["default"])(optionProps.className, itemProps.className, (0, _defineProperty2["default"])({}, "".concat(_this6.prefixCls, "-current"), record.isCurrent)),
          style: (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, optionProps.style), itemProps.style),
          disabled: itemProps.disabled || optionProps.disabled
        }) : itemProps;

        var option = /*#__PURE__*/_react["default"].createElement(_menu.Item, (0, _extends2["default"])({}, mergedProps), (0, _mobx.toJS)(itemContent));

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

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

      var menuPrefix = this.getMenuPrefixCls();
      return /*#__PURE__*/_react["default"].createElement(_menu["default"], (0, _extends2["default"])({
        ref: this.saveMenu,
        disabled: menuDisabled,
        defaultActiveFirst: this.defaultActiveFirstOption,
        multiple: this.menuMultiple,
        selectedKeys: selectedKeys,
        prefixCls: menuPrefix,
        onClick: this.handleMenuClick,
        onMouseDown: _EventManager.preventDefault,
        style: (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, IeMenuStyle), dropdownMenuStyle),
        focusable: false
      }, menuProps), optGroups, options.paging && options.currentPage < options.totalPage && /*#__PURE__*/_react["default"].createElement(_menu.Item, {
        key: MORE_KEY,
        checkable: false,
        className: "".concat(menuPrefix, "-item-more")
      }, this.getPagingOptionContent()));
    }
    /**
     * 增加lov popupContent 回调参数 用于控制对应交互
     */

  }, {
    key: "getPopupProps",
    value: function getPopupProps() {
      var options = this.options,
          textField = this.textField,
          field = this.field,
          record = this.record,
          valueField = this.valueField;
      return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "getPopupProps", this).call(this)), {}, {
        dataSet: options,
        textField: textField,
        valueField: valueField,
        field: field,
        record: record,
        content: this.getPopupContent()
      });
    }
  }, {
    key: "getPopupClassName",
    value: function getPopupClassName(defaultClassName) {
      var _classNames2;

      var multiple = this.multiple,
          prefixCls = this.prefixCls;
      return (0, _classnames["default"])(defaultClassName, (_classNames2 = {}, (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-popup-multiple"), multiple), (0, _defineProperty2["default"])(_classNames2, "".concat(prefixCls, "-popup-single"), !multiple), _classNames2));
    }
  }, {
    key: "dropdownMatchSelectWidth",
    get: function get() {
      var _this$observableProps5 = this.observableProps.dropdownMatchSelectWidth,
          dropdownMatchSelectWidth = _this$observableProps5 === void 0 ? this.getContextConfig('dropdownMatchSelectWidth') : _this$observableProps5;
      return dropdownMatchSelectWidth;
    }
  }, {
    key: "defaultActiveFirstOption",
    get: function get() {
      var _this$observableProps6 = this.observableProps.defaultActiveFirstOption,
          defaultActiveFirstOption = _this$observableProps6 === void 0 ? this.getContextConfig('defaultActiveFirstOption') : _this$observableProps6;
      return defaultActiveFirstOption;
    }
  }, {
    key: "optionsFilter",
    get: function get() {
      var _this$observableProps7 = this.observableProps.optionsFilter,
          optionsFilter = _this$observableProps7 === void 0 ? this.getContextConfig('selectOptionsFilter') : _this$observableProps7;
      return optionsFilter;
    }
  }, {
    key: "selectReverse",
    get: function get() {
      var _this$observableProps8 = this.observableProps.selectReverse,
          selectReverse = _this$observableProps8 === void 0 ? this.getContextConfig('selectReverse') : _this$observableProps8;
      return selectReverse;
    }
  }, {
    key: "loading",
    get: function get() {
      return this.options.status === _enum.DataSetStatus.loading;
    }
  }, {
    key: "handlePopupSearch",
    value: function handlePopupSearch(value) {
      this.searchText = value;
      this.doSearch(value);
    }
  }, {
    key: "renderSearchFieldPrefix",
    value: function renderSearchFieldPrefix(_props) {
      return undefined;
    }
  }, {
    key: "renderSearchField",
    value: function renderSearchField(props) {
      var searchText = this.searchText,
          prefixCls = this.prefixCls;
      var searchFieldProps = this.getSearchFieldProps();
      var multiple = searchFieldProps.multiple,
          className = searchFieldProps.className;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(prefixCls, "-search-bar")
      }, this.renderSearchFieldPrefix(props), /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
        value: searchText,
        onChange: this.handlePopupSearch,
        prefix: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: "search"
        }),
        valueChangeAction: multiple ? _enum2.ValueChangeAction.blur : _enum2.ValueChangeAction.input,
        labelLayout: _enum3.LabelLayout.none,
        border: false
      }, searchFieldProps, {
        className: (0, _classnames["default"])("".concat(prefixCls, "-search-field"), className)
      })));
    }
  }, {
    key: "renderSelectAll",
    value: function renderSelectAll() {
      var selectAllButton = this.props.selectAllButton;

      if (this.multiple && selectAllButton) {
        var builtInButtons = [{
          key: 'select_all',
          onClick: this.chooseAll,
          children: (0, _localeContext.$l)('Select', 'select_all')
        }];

        if (this.selectReverse) {
          builtInButtons.push({
            key: 'select_re',
            onClick: this.chooseRe,
            children: (0, _localeContext.$l)('Select', 'select_re')
          });
        }

        builtInButtons.push({
          key: 'unselect_all',
          onClick: this.unChooseAll,
          children: (0, _localeContext.$l)('Select', 'unselect_all')
        });
        var buttons = typeof selectAllButton === 'function' ? selectAllButton(builtInButtons) : builtInButtons;
        return /*#__PURE__*/_react["default"].createElement("div", {
          key: "check-all",
          className: "".concat(this.prefixCls, "-select-all-none")
        }, buttons.map(function (_ref4, index) {
          var key = _ref4.key,
              onClick = _ref4.onClick,
              children = _ref4.children;
          return /*#__PURE__*/_react["default"].createElement("span", {
            key: key || String(index),
            onClick: onClick
          }, children);
        }));
      }
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      var menu = /*#__PURE__*/_react["default"].createElement(_spin["default"], {
        key: "menu",
        spinning: this.loading
      }, this.getMenu());

      return [this.searchable && this.isSearchFieldInPopup() && this.renderSearchField(), this.renderSelectAll(), menu];
    }
  }, {
    key: "getPopupStyleFromAlign",
    value: function getPopupStyleFromAlign(target) {
      if (target) {
        var width = (0, _UnitConvertor.pxToRem)(target.getBoundingClientRect().width, true);

        if (width !== undefined) {
          var isFlat = this.props.isFlat;

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

          return {
            minWidth: width
          };
        }
      }
    }
  }, {
    key: "getDefaultAction",
    value: function getDefaultAction() {
      return this.getContextConfig('selectTrigger') || (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "getDefaultAction", this).call(this);
    }
  }, {
    key: "getTriggerIconFont",
    value: function getTriggerIconFont() {
      return this.searchable && !this.isSearchFieldInPopup() && this.isFocused && !this.readOnly ? '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.disabled && !this.readOnly && 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 onOption = this.props.onOption;
      var findRecord = this.findByValue(v);
      var optionProps = findRecord ? onOption === defaultOnOption ? defaultOnOption({
        record: findRecord
      }) : onOption({
        dataSet: this.options,
        record: findRecord
      }) : undefined;
      var optionDisabled = optionProps && optionProps.disabled;
      return findRecord && findRecord.get(DISABLED_FIELD) === true || optionDisabled || this.disabled;
    }
  }, {
    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(text) {
      var _this7 = this;

      var value = this.getValue();

      if (text) {
        if (value !== text) {
          if (!(0, _isObject["default"])(value) || value[this.textField] !== text) {
            var comboOptions = this.comboOptions;
            var data = comboOptions ? comboOptions.data : [];
            this.options.ready().then(function () {
              var record = _this7.findByTextWithValue(text, data);

              if (record) {
                _this7.choose(record);
              }
            });
          }
        }
      } else if (!this.multiple || value && value.length === 0 || !value) {
        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 _this8 = 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) && _this8.generateComboOption(v);
          });
        } else {
          if ((0, _mobx.isObservableObject)(value)) {
            value = (0, _mobx.get)(value, textField);
          } else if ((0, _isObject["default"])(value)) {
            value = value[textField];
          }

          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 _this9 = this,
          _ref5;

      var textField = this.textField,
          valueField = this.valueField,
          menu = this.menu;
      var comboOptions = (0, _utils.getIf)(this, 'comboOptions', function () {
        return new _DataSet["default"](undefined, {
          getConfig: _this9.getContextConfig
        });
      });
      var initData = !this.primitive && (0, _mobx.isObservableObject)(value) ? value : (_ref5 = {}, (0, _defineProperty2["default"])(_ref5, textField, value), (0, _defineProperty2["default"])(_ref5, valueField, value), _ref5);
      var findOption = comboOptions.find(function (record) {
        return record.get(valueField) === value.trim();
      });
      if (findOption) return;
      var record = comboOptions.create(initData, 0);

      if (menu) {
        updateActiveKey(menu, getItemKey(record, initData[valueField], initData[valueField]));
      }
    }
  }, {
    key: "removeComboOptions",
    value: function removeComboOptions() {
      var _this10 = this;

      var comboOptions = this.comboOptions;

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

      if (record && !this.isSelected(record)) {
        var comboOptions = this.comboOptions;

        if (comboOptions) {
          comboOptions.remove(record);
        }
      }
    }
  }, {
    key: "handlePopupAnimateAppear",
    value: function handlePopupAnimateAppear() {// noop
    }
  }, {
    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) {// noop
    }
  }, {
    key: "handleMenuClick",
    value: function handleMenuClick(_ref6) {
      var key = _ref6.key,
          value = _ref6.item.props.value;

      if (key === MORE_KEY) {
        var searchMatcher = this.searchMatcher,
            searchText = this.searchText;
        this.options.queryMore(this.options.currentPage + 1, (0, _isString["default"])(searchMatcher) ? this.getSearchPara(searchMatcher, searchText) : undefined);
      } 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: "multipleSearch",
    value: function multipleSearch(text) {
      if (this.multiple && this.searchable && !isSearchTextEmpty(text)) {
        this.setText(text);
      }
    }
  }, {
    key: "handleSearch",
    value: function handleSearch(_text) {// noop
    }
  }, {
    key: "setValue",
    value: function setValue(value, noVaidate) {
      if (this.reserveParam && this.multiple && this.searchable && !isSearchTextEmpty(this.searchText)) {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "setValue", this).call(this, value, noVaidate, true);
      } else {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "setValue", this).call(this, value, noVaidate);
      }
    }
  }, {
    key: "setText",
    value: function setText(text) {
      var isDifference = this.searchText !== text;
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "setText", this).call(this, text);

      if (this.searchable && !this.isSearchFieldInPopup() && isDifference) {
        this.doSearch(text);
      }
    }
  }, {
    key: "getSearchPara",
    value: function getSearchPara(searchMatcher, value) {
      var paramMatcher = this.paramMatcher;

      if ((0, _isString["default"])(paramMatcher)) {
        if ((0, _mobx.isArrayLike)(value)) {
          return (0, _defineProperty2["default"])({}, searchMatcher, value.map(function (v) {
            return "".concat(v || '').concat(paramMatcher);
          }));
        }

        return (0, _defineProperty2["default"])({}, searchMatcher, "".concat(value || '').concat(paramMatcher));
      }

      if ((0, _isFunction["default"])(paramMatcher)) {
        var record = this.record,
            textField = this.textField,
            valueField = this.valueField;
        var searchPara = paramMatcher({
          record: record,
          text: value,
          textField: textField,
          valueField: valueField,
          key: searchMatcher
        });

        if (searchPara) {
          if ((0, _isString["default"])(searchPara)) {
            return (0, _defineProperty2["default"])({}, searchMatcher, value);
          }

          return searchPara;
        }
      }

      return (0, _defineProperty2["default"])({}, searchMatcher, value);
    }
  }, {
    key: "searchRemote",
    value: function searchRemote(text) {
      var searchMatcher = this.searchMatcher;

      if ((0, _isString["default"])(searchMatcher)) {
        var searchPara = this.getSearchPara(searchMatcher, text);
        var field = this.field,
            record = this.record;
        var options = field && field.get('options', record) || this.observableProps.options;
        Object.keys(searchPara).forEach(function (key) {
          var value = searchPara[key];
          var lovPara = value === '' ? undefined : value;

          if (options) {
            options.query(undefined, (0, _defineProperty2["default"])({}, key, lovPara));
          } else if (field) {
            field.setLovPara(key, lovPara);
          }
        });
      }
    }
    /**
     * 该方法会被onChange和onCompositionend触发
     * @param e 改变事件
     */

  }, {
    key: "handleChange",
    value: function handleChange(e) {
      var _this11 = 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 _this11.setText(text);
          });
        }
      }

      if (!this.popup) {
        this.expand();
      }
    }
  }, {
    key: "processRecordToObject",
    value: function processRecordToObject(record) {
      // 如果为原始值那么 restricted 失效
      return this.primitive ? this.restrictInput(record.get(this.valueField)) : record.toData();
    }
  }, {
    key: "processObjectValue",
    value: function processObjectValue(value, textField) {
      if (!(0, _isNil["default"])(value)) {
        if ((0, _isPlainObject["default"])(value)) {
          return _ObjectChainValue["default"].get(value, textField);