choerodon-ui/pro/lib/cascader/Cascader.js

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

"use strict";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var _tslib = require("tslib");

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

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

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

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

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

var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));

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

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

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

var _mobx = require("mobx");

var _cascader = require("../../../lib/rc-components/cascader");

var _Cascader2 = require("../../../lib/rc-components/cascader/Cascader");

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

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

var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));

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

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

var _cascader2 = require("../../../lib/cascader");

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

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

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

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

var _Record = _interopRequireDefault(require("../data-set/Record"));

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

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

var _utils = _interopRequireWildcard(require("./utils"));

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

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

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

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

var _enum2 = require("./enum");

var MORE_KEY = '__more__';
exports.MORE_KEY = MORE_KEY;
var disabledField = 'disabled';

function defaultOnOption(_ref) {
  var record = _ref.record;

  if (record instanceof _Record["default"]) {
    return {
      disabled: record.get(disabledField)
    };
  }
}

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

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

  return value;
}
/**
 * 简单比较arry的值是否相同
 * 主要问题是观察变量修改了值类型所以使用此方法
 * @param arr
 * @param arrNext
 */


function arraySameLike(arr, arrNext) {
  if ((0, _mobx.isArrayLike)(arr) && (0, _mobx.isArrayLike)(arrNext)) {
    return arr.toString() === arrNext.toString();
  }

  return false;
}

