@qsxy/element-plus-react 1.0.0-next.1

package/dist/Tree/RCTree.js

@@ -0,0 +1,938 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tree/RCTree.tsx
+var RCTree_exports = {};
+__export(RCTree_exports, {
+  default: () => RCTree_default
+});
+module.exports = __toCommonJS(RCTree_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_KeyCode = __toESM(require("./utils/KeyCode"));
+var import_pickAttrs = __toESM(require("./utils/pickAttrs"));
+var import_Util = require("../Util");
+var import_DropIndicator = __toESM(require("./DropIndicator"));
+var import_NodeList = __toESM(require("./NodeList"));
+var import_TreeNode = __toESM(require("./TreeNode"));
+var import_contextTypes = require("./contextTypes");
+var import_util = require("./util");
+var import_conductUtil = require("./utils/conductUtil");
+var import_treeUtil = require("./utils/treeUtil");
+var MAX_RETRY_TIMES = 10;
+var RCTree = class extends import_react.Component {
+  constructor() {
+    super(...arguments);
+    this.destroyed = false;
+    this.loadingRetryTimes = {};
+    this.state = {
+      keyEntities: {},
+      indent: null,
+      selectedKeys: [],
+      checkedKeys: [],
+      halfCheckedKeys: [],
+      loadedKeys: [],
+      loadingKeys: [],
+      expandedKeys: [],
+      draggingNodeKey: null,
+      dragChildrenKeys: [],
+      // dropTargetKey is the key of abstract-drop-node
+      // the abstract-drop-node is the real drop node when drag and drop
+      // not the DOM drag over node
+      dropTargetKey: null,
+      dropPosition: null,
+      // the drop position of abstract-drop-node, inside 0, top -1, bottom 1
+      dropContainerKey: null,
+      // the container key of abstract-drop-node if dropPosition is -1 or 1
+      dropLevelOffset: null,
+      // the drop level offset of abstract-drag-over-node
+      dropTargetPos: null,
+      // the pos of abstract-drop-node
+      dropAllowed: true,
+      // if drop to abstract-drop-node is allowed
+      // the abstract-drag-over-node
+      // if mouse is on the bottom of top dom node or no the top of the bottom dom node
+      // abstract-drag-over-node is the top node
+      dragOverNodeKey: null,
+      treeData: [],
+      flattenNodes: [],
+      focused: false,
+      activeKey: null,
+      listChanging: false,
+      prevProps: null,
+      fieldNames: (0, import_treeUtil.fillFieldNames)()
+    };
+    this.dragStartMousePosition = null;
+    this.currentMouseOverDroppableNodeKey = null;
+    this.listRef = (0, import_react.createRef)();
+    this.onNodeDragStart = (event, node) => {
+      const { expandedKeys, keyEntities } = this.state;
+      const { onDragStart } = this.props;
+      const { eventKey } = node.props;
+      this.dragNode = node;
+      this.dragStartMousePosition = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      const newExpandedKeys = (0, import_util.arrDel)(expandedKeys, eventKey);
+      this.setState({
+        draggingNodeKey: eventKey,
+        dragChildrenKeys: (0, import_util.getDragChildrenKeys)(eventKey, keyEntities),
+        indent: this.listRef.current.getIndentWidth()
+      });
+      this.setExpandedKeys(newExpandedKeys);
+      window.addEventListener("dragend", this.onWindowDragEnd);
+      onDragStart == null ? void 0 : onDragStart({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(node.props) });
+    };
+    /**
+     * [Legacy] Select handler is smaller than node,
+     * so that this will trigger when drag enter node or select handler.
+     * This is a little tricky if customize css without padding.
+     * Better for use mouse move event to refresh drag state.
+     * But let's just keep it to avoid event trigger logic change.
+     */
+    this.onNodeDragEnter = (event, node) => {
+      const { expandedKeys, keyEntities, dragChildrenKeys, flattenNodes, indent } = this.state;
+      const { onDragEnter, onExpand, allowDrop, direction } = this.props;
+      const { pos, eventKey } = node.props;
+      const { dragNode } = this;
+      if (this.currentMouseOverDroppableNodeKey !== eventKey) {
+        this.currentMouseOverDroppableNodeKey = eventKey;
+      }
+      if (!dragNode) {
+        this.resetDragState();
+        return;
+      }
+      const { dropPosition, dropLevelOffset, dropTargetKey, dropContainerKey, dropTargetPos, dropAllowed, dragOverNodeKey } = (0, import_util.calcDropPosition)(
+        event,
+        dragNode,
+        node,
+        indent,
+        this.dragStartMousePosition,
+        allowDrop,
+        flattenNodes,
+        keyEntities,
+        expandedKeys,
+        direction
+      );
+      if (
+        // don't allow drop inside its children
+        dragChildrenKeys.indexOf(dropTargetKey) !== -1 || // don't allow drop when drop is not allowed caculated by calcDropPosition
+        !dropAllowed
+      ) {
+        this.resetDragState();
+        return;
+      }
+      if (!this.delayedDragEnterLogic) {
+        this.delayedDragEnterLogic = {};
+      }
+      Object.keys(this.delayedDragEnterLogic).forEach((key) => {
+        clearTimeout(this.delayedDragEnterLogic[key]);
+      });
+      if (dragNode.props.eventKey !== node.props.eventKey) {
+        event.persist();
+        this.delayedDragEnterLogic[pos] = window.setTimeout(() => {
+          if (this.state.draggingNodeKey === null) {
+            return;
+          }
+          let newExpandedKeys = [...expandedKeys];
+          const entity = keyEntities[node.props.eventKey];
+          if (entity && (entity.children || []).length) {
+            newExpandedKeys = (0, import_util.arrAdd)(expandedKeys, node.props.eventKey);
+          }
+          if (!("expandedKeys" in this.props)) {
+            this.setExpandedKeys(newExpandedKeys);
+          }
+          onExpand == null ? void 0 : onExpand(newExpandedKeys, {
+            node: (0, import_treeUtil.convertNodePropsToEventData)(node.props),
+            expanded: true,
+            nativeEvent: event.nativeEvent
+          });
+        }, 800);
+      }
+      if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
+        this.resetDragState();
+        return;
+      }
+      this.setState({
+        dragOverNodeKey,
+        dropPosition,
+        dropLevelOffset,
+        dropTargetKey,
+        dropContainerKey,
+        dropTargetPos,
+        dropAllowed
+      });
+      onDragEnter == null ? void 0 : onDragEnter({
+        event,
+        node: (0, import_treeUtil.convertNodePropsToEventData)(node.props),
+        expandedKeys
+      });
+    };
+    this.onNodeDragOver = (event, node) => {
+      const { dragChildrenKeys, flattenNodes, keyEntities, expandedKeys, indent } = this.state;
+      const { onDragOver, allowDrop, direction } = this.props;
+      const { dragNode } = this;
+      if (!dragNode) {
+        return;
+      }
+      const { dropPosition, dropLevelOffset, dropTargetKey, dropContainerKey, dropAllowed, dropTargetPos, dragOverNodeKey } = (0, import_util.calcDropPosition)(
+        event,
+        dragNode,
+        node,
+        indent,
+        this.dragStartMousePosition,
+        allowDrop,
+        flattenNodes,
+        keyEntities,
+        expandedKeys,
+        direction
+      );
+      if (dragChildrenKeys.indexOf(dropTargetKey) !== -1 || !dropAllowed) {
+        return;
+      }
+      if (dragNode.props.eventKey === dropTargetKey && dropLevelOffset === 0) {
+        if (!(this.state.dropPosition === null && this.state.dropLevelOffset === null && this.state.dropTargetKey === null && this.state.dropContainerKey === null && this.state.dropTargetPos === null && this.state.dropAllowed === false && this.state.dragOverNodeKey === null)) {
+          this.resetDragState();
+        }
+      } else if (!(dropPosition === this.state.dropPosition && dropLevelOffset === this.state.dropLevelOffset && dropTargetKey === this.state.dropTargetKey && dropContainerKey === this.state.dropContainerKey && dropTargetPos === this.state.dropTargetPos && dropAllowed === this.state.dropAllowed && dragOverNodeKey === this.state.dragOverNodeKey)) {
+        this.setState({
+          dropPosition,
+          dropLevelOffset,
+          dropTargetKey,
+          dropContainerKey,
+          dropTargetPos,
+          dropAllowed,
+          dragOverNodeKey
+        });
+      }
+      onDragOver == null ? void 0 : onDragOver({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(node.props) });
+    };
+    this.onNodeDragLeave = (event, node) => {
+      if (this.currentMouseOverDroppableNodeKey === node.props.eventKey && !event.currentTarget.contains(event.relatedTarget)) {
+        this.resetDragState();
+        this.currentMouseOverDroppableNodeKey = null;
+      }
+      const { onDragLeave } = this.props;
+      onDragLeave == null ? void 0 : onDragLeave({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(node.props) });
+    };
+    // since stopPropagation() is called in treeNode
+    // if onWindowDrag is called, whice means state is keeped, drag state should be cleared
+    this.onWindowDragEnd = (event) => {
+      this.onNodeDragEnd(event, null, true);
+      window.removeEventListener("dragend", this.onWindowDragEnd);
+    };
+    // if onNodeDragEnd is called, onWindowDragEnd won't be called since stopPropagation() is called
+    this.onNodeDragEnd = (event, node) => {
+      const { onDragEnd } = this.props;
+      this.setState({
+        dragOverNodeKey: null
+      });
+      this.cleanDragState();
+      onDragEnd == null ? void 0 : onDragEnd({ event, node: (0, import_treeUtil.convertNodePropsToEventData)(node.props) });
+      this.dragNode = null;
+    };
+    this.onNodeDrop = (event, node, outsideTree = false) => {
+      var _a;
+      const { dragChildrenKeys, dropPosition, dropTargetKey, dropTargetPos, dropAllowed } = this.state;
+      if (!dropAllowed) {
+        return;
+      }
+      const { onDrop } = this.props;
+      this.setState({
+        dragOverNodeKey: null
+      });
+      this.cleanDragState();
+      if (dropTargetKey === null) {
+        return;
+      }
+      const abstractDropNodeProps = {
+        ...(0, import_treeUtil.getTreeNodeProps)(dropTargetKey, this.getTreeNodeRequiredProps()),
+        active: ((_a = this.getActiveItem()) == null ? void 0 : _a.data.key) === dropTargetKey,
+        data: this.state.keyEntities[dropTargetKey].node
+      };
+      const dropToChild = dragChildrenKeys.indexOf(dropTargetKey) !== -1;
+      (0, import_Util.warning)(!dropToChild, "Can not drop to dragNode’s children node. This is a bug of rc-tree. Please report an issue.");
+      const posArr = (0, import_util.posToArr)(dropTargetPos);
+      const dropResult = {
+        event,
+        node: (0, import_treeUtil.convertNodePropsToEventData)(abstractDropNodeProps),
+        dragNode: this.dragNode ? (0, import_treeUtil.convertNodePropsToEventData)(this.dragNode.props) : null,
+        dragNodesKeys: [this.dragNode.props.eventKey].concat(dragChildrenKeys),
+        dropToGap: dropPosition !== 0,
+        dropPosition: dropPosition + Number(posArr[posArr.length - 1])
+      };
+      if (!outsideTree) {
+        onDrop == null ? void 0 : onDrop(dropResult);
+      }
+      this.dragNode = null;
+    };
+    this.cleanDragState = () => {
+      const { draggingNodeKey } = this.state;
+      if (draggingNodeKey !== null) {
+        this.setState({
+          draggingNodeKey: null,
+          dropPosition: null,
+          dropContainerKey: null,
+          dropTargetKey: null,
+          dropLevelOffset: null,
+          dropAllowed: true,
+          dragOverNodeKey: null
+        });
+      }
+      this.dragStartMousePosition = null;
+      this.currentMouseOverDroppableNodeKey = null;
+    };
+    this.onNodeClick = (e, treeNode) => {
+      const { onClick } = this.props;
+      onClick == null ? void 0 : onClick(e, treeNode);
+    };
+    this.onNodeDoubleClick = (e, treeNode) => {
+      const { onDoubleClick } = this.props;
+      onDoubleClick == null ? void 0 : onDoubleClick(e, treeNode);
+    };
+    this.onNodeSelect = (e, treeNode) => {
+      let { selectedKeys } = this.state;
+      const { keyEntities, fieldNames } = this.state;
+      const { onSelect, multiple } = this.props;
+      const { selected } = treeNode;
+      const key = treeNode[fieldNames.key];
+      const targetSelected = !selected;
+      if (!targetSelected) {
+        selectedKeys = (0, import_util.arrDel)(selectedKeys, key);
+      } else if (!multiple) {
+        selectedKeys = [key];
+      } else {
+        selectedKeys = (0, import_util.arrAdd)(selectedKeys, key);
+      }
+      const selectedNodes = selectedKeys.map((selectedKey) => {
+        const entity = keyEntities[selectedKey];
+        if (!entity) {
+          return null;
+        }
+        return entity.node;
+      }).filter((node) => node);
+      this.setUncontrolledState({ selectedKeys });
+      onSelect == null ? void 0 : onSelect(selectedKeys, {
+        event: "select",
+        selected: targetSelected,
+        node: treeNode,
+        selectedNodes,
+        nativeEvent: e.nativeEvent
+      });
+    };
+    this.onNodeCheck = (e, treeNode, checked) => {
+      const { keyEntities, checkedKeys: oriCheckedKeys, halfCheckedKeys: oriHalfCheckedKeys } = this.state;
+      const { checkStrictly, onCheck } = this.props;
+      const { key } = treeNode;
+      let checkedObj;
+      const eventObj = {
+        event: "check",
+        node: treeNode,
+        checked,
+        nativeEvent: e.nativeEvent
+      };
+      if (checkStrictly) {
+        const checkedKeys = checked ? (0, import_util.arrAdd)(oriCheckedKeys, key) : (0, import_util.arrDel)(oriCheckedKeys, key);
+        const halfCheckedKeys = (0, import_util.arrDel)(oriHalfCheckedKeys, key);
+        checkedObj = { checked: checkedKeys, halfChecked: halfCheckedKeys };
+        eventObj.checkedNodes = checkedKeys.map((checkedKey) => keyEntities[checkedKey]).filter((entity) => entity).map((entity) => entity.node);
+        this.setUncontrolledState({ checkedKeys });
+      } else {
+        let { checkedKeys, halfCheckedKeys } = (0, import_conductUtil.conductCheck)([...oriCheckedKeys, key], true, keyEntities);
+        if (!checked) {
+          const keySet = new Set(checkedKeys);
+          keySet.delete(key);
+          ({ checkedKeys, halfCheckedKeys } = (0, import_conductUtil.conductCheck)(Array.from(keySet), { checked: false, halfCheckedKeys }, keyEntities));
+        }
+        checkedObj = checkedKeys;
+        eventObj.checkedNodes = [];
+        eventObj.checkedNodesPositions = [];
+        eventObj.halfCheckedKeys = halfCheckedKeys;
+        checkedKeys.forEach((checkedKey) => {
+          const entity = keyEntities[checkedKey];
+          if (!entity) {
+            return;
+          }
+          const { node, pos } = entity;
+          eventObj.checkedNodes.push(node);
+          eventObj.checkedNodesPositions.push({ node, pos });
+        });
+        this.setUncontrolledState(
+          {
+            checkedKeys
+          },
+          false,
+          {
+            halfCheckedKeys
+          }
+        );
+      }
+      onCheck == null ? void 0 : onCheck(checkedObj, eventObj);
+    };
+    this.onNodeLoad = (treeNode) => {
+      const { key } = treeNode;
+      const loadPromise = new Promise((resolve, reject) => {
+        this.setState(({ loadedKeys = [], loadingKeys = [] }) => {
+          const { loadData, onLoad } = this.props;
+          if (!loadData || loadedKeys.indexOf(key) !== -1 || loadingKeys.indexOf(key) !== -1) {
+            return null;
+          }
+          const promise = loadData(treeNode);
+          promise.then(() => {
+            const { loadedKeys: currentLoadedKeys } = this.state;
+            const newLoadedKeys = (0, import_util.arrAdd)(currentLoadedKeys, key);
+            onLoad == null ? void 0 : onLoad(newLoadedKeys, {
+              event: "load",
+              node: treeNode
+            });
+            this.setUncontrolledState({
+              loadedKeys: newLoadedKeys
+            });
+            this.setState((prevState) => ({
+              loadingKeys: (0, import_util.arrDel)(prevState.loadingKeys, key)
+            }));
+            resolve();
+          }).catch((e) => {
+            this.setState((prevState) => ({
+              loadingKeys: (0, import_util.arrDel)(prevState.loadingKeys, key)
+            }));
+            this.loadingRetryTimes[key] = (this.loadingRetryTimes[key] || 0) + 1;
+            if (this.loadingRetryTimes[key] >= MAX_RETRY_TIMES) {
+              const { loadedKeys: currentLoadedKeys } = this.state;
+              (0, import_Util.warning)(false, "Retry for `loadData` many times but still failed. No more retry.");
+              this.setUncontrolledState({
+                loadedKeys: (0, import_util.arrAdd)(currentLoadedKeys, key)
+              });
+              resolve();
+            }
+            reject(e);
+          });
+          return {
+            loadingKeys: (0, import_util.arrAdd)(loadingKeys, key)
+          };
+        });
+      });
+      loadPromise.catch(() => {
+      });
+      return loadPromise;
+    };
+    this.onNodeMouseEnter = (event, node) => {
+      const { onMouseEnter } = this.props;
+      onMouseEnter == null ? void 0 : onMouseEnter({ event, node });
+    };
+    this.onNodeMouseLeave = (event, node) => {
+      const { onMouseLeave } = this.props;
+      onMouseLeave == null ? void 0 : onMouseLeave({ event, node });
+    };
+    this.onNodeContextMenu = (event, node) => {
+      const { onRightClick } = this.props;
+      if (onRightClick) {
+        event.preventDefault();
+        onRightClick({ event, node });
+      }
+    };
+    this.onFocus = (...args) => {
+      const { onFocus } = this.props;
+      this.setState({ focused: true });
+      onFocus == null ? void 0 : onFocus.apply(this, ...args);
+    };
+    this.onBlur = (...args) => {
+      const { onBlur } = this.props;
+      this.setState({ focused: false });
+      this.onActiveChange(null);
+      onBlur == null ? void 0 : onBlur.apply(this, ...args);
+    };
+    this.getTreeNodeRequiredProps = () => {
+      const { expandedKeys, selectedKeys, loadedKeys, loadingKeys, checkedKeys, halfCheckedKeys, dragOverNodeKey, dropPosition, keyEntities } = this.state;
+      return {
+        expandedKeys: expandedKeys || [],
+        selectedKeys: selectedKeys || [],
+        loadedKeys: loadedKeys || [],
+        loadingKeys: loadingKeys || [],
+        checkedKeys: checkedKeys || [],
+        halfCheckedKeys: halfCheckedKeys || [],
+        dragOverNodeKey,
+        dropPosition,
+        keyEntities
+      };
+    };
+    // =========================== Expanded ===========================
+    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
+    this.setExpandedKeys = (expandedKeys) => {
+      const { treeData, fieldNames } = this.state;
+      const flattenNodes = (0, import_treeUtil.flattenTreeData)(treeData, expandedKeys, fieldNames);
+      this.setUncontrolledState(
+        {
+          expandedKeys,
+          flattenNodes
+        },
+        true
+      );
+    };
+    this.flattenTreeData = (expandedKeys) => {
+      const { treeData, fieldNames } = this.state;
+      return (0, import_treeUtil.flattenTreeData)(treeData, expandedKeys, fieldNames);
+    };
+    this.onNodeExpand = (e, treeNode) => {
+      let { expandedKeys } = this.state;
+      const { listChanging, fieldNames } = this.state;
+      const { onExpand, loadData } = this.props;
+      const { expanded } = treeNode;
+      const key = treeNode[fieldNames.key];
+      if (listChanging) {
+        return;
+      }
+      const index = expandedKeys.indexOf(key);
+      const targetExpanded = !expanded;
+      (0, import_Util.warning)(expanded && index !== -1 || !expanded && index === -1, "Expand state not sync with index check");
+      if (targetExpanded) {
+        expandedKeys = (0, import_util.arrAdd)(expandedKeys, key);
+      } else {
+        expandedKeys = (0, import_util.arrDel)(expandedKeys, key);
+      }
+      this.setExpandedKeys(expandedKeys);
+      onExpand == null ? void 0 : onExpand(expandedKeys, {
+        node: treeNode,
+        expanded: targetExpanded,
+        nativeEvent: e.nativeEvent
+      });
+      if (targetExpanded && loadData) {
+        const loadPromise = this.onNodeLoad(treeNode);
+        if (loadPromise) {
+          loadPromise.then(() => {
+            const newFlattenTreeData = (0, import_treeUtil.flattenTreeData)(this.state.treeData, expandedKeys, fieldNames);
+            this.setUncontrolledState({ flattenNodes: newFlattenTreeData });
+          }).catch(() => {
+            const { expandedKeys: currentExpandedKeys } = this.state;
+            const expandedKeysToRestore = (0, import_util.arrDel)(currentExpandedKeys, key);
+            this.setExpandedKeys(expandedKeysToRestore);
+          });
+        }
+      }
+    };
+    this.onListChangeStart = () => {
+      this.setUncontrolledState({
+        listChanging: true
+      });
+    };
+    this.onListChangeEnd = () => {
+      setTimeout(() => {
+        this.setUncontrolledState({
+          listChanging: false
+        });
+      });
+    };
+    // =========================== Keyboard ===========================
+    this.onActiveChange = (newActiveKey) => {
+      const { activeKey } = this.state;
+      const { onActiveChange } = this.props;
+      if (activeKey === newActiveKey) {
+        return;
+      }
+      this.setState({ activeKey: newActiveKey });
+      if (newActiveKey !== null) {
+        this.scrollTo({ key: newActiveKey });
+      }
+      onActiveChange == null ? void 0 : onActiveChange(newActiveKey);
+    };
+    this.getActiveItem = () => {
+      const { activeKey, flattenNodes } = this.state;
+      if (activeKey === null) {
+        return null;
+      }
+      return flattenNodes.find(({ key }) => key === activeKey) || null;
+    };
+    this.offsetActiveKey = (offset) => {
+      const { flattenNodes, activeKey } = this.state;
+      let index = flattenNodes.findIndex(({ key }) => key === activeKey);
+      if (index === -1 && offset < 0) {
+        index = flattenNodes.length;
+      }
+      index = (index + offset + flattenNodes.length) % flattenNodes.length;
+      const item = flattenNodes[index];
+      if (item) {
+        const { key } = item;
+        this.onActiveChange(key);
+      } else {
+        this.onActiveChange(null);
+      }
+    };
+    this.onKeyDown = (event) => {
+      const { activeKey, expandedKeys, checkedKeys } = this.state;
+      const { onKeyDown, checkable, selectable } = this.props;
+      switch (event.which) {
+        case import_KeyCode.default.UP: {
+          this.offsetActiveKey(-1);
+          event.preventDefault();
+          break;
+        }
+        case import_KeyCode.default.DOWN: {
+          this.offsetActiveKey(1);
+          event.preventDefault();
+          break;
+        }
+      }
+      const activeItem = this.getActiveItem();
+      if (activeItem && activeItem.data) {
+        const treeNodeRequiredProps = this.getTreeNodeRequiredProps();
+        const expandable = activeItem.data.isLeaf === false || !!(activeItem.data.children || []).length;
+        const eventNode = (0, import_treeUtil.convertNodePropsToEventData)({
+          ...(0, import_treeUtil.getTreeNodeProps)(activeKey, treeNodeRequiredProps),
+          data: activeItem.data,
+          active: true
+        });
+        switch (event.which) {
+          case import_KeyCode.default.LEFT: {
+            if (expandable && expandedKeys.includes(activeKey)) {
+              this.onNodeExpand({}, eventNode);
+            } else if (activeItem.parent) {
+              this.onActiveChange(activeItem.parent.data.key);
+            }
+            event.preventDefault();
+            break;
+          }
+          case import_KeyCode.default.RIGHT: {
+            if (expandable && !expandedKeys.includes(activeKey)) {
+              this.onNodeExpand({}, eventNode);
+            } else if (activeItem.children && activeItem.children.length) {
+              this.onActiveChange(activeItem.children[0].data.key);
+            }
+            event.preventDefault();
+            break;
+          }
+          case import_KeyCode.default.ENTER:
+          case import_KeyCode.default.SPACE: {
+            if (checkable && !eventNode.disabled && eventNode.checkable !== false && !eventNode.disableCheckbox) {
+              this.onNodeCheck({}, eventNode, !checkedKeys.includes(activeKey));
+            } else if (!checkable && selectable && !eventNode.disabled && eventNode.selectable !== false) {
+              this.onNodeSelect({}, eventNode);
+            }
+            break;
+          }
+        }
+      }
+      onKeyDown == null ? void 0 : onKeyDown.call(this, event);
+    };
+    /**
+     * Only update the value which is not in props
+     */
+    this.setUncontrolledState = (state, atomic = false, forceState = null) => {
+      if (!this.destroyed) {
+        let needSync = false;
+        let allPassed = true;
+        const newState = {};
+        Object.keys(state).forEach((name) => {
+          if (name in this.props) {
+            allPassed = false;
+            return;
+          }
+          needSync = true;
+          newState[name] = state[name];
+        });
+        if (needSync && (!atomic || allPassed)) {
+          this.setState({
+            ...newState,
+            ...forceState
+          });
+        }
+      }
+    };
+    this.scrollTo = (scroll) => {
+      this.listRef.current.scrollTo(scroll);
+    };
+  }
+  componentDidMount() {
+    this.onUpdated();
+  }
+  componentDidUpdate() {
+    this.onUpdated();
+  }
+  onUpdated() {
+    const { activeKey } = this.props;
+    if (activeKey !== void 0 && activeKey !== this.state.activeKey) {
+      this.setState({ activeKey });
+      if (activeKey !== null) {
+        this.scrollTo({ key: activeKey });
+      }
+    }
+  }
+  componentWillUnmount() {
+    window.removeEventListener("dragend", this.onWindowDragEnd);
+    this.destroyed = true;
+  }
+  static getDerivedStateFromProps(props, prevState) {
+    const { prevProps } = prevState;
+    const newState = {
+      prevProps: props
+    };
+    function needSync(name) {
+      return !prevProps && name in props || prevProps && prevProps[name] !== props[name];
+    }
+    let treeData;
+    let { fieldNames } = prevState;
+    if (needSync("fieldNames")) {
+      fieldNames = (0, import_treeUtil.fillFieldNames)(props.fieldNames);
+      newState.fieldNames = fieldNames;
+    }
+    if (needSync("treeData")) {
+      ({ treeData } = props);
+    } else if (needSync("children")) {
+      (0, import_Util.warning)(false, "`children` of Tree is deprecated. Please use `treeData` instead.");
+      treeData = (0, import_treeUtil.convertTreeToData)(props.children);
+    }
+    if (treeData) {
+      newState.treeData = treeData;
+      const entitiesMap = (0, import_treeUtil.convertDataToEntities)(treeData, { fieldNames });
+      newState.keyEntities = {
+        [import_NodeList.MOTION_KEY]: import_NodeList.MotionEntity,
+        ...entitiesMap.keyEntities
+      };
+      if (process.env.NODE_ENV !== "production") {
+        (0, import_treeUtil.warningWithoutKey)(treeData, fieldNames);
+      }
+    }
+    const keyEntities = newState.keyEntities || prevState.keyEntities;
+    if (needSync("expandedKeys") || prevProps && needSync("autoExpandParent")) {
+      newState.expandedKeys = props.autoExpandParent || !prevProps && props.defaultExpandParent ? (0, import_util.conductExpandParent)(props.expandedKeys, keyEntities) : props.expandedKeys;
+    } else if (!prevProps && props.defaultExpandAll) {
+      const cloneKeyEntities = { ...keyEntities };
+      delete cloneKeyEntities[import_NodeList.MOTION_KEY];
+      newState.expandedKeys = Object.keys(cloneKeyEntities).map((key) => cloneKeyEntities[key].key);
+    } else if (!prevProps && props.defaultExpandedKeys) {
+      newState.expandedKeys = props.autoExpandParent || props.defaultExpandParent ? (0, import_util.conductExpandParent)(props.defaultExpandedKeys, keyEntities) : props.defaultExpandedKeys;
+    }
+    if (!newState.expandedKeys) {
+      delete newState.expandedKeys;
+    }
+    if (treeData || newState.expandedKeys) {
+      const flattenNodes = (0, import_treeUtil.flattenTreeData)(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys, fieldNames);
+      newState.flattenNodes = flattenNodes;
+    }
+    if (props.selectable) {
+      if (needSync("selectedKeys")) {
+        newState.selectedKeys = (0, import_util.calcSelectedKeys)(props.selectedKeys, props);
+      } else if (!prevProps && props.defaultSelectedKeys) {
+        newState.selectedKeys = (0, import_util.calcSelectedKeys)(props.defaultSelectedKeys, props);
+      }
+    }
+    if (props.checkable) {
+      let checkedKeyEntity;
+      if (needSync("checkedKeys")) {
+        checkedKeyEntity = (0, import_util.parseCheckedKeys)(props.checkedKeys) || {};
+      } else if (!prevProps && props.defaultCheckedKeys) {
+        checkedKeyEntity = (0, import_util.parseCheckedKeys)(props.defaultCheckedKeys) || {};
+      } else if (treeData) {
+        checkedKeyEntity = (0, import_util.parseCheckedKeys)(props.checkedKeys) || {
+          checkedKeys: prevState.checkedKeys,
+          halfCheckedKeys: prevState.halfCheckedKeys
+        };
+      }
+      if (checkedKeyEntity) {
+        let { checkedKeys = [], halfCheckedKeys = [] } = checkedKeyEntity;
+        if (!props.checkStrictly) {
+          const conductKeys = (0, import_conductUtil.conductCheck)(checkedKeys, true, keyEntities);
+          ({ checkedKeys, halfCheckedKeys } = conductKeys);
+        }
+        newState.checkedKeys = checkedKeys;
+        newState.halfCheckedKeys = halfCheckedKeys;
+      }
+    }
+    if (needSync("loadedKeys")) {
+      newState.loadedKeys = props.loadedKeys;
+    }
+    return newState;
+  }
+  resetDragState() {
+    this.setState({
+      dragOverNodeKey: null,
+      dropPosition: null,
+      dropLevelOffset: null,
+      dropTargetKey: null,
+      dropContainerKey: null,
+      dropTargetPos: null,
+      dropAllowed: false
+    });
+  }
+  render() {
+    const { focused, flattenNodes, keyEntities, draggingNodeKey, activeKey, dropLevelOffset, dropContainerKey, dropTargetKey, dropPosition, dragOverNodeKey, indent } = this.state;
+    const {
+      prefixCls,
+      className,
+      style,
+      showLine,
+      focusable,
+      tabIndex = 0,
+      selectable,
+      showIcon,
+      icon,
+      switcherIcon,
+      draggable,
+      checkable,
+      checkStrictly,
+      disabled,
+      motion,
+      loadData,
+      filterTreeNode,
+      height,
+      itemHeight,
+      virtual,
+      titleRender,
+      dropIndicatorRender,
+      onContextMenu,
+      onScroll,
+      direction,
+      rootClassName,
+      rootStyle
+    } = this.props;
+    const domProps = (0, import_pickAttrs.default)(this.props, {
+      aria: true,
+      data: true
+    });
+    let draggableConfig;
+    if (draggable) {
+      if (typeof draggable === "object") {
+        draggableConfig = draggable;
+      } else if (typeof draggable === "function") {
+        draggableConfig = {
+          nodeDraggable: draggable
+        };
+      } else {
+        draggableConfig = {};
+      }
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_contextTypes.TreeContext.Provider,
+      {
+        value: {
+          prefixCls,
+          selectable,
+          showIcon,
+          icon,
+          switcherIcon,
+          draggable: draggableConfig,
+          draggingNodeKey,
+          checkable,
+          checkStrictly,
+          disabled,
+          keyEntities,
+          dropLevelOffset,
+          dropContainerKey,
+          dropTargetKey,
+          dropPosition,
+          dragOverNodeKey,
+          indent,
+          direction,
+          dropIndicatorRender,
+          loadData,
+          filterTreeNode,
+          titleRender,
+          onNodeClick: this.onNodeClick,
+          onNodeDoubleClick: this.onNodeDoubleClick,
+          onNodeExpand: this.onNodeExpand,
+          onNodeSelect: this.onNodeSelect,
+          onNodeCheck: this.onNodeCheck,
+          onNodeLoad: this.onNodeLoad,
+          onNodeMouseEnter: this.onNodeMouseEnter,
+          onNodeMouseLeave: this.onNodeMouseLeave,
+          onNodeContextMenu: this.onNodeContextMenu,
+          onNodeDragStart: this.onNodeDragStart,
+          onNodeDragEnter: this.onNodeDragEnter,
+          onNodeDragOver: this.onNodeDragOver,
+          onNodeDragLeave: this.onNodeDragLeave,
+          onNodeDragEnd: this.onNodeDragEnd,
+          onNodeDrop: this.onNodeDrop
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          role: "tree",
+          className: (0, import_classnames.default)(prefixCls, className, rootClassName, {
+            [`${prefixCls}-show-line`]: showLine,
+            [`${prefixCls}-focused`]: focused,
+            [`${prefixCls}-active-focused`]: activeKey !== null
+          }),
+          style: rootStyle
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_NodeList.default,
+          {
+            ref: this.listRef,
+            prefixCls,
+            style,
+            data: flattenNodes,
+            disabled,
+            selectable,
+            checkable: !!checkable,
+            motion,
+            dragging: draggingNodeKey !== null,
+            height,
+            itemHeight,
+            virtual,
+            focusable,
+            focused,
+            tabIndex,
+            activeItem: this.getActiveItem(),
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            onKeyDown: this.onKeyDown,
+            onActiveChange: this.onActiveChange,
+            onListChangeStart: this.onListChangeStart,
+            onListChangeEnd: this.onListChangeEnd,
+            onContextMenu,
+            onScroll,
+            ...this.getTreeNodeRequiredProps(),
+            ...domProps
+          }
+        )
+      )
+    );
+  }
+};
+RCTree.defaultProps = {
+  prefixCls: "r-tree",
+  showLine: false,
+  showIcon: true,
+  selectable: true,
+  multiple: false,
+  checkable: false,
+  disabled: false,
+  checkStrictly: false,
+  draggable: false,
+  defaultExpandParent: true,
+  autoExpandParent: false,
+  defaultExpandAll: false,
+  defaultExpandedKeys: [],
+  defaultCheckedKeys: [],
+  defaultSelectedKeys: [],
+  dropIndicatorRender: import_DropIndicator.default,
+  allowDrop: () => true
+};
+RCTree.TreeNode = import_TreeNode.default;
+var RCTree_default = RCTree;