@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/cascader/index.js

@@ -0,0 +1,972 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/cascader/foundation"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/cascader/constants");
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
+
+var _lodashEs = require("lodash-es");
+
+require("@douyinfe/semi-foundation/lib/cjs/cascader/cascader.css");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _util = require("@douyinfe/semi-foundation/lib/cjs/cascader/util");
+
+var _treeUtil = require("@douyinfe/semi-foundation/lib/cjs/tree/treeUtil");
+
+var _context4 = _interopRequireDefault(require("../configProvider/context"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _index = _interopRequireDefault(require("../input/index"));
+
+var _index2 = _interopRequireDefault(require("../popover/index"));
+
+var _item = _interopRequireDefault(require("./item"));
+
+var _trigger = _interopRequireDefault(require("../trigger"));
+
+var _tag = _interopRequireDefault(require("../tag"));
+
+var _tagInput = _interopRequireDefault(require("../tagInput"));
+
+var _utils = require("../_utils");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const prefixcls = _constants.cssClasses.PREFIX;
+const resetkey = 0;
+
+class Cascader extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.handleInputChange = value => {
+      this.foundation.handleInputChange(value);
+    };
+
+    this.handleTagRemove = (e, tagValuePath) => {
+      this.foundation.handleTagRemove(e, tagValuePath);
+    };
+
+    this.renderTagItem = (value, idx, type) => {
+      const {
+        keyEntities,
+        disabledKeys
+      } = this.state;
+      const {
+        size,
+        disabled,
+        displayProp,
+        displayRender,
+        disableStrictly
+      } = this.props;
+      const nodeKey = type === _constants.strings.IS_VALUE ? (0, _util.findKeysForValues)(value, keyEntities)[0] : value;
+      const isDsiabled = disabled || keyEntities[nodeKey].data.disabled || disableStrictly && disabledKeys.has(nodeKey);
+
+      if (!(0, _lodashEs.isEmpty)(keyEntities) && !(0, _lodashEs.isEmpty)(keyEntities[nodeKey])) {
+        const tagCls = (0, _classnames.default)("".concat(prefixcls, "-selection-tag"), {
+          ["".concat(prefixcls, "-selection-tag-disabled")]: isDsiabled
+        }); // custom render tags
+
+        if ((0, _lodashEs.isFunction)(displayRender)) {
+          return displayRender(keyEntities[nodeKey], idx); // default render tags
+        } else {
+          var _context;
+
+          return /*#__PURE__*/_react.default.createElement(_tag.default, {
+            size: size === 'default' ? 'large' : size,
+            key: (0, _concat.default)(_context = "tag-".concat(nodeKey, "-")).call(_context, idx),
+            color: "white",
+            className: tagCls,
+            closable: true,
+            onClose: (tagChildren, e) => {
+              // When value has not changed, prevent clicking tag closeBtn to close tag
+              e.preventDefault();
+              this.handleTagRemove(e, keyEntities[nodeKey].valuePath);
+            }
+          }, displayProp === 'label' && keyEntities[nodeKey].data.label, displayProp === 'value' && keyEntities[nodeKey].data.value);
+        }
+      }
+
+      return null;
+    };
+
+    this.handleItemClick = (e, item) => {
+      this.foundation.handleItemClick(e, item);
+    };
+
+    this.handleItemHover = (e, item) => {
+      this.foundation.handleItemHover(e, item);
+    };
+
+    this.onItemCheckboxClick = item => {
+      this.foundation.onItemCheckboxClick(item);
+    };
+
+    this.handleListScroll = (e, ind) => {
+      this.foundation.handleListScroll(e, ind);
+    };
+
+    this.renderContent = () => {
+      const {
+        inputValue,
+        isSearching,
+        activeKeys,
+        selectedKeys,
+        checkedKeys,
+        halfCheckedKeys,
+        loadedKeys,
+        loadingKeys
+      } = this.state;
+      const {
+        filterTreeNode,
+        dropdownClassName,
+        dropdownStyle,
+        loadData,
+        emptyContent,
+        topSlot,
+        bottomSlot,
+        showNext,
+        multiple
+      } = this.props;
+      const searchable = Boolean(filterTreeNode) && isSearching;
+      const popoverCls = (0, _classnames.default)(dropdownClassName, "".concat(prefixcls, "-popover"));
+      const renderData = this.foundation.getRenderData();
+
+      const content = /*#__PURE__*/_react.default.createElement("div", {
+        className: popoverCls,
+        role: "list-box",
+        style: dropdownStyle
+      }, topSlot, /*#__PURE__*/_react.default.createElement(_item.default, {
+        activeKeys: activeKeys,
+        selectedKeys: selectedKeys,
+        loadedKeys: loadedKeys,
+        loadingKeys: loadingKeys,
+        onItemClick: this.handleItemClick,
+        onItemHover: this.handleItemHover,
+        showNext: showNext,
+        onItemCheckboxClick: this.onItemCheckboxClick,
+        onListScroll: this.handleListScroll,
+        searchable: searchable,
+        keyword: inputValue,
+        emptyContent: emptyContent,
+        loadData: loadData,
+        data: renderData,
+        multiple: multiple,
+        checkedKeys: checkedKeys,
+        halfCheckedKeys: halfCheckedKeys
+      }), bottomSlot);
+
+      return content;
+    };
+
+    this.renderPlusN = hiddenTag => {
+      const {
+        disabled,
+        showRestTagsPopover,
+        restTagsPopoverProps
+      } = this.props;
+      const plusNCls = (0, _classnames.default)("".concat(prefixcls, "-selection-n"), {
+        ["".concat(prefixcls, "-selection-n-disabled")]: disabled
+      });
+
+      const renderPlusNChildren = /*#__PURE__*/_react.default.createElement("span", {
+        className: plusNCls
+      }, "+", hiddenTag.length);
+
+      return showRestTagsPopover && !disabled ? /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
+        content: hiddenTag,
+        showArrow: true,
+        trigger: "hover",
+        position: "top",
+        autoAdjustOverflow: true
+      }, restTagsPopoverProps), renderPlusNChildren) : renderPlusNChildren;
+    };
+
+    this.renderMultipleTags = () => {
+      var _context2;
+
+      const {
+        autoMergeValue,
+        maxTagCount
+      } = this.props;
+      const {
+        checkedKeys,
+        mergedCheckedKeys
+      } = this.state;
+      const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+      const displayTag = [];
+      const hiddenTag = [];
+      (0, _forEach.default)(_context2 = [...realKeys]).call(_context2, (checkedKey, idx) => {
+        const notExceedMaxTagCount = !(0, _lodashEs.isNumber)(maxTagCount) || maxTagCount >= idx + 1;
+        const item = this.renderTagItem(checkedKey, idx, _constants.strings.IS_KEY);
+
+        if (notExceedMaxTagCount) {
+          displayTag.push(item);
+        } else {
+          hiddenTag.push(item);
+        }
+      });
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, displayTag, !(0, _lodashEs.isEmpty)(hiddenTag) && this.renderPlusN(hiddenTag));
+    };
+
+    this.renderSelectContent = () => {
+      const {
+        placeholder,
+        filterTreeNode,
+        multiple
+      } = this.props;
+      const {
+        selectedKeys,
+        checkedKeys
+      } = this.state;
+      const searchable = Boolean(filterTreeNode);
+
+      if (!searchable) {
+        if (multiple) {
+          if ((0, _lodashEs.isEmpty)(checkedKeys)) {
+            return /*#__PURE__*/_react.default.createElement("span", {
+              className: "".concat(prefixcls, "-selection-placeholder")
+            }, placeholder);
+          }
+
+          return this.renderMultipleTags();
+        } else {
+          const displayText = selectedKeys.size ? this.foundation.renderDisplayText([...selectedKeys][0]) : '';
+          const spanCls = (0, _classnames.default)({
+            ["".concat(prefixcls, "-selection-placeholder")]: !displayText || !displayText.length
+          });
+          return /*#__PURE__*/_react.default.createElement("span", {
+            className: spanCls
+          }, displayText ? displayText : placeholder);
+        }
+      }
+
+      const input = multiple ? this.renderTagInput() : this.renderInput();
+      return input;
+    };
+
+    this.renderSuffix = () => {
+      const {
+        suffix
+      } = this.props;
+      const suffixWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixcls, "-suffix")]: true,
+        ["".concat(prefixcls, "-suffix-text")]: suffix && (0, _lodashEs.isString)(suffix),
+        ["".concat(prefixcls, "-suffix-icon")]: (0, _utils.isSemiIcon)(suffix)
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: suffixWrapperCls
+      }, suffix);
+    };
+
+    this.renderPrefix = () => {
+      const {
+        prefix,
+        insetLabel
+      } = this.props;
+      const labelNode = prefix || insetLabel;
+      const prefixWrapperCls = (0, _classnames.default)({
+        ["".concat(prefixcls, "-prefix")]: true,
+        // to be doublechecked
+        ["".concat(prefixcls, "-inset-label")]: insetLabel,
+        ["".concat(prefixcls, "-prefix-text")]: labelNode && (0, _lodashEs.isString)(labelNode),
+        ["".concat(prefixcls, "-prefix-icon")]: (0, _utils.isSemiIcon)(labelNode)
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: prefixWrapperCls
+      }, labelNode);
+    };
+
+    this.renderCustomTrigger = () => {
+      const {
+        disabled,
+        triggerRender
+      } = this.props;
+      const {
+        selectedKeys,
+        inputValue,
+        inputPlaceHolder
+      } = this.state;
+      return /*#__PURE__*/_react.default.createElement(_trigger.default, {
+        value: [...selectedKeys][0],
+        inputValue: inputValue,
+        onChange: this.handleInputChange,
+        onClear: this.handleClear,
+        placeholder: inputPlaceHolder,
+        disabled: disabled,
+        triggerRender: triggerRender,
+        componentName: 'Cascader',
+        componentProps: (0, _assign.default)({}, this.props)
+      });
+    };
+
+    this.handleMouseOver = () => {
+      this.foundation.toggleHoverState(true);
+    };
+
+    this.handleMouseLeave = () => {
+      this.foundation.toggleHoverState(false);
+    };
+
+    this.handleClear = e => {
+      e && e.stopPropagation();
+      this.foundation.handleClear();
+    };
+
+    this.showClearBtn = () => {
+      const {
+        showClear,
+        disabled,
+        multiple
+      } = this.props;
+      const {
+        selectedKeys,
+        isOpen,
+        isHovering,
+        checkedKeys
+      } = this.state;
+      const hasValue = selectedKeys.size;
+      const multipleWithHaveValue = multiple && checkedKeys.size;
+      return showClear && (hasValue || multipleWithHaveValue) && !disabled && (isOpen || isHovering);
+    };
+
+    this.renderClearBtn = () => {
+      const clearCls = (0, _classnames.default)("".concat(prefixcls, "-clearbtn"));
+      const allowClear = this.showClearBtn();
+
+      if (allowClear) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: clearCls,
+          onClick: this.handleClear
+        }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+      }
+
+      return null;
+    };
+
+    this.renderArrow = () => {
+      const {
+        arrowIcon
+      } = this.props;
+      const showClearBtn = this.showClearBtn();
+
+      if (showClearBtn) {
+        return null;
+      }
+
+      return arrowIcon ? /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)("".concat(prefixcls, "-arrow"))
+      }, arrowIcon) : null;
+    };
+
+    this.renderSelection = () => {
+      const {
+        disabled,
+        multiple,
+        filterTreeNode,
+        style,
+        size,
+        className,
+        validateStatus,
+        prefix,
+        suffix,
+        insetLabel,
+        triggerRender,
+        showClear
+      } = this.props;
+      const {
+        isOpen,
+        isFocus,
+        isInput,
+        checkedKeys
+      } = this.state;
+      const filterable = Boolean(filterTreeNode);
+      const useCustomTrigger = typeof triggerRender === 'function';
+      const classNames = useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)(prefixcls, className, {
+        ["".concat(prefixcls, "-focus")]: isFocus || isOpen && !isInput,
+        ["".concat(prefixcls, "-disabled")]: disabled,
+        ["".concat(prefixcls, "-single")]: true,
+        ["".concat(prefixcls, "-filterable")]: filterable,
+        ["".concat(prefixcls, "-error")]: validateStatus === 'error',
+        ["".concat(prefixcls, "-warning")]: validateStatus === 'warning',
+        ["".concat(prefixcls, "-small")]: size === 'small',
+        ["".concat(prefixcls, "-large")]: size === 'large',
+        ["".concat(prefixcls, "-with-prefix")]: prefix || insetLabel,
+        ["".concat(prefixcls, "-with-suffix")]: suffix
+      });
+      const mouseEvent = showClear ? {
+        onMouseEnter: () => this.handleMouseOver(),
+        onMouseLeave: () => this.handleMouseLeave()
+      } : {};
+      const sectionCls = (0, _classnames.default)("".concat(prefixcls, "-selection"), {
+        ["".concat(prefixcls, "-selection-multiple")]: multiple && !(0, _lodashEs.isEmpty)(checkedKeys)
+      });
+      const inner = useCustomTrigger ? this.renderCustomTrigger() : [/*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'prefix'
+      }, prefix || insetLabel ? this.renderPrefix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'selection'
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: sectionCls
+      }, this.renderSelectContent())), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'clearbtn'
+      }, this.renderClearBtn()), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'suffix'
+      }, suffix ? this.renderSuffix() : null), /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+        key: 'arrow'
+      }, this.renderArrow())];
+      return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({
+        className: classNames,
+        style: style,
+        ref: this.triggerRef,
+        onClick: e => this.foundation.handleClick(e)
+      }, mouseEvent), inner);
+    };
+
+    this.state = {
+      disabledKeys: new _set.default(),
+      isOpen: props.defaultOpen,
+
+      /* By changing rePosKey, the dropdown position can be refreshed */
+      rePosKey: resetkey,
+
+      /* A data structure for storing cascader data items */
+      keyEntities: {},
+
+      /* Selected and show tick icon */
+      selectedKeys: new _set.default([]),
+
+      /* The key of the activated node */
+      activeKeys: new _set.default([]),
+
+      /* The key of the filtered node */
+      filteredKeys: new _set.default([]),
+
+      /* Value of input box */
+      inputValue: '',
+
+      /* Is searching */
+      isSearching: false,
+
+      /* The placeholder of input box */
+      inputPlaceHolder: props.searchPlaceholder || props.placeholder,
+
+      /* Cache props */
+      prevProps: {},
+
+      /* Is hovering */
+      isHovering: false,
+
+      /* Key of checked node, when multiple */
+      checkedKeys: new _set.default([]),
+
+      /* Key of half checked node, when multiple */
+      halfCheckedKeys: new _set.default([]),
+
+      /* Auto merged checkedKeys, when multiple */
+      mergedCheckedKeys: new _set.default([]),
+
+      /* Keys of loaded item */
+      loadedKeys: new _set.default(),
+
+      /* Keys of loading item */
+      loadingKeys: new _set.default(),
+
+      /* Mark whether this rendering has triggered asynchronous loading of data */
+      loading: false
+    };
+    this.options = {};
+    this.isEmpty = false;
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
+    this.triggerRef = /*#__PURE__*/_react.default.createRef();
+    this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.clickOutsideHandler = null;
+    this.foundation = new _foundation.default(this.adapter);
+  }
+
+  get adapter() {
+    var _this = this;
+
+    const filterAdapter = {
+      updateInputValue: value => {
+        this.setState({
+          inputValue: value
+        });
+      },
+      updateInputPlaceHolder: value => {
+        this.setState({
+          inputPlaceHolder: value
+        });
+      },
+      focusInput: () => {
+        if (this.inputRef && this.inputRef.current) {
+          // TODO: check the reason
+          this.inputRef.current.focus();
+        }
+      }
+    };
+    const cascaderAdapter = {
+      registerClickOutsideHandler: cb => {
+        const clickOutsideHandler = e => {
+          const optionInstance = this.optionsRef && this.optionsRef.current;
+          const triggerDom = this.triggerRef && this.triggerRef.current;
+
+          const optionsDom = _reactDom.default.findDOMNode(optionInstance);
+
+          const target = e.target;
+
+          if (optionsDom && (!optionsDom.contains(target) || !optionsDom.contains(target.parentNode)) && triggerDom && !triggerDom.contains(target)) {
+            cb(e);
+          }
+        };
+
+        this.clickOutsideHandler = clickOutsideHandler;
+        document.addEventListener('mousedown', clickOutsideHandler, false);
+      },
+      unregisterClickOutsideHandler: () => {
+        document.removeEventListener('mousedown', this.clickOutsideHandler, false);
+      },
+      rePositionDropdown: () => {
+        let {
+          rePosKey
+        } = this.state;
+        rePosKey = rePosKey + 1;
+        this.setState({
+          rePosKey
+        });
+      }
+    };
+    return (0, _assign.default)((0, _assign.default)((0, _assign.default)((0, _assign.default)({}, super.adapter), filterAdapter), cascaderAdapter), {
+      updateStates: states => {
+        this.setState((0, _assign.default)({}, states));
+      },
+      openMenu: () => {
+        this.setState({
+          isOpen: true
+        });
+      },
+      closeMenu: cb => {
+        this.setState({
+          isOpen: false
+        }, () => {
+          cb && cb();
+        });
+      },
+      updateSelection: selectedKeys => this.setState({
+        selectedKeys
+      }),
+      notifyChange: value => {
+        this.props.onChange && this.props.onChange(value);
+      },
+      notifySelect: selected => {
+        this.props.onSelect && this.props.onSelect(selected);
+      },
+      notifyOnSearch: input => {
+        this.props.onSearch && this.props.onSearch(input);
+      },
+      notifyFocus: function () {
+        _this.props.onFocus && _this.props.onFocus(...arguments);
+      },
+      notifyBlur: function () {
+        _this.props.onBlur && _this.props.onBlur(...arguments);
+      },
+      notifyDropdownVisibleChange: visible => {
+        this.props.onDropdownVisibleChange(visible);
+      },
+      toggleHovering: bool => {
+        this.setState({
+          isHovering: bool
+        });
+      },
+      notifyLoadData: (selectedOpt, callback) => {
+        const {
+          loadData
+        } = this.props;
+
+        if (loadData) {
+          new _promise.default(resolve => {
+            loadData(selectedOpt).then(() => {
+              callback();
+              this.setState({
+                loading: false
+              });
+              resolve();
+            });
+          });
+        }
+      },
+      notifyOnLoad: (newLoadedKeys, data) => {
+        const {
+          onLoad
+        } = this.props;
+        onLoad && onLoad(newLoadedKeys, data);
+      },
+      notifyListScroll: (e, _ref) => {
+        let {
+          panelIndex,
+          activeNode
+        } = _ref;
+        this.props.onListScroll(e, {
+          panelIndex,
+          activeNode
+        });
+      },
+      notifyOnExceed: data => this.props.onExceed(data),
+      notifyClear: () => this.props.onClear()
+    });
+  }
+
+  static getDerivedStateFromProps(props, prevState) {
+    const {
+      multiple,
+      value,
+      defaultValue,
+      onChangeWithObject
+    } = props;
+    const {
+      prevProps
+    } = prevState;
+    let keyEntities = prevState.keyEntities || {};
+    const newState = {};
+
+    const needUpdate = name => {
+      const firstInProps = (0, _lodashEs.isEmpty)(prevProps) && name in props;
+      const nameHasChange = prevProps && !(0, _lodashEs.isEqual)(prevProps[name], props[name]);
+      return firstInProps || nameHasChange;
+    };
+
+    const needUpdateData = () => {
+      const firstInProps = !prevProps && 'treeData' in props;
+      const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
+      return firstInProps || treeDataHasChange;
+    };
+
+    const needUpdateTreeData = needUpdate('treeData') || needUpdateData();
+    const needUpdateValue = needUpdate('value') || (0, _lodashEs.isEmpty)(prevProps) && defaultValue;
+
+    if (multiple) {
+      // when value and treedata need updated
+      if (needUpdateTreeData || needUpdateValue) {
+        // update state.keyEntities
+        if (needUpdateTreeData) {
+          newState.treeData = props.treeData;
+          keyEntities = (0, _util.convertDataToEntities)(props.treeData);
+          newState.keyEntities = keyEntities;
+        }
+
+        let realKeys = prevState.checkedKeys; // when data was updated
+
+        if (needUpdateValue) {
+          // normallizedValue is used to save the value in two-dimensional array format
+          let normallizedValue = [];
+          const realValue = needUpdate('value') ? value : defaultValue; // eslint-disable-next-line max-depth
+
+          if ((0, _isArray.default)(realValue)) {
+            normallizedValue = (0, _isArray.default)(realValue[0]) ? realValue : [realValue];
+          } else {
+            normallizedValue = [[realValue]];
+          } // formatValuePath is used to save value of valuePath
+
+
+          const formatValuePath = [];
+          (0, _forEach.default)(normallizedValue).call(normallizedValue, valueItem => {
+            const formatItem = onChangeWithObject ? (0, _map.default)(valueItem).call(valueItem, i => i.value) : valueItem;
+            formatValuePath.push(formatItem);
+          }); // formatKeys is used to save key of value
+
+          const formatKeys = [];
+          (0, _forEach.default)(formatValuePath).call(formatValuePath, v => {
+            const formatKeyItem = (0, _util.findKeysForValues)(v, keyEntities);
+            !(0, _lodashEs.isEmpty)(formatKeyItem) && formatKeys.push(formatKeyItem);
+          });
+          realKeys = formatKeys;
+        }
+
+        let checkedKeys = new _set.default([]);
+        let halfCheckedKeys = new _set.default([]);
+        (0, _forEach.default)(realKeys).call(realKeys, v => {
+          const calRes = (0, _treeUtil.calcCheckedKeys)(v, keyEntities);
+          checkedKeys = new _set.default([...checkedKeys, ...calRes.checkedKeys]);
+          halfCheckedKeys = new _set.default([...halfCheckedKeys, ...calRes.halfCheckedKeys]);
+        }); // disableStrictly
+
+        if (props.disableStrictly) {
+          newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
+        }
+
+        newState.prevProps = props;
+        newState.checkedKeys = checkedKeys;
+        newState.halfCheckedKeys = halfCheckedKeys;
+        newState.mergedCheckedKeys = new _set.default((0, _treeUtil.normalizeKeyList)(checkedKeys, keyEntities));
+      }
+    }
+
+    return newState;
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  componentDidUpdate(prevProps) {
+    let isOptionsChanged = false;
+
+    if (!(0, _lodashEs.isEqual)(prevProps.treeData, this.props.treeData)) {
+      isOptionsChanged = true;
+      this.foundation.collectOptions();
+    }
+
+    if (prevProps.value !== this.props.value && !isOptionsChanged) {
+      this.foundation.handleValueChange(this.props.value);
+    }
+  }
+
+  renderTagInput() {
+    var _context3;
+
+    const {
+      size,
+      disabled,
+      autoMergeValue,
+      placeholder,
+      maxTagCount,
+      showRestTagsPopover,
+      restTagsPopoverProps
+    } = this.props;
+    const {
+      inputValue,
+      checkedKeys,
+      keyEntities,
+      mergedCheckedKeys
+    } = this.state;
+    const tagInputcls = (0, _classnames.default)("".concat(prefixcls, "-tagInput-wrapper"));
+    const tagValue = [];
+    const realKeys = autoMergeValue ? mergedCheckedKeys : checkedKeys;
+    (0, _forEach.default)(_context3 = [...realKeys]).call(_context3, checkedKey => {
+      if (!(0, _lodashEs.isEmpty)(keyEntities[checkedKey])) {
+        tagValue.push(keyEntities[checkedKey].valuePath);
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement(_tagInput.default, {
+      className: tagInputcls,
+      ref: this.inputRef,
+      disabled: disabled,
+      size: size,
+      // TODO Modify logic, not modify type
+      value: tagValue,
+      showRestTagsPopover: showRestTagsPopover,
+      restTagsPopoverProps: restTagsPopoverProps,
+      maxTagCount: maxTagCount,
+      renderTagItem: (value, index) => this.renderTagItem(value, index, _constants.strings.IS_VALUE),
+      inputValue: inputValue,
+      onInputChange: this.handleInputChange,
+      // TODO Modify logic, not modify type
+      onRemove: v => this.handleTagRemove(null, v),
+      placeholder: placeholder
+    });
+  }
+
+  renderInput() {
+    const {
+      size,
+      disabled
+    } = this.props;
+    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"));
+    const {
+      inputValue,
+      inputPlaceHolder
+    } = this.state;
+    const inputProps = {
+      disabled,
+      value: inputValue,
+      className: inputcls,
+      onChange: this.handleInputChange,
+      placeholder: inputPlaceHolder
+    };
+    const wrappercls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-search-wrapper")]: true
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: wrappercls
+    }, /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+      ref: this.inputRef,
+      size: size
+    }, inputProps)));
+  }
+
+  render() {
+    const {
+      zIndex,
+      getPopupContainer,
+      autoAdjustOverflow,
+      stopPropagation,
+      mouseLeaveDelay,
+      mouseEnterDelay
+    } = this.props;
+    const {
+      isOpen,
+      rePosKey
+    } = this.state;
+    const {
+      direction
+    } = this.context;
+    const content = this.renderContent();
+    const selection = this.renderSelection();
+    const pos = direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+    const mergedMotion = this.foundation.getMergedMotion();
+    return /*#__PURE__*/_react.default.createElement(_index2.default, {
+      getPopupContainer: getPopupContainer,
+      zIndex: zIndex,
+      motion: mergedMotion,
+      ref: this.optionsRef,
+      content: content,
+      visible: isOpen,
+      trigger: "custom",
+      rePosKey: rePosKey,
+      position: pos,
+      autoAdjustOverflow: autoAdjustOverflow,
+      stopPropagation: stopPropagation,
+      mouseLeaveDelay: mouseLeaveDelay,
+      mouseEnterDelay: mouseEnterDelay
+    }, selection);
+  }
+
+}
+
+Cascader.contextType = _context4.default;
+Cascader.propTypes = {
+  arrowIcon: _propTypes.default.node,
+  changeOnSelect: _propTypes.default.bool,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  disabled: _propTypes.default.bool,
+  dropdownClassName: _propTypes.default.string,
+  dropdownStyle: _propTypes.default.object,
+  emptyContent: _propTypes.default.node,
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+
+  /* show search input, if passed in a function, used as custom filter */
+  filterTreeNode: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  filterLeafOnly: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  searchPlaceholder: _propTypes.default.string,
+  size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  treeData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    label: _propTypes.default.any
+  })),
+  treeNodeFilterProp: _propTypes.default.string,
+  suffix: _propTypes.default.node,
+  prefix: _propTypes.default.node,
+  insetLabel: _propTypes.default.node,
+  displayProp: _propTypes.default.string,
+  displayRender: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onSearch: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  children: _propTypes.default.node,
+  getPopupContainer: _propTypes.default.func,
+  zIndex: _propTypes.default.number,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array]),
+  validateStatus: _propTypes.default.oneOf(_constants.strings.VALIDATE_STATUS),
+  showNext: _propTypes.default.oneOf([_constants.strings.SHOW_NEXT_BY_CLICK, _constants.strings.SHOW_NEXT_BY_HOVER]),
+  stopPropagation: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  showClear: _propTypes.default.bool,
+  defaultOpen: _propTypes.default.bool,
+  autoAdjustOverflow: _propTypes.default.bool,
+  onDropdownVisibleChange: _propTypes.default.func,
+  triggerRender: _propTypes.default.func,
+  onListScroll: _propTypes.default.func,
+  onChangeWithObject: _propTypes.default.bool,
+  bottomSlot: _propTypes.default.node,
+  topSlot: _propTypes.default.node,
+  multiple: _propTypes.default.bool,
+  autoMergeValue: _propTypes.default.bool,
+  maxTagCount: _propTypes.default.number,
+  showRestTagsPopover: _propTypes.default.bool,
+  restTagsPopoverProps: _propTypes.default.object,
+  max: _propTypes.default.number,
+  onExceed: _propTypes.default.func,
+  onClear: _propTypes.default.func,
+  loadData: _propTypes.default.func,
+  onLoad: _propTypes.default.func,
+  loadedKeys: _propTypes.default.array,
+  disableStrictly: _propTypes.default.bool
+};
+Cascader.defaultProps = {
+  arrowIcon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconChevronDown, null),
+  stopPropagation: true,
+  motion: true,
+  defaultOpen: false,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  showClear: false,
+  autoClearSearchValue: true,
+  changeOnSelect: false,
+  disabled: false,
+  disableStrictly: false,
+  autoMergeValue: true,
+  multiple: false,
+  filterTreeNode: false,
+  filterLeafOnly: true,
+  showRestTagsPopover: false,
+  restTagsPopoverProps: {},
+  size: 'default',
+  treeNodeFilterProp: 'label',
+  displayProp: 'label',
+  treeData: [],
+  showNext: _constants.strings.SHOW_NEXT_BY_CLICK,
+  onExceed: _lodashEs.noop,
+  onClear: _lodashEs.noop,
+  onDropdownVisibleChange: _lodashEs.noop,
+  onListScroll: _lodashEs.noop
+};
+var _default = Cascader;
+exports.default = _default;