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.isSearchTextEmpty = isSearchTextEmpty;
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 _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 _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 _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;
  }
}

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(((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 = _createSuper(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: "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 _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();
        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', '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, _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,
        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 _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 _this4 = 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 _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 (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(_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: "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 _this5 = this;

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

      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);

          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 key = getItemKey(record, text, value);

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

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

        var recordValues = record.get(_normalizeOptions.OTHER_OPTION_PROPS) || {};
        var itemProps = (0, _objectSpread3["default"])({}, recordValues, {
          style: (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"])({}, optionProps, {}, itemProps, {
          className: (0, _classnames["default"])(optionProps.className, itemProps.className, (0, _defineProperty2["default"])({}, "".concat(_this5.prefixCls, "-current"), record.isCurrent)),
          style: (0, _objectSpread3["default"])({}, optionProps.style, {}, itemProps.style),
          disabled: itemProps.disabled || optionProps.disabled
        }) : itemProps;

        var option = _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(_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: this.defaultActiveFirstOption,
        multiple: this.menuMultiple,
        selectedKeys: selectedKeys,
        prefixCls: menuPrefix,
        onClick: this.handleMenuClick,
        onMouseDown: _EventManager.preventDefault,
        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()));
    }
    /**
     * 增加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, _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: "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 _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-search-bar")
      }, this.renderSearchFieldPrefix(props), _react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
        value: searchText,
        onChange: this.handlePopupSearch,
        prefix: _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 _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 _react["default"].createElement("span", {
            key: key || String(index),
            onClick: onClick
          }, children);
        }));
      }
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      var menu = _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);

        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(value) {
      var _this6 = this;

      if (value) {
        var comboOptions = this.comboOptions;
        var data = comboOptions ? 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 _ref5;

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

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

      var comboOptions = this.comboOptions;

      if (comboOptions) {
        comboOptions.forEach(function (record) {
          return _this8.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) {
        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) {// noop
    }
  }, {
    key: "setText",
    value: function setText(text) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Select.prototype), "setText", this).call(this, text);

      if (this.searchable && !this.isSearchFieldInPopup()) {
        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 field = this.field,
          searchMatcher = this.searchMatcher,
          record = this.record;

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

          if (optionDs) {
            optionDs.query(undefined, (0, _defineProperty2["default"])({}, key, lovPara));
          } else {
            field.setLovPara(key, lovPara);
          }
        });
      }
    }
    /**
     * 该方法会被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["default"].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,
          record = this.record;

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

      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, _isEmpty2["default"])(text)) {
        if ((0, _isPlainObject["default"])(value)) {
          return _ObjectChainValue["default"].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.isSearchFieldInPopup()) {
          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 noCache = this.getProp('noCache');

      if (!hidden) {
        var field = this.field;

        if (field) {
          field.fetchLookup(noCache, this.record);
        }

        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 comboOptions, values, field, filteredOptions, combo;
        return _regenerator["default"].wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                comboOptions = this.comboOptions;

                if (comboOptions) {
                  comboOptions.removeAll();
                }

                values = this.getValues();
                field = this.field;

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

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

              case 7:
                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', _this12.record) && filteredOptions.length && !(0, _isEqual["default"])(newValues, values)) {
                    _this12.setValue(_this12.multiple ? newValues : newValues[0]);