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

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

import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _typeof from "@babel/runtime/helpers/typeof";
import _extends from "@babel/runtime/helpers/extends";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import { __decorate } from "tslib";
import React, { isValidElement } from 'react';
import debounce from 'lodash/debounce';
import isString from 'lodash/isString';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import isFunction from 'lodash/isFunction';
import isObject from 'lodash/isObject';
import noop from 'lodash/noop';
import defer from 'lodash/defer';
import isPlainObject from 'lodash/isPlainObject';
import { observer } from 'mobx-react';
import { action, computed, isArrayLike, isObservableObject, observable, reaction, runInAction, toJS } from 'mobx';
import classNames from 'classnames';
import Menu, { Item, ItemGroup } from '../../../es/rc-components/menu';
import Tag from '../../../es/tag';
import KeyCode from '../../../es/_util/KeyCode';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import TriggerField from '../trigger-field/TriggerField';
import autobind from '../_util/autobind';
import Option from '../option/Option';
import OptGroup from '../option/OptGroup';
import { DataSetStatus, FieldType } from '../data-set/enum';
import DataSet from '../data-set/DataSet';
import Spin from '../spin';
import { preventDefault, stopEvent } from '../_util/EventManager';
import normalizeOptions, { OTHER_OPTION_PROPS } from '../option/normalizeOptions';
import { $l } from '../locale-context';
import ObjectChainValue from '../_util/ObjectChainValue';
import _isEmpty from '../_util/isEmpty';
import isSame from '../_util/isSame';
import isSameLike from '../_util/isSameLike';
import isIE from '../_util/isIE';
import { getIf } from '../data-set/utils';
import ObserverTextField from '../text-field/TextField';
import Icon from '../icon';
import { ValueChangeAction } from '../text-field/enum';
import { LabelLayout } from '../form/enum';
import { isFieldValueEmpty } from '../field/utils';

function updateActiveKey(menu, activeKey) {
  var store = menu.getStore();
  var menuId = menu.getEventKey();
  var state = store.getState();
  store.setState({
    activeKey: _objectSpread(_objectSpread({}, state.activeKey), {}, _defineProperty({}, menuId, activeKey))
  });
}

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

  if (record.get(textField) && isString(record.get(textField))) {
    return record.get(textField).indexOf(text) !== -1;
  }
}

export function isSearchTextEmpty(text) {
  return isArrayLike(text) ? !text.length : !text;
}
export var DISABLED_FIELD = '__disabled';
export var MORE_KEY = '__more__';

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

export function getItemKey(record, text, value) {
  return "item-".concat(value || record.id, "-").concat(( /*#__PURE__*/isValidElement(text) ? text.key : text) || record.id);
}

function getSimpleValue(value, valueField) {
  if (isPlainObject(value)) {
    return ObjectChainValue.get(value, valueField);
  }

  return value;
}

