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

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

import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _typeof from "@babel/runtime/helpers/typeof";
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";

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 = _getPrototypeOf(Derived),
        result;

    if (isNativeReflectConstruct()) {
      var NewTarget = _getPrototypeOf(this).constructor;

      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }

    return _possibleConstructorReturn(this, result);
  };
}

import { __decorate } from "tslib";
import React, { isValidElement } from 'react';
import PropTypes from 'prop-types';
import omit from 'lodash/omit';
import debounce from 'lodash/debounce';
import isString from 'lodash/isString';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import noop from 'lodash/noop';
import defer from "lodash/defer";
import isPlainObject from 'lodash/isPlainObject';
import { observer } from 'mobx-react';
import { action, computed, isArrayLike, reaction, runInAction } from 'mobx';
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 { getConfig } from '../../../es/configure';
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 { stopEvent } from '../_util/EventManager';
import normalizeOptions from '../option/normalizeOptions';
import { $l } from '../locale-context';
import * as ObjectChainValue from '../_util/ObjectChainValue';
import isEmpty from '../_util/isEmpty';
import isSame from '../_util/isSame';
import isSameLike from '../_util/isSameLike';
import isIE from '../_util/isIE';

function updateActiveKey(menu, activeKey) {
  var store = menu.getStore();
  var menuId = menu.getEventKey();
  var state = store.getState();
  store.setState({
    activeKey: _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 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((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.comboOptions = new DataSet();
    _this.doSearch = debounce(function (value) {
      if (isString(_this.searchMatcher)) {
        _this.searchRemote(value);
      }

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

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

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

      this.checkComboReaction = reaction(function () {
        return _this3.getValue();
      }, function (value) {
        return _this3.generateComboOption(value);
      });
    }
  }, {
    key: "clearCheckValue",
    value: function clearCheckValue() {
      if (this.checkValueReaction) {
        this.checkValueReaction();
        this.checkValueReaction = undefined;
      }
    }
  }, {
    key: "clearCheckCombo",
    value: function clearCheckCombo() {
      if (this.checkComboReaction) {
        this.checkComboReaction();
        this.checkComboReaction = undefined;
      }
    }
  }, {
    key: "clearReaction",
    value: function clearReaction() {
      this.clearCheckValue();
      this.clearCheckCombo();
    }
  }, {
    key: "componentWillMount",
    value: function componentWillMount() {
      _get(_getPrototypeOf(Select.prototype), "componentWillMount", this).call(this);

      var _this$props = this.props,
          checkValueOnOptionsChange = _this$props.checkValueOnOptionsChange,
          combo = _this$props.combo;

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

      if (combo) {
        this.checkCombo();
        this.generateComboOption(this.getValue());
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      _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: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = omit(_get(_getPrototypeOf(Select.prototype), "getOtherProps", this).call(this), ['searchable', 'searchMatcher', 'paramMatcher', 'combo', 'commonItem', 'maxCommonTagPlaceholder', 'maxCommonTagCount', 'maxCommonTagTextLength', 'multiple', 'value', 'name', 'options', 'optionsFilter', 'dropdownMatchSelectWidth', 'dropdownMenuStyle', 'checkValueOnOptionsChange', 'primitiveValue', 'optionRenderer', 'notFoundContent', 'pagingOptionContent', 'onOption', 'noCache', 'reverse', 'selectAllButton']);
      return otherProps;
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return _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,
        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 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 getConfig('renderEmpty')('Select');
    }
  }, {
    key: "getPagingOptionContent",
    value: function getPagingOptionContent() {
      var pagingOptionContent = this.props.pagingOptionContent;

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

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

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

      if (!options) {
        return undefined;
      }

      var values = this.getValues();

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

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

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

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

          tags.push(React.createElement(Tag, {
            className: "".concat(this.prefixCls, "-common-item"),
            key: "maxCommonTagPlaceholder"
          }, content));
        }

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

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

      if (!options) {
        return null;
      }

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

      var IeMenuStyle = !this.dropdownMatchSelectWidth && 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 = 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 = 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 optionDisabled = menuDisabled || optionProps && optionProps.disabled;
        var key = getItemKey(record, text, value);

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

        var itemContent = optionRenderer ? optionRenderer({
          dataSet: options,
          record: record,
          text: text,
          value: value
        }) : text;
        var option = React.createElement(Item, _extends({
          style: IeItemStyle
        }, optionProps, {
          key: key,
          value: record,
          disabled: optionDisabled
        }), itemContent);

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

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

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

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

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

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

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

      if (isIE()) {
        if (e.keyCode === KeyCode.BACKSPACE) {
          e.preventDefault();
        }
      }

      if (!this.isDisabled() && !this.isReadOnly() && 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 options = this.options,
          onOption = this.props.onOption;
      var findRecord = this.findByValue(v);
      var optionProps = findRecord ? onOption({
        dataSet: options,
        record: findRecord
      }) : undefined;
      var optionDisabled = optionProps && optionProps.disabled;
      return findRecord && findRecord.get(DISABLED_FIELD) === true || optionDisabled || this.isDisabled();
    }
  }, {
    key: "handleKeyDownFirstLast",
    value: function handleKeyDownFirstLast(e, menu, direction) {
      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(value) {
      var _this6 = this;

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

          if (record) {
            _this6.choose(record);
          }
        });
      } else if (!this.multiple) {
        this.setValue(this.emptyValue);
      }
    }
  }, {
    key: "findByTextWithValue",
    value: function findByTextWithValue(text, data) {
      var textField = this.textField;
      var records = [].concat(_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 _this7 = this;

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

      if (value) {
        if (isArrayLike(value)) {
          value.forEach(function (v) {
            return !isNil(v) && _this7.generateComboOption(v);
          });
        } else {
          var found = this.findByText(value) || this.findByValue(value);

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

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

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

      var textField = this.textField,
          valueField = this.valueField,
          menu = this.menu;
      var record = this.comboOptions.create((_this$comboOptions$cr = {}, _defineProperty(_this$comboOptions$cr, textField, value), _defineProperty(_this$comboOptions$cr, valueField, value), _this$comboOptions$cr), 0);

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

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

      if (record && !this.isSelected(record)) {
        this.comboOptions.remove(record);
      }
    }
  }, {
    key: "handlePopupAnimateAppear",
    value: function handlePopupAnimateAppear() {}
  }, {
    key: "getValueKey",
    value: function getValueKey(v) {
      if (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) {}
  }, {
    key: "handleMenuClick",
    value: function handleMenuClick(_ref3) {
      var key = _ref3.key,
          value = _ref3.item.props.value;

      if (key === MORE_KEY) {
        this.options.queryMore(this.options.currentPage + 1);
      } else if (this.multiple && this.isSelected(value)) {
        this.unChoose(value);
      } else {
        this.choose(value);
      }
    }
  }, {
    key: "handleCommonItemClick",
    value: function handleCommonItemClick(value) {
      if (this.multiple && this.isSelected(value)) {
        this.unChoose(value);
      } else {
        this.choose(value);
      }
    }
  }, {
    key: "handleOptionSelect",
    value: function handleOptionSelect(record) {
      this.prepareSetValue.apply(this, _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) {}
  }, {
    key: "setText",
    value: function setText(text) {
      _get(_getPrototypeOf(Select.prototype), "setText", this).call(this, text);

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

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

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

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

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

      this.setText(restricted);

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

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

      var restricted = this.restrictInput(record.get(valueField));
      return primitive ? restricted : record.toData();
    }
  }, {
    key: "processObjectValue",
    value: function processObjectValue(value, textField) {
      if (!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;

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

      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 _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 : _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 = _this10.findByValue(v);

          var findRecord = _this10.findByValue(v);

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

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

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

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

        this.setText();
      }

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

      defer(function () {
        return _this11.isFocused && _this11.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 field = this.field;
      var noCache = this.getProp('noCache');

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

        this.forcePopupAlign();
      }

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

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

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

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

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

                    if (record) {
                      return true;
                    }

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

                      return true;
                    }

                    return false;
                  });

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

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

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

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

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

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

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

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

  return Select;
}(TriggerField);
Select.displayName = 'Select';
Select.propTypes = _objectSpread({
  /**
   * 复合输入值
   * @default false
   */
  combo: PropTypes.bool,

  /**
   * 常用项
   * @default undefined
   */
  commonItem: PropTypes.array,

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

  /**
   * 多值标签最大数量
   */
  maxCommonTagCount: PropTypes.number,

  /**
   * 多值标签文案最大长度
   */
  maxCommonTagTextLength: PropTypes.number,

  /**
   * 过滤器
   * @default false
   */
  searchable: PropTypes.bool,

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

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

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

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

  /**
   * 当下拉列表为空时显示的内容
   */
  notFoundContent: PropTypes.node,

  /**
   * 渲染分页 Item 内容
   */
  pagingOptionContent: PropTypes.node,

  /**
   * 设置选项属性，如 disabled;
   */
  onOption: PropTypes.func,

  /**
   * 下拉时自动重新查询
   */
  noCache: PropTypes.bool,

  /**
   * 下拉框匹配输入框宽度
   * @default true
   */
  dropdownMatchSelectWidth: PropTypes.bool,

  /**
   * 多选时显示全选按钮;
   * @default true
   */
  selectAllButton: PropTypes.bool,

  /**
   * 多选是否开启反选
   * @default false
   */
  reverse: PropTypes.bool
}, TriggerField.propTypes);
Select.defaultProps = _objectSpread({}, TriggerField.defaultProps, {
  suffixCls: 'select',
  combo: false,
  checkValueOnOptionsChange: true,
  onOption: defaultOnOption,
  selectAllButton: true
});
Select.Option = Option;
Select.OptGroup = OptGroup;
Select.__PRO_SELECT = true;

__decorate([computed], Select.prototype, "searchMatcher", null);

__decorate([computed], Select.prototype, "paramMatcher", null);

__decorate([computed], Select.prototype, "defaultValidationMessages", null);

__decorate([computed], Select.prototype, "textField", null);

__decorate([computed], Select.prototype, "valueField", null);

__decorate([computed], Select.prototype, "filteredOptions", null);

__decorate([computed], Select.prototype, "optionsWithCombo", null);

__decorate([computed], Select.prototype, "cascadeOptions", null);

__decorate([computed], Select.prototype, "editable", null);

__decorate([computed], Select.prototype, "searchable", null);

__decorate([computed], Select.prototype, "multiple", null);

__decorate([computed], Select.prototype, "menuMultiple", null);

__decorate([computed], Select.prototype, "options", null);

__decorate([computed], Select.prototype, "primitive", null);

__decorate([autobind], Select.prototype, "saveMenu", null);

__decorate([autobind], Select.prototype, "getMenu", null);

__decorate([computed], Select.prototype, "dropdownMatchSelectWidth", null);

__decorate([computed], Select.prototype, "selectReverse", null);

__decorate([computed], Select.prototype, "loading", null);

__decorate([autobind], Select.prototype, "getPopupStyleFromAlign", null);

__decorate([autobind], Select.prototype, "handleKeyDown", null);

__decorate([autobind], Select.prototype, "handleBlur", null);

__decorate([autobind], Select.prototype, "handlePopupAnimateEnd", null);

__decorate([autobind], Select.prototype, "handleMenuClick", null);

__decorate([autobind], Select.prototype, "handleCommonItemClick", null);

__decorate([action], Select.prototype, "setText", null);

__decorate([autobind, action], Select.prototype, "handleChange", null);

__decorate([action], Select.prototype, "clear", null);

__decorate([autobind], Select.prototype, "reset", null);

__decorate([autobind], Select.prototype, "chooseAll", null);

__decorate([autobind], Select.prototype, "chooseRe", null);

__decorate([autobind], Select.prototype, "unChooseAll", null);

__decorate([autobind], Select.prototype, "handlePopupHiddenChange", null);

__decorate([autobind], Select.prototype, "matchRecordBySearch", null);

var ObserverSelect =
/*#__PURE__*/
function (_Select) {
  _inherits(ObserverSelect, _Select);

  var _super2 = _createSuper(ObserverSelect);

  function ObserverSelect() {
    _classCallCheck(this, ObserverSelect);

    return _super2.apply(this, arguments);
  }

  return ObserverSelect;
}(Select);

ObserverSelect.defaultProps = Select.defaultProps;
ObserverSelect.Option = Option;
ObserverSelect.OptGroup = OptGroup;
ObserverSelect.__PRO_SELECT = true;
ObserverSelect = __decorate([observer], ObserverSelect);
export default ObserverSelect;
//# sourceMappingURL=Select.js.map