function defaultSearchMatcher(_ref2) {
  var record = _ref2.record,
      text = _ref2.text,
      textField = _ref2.textField;
  return record.get(textField) && record.get(textField).indexOf(text) !== -1;
}

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

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

  function Cascader(props, context) {
    var _this;

    (0, _classCallCheck2["default"])(this, Cascader);
    _this = _super.call(this, props, context);
    _this.doSearch = (0, _debounce["default"])(function (value) {
      if ((0, _isString["default"])(_this.searchMatcher)) {
        _this.searchRemote(value);
      }

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

    _this.setActiveValue({});

    _this.setItemMenuWidth(0);

    _this.setIsClickTab(false);

    return _this;
  }

  (0, _createClass2["default"])(Cascader, [{
    key: "isClickTab",
    get: function get() {
      return this.clickTab;
    }
  }, {
    key: "activeValue",
    get: function get() {
      var options = this.options,
          optionsIsChange = this.optionsIsChange,
          activeValues = this.activeValues,
          valueField = this.valueField;

      if (optionsIsChange && activeValues && activeValues instanceof _Record["default"]) {
        var newActiveValue = options.find(function (r) {
          return r.get(valueField) === activeValues.get(valueField);
        });

        if (newActiveValue && newActiveValue !== activeValues) {
          return newActiveValue;
        }
      }

      return activeValues;
    }
  }, {
    key: "itemMenuWidth",
    get: function get() {
      return this.menuItemWith;
    }
  }, {
    key: "findActiveRecord",
    value: function findActiveRecord(value, options) {
      var _this2 = this;

      var result;

      var returnActiveValue = function returnActiveValue(arrayOption, index) {
        if (arrayOption && arrayOption.length > 0) {
          arrayOption.forEach(function (item) {
            if ((0, _isSameLike["default"])(value[index], _this2.getRecordOrObjValue(item, _this2.valueField))) {
              result = item;

              if (item.children) {
                returnActiveValue(item.children, ++index);
              }
            }
          });
        }
      };

      if (options instanceof _DataSet["default"]) {
        returnActiveValue(options.treeData, 0);
      }

      if ((0, _mobx.isArrayLike)(options)) {
        returnActiveValue(options, 0);
      }

      return result;
    }
  }, {
    key: "setActiveValue",
    value: function setActiveValue(activeValues) {
      this.optionsIsChange = false;
      this.activeValues = activeValues;
    }
  }, {
    key: "setIsClickTab",
    value: function setIsClickTab(isClickTab) {
      this.clickTab = isClickTab;
    }
  }, {
    key: "setItemMenuWidth",
    value: function setItemMenuWidth(width) {
      this.menuItemWith = width;
    }
  }, {
    key: "getDefaultAction",
    value: function getDefaultAction() {
      return this.getContextConfig('selectTrigger') || (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "getDefaultAction", this).call(this);
    }
  }, {
    key: "defaultValidationMessages",
    get: function get() {
      var label = this.getProp('label');
      return {
        valueMissing: (0, _localeContext.$l)('Cascader', 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: "cascadeOptions",
    get: function get() {
      var record = this.record,
          field = this.field,
          options = this.options;
      var data = options.data;

      if (field) {
        var cascadeMap = field.get('cascadeMap', record);

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

          return [];
        }
      }

      return data;
    }
  }, {
    key: "multiple",
    get: function get() {
      return !!this.getProp('multiple');
    }
  }, {
    key: "menuMultiple",
    get: function get() {
      return this.multiple;
    }
  }, {
    key: "parentField",
    get: function get() {
      return this.getProp('parentField') || 'parentValue';
    }
  }, {
    key: "idField",
    get: function get() {
      return this.getProp('idField') || this.valueField;
    }
  }, {
    key: "searchMatcher",
    get: function get() {
      var _this$observableProps = this.observableProps.searchMatcher,
          searchMatcher = _this$observableProps === void 0 ? defaultSearchMatcher : _this$observableProps;
      return searchMatcher;
    }
  }, {
    key: "options",
    get: function get() {
      var field = this.field,
          textField = this.textField,
          valueField = this.valueField,
          idField = this.idField,
          parentField = this.parentField,
          multiple = this.multiple,
          options = this.observableProps.options;

      if ((0, _mobx.isArrayLike)(options)) {
        this.optionsIsChange = true;
        return (0, _utils["default"])({
          textField: textField,
          valueField: valueField,
          idField: idField,
          disabledField: disabledField,
          multiple: multiple,
          data: (0, _mobx.toJS)(options),
          parentField: parentField,
          getConfig: this.getContextConfig
        });
      }

      return options || field && field.getOptions(this.record);
    }
  }, {
    key: "filteredOptions",
    get: function get() {
      var text = this.text;
      return this.searchData(this.cascadeOptions, text);
    } // 增加父级属性

  }, {
    key: "addOptionsParent",
    value: function addOptionsParent(options, parent) {
      var _this3 = this;

      if (options.length > 0) {
        return options.map(function (ele) {
          ele.parent = parent || undefined;

          if (ele.children) {
            _this3.addOptionsParent(ele.children, ele);
          }

          return ele;
        });
      }
    }
  }, {
    key: "primitive",
    get: function get() {
      return this.observableProps.primitiveValue !== false && this.getProp('type') !== _enum.FieldType.object;
    }
  }, {
    key: "checkValue",
    value: function checkValue() {
      var _this4 = this;

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

      this.checkComboReaction = (0, _mobx.reaction)(function () {
        return _this5.getValue();
      }, function (value) {
        return _this5.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: "componentWillUnmount",
    value: function componentWillUnmount() {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "componentWillUnmount", this).call(this);
      this.clearReaction();
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps, nextContext) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "componentWillReceiveProps", this).call(this, nextProps, nextContext);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      this.forcePopupAlign();
    }
  }, {
    key: "getOmitPropsKeys",
    value: function getOmitPropsKeys() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "getOmitPropsKeys", this).call(this).concat(['multiple', 'value', 'searchable', 'searchMatcher', 'name', 'dropdownMatchSelectWidth', 'dropdownMenuStyle', 'primitiveValue', 'notFoundContent', 'onOption', 'expandTrigger', 'dropdownMatchSelectWidth', 'menuMode', 'singleMenuStyle', 'singleMenuItemStyle', 'singlePleaseRender', 'singleMenuItemRender', 'onChoose', 'onUnChoose', 'changeOnSelect', 'pagingOptionContent', 'loadData', 'async', 'fieldNames', 'optionRenderer']);
    }
  }, {
    key: "getObservableProps",
    value: function getObservableProps(props, context) {
      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "getObservableProps", this).call(this, props, context)), {}, {
        children: props.children,
        options: props.options,
        searchable: props.searchable,
        searchMatcher: props.searchMatcher,
        primitiveValue: props.primitiveValue
      });
    }
  }, {
    key: "getMenuPrefixCls",
    value: function getMenuPrefixCls() {
      return "".concat(this.prefixCls, "-dropdown-menu");
    }
  }, {
    key: "getPagingOptionContent",
    value: function getPagingOptionContent() {
      var pagingOptionContent = this.props.pagingOptionContent;

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

      return this.getContextConfig('selectPagingOptionContent');
    }
  }, {
    key: "renderMultipleHolder",
    value: function renderMultipleHolder() {
      var name = this.name,
          multiple = this.multiple;

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

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

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

      return this.getContextConfig('renderEmpty')('Select');
    }
    /**
     * 返回一个打平tree返回层级
     * @param record
     * @param fn
     */

  }, {
    key: "findParentRecordTree",
    value: function findParentRecordTree(record, fn) {
      var recordTree = [];

      if (record) {
        if ((0, _isFunction["default"])(fn)) {
          recordTree.push(fn(record));
        } else {
          recordTree.push(record);
        }
      }

      if (record && record.parent) {
        if ((0, _isFunction["default"])(fn)) {
          return [].concat((0, _toConsumableArray2["default"])(this.findParentRecordTree(record.parent, fn)), recordTree);
        }

        return [].concat((0, _toConsumableArray2["default"])(this.findParentRecordTree(record.parent)), recordTree);
      }

      return recordTree;
    }
  }, {
    key: "handleLoadData",
    value: function handleLoadData(event) {
      var loadData = this.props.loadData;
      var dataSet = this.options;
      var promises = [];

      if (dataSet) {
        var _dataSet$props = dataSet.props,
            idField = _dataSet$props.idField,
            parentField = _dataSet$props.parentField;
        var record = event.value;

        if (idField && parentField && record && !record.children) {
          var id = record.get(idField);
          promises.push(dataSet.queryMore(-1, (0, _defineProperty2["default"])({}, parentField, id)));
        }
      }

      if (loadData) {
        promises.push(loadData(event));
      }

      return Promise.all(promises);
    }
    /**
     * 获取record 或者 obj对应的值
     * @param value
     * @param key
     */

  }, {
    key: "getRecordOrObjValue",
    value: function getRecordOrObjValue(value, key) {
      if (value instanceof _Record["default"]) {
        return value.get(key);
      }

      if ((0, _isObject["default"])(value)) {
        return value[key];
      }

      return value;
    }
    /**
     * 渲染menu 表格
     * @param menuProps
     */

  }, {
    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;
      } // 暂时不用考虑分组情况 groups


      var menuDisabled = this.disabled,
          textField = this.textField,
          valueField = this.valueField,
          _this$props = this.props,
          dropdownMenuStyle = _this$props.dropdownMenuStyle,
          expandTrigger = _this$props.expandTrigger,
          onOption = _this$props.onOption,
          menuMode = _this$props.menuMode,
          singleMenuStyle = _this$props.singleMenuStyle,
          singleMenuItemStyle = _this$props.singleMenuItemStyle,
          singlePleaseRender = _this$props.singlePleaseRender,
          changeOnSelect = _this$props.changeOnSelect,
          singleMenuItemRender = _this$props.singleMenuItemRender,
          async = _this$props.async,
          loadData = _this$props.loadData,
          fieldNames = _this$props.fieldNames;
      var optGroups = [];
      var selectedValues = []; // 过滤后的数据不用进行子集遍历

      var treePropsChange = function treePropsChange(treeRecord) {
        var isFilterSearch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
        var treeRecords = [];

        if (treeRecord.length > 0) {
          treeRecords = treeRecord.map(function (recordItem) {
            var value = _this6.getRecordOrObjValue(recordItem, valueField);

            var text = isFilterSearch ? _this6.treeTextToArray(recordItem).join('/') : _this6.getRecordOrObjValue(recordItem, textField);
            var optionProps = onOption ? onOption({
              dataSet: options,
              record: recordItem
            }) : undefined;
            var optionDisabled = menuDisabled || optionProps && optionProps.disabled;
            var key = getItemKey(recordItem, text, value);
            var children;

            if (recordItem.isSelected) {
              selectedValues.push(recordItem);
            }

            if (recordItem.children && !isFilterSearch) {
              children = treePropsChange(recordItem.children);
            }

            var isLeaf = async || !!loadData ? undefined : _this6.text ? !children || !children.length : !recordItem.children || !recordItem.children.length;

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

            return children ? (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
              disabled: optionDisabled,
              label: itemContent,
              value: recordItem,
              children: children,
              isLeaf: isLeaf
            }, optionProps), {}, {
              key: key
            }) : (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
              disabled: optionDisabled,
              label: itemContent,
              value: recordItem,
              isLeaf: isLeaf
            }, optionProps), {}, {
              key: key
            });
          });
        }

        return treeRecords;
      };

      if (this.text) {
        optGroups = treePropsChange((0, _utils.expandTreeRecords)(this.filteredOptions, !changeOnSelect), true);
      } else if (options) {
        optGroups = treePropsChange(options.treeData);
      } else {
        optGroups = [];
      }

      var getInputSelectedValue = function getInputSelectedValue(inputValue) {
        var activeInputValue = [];

        if ((0, _mobx.isArrayLike)(options)) {
          activeInputValue = _this6.findParentRecordTree(_this6.findActiveRecord(inputValue, _this6.options));
        } else if (options instanceof _DataSet["default"]) {
          activeInputValue = _this6.findParentRecordTree(_this6.findActiveRecord(inputValue, _this6.options.treeData));
        } else {
          activeInputValue = [];
        }

        return activeInputValue;
      };
      /**
       * 获取当前激活的 menuItem
       * 以及value 展示激活状态的判断
       * 按钮能够控制不受值的影响
       * inputValue: 输入框的值
       * activeValue: 激活值（choose和键盘影响）
       * this.popup:开启状态有激活值那么为激活值
       */


      var getActiveValue = function getActiveValue(inputValue) {
        var activeValue = [];

        if (!(0, _isEmpty["default"])(inputValue)) {
          if (inputValue && arraySameLike(_this6.treeValueToArray(_this6.activeValue), inputValue) || _this6.activeValue.children) {
            activeValue = _this6.findParentRecordTree(_this6.activeValue);
          } else if (_this6.activeValue) {
            activeValue = getInputSelectedValue(inputValue);
          }
        } else if (inputValue) {
          activeValue = _this6.findParentRecordTree(_this6.activeValue);
        }

        return activeValue;
      };

      if (this.popup && !(0, _isEmpty["default"])(this.activeValue)) {
        selectedValues = this.findParentRecordTree(this.activeValue);
      } else if (!this.multiple) {
        selectedValues = getActiveValue(this.getValues());
      } else if (this.getValues() && this.getValues().length > 0) {
        for (var i = this.getValues().length - 1; i >= 0; i--) {
          selectedValues = getActiveValue(this.getValues()[i]);

          if (!(0, _isEmpty["default"])(selectedValues)) {
            break;
          }
        }
      } else if (!(0, _isEmpty["default"])(this.activeValue)) {
        selectedValues = this.findParentRecordTree(this.activeValue);
      }

      var dropdownMenuStyleMerge = dropdownMenuStyle;

      if (this.itemMenuWidth > 0) {
        dropdownMenuStyleMerge = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, dropdownMenuStyle), {}, {
          width: (0, _UnitConvertor.pxToRem)(this.itemMenuWidth, true)
        });
      } // 由于想让多选出现不同展现这边增加一个selected属性来解决但是会造成一定的性能损耗


      var selectedValueMultiple;

      if (this.multiple) {
        var selectedMultiple = this.getValues().map(function (item) {
          return getInputSelectedValue(item);
        }).filter(function (recordItem) {
          return recordItem !== undefined && recordItem !== null;
        });
        selectedValueMultiple = Array.from(new Set(selectedMultiple.reduce(function (accumulator, currentValue) {
          return [].concat((0, _toConsumableArray2["default"])(accumulator), (0, _toConsumableArray2["default"])(currentValue));
        }, [])));
      }

      if (options.paging && options.currentPage < options.totalPage && menuMode !== _cascader2.MenuMode.single) {
        var menuPrefixCls = this.getMenuPrefixCls();
        optGroups.push({
          key: MORE_KEY,
          eventKey: MORE_KEY,
          label: this.getPagingOptionContent(),
          className: "".concat(menuPrefixCls, "-item ").concat(menuPrefixCls, "-item-more"),
          isLeaf: true
        });
      } // 渲染成单项选择还是多项选择组件以及空组件


      if (options && options.length && optGroups.length) {
        if (menuMode === _cascader2.MenuMode.single) {
          return /*#__PURE__*/_react["default"].createElement(_cascader.SingleMenu, (0, _extends2["default"])({}, menuProps, {
            fieldNames: fieldNames,
            defaultFieldNames: _Cascader2.defaultFieldNames,
            singleMenuStyle: singleMenuStyle,
            singleMenuItemStyle: singleMenuItemStyle,
            singlePleaseRender: singlePleaseRender,
            singleMenuItemRender: singleMenuItemRender,
            prefixCls: this.prefixCls,
            expandTrigger: expandTrigger,
            activeValue: selectedValues,
            selectedValues: selectedValueMultiple,
            options: optGroups,
            locale: {
              pleaseSelect: (0, _localeContext.$l)('Cascader', 'please_select')
            },
            onSelect: this.handleMenuSelect,
            isTabSelected: this.isClickTab,
            dropdownMenuColumnStyle: dropdownMenuStyleMerge,
            visible: this.popup
          }));
        }

        return /*#__PURE__*/_react["default"].createElement(_cascader.Menus, (0, _extends2["default"])({}, menuProps, {
          fieldNames: fieldNames,
          defaultFieldNames: _Cascader2.defaultFieldNames,
          prefixCls: this.prefixCls,
          expandTrigger: expandTrigger,
          activeValue: selectedValues,
          selectedValues: selectedValueMultiple,
          options: optGroups,
          onSelect: this.handleMenuSelect,
          dropdownMenuColumnStyle: dropdownMenuStyleMerge,
          visible: this.popup
        }));
      }

      return /*#__PURE__*/_react["default"].createElement("div", {
        key: "no_data"
      }, /*#__PURE__*/_react["default"].createElement("ul", {
        className: "".concat(this.prefixCls, "-menu"),
        style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, {
          height: 'auto'
        }), dropdownMenuStyleMerge)
      }, /*#__PURE__*/_react["default"].createElement("li", {
        className: "".concat(this.prefixCls, "-menu-item ").concat(this.prefixCls, "-menu-item-disabled")
      }, this.loading ? ' ' : this.getNotFoundContent())));
    }
  }, {
    key: "getMenuItem",
    value: function getMenuItem(_ref3) {
      var record = _ref3.record,
          text = _ref3.text,
          value = _ref3.value,
          isFilterSearch = _ref3.isFilterSearch;
      var options = this.options,
          optionRenderer = this.props.optionRenderer;
      return optionRenderer ? optionRenderer({
        dataSet: options,
        record: record,
        text: text,
        value: value,
        isFilterSearch: isFilterSearch
      }) : text;
    }
  }, {
    key: "searchable",
    get: function get() {
      return !!this.observableProps.searchable;
    }
  }, {
    key: "loading",
    get: function get() {
      return this.options.status === _enum.DataSetStatus.loading;
    }
  }, {
    key: "isEditable",
    value: function isEditable() {
      return (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "isEditable", this).call(this) && !!this.searchable;
    }
  }, {
    key: "getPopupContent",
    value: function getPopupContent() {
      var menu = /*#__PURE__*/_react["default"].createElement(_spin["default"], {
        key: "menu",
        spinning: this.loading
      }, this.getMenu());

      if (this.multiple) {
        return [/*#__PURE__*/_react["default"].createElement("div", {
          key: "check-all",
          className: "".concat(this.prefixCls, "-select-all-none")
        }, /*#__PURE__*/_react["default"].createElement("span", {
          onClick: this.chooseAll
        }, (0, _localeContext.$l)('Cascader', 'select_all')), /*#__PURE__*/_react["default"].createElement("span", {
          onClick: this.unChooseAll
        }, (0, _localeContext.$l)('Cascader', 'unselect_all'))), menu];
      }

      return menu;
    }
    /**
     * 增加 popupContent 回调参数 用于控制对应交互
     */

  }, {
    key: "getPopupProps",
    value: function getPopupProps() {
      var options = this.options,
          textField = this.textField,
          field = this.field,
          record = this.record,
          valueField = this.valueField;
      return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "getPopupProps", this).call(this)), {}, {
        dataSet: options,
        textField: textField,
        valueField: valueField,
        field: field,
        record: record,
        content: this.getPopupContent()
      });
    }
  }, {
    key: "getPopupStyleFromAlign",
    value: function getPopupStyleFromAlign(target) {
      if (target) {
        if (this.props.dropdownMatchSelectWidth) {
          var _target$getBoundingCl = target.getBoundingClientRect(),
              width = _target$getBoundingCl.width;

          this.setItemMenuWidth(width);
          return {
            minWidth: (0, _UnitConvertor.pxToRem)(width, true)
          };
        }

        return undefined;
      }
    }
  }, {
    key: "getTriggerIconFont",
    value: function getTriggerIconFont() {
      return this.searchable && this.isFocused ? 'search' : 'baseline-arrow_drop_down';
    }
  }, {
    key: "handleKeyDown",
    value: function handleKeyDown(e) {
      if (!this.disabled && !this.readOnly) {
        switch (e.keyCode) {
          case _KeyCode["default"].RIGHT:
            this.handleKeyLeftRightNext(e, 1);
            break;

          case _KeyCode["default"].DOWN:
            this.handleKeyDownPrevNext(e, 1);
            break;

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

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

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

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

          case _KeyCode["default"].ENTER:
            this.handleKeyDownEnter(e);
            break;

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

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

          default:
        }
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "handleKeyDown", this).call(this, e);
    } // 获取当前列第一个值和最后的值

  }, {
    key: "findTreeDataFirstLast",
    value: function findTreeDataFirstLast(options, activeValue, direction) {
      var nowIndexList = activeValue.parent ? activeValue.parent.children : options;

      if (nowIndexList.length > 0 && direction > 0) {
        return nowIndexList[nowIndexList.length - 1];
      }

      if (nowIndexList.length > 0 && direction < 0) {
        return nowIndexList[0];
      }

      return activeValue;
    } // 按键第一个和最后一个的位置

  }, {
    key: "handleKeyDownFirstLast",
    value: function handleKeyDownFirstLast(e, direction) {
      (0, _EventManager.stopEvent)(e);

      if ((0, _isEmpty["default"])((0, _mobx.toJS)(this.activeValue))) {
        this.setActiveValue(this.options.treeData[0]);
      } else {
        var activeItem = this.findTreeDataFirstLast(this.options.treeData, this.activeValue, direction);

        if (!this.editable || this.popup) {
          this.setActiveValue(activeItem);
        }
      }
    } // 查找同级位置

  }, {
    key: "findTreeDataUpDown",
    value: function findTreeDataUpDown(options, value, direction, fn) {
      var nowIndexList = value.parent ? value.parent.children : options;

      if ((0, _mobx.isArrayLike)(nowIndexList)) {
        var nowIndex = fn !== undefined ? fn : nowIndexList.findIndex(function (ele) {
          return ele.value === value;
        });
        var length = nowIndexList.length;

        if (nowIndex + direction >= length) {
          return nowIndexList[0];
        }

        if (nowIndex + direction < 0) {
          return nowIndexList[length - 1];
        }

        return nowIndexList[nowIndex + direction];
      }

      return value;
    }
  }, {
    key: "sameKeyRecordIndex",
    value: function sameKeyRecordIndex(options, activeValue, valueKey) {
      var nowIndexList = activeValue.parent ? activeValue.parent.children : options;
      return nowIndexList.findIndex(function (ele) {
        return ele[valueKey] === activeValue[valueKey];
      });
    } // 上下按键判断

  }, {
    key: "handleKeyDownPrevNext",
    value: function handleKeyDownPrevNext(e, direction) {
      if (!this.editable) {
        if ((0, _isEmpty["default"])((0, _mobx.toJS)(this.activeValue))) {
          this.setActiveValue(this.options.treeData[0]);
        } else {
          this.setActiveValue(this.findTreeDataUpDown(this.options.treeData, this.activeValue, direction, this.sameKeyRecordIndex(this.options.treeData, this.activeValue, 'key')));
        }

        e.preventDefault();
      } else if (e === _KeyCode["default"].DOWN) {
        this.expand();
        e.preventDefault();
      }
    } // 查找相邻的节点

  }, {
    key: "findTreeParentChidren",
    value: function findTreeParentChidren(_options, activeValue, direction) {
      if (direction > 0) {
        if (activeValue.children && activeValue.children.length > 0) {
          return activeValue.children[0];
        }

        return activeValue;
      }

      if (activeValue.parent) {
        return activeValue.parent;
      }

      return activeValue;
    }
  }, {
    key: "handleKeyLeftRightNext",
    value: function handleKeyLeftRightNext(e, direction) {
      if (!this.editable) {
        if ((0, _isEmpty["default"])((0, _mobx.toJS)(this.activeValue))) {
          this.setActiveValue(this.options.treeData[0]);
        } else {
          this.setActiveValue(this.findTreeParentChidren(this.options.treeData, this.activeValue, direction));
        }

        e.preventDefault();
      } else if (e === _KeyCode["default"].DOWN) {
        this.expand();
        e.preventDefault();
      }
    }
  }, {
    key: "handleKeyDownEnter",
    value: function handleKeyDownEnter(e) {
      if (this.popup && !this.editable) {
        var value = this.activeValue;

        if (this.isSelected(value) && this.multiple) {
          this.unChoose(value);
        } else if (value.children) {
          this.setPopup(true);
        } else if (value && !value.get(disabledField)) {
          this.choose(value);
        }
      }

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

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

      if (options && options.length) {
        (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "expand", this).call(this);
      }
    }
  }, {
    key: "syncValueOnBlur",
    value: function syncValueOnBlur(value) {
      if (!value && !this.multiple) {
        this.setValue(this.emptyValue);
      }
    }
  }, {
    key: "findByText",
    value: function findByText(text) {
      var _this7 = this;

      var textField = this.textField,
          changeOnSelect = this.props.changeOnSelect;

      var findTreeItem = function findTreeItem(options, valueItem, index) {
        var sameItemTreeNode;

        if (valueItem.length > 0) {
          sameItemTreeNode = options.find(function (ele) {
            return (0, _isSameLike["default"])(_this7.getRecordOrObjValue(ele, textField), (0, _isPlainObject["default"])(valueItem[index]) ? _ObjectChainValue["default"].get(valueItem[index], textField) : valueItem[index]);
          });

          if (sameItemTreeNode) {
            if (sameItemTreeNode.children && !(changeOnSelect && index === valueItem.length - 1)) {
              return findTreeItem(sameItemTreeNode.children, valueItem, ++index);
            }

            return sameItemTreeNode;
          }
        }
      };

      var textArray = text.split('/');

      if (textArray && textArray.length > 0) {
        if (this.options) {
          return findTreeItem(this.options.treeData, textArray, 0);
        }
      }
    }
  }, {
    key: "findByValue",
    value: function findByValue(value) {
      var _this8 = this;

      var valueField = this.valueField,
          changeOnSelect = this.props.changeOnSelect;

      var findTreeItem = function findTreeItem(options, valueItem, index) {
        var sameItemTreeNode;

        if (valueItem.length > 0) {
          sameItemTreeNode = options.find(function (ele) {
            return (0, _isSameLike["default"])(_this8.getRecordOrObjValue(ele, valueField), (0, _isPlainObject["default"])(valueItem[index]) ? _ObjectChainValue["default"].get(valueItem[index], valueField) : valueItem[index]);
          });

          if (sameItemTreeNode) {
            if (sameItemTreeNode.children && !(changeOnSelect && index === valueItem.length - 1)) {
              return findTreeItem(sameItemTreeNode.children, valueItem, ++index);
            }

            return sameItemTreeNode;
          }
        }
      };

      value = getSimpleValue(value, valueField);

      if (this.options && value) {
        return findTreeItem((0, _mobx.toJS)(this.options.treeData), (0, _mobx.toJS)(value), 0);
      }
    }
  }, {
    key: "isSelected",
    value: function isSelected(record) {
      var _this9 = this;

      var valueField = this.valueField; // 多值处理

      if (this.multiple) {
        return this.getValues().some(function (value) {
          var simpleValue = getSimpleValue(value, valueField);
          return arraySameLike(_this9.treeValueToArray(record), (0, _mobx.toJS)(simpleValue));
        });
      }

      var simpleValue = this.getValues();
      return arraySameLike(this.treeValueToArray(record), simpleValue);
    }
  }, {
    key: "generateComboOption",
    value: function generateComboOption(value, callback) {
      var _this10 = this;

      var textField = this.textField;

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

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

            if (text !== value && callback) {
              callback(text);
            }
          }
        }
      }
    }
  }, {
    key: "handlePopupAnimateAppear",
    value: function handlePopupAnimateAppear() {// noop
    }
  }, {
    key: "getValueKey",
    value: function getValueKey(v) {
      if ((0, _mobx.isArrayLike)(v)) {
        return v.map(this.getValueKey, this).join(',');
      }

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

      var value = getSimpleValue(v, this.valueField);
      return autoType && !(0, _isNil["default"])(value) ? value.toString() : value;
    }
  }, {
    key: "handlePopupAnimateEnd",
    value: function handlePopupAnimateEnd(_key, _exists) {// noop
    } // 触发下拉框事件,增加了触发方式判断优化trigger类型

  }, {
    key: "handleMenuSelect",
    value: function handleMenuSelect(targetOption, _menuIndex, isClickTab, trigger) {
      var _this$props2 = this.props,
          onChoose = _this$props2.onChoose,
          onUnChoose = _this$props2.onUnChoose,
          changeOnSelect = _this$props2.changeOnSelect,
          async = _this$props2.async,
          loadData = _this$props2.loadData;

      if (!targetOption || targetOption.disabled) {
        return;
      }

      if (targetOption.key === MORE_KEY) {
        var options = this.options;
        options.queryMore(options.currentPage + 1);
        return;
      } // 单选模式


      if (!this.isSelected(targetOption.value) || isClickTab || !this.multiple) {
        if (targetOption.children) {
          this.setPopup(true);
          this.setActiveValue(targetOption.value);
          this.setIsClickTab(isClickTab);

          if (changeOnSelect && _enum2.ExpandTrigger.click === trigger) {
            this.choose(targetOption.value, true);
          }

          if (onChoose) {
            onChoose(this.processRecordToObject(targetOption.value), targetOption.value);
          }
        } else {
          if (!targetOption.isLeaf && (async || !!loadData)) {
            var loadDataCallBack = async ? this.handleLoadData : loadData;

            if (changeOnSelect) {
              this.choose(targetOption.value, true);
            }

            this.setPopup(true);
            this.setActiveValue(targetOption.value);
            this.setIsClickTab(isClickTab);
            loadDataCallBack(targetOption);
            return;
          }

          if (!isClickTab) {
            this.setActiveValue(targetOption.value);
            this.choose(targetOption.value);

            if (onChoose) {
              onChoose(this.processRecordToObject(targetOption.value), targetOption.value);
            }
          } else {
            this.setPopup(true);
          }

          this.setIsClickTab(isClickTab);
        } // 多选模式

      } else {
        if (_enum2.ExpandTrigger.hover === trigger) {
          this.setActiveValue(targetOption.value);
          return;
        }

        this.setactiveEmpty();
        this.unChoose(targetOption.value);

        if (onUnChoose) {
          onUnChoose(this.processRecordToObject(targetOption.value), targetOption.value);
        }
      }
    }
  }, {
    key: "setactiveEmpty",
    value: function setactiveEmpty() {
      if (this.multiple) {
        this.setActiveValue([]);
      } else {
        this.setActiveValue({});
      }
    }
  }, {
    key: "handleOptionSelect",
    value: function handleOptionSelect(record) {
      this.prepareSetValue(this.processRecordToObject(record));
    }
  }, {
    key: "handleOptionUnSelect",
    value: function handleOptionUnSelect(record) {
      var newValue = this.treeValueToArray(record);
      this.removeValue(newValue, -1);
    } // 移除所选值

  }, {
    key: "removeValues",
    value: function removeValues(values) {
      var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;

      if (!this.multiple) {
        var oldValues = this.getValues();

        if (this.getValueKey(oldValues) === this.getValueKey(values[0])) {
          if (index === -1) {
            this.afterRemoveValue(values[0], 1);
            this.setValue([]);
          }
        }
      }

      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "removeValues", this).call(this, values, index);
      this.setactiveEmpty();
    }
  }, {
    key: "handleSearch",
    value: function handleSearch(_text) {// noop
    }
  }, {
    key: "setText",
    value: function setText(text) {
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "setText", this).call(this, text);

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

      if (field && (0, _isString["default"])(searchMatcher)) {
        field.setLovPara(searchMatcher, value === '' ? undefined : value);
      }
    }
  }, {
    key: "searchData",
    value: function searchData(data, text) {
      var _this11 = this;

      var searchable = this.searchable,
          searchMatcher = this.searchMatcher;
      return searchable && text && typeof searchMatcher === 'function' ? data.filter(function (r) {
        return _this11.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: "handleChange",
    value: function handleChange(e) {
      var _this12 = this;

      var value = e.target.value;
      this.setText(value);

      if (this.observableProps.combo) {
        this.generateComboOption(value, function (text) {
          return _this12.setText(text);
        });
      }

      if (!this.popup) {
        this.expand();
      }
    }
  }, {
    key: "processRecordToObject",
    value: function processRecordToObject(record) {
      var primitive = this.primitive;

      if (record && record.dataSet.getFromTree(0)) {
        return primitive ? this.treeValueToArray(record) : this.treeToArray(record);
      }
    }
    /**
     * 返回tree 的值的列表方法
     * @param record
     * @param allArray
     */

  }, {
    key: "treeValueToArray",
    value: function treeValueToArray(record, allArray) {
      var valueField = this.valueField;

      if (!allArray) {
        allArray = [];
      }

      if (record) {
        allArray = [this.getRecordOrObjValue(record, valueField)].concat((0, _toConsumableArray2["default"])(allArray));
      }

      if (record.parent) {
        return this.treeValueToArray(record.parent, allArray);
      }

      return allArray;
    }
    /**
     * 返回tree 的值的列表方法
     * @param record
     * @param allArray
     */

  }, {
    key: "treeTextToArray",
    value: function treeTextToArray(record, allArray) {
      var textField = this.textField;

      if (!allArray) {
        allArray = [];
      }

      if (record) {
        allArray = [this.getRecordOrObjValue(record, textField)].concat((0, _toConsumableArray2["default"])(allArray));
      }

      if (record.parent) {
        return this.treeTextToArray(record.parent, allArray);
      }

      return allArray;
    }
    /**
     * 返回tree 的值的列表方法
     * @param record
     * @param allArray
     */

  }, {
    key: "treeToArray",
    value: function treeToArray(record, allArray) {
      if (!allArray) {
        allArray = [];
      }

      if (record) {
        allArray = [record.toData()].concat((0, _toConsumableArray2["default"])(allArray));
      }

      if (record.parent) {
        return this.treeToArray(record.parent, allArray);
      }

      return allArray;
    }
  }, {
    key: "removeObjParentChild",
    value: function removeObjParentChild(obj) {
      if ((0, _isPlainObject["default"])(obj)) {
        var cloneObj = (0, _cloneDeep["default"])((0, _mobx.toJS)(obj));
        delete cloneObj.parent;
        delete cloneObj.children;
        return cloneObj;
      }

      return obj;
    }
  }, {
    key: "processObjectValue",
    value: function processObjectValue(value, textField) {
      if (!(0, _isNil["default"])(value)) {
        var found = this.findByValue(value);

        if (found && (0, _mobx.isArrayLike)(value)) {
          return this.treeTextToArray(found);
        }

        if ((0, _isPlainObject["default"])(value)) {
          return _ObjectChainValue["default"].get(value, textField);
        }
      }
    }
  }, {
    key: "processLookupValue",
    value: function processLookupValue(value) {
      var field = this.field,
          textField = this.textField,
          primitive = this.primitive;
      var processvalue = this.processObjectValue(value, textField);

      if ((0, _mobx.isArrayLike)(processvalue)) {
        return processvalue.join('/');
      }

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

  }, {
    key: "processValue",
    value: function processValue(value) {
      var text = this.processLookupValue(value);

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

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

      return text;
    }
  }, {
    key: "toValueString",
    value: function toValueString(value) {
      if ((0, _mobx.isArrayLike)(value)) {
        return value.join('/');
      }

      return value;
    }
  }, {
    key: "clear",
    value: function clear() {
      this.setText(undefined);
      this.setActiveValue({});
      (0, _get2["default"])((0, _getPrototypeOf2["default"])(Cascader.prototype), "clear", this).call(this);
    }
  }, {
    key: "addValue",
    value: function addValue() {
      for (var _len = arguments.length, values = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
        values[_key2] = arguments[_key2];
      }

      if (this.multiple) {
        var oldValues = this.getValues();

        if (values.length) {
          var oldValuesJS = oldValues.map(function (item) {
            return (0, _mobx.toJS)(item);
          });
          this.setValue([].concat((0, _toConsumableArray2["default"])(