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

package/lib/cjs/tree/index.js

@@ -0,0 +1,799 @@
+"use strict";
+
+var _context2;
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$keys2 = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _exportNames = {};
+exports.default = void 0;
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _context = _interopRequireDefault(require("../configProvider/context"));
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/tree/foundation"));
+
+var _treeUtil = require("@douyinfe/semi-foundation/lib/cjs/tree/treeUtil");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tree/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _treeUtil2 = require("./treeUtil");
+
+var _index = _interopRequireDefault(require("../input/index"));
+
+var _reactWindow = require("react-window");
+
+var _autoSizer = _interopRequireDefault(require("./autoSizer"));
+
+var _treeContext = _interopRequireDefault(require("./treeContext"));
+
+var _treeNode = _interopRequireDefault(require("./treeNode"));
+
+var _nodeList = _interopRequireDefault(require("./nodeList"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+require("@douyinfe/semi-foundation/lib/cjs/tree/tree.css");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+var _interface = require("./interface");
+
+_forEachInstanceProperty(_context2 = _Object$keys2(_interface)).call(_context2, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interface[key]) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _interface[key];
+    }
+  });
+});
+
+/* eslint-disable max-lines-per-function */
+const prefixcls = _constants.cssClasses.PREFIX;
+
+class Tree extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.search = value => {
+      this.foundation.handleInputChange(value);
+    };
+
+    this.renderEmpty = () => {
+      const {
+        emptyContent
+      } = this.props;
+
+      if (emptyContent) {
+        return /*#__PURE__*/_react.default.createElement(_treeNode.default, {
+          empty: true,
+          emptyContent: this.props.emptyContent
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+          componentName: "Tree"
+        }, locale => /*#__PURE__*/_react.default.createElement(_treeNode.default, {
+          empty: true,
+          emptyContent: (0, _get2.default)(locale, 'emptyText')
+        }));
+      }
+    };
+
+    this.onNodeSelect = (e, treeNode) => {
+      this.foundation.handleNodeSelect(e, treeNode);
+    };
+
+    this.onNodeLoad = data => new _promise.default(resolve => {
+      // We need to get the latest state of loading/loaded keys
+      this.setState(_ref => {
+        let {
+          loadedKeys = new _set.default([]),
+          loadingKeys = new _set.default([])
+        } = _ref;
+        return this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve);
+      });
+    });
+
+    this.onNodeCheck = (e, treeNode) => {
+      this.foundation.handleNodeSelect(e, treeNode);
+    };
+
+    this.onNodeExpand = (e, treeNode) => {
+      this.foundation.handleNodeExpand(e, treeNode);
+    };
+
+    this.onNodeRightClick = (e, treeNode) => {
+      this.foundation.handleNodeRightClick(e, treeNode);
+    };
+
+    this.onNodeDoubleClick = (e, treeNode) => {
+      this.foundation.handleNodeDoubleClick(e, treeNode);
+    };
+
+    this.onNodeDragStart = (e, treeNode) => {
+      this.foundation.handleNodeDragStart(e, treeNode);
+    };
+
+    this.onNodeDragEnter = (e, treeNode) => {
+      this.foundation.handleNodeDragEnter(e, treeNode, this.dragNode);
+    };
+
+    this.onNodeDragOver = (e, treeNode) => {
+      this.foundation.handleNodeDragOver(e, treeNode, this.dragNode);
+    };
+
+    this.onNodeDragLeave = (e, treeNode) => {
+      this.foundation.handleNodeDragLeave(e, treeNode);
+    };
+
+    this.onNodeDragEnd = (e, treeNode) => {
+      this.foundation.handleNodeDragEnd(e, treeNode);
+    };
+
+    this.onNodeDrop = (e, treeNode) => {
+      this.foundation.handleNodeDrop(e, treeNode, this.dragNode);
+    };
+
+    this.getTreeNodeRequiredProps = () => {
+      const {
+        expandedKeys,
+        selectedKeys,
+        checkedKeys,
+        halfCheckedKeys,
+        keyEntities,
+        filteredKeys
+      } = this.state;
+      return {
+        expandedKeys: expandedKeys || new _set.default(),
+        selectedKeys: selectedKeys || [],
+        checkedKeys: checkedKeys || new _set.default(),
+        halfCheckedKeys: halfCheckedKeys || new _set.default(),
+        filteredKeys: filteredKeys || new _set.default(),
+        keyEntities
+      };
+    };
+
+    this.getTreeNodeKey = treeNode => {
+      const {
+        data
+      } = treeNode;
+      const {
+        key
+      } = data;
+      return key;
+    };
+
+    this.renderTreeNode = (treeNode, ind, style) => {
+      const {
+        data
+      } = treeNode;
+      const {
+        key
+      } = data;
+      const treeNodeProps = this.foundation.getTreeNodeProps(key);
+
+      if (!treeNodeProps) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_treeNode.default, (0, _assign.default)({}, treeNodeProps, data, {
+        key: key,
+        data: data,
+        style: (0, _isEmpty2.default)(style) ? {} : style
+      }));
+    };
+
+    this.itemKey = (index, data) => {
+      // Find the item at the specified index.
+      const item = data[index]; // Return a value that uniquely identifies this item.
+
+      return item.key;
+    };
+
+    this.state = {
+      inputValue: '',
+      keyEntities: {},
+      treeData: [],
+      flattenNodes: [],
+      selectedKeys: [],
+      checkedKeys: new _set.default(),
+      halfCheckedKeys: new _set.default(),
+      motionKeys: new _set.default([]),
+      motionType: 'hide',
+      expandedKeys: new _set.default(props.expandedKeys),
+      filteredKeys: new _set.default(),
+      filteredExpandedKeys: new _set.default(),
+      filteredShownKeys: new _set.default(),
+      prevProps: null,
+      loadedKeys: new _set.default(),
+      loadingKeys: new _set.default(),
+      cachedFlattenNodes: undefined,
+      cachedKeyValuePairs: {},
+      disabledKeys: new _set.default(),
+      dragging: false,
+      dragNodesKeys: new _set.default(),
+      dragOverNodeKey: null,
+      dropPosition: null
+    };
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
+    this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.foundation = new _foundation.default(this.adapter);
+    this.dragNode = null;
+  }
+  /**
+   * Process of getDerivedStateFromProps was inspired by rc-tree
+   * https://github.com/react-component/tree
+   */
+
+
+  static getDerivedStateFromProps(props, prevState) {
+    const {
+      prevProps
+    } = prevState;
+    let treeData;
+    let keyEntities = prevState.keyEntities || {};
+    let valueEntities = prevState.cachedKeyValuePairs || {};
+    const isSeaching = Boolean(props.filterTreeNode && prevState.inputValue && prevState.inputValue.length);
+    const newState = {
+      prevProps: props
+    }; // Accept a props field as a parameter to determine whether to update the field
+
+    const needUpdate = name => {
+      const firstInProps = !prevProps && name in props;
+      const nameHasChange = prevProps && !(0, _isEqual2.default)(prevProps[name], props[name]);
+      return firstInProps || nameHasChange;
+    }; // Determine whether treeData has changed
+
+
+    const needUpdateData = () => {
+      const firstInProps = !prevProps && 'treeData' in props;
+      const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
+      return firstInProps || treeDataHasChange;
+    }; // Update the data of tree in state
+
+
+    if (needUpdate('treeData') || props.draggable && needUpdateData()) {
+      // eslint-disable-next-line prefer-destructuring
+      treeData = props.treeData;
+      newState.treeData = treeData;
+      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
+      newState.keyEntities = (0, _assign.default)({}, entitiesMap.keyEntities);
+      keyEntities = newState.keyEntities;
+      newState.cachedKeyValuePairs = (0, _assign.default)({}, entitiesMap.valueEntities);
+      valueEntities = newState.cachedKeyValuePairs;
+    } else if (needUpdate('treeDataSimpleJson')) {
+      // Convert treeDataSimpleJson to treeData
+      treeData = (0, _treeUtil.convertJsonToData)(props.treeDataSimpleJson);
+      newState.treeData = treeData;
+      const entitiesMap = (0, _treeUtil.convertDataToEntities)(treeData);
+      newState.keyEntities = (0, _assign.default)({}, entitiesMap.keyEntities);
+      keyEntities = newState.keyEntities;
+      newState.cachedKeyValuePairs = (0, _assign.default)({}, entitiesMap.valueEntities);
+      valueEntities = newState.cachedKeyValuePairs;
+    } // If treeData keys changes, we won't show animation
+
+
+    if (treeData && props.motion) {
+      if (prevProps && props.motion) {
+        newState.motionKeys = new _set.default([]);
+        newState.motionType = null;
+      }
+    }
+
+    const expandAllWhenDataChange = (needUpdate('treeDataSimpleJson') || needUpdate('treeData')) && props.expandAll;
+
+    if (!isSeaching) {
+      // Update expandedKeys
+      if (needUpdate('expandedKeys') || prevProps && needUpdate('autoExpandParent')) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps); // only show animation when treeData does not change
+
+        if (prevProps && props.motion && !treeData) {
+          const {
+            motionKeys,
+            motionType
+          } = (0, _treeUtil.calcMotionKeys)(prevState.expandedKeys, newState.expandedKeys, keyEntities);
+          newState.motionKeys = new _set.default(motionKeys);
+          newState.motionType = motionType;
+
+          if (motionType === 'hide') {
+            // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+            newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
+          }
+        }
+      } else if (!prevProps && (props.defaultExpandAll || props.expandAll) || expandAllWhenDataChange) {
+        newState.expandedKeys = new _set.default((0, _keys.default)(keyEntities));
+      } else if (!prevProps && props.defaultExpandedKeys) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeys)(props.defaultExpandedKeys, keyEntities);
+      } else if (!prevProps && props.defaultValue) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.defaultValue, keyEntities, props.multiple, valueEntities);
+      } else if (!prevProps && props.value) {
+        newState.expandedKeys = (0, _treeUtil.calcExpandedKeysForValues)(props.value, keyEntities, props.multiple, valueEntities);
+      }
+
+      if (!newState.expandedKeys) {
+        delete newState.expandedKeys;
+      } // Update flattenNodes
+
+
+      if (treeData || newState.expandedKeys) {
+        const flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
+        newState.flattenNodes = flattenNodes;
+      }
+    } else {
+      let filteredState; // treeData changed while searching
+
+      if (treeData) {
+        // Get filter data
+        filteredState = (0, _treeUtil.filterTreeData)({
+          treeData,
+          inputValue: prevState.inputValue,
+          filterTreeNode: props.filterTreeNode,
+          filterProps: props.treeNodeFilterProp,
+          showFilteredOnly: props.showFilteredOnly,
+          keyEntities: newState.keyEntities,
+          prevExpandedKeys: [...prevState.filteredExpandedKeys]
+        });
+        newState.flattenNodes = filteredState.flattenNodes;
+        newState.motionKeys = new _set.default([]);
+        newState.filteredKeys = filteredState.filteredKeys;
+        newState.filteredShownKeys = filteredState.filteredShownKeys;
+        newState.filteredExpandedKeys = filteredState.filteredExpandedKeys;
+      } // expandedKeys changed while searching
+
+
+      if (props.expandedKeys) {
+        newState.filteredExpandedKeys = (0, _treeUtil.calcExpandedKeys)(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+
+        if (prevProps && props.motion) {
+          const prevKeys = prevState ? prevState.filteredExpandedKeys : new _set.default([]); // only show animation when treeData does not change
+
+          if (!treeData) {
+            const motionResult = (0, _treeUtil.calcMotionKeys)(prevKeys, newState.filteredExpandedKeys, keyEntities);
+            let {
+              motionKeys
+            } = motionResult;
+            const {
+              motionType
+            } = motionResult;
+
+            if (props.showFilteredOnly) {
+              motionKeys = (0, _filter.default)(motionKeys).call(motionKeys, key => prevState.filteredShownKeys.has(key));
+            }
+
+            if (motionType === 'hide') {
+              // cache flatten nodes: expandedKeys changed may not be triggered by interaction
+              newState.cachedFlattenNodes = (0, _treeUtil2.cloneDeep)(prevState.flattenNodes);
+            }
+
+            newState.motionKeys = new _set.default(motionKeys);
+            newState.motionType = motionType;
+          }
+        }
+
+        newState.flattenNodes = (0, _treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, props.showFilteredOnly && prevState.filteredShownKeys);
+      }
+    } // Handle single selection and multiple selection in controlled mode
+
+
+    const withObject = props.onChangeWithObject;
+    const isMultiple = props.multiple;
+
+    if (!isMultiple) {
+      // When getting single selection, the selected node
+      if (needUpdate('value')) {
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)( // In both cases whether withObject is turned on, the value is standardized to string
+        (0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+      } else if (!prevProps && props.defaultValue) {
+        newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+      } else if (treeData) {
+        // If `treeData` changed, we also need check it
+        if (props.value) {
+          newState.selectedKeys = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || '', valueEntities, isMultiple);
+        }
+      }
+    } else {
+      let checkedKeyValues; // Get the selected node during multiple selection
+
+      if (needUpdate('value')) {
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject), valueEntities, isMultiple);
+      } else if (!prevProps && props.defaultValue) {
+        checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.defaultValue, withObject), valueEntities, isMultiple);
+      } else if (treeData) {
+        // If `treeData` changed, we also need check it
+        if (props.value) {
+          checkedKeyValues = (0, _treeUtil.findKeysForValues)((0, _treeUtil.normalizeValue)(props.value, withObject) || [], valueEntities, isMultiple);
+        } else {
+          checkedKeyValues = (0, _treeUtil.updateKeys)(prevState.checkedKeys, keyEntities);
+        }
+      }
+
+      if (checkedKeyValues) {
+        const {
+          checkedKeys,
+          halfCheckedKeys
+        } = (0, _treeUtil.calcCheckedKeys)(checkedKeyValues, keyEntities);
+        newState.checkedKeys = checkedKeys;
+        newState.halfCheckedKeys = halfCheckedKeys;
+      }
+    } // update loadedKeys
+
+
+    if (needUpdate('loadedKeys')) {
+      newState.loadedKeys = new _set.default(props.loadedKeys);
+    } // update disableStrictly
+
+
+    if (treeData && props.disableStrictly) {
+      newState.disabledKeys = (0, _treeUtil.calcDisabledKeys)(keyEntities);
+    }
+
+    return newState;
+  }
+
+  get adapter() {
+    const filterAdapter = {
+      updateInputValue: value => {
+        this.setState({
+          inputValue: value
+        });
+      },
+      focusInput: () => {
+        if (this.inputRef && this.inputRef.current) {
+          this.inputRef.current.focus();
+        }
+      }
+    };
+    return (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, super.adapter), filterAdapter), {
+      updateState: states => {
+        this.setState((0, _assign.default)({}, states));
+      },
+      notifyExpand: (expandedKeys, _ref2) => {
+        let {
+          expanded: bool,
+          node
+        } = _ref2;
+        this.props.onExpand && this.props.onExpand([...expandedKeys], {
+          expanded: bool,
+          node
+        });
+
+        if (bool && this.props.loadData) {
+          this.onNodeLoad(node);
+        }
+      },
+      notifySelect: (selectKey, bool, node) => {
+        this.props.onSelect && this.props.onSelect(selectKey, bool, node);
+      },
+      notifyChange: value => {
+        this.props.onChange && this.props.onChange(value);
+      },
+      notifySearch: input => {
+        this.props.onSearch && this.props.onSearch(input);
+      },
+      notifyRightClick: (e, node) => {
+        this.props.onContextMenu && this.props.onContextMenu(e, node);
+      },
+      notifyDoubleClick: (e, node) => {
+        this.props.onDoubleClick && this.props.onDoubleClick(e, node);
+      },
+      cacheFlattenNodes: bool => {
+        this.setState({
+          cachedFlattenNodes: bool ? (0, _treeUtil2.cloneDeep)(this.state.flattenNodes) : undefined
+        });
+      },
+      setDragNode: treeNode => {
+        this.dragNode = treeNode;
+      }
+    });
+  }
+
+  renderInput() {
+    const {
+      searchClassName,
+      searchStyle,
+      searchRender,
+      searchPlaceholder,
+      showClear
+    } = this.props;
+    const inputcls = (0, _classnames.default)("".concat(prefixcls, "-input"));
+    const {
+      inputValue
+    } = this.state;
+    const inputProps = {
+      value: inputValue,
+      className: inputcls,
+      onChange: value => this.search(value),
+      prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null),
+      showClear,
+      placeholder: searchPlaceholder
+    };
+    const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-search-wrapper"), searchClassName);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperCls,
+      style: searchStyle
+    }, /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Tree"
+    }, locale => {
+      inputProps.placeholder = searchPlaceholder || (0, _get2.default)(locale, 'searchPlaceholder');
+
+      if ((0, _isFunction2.default)(searchRender)) {
+        return searchRender((0, _assign.default)({}, inputProps));
+      }
+
+      if (searchRender === false) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+        ref: this.inputRef
+      }, inputProps));
+    }));
+  }
+
+  renderNodeList() {
+    const {
+      flattenNodes,
+      cachedFlattenNodes,
+      motionKeys,
+      motionType
+    } = this.state;
+    const {
+      virtualize,
+      motion
+    } = this.props;
+    const {
+      direction
+    } = this.context;
+
+    if ((0, _isEmpty2.default)(flattenNodes)) {
+      return undefined;
+    }
+
+    if (!virtualize || (0, _isEmpty2.default)(virtualize)) {
+      return /*#__PURE__*/_react.default.createElement(_nodeList.default, {
+        flattenNodes: flattenNodes,
+        flattenList: cachedFlattenNodes,
+        motionKeys: motion ? motionKeys : new _set.default([]),
+        motionType: motionType,
+        onMotionEnd: this.onMotionEnd,
+        renderTreeNode: this.renderTreeNode
+      });
+    }
+
+    const option = _ref3 => {
+      let {
+        index,
+        style,
+        data
+      } = _ref3;
+      return this.renderTreeNode(data[index], index, style);
+    };
+
+    return /*#__PURE__*/_react.default.createElement(_autoSizer.default, {
+      defaultHeight: virtualize.height,
+      defaultWidth: virtualize.width
+    }, _ref4 => {
+      let {
+        height,
+        width
+      } = _ref4;
+      return /*#__PURE__*/_react.default.createElement(_reactWindow.FixedSizeList, {
+        itemCount: flattenNodes.length,
+        itemSize: virtualize.itemSize,
+        height: height,
+        width: width,
+        itemKey: this.itemKey,
+        itemData: flattenNodes,
+        className: "".concat(prefixcls, "-virtual-list"),
+        style: {
+          direction
+        }
+      }, option);
+    });
+  }
+
+  render() {
+    const {
+      keyEntities,
+      motionKeys,
+      motionType,
+      inputValue,
+      filteredKeys,
+      dragOverNodeKey,
+      dropPosition
+    } = this.state;
+    const {
+      blockNode,
+      className,
+      style,
+      filterTreeNode,
+      disabled,
+      icon,
+      directory,
+      multiple,
+      showFilteredOnly,
+      motion,
+      expandAction,
+      loadData,
+      renderLabel,
+      draggable,
+      renderFullLabel,
+      labelEllipsis,
+      virtualize
+    } = this.props;
+    const wrapperCls = (0, _classnames.default)("".concat(prefixcls, "-wrapper"), className);
+    const listCls = (0, _classnames.default)("".concat(prefixcls, "-option-list"), {
+      ["".concat(prefixcls, "-option-list-block")]: blockNode
+    });
+    const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
+    const noData = (0, _isEmpty2.default)(keyEntities) || showFilteredOnly && searchNoRes;
+    return /*#__PURE__*/_react.default.createElement(_treeContext.default.Provider, {
+      value: {
+        treeDisabled: disabled,
+        treeIcon: icon,
+        motion,
+        motionKeys,
+        motionType,
+        filterTreeNode,
+        keyEntities,
+        onNodeClick: this.onNodeClick,
+        onNodeExpand: this.onNodeExpand,
+        onNodeSelect: this.onNodeSelect,
+        onNodeCheck: this.onNodeCheck,
+        onNodeRightClick: this.onNodeRightClick,
+        onNodeDoubleClick: this.onNodeDoubleClick,
+        renderTreeNode: this.renderTreeNode,
+        onNodeDragStart: this.onNodeDragStart,
+        onNodeDragEnter: this.onNodeDragEnter,
+        onNodeDragOver: this.onNodeDragOver,
+        onNodeDragLeave: this.onNodeDragLeave,
+        onNodeDragEnd: this.onNodeDragEnd,
+        onNodeDrop: this.onNodeDrop,
+        expandAction,
+        directory,
+        multiple,
+        showFilteredOnly,
+        isSearching: Boolean(inputValue),
+        loadData,
+        onNodeLoad: this.onNodeLoad,
+        renderLabel,
+        draggable,
+        renderFullLabel,
+        dragOverNodeKey,
+        dropPosition,
+        labelEllipsis: typeof labelEllipsis === 'undefined' ? virtualize : labelEllipsis
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperCls,
+      role: "list-box",
+      style: style
+    }, filterTreeNode ? this.renderInput() : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: listCls,
+      role: "tree"
+    }, noData ? this.renderEmpty() : this.renderNodeList())));
+  }
+
+}
+
+Tree.contextType = _context.default;
+Tree.propTypes = {
+  blockNode: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  showClear: _propTypes.default.bool,
+  defaultExpandAll: _propTypes.default.bool,
+  defaultExpandedKeys: _propTypes.default.array,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  directory: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  emptyContent: _propTypes.default.node,
+  expandAll: _propTypes.default.bool,
+  expandedKeys: _propTypes.default.array,
+  filterTreeNode: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  icon: _propTypes.default.node,
+  onChangeWithObject: _propTypes.default.bool,
+  motion: _propTypes.default.bool,
+  multiple: _propTypes.default.bool,
+  onChange: _propTypes.default.func,
+  onExpand: _propTypes.default.func,
+  onSearch: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onContextMenu: _propTypes.default.func,
+  onDoubleClick: _propTypes.default.func,
+  searchClassName: _propTypes.default.string,
+  searchPlaceholder: _propTypes.default.string,
+  searchStyle: _propTypes.default.object,
+  selectedKey: _propTypes.default.string,
+  showFilteredOnly: _propTypes.default.bool,
+  style: _propTypes.default.object,
+  treeData: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    label: _propTypes.default.any,
+    isLeaf: _propTypes.default.bool
+  })),
+  treeDataSimpleJson: _propTypes.default.object,
+  treeNodeFilterProp: _propTypes.default.string,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.array, _propTypes.default.object]),
+  virtualize: _propTypes.default.object,
+  autoExpandParent: _propTypes.default.bool,
+  expandAction: _propTypes.default.oneOf(_constants.strings.EXPAND_ACTION),
+  searchRender: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  renderLabel: _propTypes.default.func,
+  renderFullLabel: _propTypes.default.func,
+  leafOnly: _propTypes.default.bool,
+  loadedKeys: _propTypes.default.array,
+  loadData: _propTypes.default.func,
+  onLoad: _propTypes.default.func,
+  disableStrictly: _propTypes.default.bool,
+  draggable: _propTypes.default.bool,
+  autoExpandWhenDragEnter: _propTypes.default.bool,
+  hideDraggingNode: _propTypes.default.bool,
+  renderDraggingNode: _propTypes.default.func,
+  onDragEnd: _propTypes.default.func,
+  onDragEnter: _propTypes.default.func,
+  onDragLeave: _propTypes.default.func,
+  onDragOver: _propTypes.default.func,
+  onDragStart: _propTypes.default.func,
+  onDrop: _propTypes.default.func,
+  labelEllipsis: _propTypes.default.bool
+};
+Tree.defaultProps = {
+  showClear: true,
+  disabled: false,
+  blockNode: true,
+  multiple: false,
+  filterTreeNode: false,
+  autoExpandParent: false,
+  treeNodeFilterProp: 'label',
+  defaultExpandAll: false,
+  expandAll: false,
+  onChangeWithObject: false,
+  motion: true,
+  leafOnly: false,
+  showFilteredOnly: false,
+  expandAction: false,
+  disableStrictly: false,
+  draggable: false,
+  autoExpandWhenDragEnter: true
+};
+Tree.TreeNode = _treeNode.default;
+var _default = Tree;
+exports.default = _default;