export var Select = /*#__PURE__*/function (_TriggerField) {
  _inherits(Select, _TriggerField);

  var _super = _createSuper(Select);

  function Select() {
    var _this;

    _classCallCheck(this, Select);

    _this = _super.apply(this, arguments);
    _this.doSearch = debounce(function (value) {
      if (isString(_this.searchMatcher)) {
        _this.searchRemote(value);
      }

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

  _createClass(Select, [{
    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: $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.observableProps.optionsFilter;
      return this.searchData(optionsFilter ? optionsWithCombo.filter(optionsFilter) : optionsWithCombo);
    }
  }, {
    key: "optionsWithCombo",
    get: function get() {
      var comboOptions = this.comboOptions;
      return comboOptions ? [].concat(_toConsumableArray(comboOptions.data), _toConsumableArray(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 && !isString(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 isSameLike(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: "multiple",
    get: function get() {
      return !!this.getProp('multiple');
    }
  }, {
    key: "menuMultiple",
    get: function get() {
      return this.multiple;
    }
  }, {
    key: "options",
    get: function get() {
      var field = this.field,
          textField = this.textField,
          valueField = this.valueField,
          multiple = this.multiple,
          _this$observableProps3 = this.observableProps,
          children = _this$observableProps3.children,
          options = _this$observableProps3.options;
      return options || field && field.getOptions(this.record) || normalizeOptions({
        textField: textField,
        valueField: valueField,
        disabledField: DISABLED_FIELD,
        multiple: multiple,
        children: children
      });
    }
  }, {
    key: "primitive",
    get: function get() {
      return this.observableProps.primitiveValue !== false && this.getProp('type') !== 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() || _isEmpty(this.text)) && isFieldValueEmpty(this.getValue(), this.range, this.multiple, this.valueField, this.textField) && this.isRenderEmpty();
    }
  }, {
    key: "isEditable",
    value: function isEditable() {
      return _get(_getPrototypeOf(Select.prototype), "isEditable", this).call(this) && (this.searchable && !this.isSearchFieldInPopup() || !!this.observableProps.combo);
    }
  }, {
    key: "checkValue",
    value: function checkValue() {
      var _this3 = this;

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

      this.checkComboReaction = 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() {
      _get(_getPrototypeOf(Select.prototype), "componentWillUnmount", this).call(this);

      this.doSearch.cancel();
      this.clearReaction();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      _get(_getPrototypeOf(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 _get(_getPrototypeOf(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 _objectSpread(_objectSpread({}, _get(_getPrototypeOf(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 _get(_getPrototypeOf(Select.prototype), "renderMultipleHolder", this).call(this);
      }

      return /*#__PURE__*/React.createElement("input", {
        key: "value",
        type: "hidden",
        value: this.toValueString(this.getValue()) || '',
        name: name,
        onChange: noop
      });
    }
  }, {
    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 && isString(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.createElement(Tag, {
            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.createElement(Tag, {
            className: "".concat(this.prefixCls, "-common-item"),
            key: "maxCommonTagPlaceholder"
          }, content));
        }

        return /*#__PURE__*/React.createElement("div", {
          className: "".concat(this.prefixCls, "-common-item-wrapper")
        }, /*#__PURE__*/React.createElement("span", {
          className: "".concat(this.prefixCls, "-common-item-label")
        }, $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;

      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 && isIE() ? {
        padding: '.08rem'
      } : {};
      var IeItemStyle = !this.dropdownMatchSelectWidth && isIE() ? {
        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 = /*#__PURE__*/React.createElement(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 = /*#__PURE__*/React.createElement(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) && _this6.isSelected(record)) {
          selectedKeys.push(key);
        }

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

        var recordValues = record.get(OTHER_OPTION_PROPS) || {};

        var itemProps = _objectSpread(_objectSpread({}, recordValues), {}, {
          style: _objectSpread(_objectSpread({}, IeItemStyle), recordValues.style),
          key: key,
          value: record,
          disabled: menuDisabled,
          tooltip: optionTooltip,
          tooltipTheme: getTooltipTheme('select-option'),
          tooltipPlacement: getTooltipPlacement('select-option')
        });

        var mergedProps = optionProps ? _objectSpread(_objectSpread(_objectSpread({}, optionProps), itemProps), {}, {
          className: classNames(optionProps.className, itemProps.className, _defineProperty({}, "".concat(_this6.prefixCls, "-current"), record.isCurrent)),
          style: _objectSpread(_objectSpread({}, optionProps.style), itemProps.style),
          disabled: itemProps.disabled || optionProps.disabled
        }) : itemProps;
        var option = /*#__PURE__*/React.createElement(Item, _extends({}, mergedProps), toJS(itemContent));

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

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

      var menuPrefix = this.getMenuPrefixCls();
      return /*#__PURE__*/React.createElement(Menu, _extends({
        ref: this.saveMenu,
        disabled: menuDisabled,
        defaultActiveFirst: this.defaultActiveFirstOption,
        multiple: this.menuMultiple,
        selectedKeys: selectedKeys,
        prefixCls: menuPrefix,
        onClick: this.handleMenuClick,
        onMouseDown: preventDefault,
        style: _objectSpread(_objectSpread({}, IeMenuStyle), dropdownMenuStyle),
        focusable: false
      }, menuProps), optGroups, options.paging && options.currentPage < options.totalPage && /*#__PURE__*/React.createElement(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 _objectSpread(_objectSpread({}, _get(_getPrototypeOf(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 classNames(defaultClassName, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-popup-multiple"), multiple), _defineProperty(_classNames2, "".concat(prefixCls, "-popup-single"), !multiple), _classNames2));
    }
  }, {
    key: "dropdownMatchSelectWidth",
    get: function get() {
      var _this$observableProps4 = this.observableProps.dropdownMatchSelectWidth,
          dropdownMatchSelectWidth = _this$observableProps4 === void 0 ? this.getContextConfig('dropdownMatchSelectWidth') : _this$observableProps4;
      return dropdownMatchSelectWidth;
    }
  }, {
    key: "defaultActiveFirstOption",
    get: function get() {
      var _this$observableProps5 = this.observableProps.defaultActiveFirstOption,
          defaultActiveFirstOption = _this$observableProps5 === void 0 ? this.getContextConfig('defaultActiveFirstOption') : _this$observableProps5;
      return defaultActiveFirstOption;
    }
  }, {
    key: "selectReverse",
    get: function get() {
      var _this$observableProps6 = this.observableProps.selectReverse,
          selectReverse = _this$observableProps6 === void 0 ? this.getContextConfig('selectReverse') : _this$observableProps6;
      return selectReverse;
    }
  }, {
    key: "loading",
    get: function get() {
      return this.options.status === 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.createElement("div", {
        className: "".concat(prefixCls, "-search-bar")
      }, this.renderSearchFieldPrefix(props), /*#__PURE__*/React.createElement(ObserverTextField, _extends({
        value: searchText,
        onChange: this.handlePopupSearch,
        prefix: /*#__PURE__*/React.createElement(Icon, {
          type: "search"
        }),
        valueChangeAction: multiple ? ValueChangeAction.blur : ValueChangeAction.input,
        labelLayout: LabelLayout.none,
        border: false
      }, searchFieldProps, {
        className: classNames("".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: $l('Select', 'select_all')
        }];

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

        builtInButtons.push({
          key: 'unselect_all',
          onClick: this.unChooseAll,
          children: $l('Select', 'unselect_all')
        });
        var buttons = typeof selectAllButton === 'function' ? selectAllButton(builtInButtons) : builtInButtons;
        return /*#__PURE__*/React.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.createElement("span", {
            key: key || String(index),
            onClick: onClick
          }, children);
        }));
      }
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      var menu = /*#__PURE__*/React.createElement(Spin, {
        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 = 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') || _get(_getPrototypeOf(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 (isIE()) {
        if (e.keyCode === KeyCode.BACKSPACE) {
          e.preventDefault();
        }
      }

      if (!this.disabled && !this.readOnly && menu) {
        if (this.popup && menu.onKeyDown(e)) {
          stopEvent(e);
        } else {
          switch (e.keyCode) {
            case KeyCode.RIGHT:
            case KeyCode.DOWN:
              this.handleKeyDownPrevNext(e, menu, 1);
              break;

            case KeyCode.LEFT:
            case KeyCode.UP:
              this.handleKeyDownPrevNext(e, menu, -1);
              break;

            case KeyCode.END:
            case KeyCode.PAGE_DOWN:
              this.handleKeyDownFirstLast(e, menu, 1);
              break;

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

            case KeyCode.ESC:
              this.handleKeyDownEsc(e);
              break;

            case KeyCode.SPACE:
              this.handleKeyDownSpace(e);
              break;

            default:
          }
        }
      }

      _get(_getPrototypeOf(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) {
      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.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()) {
        _get(_getPrototypeOf(Select.prototype), "handleBlur", this).call(this, e);

        this.resetFilter();
      }
    }
  }, {
    key: "expand",
    value: function expand() {
      var filteredOptions = this.filteredOptions;

      if (filteredOptions && filteredOptions.length) {
        _get(_getPrototypeOf(Select.prototype), "expand", this).call(this);
      }
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur(text) {
      var _this7 = this;

      if (text) {
        var value = this.getValue();

        if (value !== text) {
          if (!isObject(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) {
        this.setValue(this.emptyValue);
      }
    }
  }, {
    key: "findByTextWithValue",
    value: function findByTextWithValue(text, data) {
      var textField = this.textField;
      var records = [].concat(_toConsumableArray(data), _toConsumableArray(this.filteredOptions)).filter(function (record) {
        return isSameLike(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 isSameLike(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 isSameLike(record.get(textField), text);
      });
    }
  }, {
    key: "findByValue",
    value: function findByValue(value) {
      var valueField = this.valueField;
      var autoType = this.getProp('type') === FieldType.auto;
      value = getSimpleValue(value, valueField);
      return this.optionsWithCombo.find(function (record) {
        return autoType ? isSameLike(record.get(valueField), value) : isSame(record.get(valueField), value);
      });
    }
  }, {
    key: "isSelected",
    value: function isSelected(record) {
      var valueField = this.valueField;
      var autoType = this.getProp('type') === FieldType.auto;
      return this.getValues().some(function (value) {
        var simpleValue = getSimpleValue(value, valueField);
        return autoType ? isSameLike(record.get(valueField), simpleValue) : isSame(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 (isArrayLike(value)) {
          value.forEach(function (v) {
            return !isNil(v) && _this8.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 = getIf(this, 'comboOptions', function () {
        return new DataSet();
      });
      var initData = !this.primitive && isObservableObject(value) ? value : (_ref5 = {}, _defineProperty(_ref5, textField, value), _defineProperty(_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 _this9 = this;

      var comboOptions = this.comboOptions;

      if (comboOptions) {
        comboOptions.forEach(function (record) {
          return _this9.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 (isArrayLike(v)) {
        return v.map(this.getValueKey, this).join(',');
      }

      var autoType = this.getProp('type') === FieldType.auto;
      var value = getSimpleValue(v, this.valueField);
      return autoType && !isNil(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;
      var searchMatcher = this.searchMatcher,
          searchText = this.searchText;

      if (key === MORE_KEY) {
        this.options.queryMore(this.options.currentPage + 1, isString(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, _toConsumableArray(isArrayLike(record) ? record.map(this.processRecordToObject, this) : [this.processRecordToObject(record)]));
    }
  }, {
    key: "handleOptionUnSelect",
    value: function handleOptionUnSelect(record) {
      var valueField = this.valueField;
      var newValues = 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) {
      var isDifference = this.searchText !== text;

      _get(_getPrototypeOf(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 (isString(paramMatcher)) {
        if (isArrayLike(value)) {
          return _defineProperty({}, searchMatcher, value.map(function (v) {
            return "".concat(v || '').concat(paramMatcher);
          }));
        }

        return _defineProperty({}, searchMatcher, "".concat(value || '').concat(paramMatcher));
      }

      if (isFunction(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 (isString(searchPara)) {
            return _defineProperty({}, searchMatcher, value);
          }

          return searchPara;
        }
      }

      return _defineProperty({}, searchMatcher, value);
    }
  }, {
    key: "searchRemote",
    value: function searchRemote(text) {
      var field = this.field,
          searchMatcher = this.searchMatcher,
          record = this.record;

      if (field && isString(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, _defineProperty({}, key, lovPara));
          } else {
            field.setLovPara(key, lovPara);
          }
        });
      }
    }
    /**
     * 该方法会被onChange和onCompositionend触发
     * @param e 改变事件
     */

  }, {
    key: "handleChange",
    value: function handleChange(e) {
      var _this10 = 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 _this10.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 (!isNil(value)) {
        if (isPlainObject(value)) {
          return ObjectChainValue.get(value, textField);
        }

        var found = this.findByValue(value);

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

      if (primitive && field && field.getLookup(record)) {
        return _get(_getPrototypeOf(Select.prototype), "processValue", this).call(this, field.getText(value, undefined, record));
      }

      return _get(_getPrototypeOf(Select.prototype), "processValue", this).call(this, this.processObjectValue(value, textField));
    }
  }, {
    key: "processValue",
    value: function processValue(value) {
      var text = this.processLookupValue(value);

      if (_isEmpty(text)) {
        if (isPlainObject(value)) {
          return ObjectChainValue.get(value, this.valueField) || '';
        }

        return _get(_getPrototypeOf(Select.prototype), "processValue", this).call(this, value);
      }

      return text;
    }
  }, {
    key: "clear",
    value: function clear() {
      var _this11 = 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 : _this$props5$onClear,
          _this$props5$onOption = _this$props5.onOption,
          onOption = _this$props5$onOption === void 0 ? noop : _this$props5$onOption,
          options = this.options;
      this.setText(undefined);

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

          var findRecord = _this11.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 _this12 = this;

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

        this.setText();
      }

      _get(_getPrototypeOf(Select.prototype), "setRangeTarget", this).call(this, target);

      defer(function () {
        return _this12.isFocused && _this12.select();
      });
    }
  }, {
    key: "resetFilter",
    value: function resetFilter() {
      this.setText(undefined);
      this.removeComboOption();
      this.forcePopupAlign();
    }
  }, {
    key: "reset",
    value: function reset() {
      _get(_getPrototypeOf(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 (_typeof(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();
      }

      _get(_getPrototypeOf(Select.prototype), "handlePopupHiddenChange", this).call(this, hidden);
    }
  }, {
    key: "processSelectedData",
    value: function () {
      var _processSelectedData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        var _this13 = this;

        var comboOptions, values, field, filteredOptions, combo;
        return _regeneratorRuntime.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;