rsuite 5.60.2 → 5.61.0

package/cjs/Tree/hooks/useFlattenTree.js

@@ -0,0 +1,98 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _shallowEqual = _interopRequireDefault(require("../../utils/shallowEqual"));
+var _utils = require("../utils");
+var _useForceUpdate = _interopRequireDefault(require("./useForceUpdate"));
+/**
+ * Custom hook that flattens a tree data structure into a map of nodes.
+ *
+ */
+function useFlattenTree(data, options) {
+  var value = options.value,
+    labelKey = options.labelKey,
+    valueKey = options.valueKey,
+    childrenKey = options.childrenKey,
+    _options$uncheckableI = options.uncheckableItemValues,
+    uncheckableItemValues = _options$uncheckableI === void 0 ? [] : _options$uncheckableI,
+    cascade = options.cascade,
+    multiple = options.multiple,
+    callback = options.callback;
+  var forceUpdate = (0, _useForceUpdate.default)();
+  var flattenedNodes = (0, _react.useRef)({});
+  var updateTreeNodeCheckState = (0, _react.useCallback)(function (value) {
+    if (value === void 0) {
+      value = [];
+    }
+    // Reset values to false
+    Object.keys(flattenedNodes.current).forEach(function (refKey) {
+      var node = flattenedNodes.current[refKey];
+      if (cascade && !(0, _isNil.default)(node.parent) && !(0, _isNil.default)(node.parent.refKey)) {
+        node.check = flattenedNodes.current[node.parent.refKey].check;
+      } else {
+        node.check = false;
+      }
+      value.forEach(function (nodeVal) {
+        if ((0, _shallowEqual.default)(flattenedNodes.current[refKey][valueKey], nodeVal) && !uncheckableItemValues.some(function (uncheckableValue) {
+          return (0, _shallowEqual.default)(nodeVal, uncheckableValue);
+        })) {
+          flattenedNodes.current[refKey].check = true;
+        }
+      });
+    });
+  }, [cascade, uncheckableItemValues, valueKey]);
+  var flattenTreeData = (0, _react.useCallback)(function (treeData, parent, layer) {
+    if (layer === void 0) {
+      layer = 1;
+    }
+    if (!Array.isArray(treeData) || treeData.length === 0) {
+      return [];
+    }
+    treeData.map(function (node) {
+      var _extends2;
+      var value = node[valueKey];
+      /**
+       * because the value of the node's type is string or number,
+       * so it can used as the key of the object directly
+       * to avoid number value is converted to string. 1 and '1' will be convert to '1'
+       * we used `String_` or `Number_` prefix
+       */
+      var refKey = (0, _utils.formatNodeRefKey)(value);
+      node.refKey = refKey;
+      flattenedNodes.current[refKey] = (0, _extends3.default)((_extends2 = {
+        layer: layer
+      }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {
+        return (0, _shallowEqual.default)(node[valueKey], value);
+      }), _extends2), node);
+      if (parent) {
+        flattenedNodes.current[refKey].parent = (0, _omit.default)(parent, 'parent', 'children');
+      }
+      flattenTreeData(node[childrenKey], node, layer + 1);
+    });
+    callback === null || callback === void 0 ? void 0 : callback(flattenedNodes.current);
+    forceUpdate();
+  }, [callback, forceUpdate, valueKey, labelKey, uncheckableItemValues, childrenKey]);
+  (0, _react.useEffect)(function () {
+    // when data is changed, should clear the flattenedNodes, avoid duplicate keys
+    flattenedNodes.current = {};
+    flattenTreeData(data);
+  }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  (0, _react.useEffect)(function () {
+    if (multiple) {
+      updateTreeNodeCheckState(value);
+      forceUpdate();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+  return flattenedNodes.current;
+}
+var _default = useFlattenTree;
+exports.default = _default;

package/cjs/Tree/hooks/useFocusTree.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { TreeNode } from '../types';
+interface UseFocusTreeProps<T extends TreeNode> {
+    filteredData: T[];
+    disabledItemValues: any[];
+    expandItemValues: any[];
+    searchKeyword: string;
+    flattenedNodes: any;
+    onExpand?: (nodeData: T, expanded: boolean) => void;
+    onFocused?: (value: TreeNode['value']) => void;
+}
+/**
+ * Custom hook that manages the focus behavior of a tree component.
+ */
+declare function useFocusTree(props: UseFocusTreeProps<TreeNode>): {
+    treeViewRef: import("react").RefObject<HTMLDivElement>;
+    focusTreeFirstNode: (...args: any[]) => any;
+    focusItemValue: string | number | null | undefined;
+    treeNodesRefs: {};
+    saveTreeNodeRef: (ref: import("react").Ref<any>, refKey?: string | undefined) => void;
+    setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<string | number | null | undefined>>;
+    onTreeKeydown: (...args: any[]) => any;
+};
+export default useFocusTree;

package/cjs/Tree/hooks/useFocusTree.js

@@ -0,0 +1,158 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _constants = require("../../utils/constants");
+var _utils = require("../../utils");
+var _Picker = require("../../internals/Picker");
+var _TreeProvider = require("../TreeProvider");
+var _utils2 = require("../utils");
+var _useTreeNodeRefs2 = _interopRequireDefault(require("./useTreeNodeRefs"));
+/**
+ * Custom hook that manages the focus behavior of a tree component.
+ */
+function useFocusTree(props) {
+  var filteredData = props.filteredData,
+    searchKeyword = props.searchKeyword,
+    flattenedNodes = props.flattenedNodes,
+    expandItemValues = props.expandItemValues,
+    disabledItemValues = props.disabledItemValues,
+    onExpand = props.onExpand,
+    onFocused = props.onFocused;
+  var _useCustom = (0, _utils.useCustom)(),
+    rtl = _useCustom.rtl;
+  var _useItemDataKeys = (0, _TreeProvider.useItemDataKeys)(),
+    valueKey = _useItemDataKeys.valueKey,
+    childrenKey = _useItemDataKeys.childrenKey;
+  var _useTreeNodeRefs = (0, _useTreeNodeRefs2.default)(),
+    treeNodesRefs = _useTreeNodeRefs.treeNodesRefs,
+    saveTreeNodeRef = _useTreeNodeRefs.saveTreeNodeRef;
+  var treeViewRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    focusItemValue = _useState[0],
+    setFocusItemValue = _useState[1];
+  var register = (0, _TreeProvider.useRegisterTreeMethods)();
+  var flattenedNodesRef = (0, _react.useRef)(flattenedNodes);
+  var getFocusProps = function getFocusProps(value) {
+    var options = {
+      disabledItemValues: disabledItemValues,
+      valueKey: valueKey,
+      childrenKey: childrenKey,
+      expandItemValues: expandItemValues
+    };
+    var focusableItems = (0, _utils2.getFocusableItems)(filteredData, options, (0, _utils2.isSearching)(searchKeyword));
+    return {
+      focusItemValue: value || focusItemValue,
+      valueKey: valueKey,
+      focusableItems: focusableItems,
+      treeNodesRefs: treeNodesRefs
+    };
+  };
+  var handleFocusItem = (0, _utils.useEventCallback)(function (key) {
+    var focusProps = getFocusProps();
+    var focusedValue = null;
+    if (key === _constants.KEY_VALUES.DOWN) {
+      focusedValue = (0, _utils2.focusNextItem)(focusProps);
+    } else if (key === _constants.KEY_VALUES.UP) {
+      focusedValue = (0, _utils2.focusPreviousItem)(focusProps);
+    }
+    if (focusedValue) {
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 ? void 0 : onFocused(focusedValue);
+    }
+  });
+  var handleLeftArrowEvent = (0, _utils.useEventCallback)(function () {
+    if ((0, _isNil.default)(focusItemValue)) {
+      return;
+    }
+    var focusItem = (0, _utils2.getActiveItem)(focusItemValue, flattenedNodes, valueKey);
+    var expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    var onFocusItem = function onFocusItem() {
+      var _focusItem$parent, _focusItem$parent2;
+      var focusedValue = focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent = focusItem.parent) === null || _focusItem$parent === void 0 ? void 0 : _focusItem$parent[valueKey];
+      setFocusItemValue(focusedValue);
+      onFocused === null || onFocused === void 0 ? void 0 : onFocused(focusedValue);
+      (0, _utils2.focusTreeNode)(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs);
+    };
+    (0, _utils2.handleLeftArrow)({
+      focusItem: focusItem,
+      expand: expand,
+      onExpand: onExpand,
+      childrenKey: childrenKey,
+      onFocusItem: onFocusItem
+    });
+  });
+  var handleRightArrowEvent = (0, _utils.useEventCallback)(function () {
+    if ((0, _isNil.default)(focusItemValue)) {
+      return;
+    }
+    var focusItem = (0, _utils2.getActiveItem)(focusItemValue, flattenedNodes, valueKey);
+    var expand = expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]);
+    var onFocusItem = function onFocusItem() {
+      return handleFocusItem(_constants.KEY_VALUES.DOWN);
+    };
+    (0, _utils2.handleRightArrow)({
+      focusItem: focusItem,
+      expand: expand,
+      childrenKey: childrenKey,
+      onExpand: onExpand,
+      onFocusItem: onFocusItem
+    });
+  });
+  var onTreeKeydown = (0, _utils.useEventCallback)(function (event) {
+    (0, _Picker.onMenuKeyDown)(event, {
+      down: function down() {
+        return handleFocusItem(_constants.KEY_VALUES.DOWN);
+      },
+      up: function up() {
+        return handleFocusItem(_constants.KEY_VALUES.UP);
+      },
+      left: rtl ? handleRightArrowEvent : handleLeftArrowEvent,
+      right: rtl ? handleLeftArrowEvent : handleRightArrowEvent
+    });
+  });
+  var focusTreeFirstNode = (0, _utils.useEventCallback)(function () {
+    handleFocusItem(_constants.KEY_VALUES.DOWN);
+  });
+  var focusTreeActiveNode = (0, _react.useCallback)(function () {
+    var refKey = (0, _utils2.focusCurrentItem)({
+      container: treeViewRef.current
+    });
+    if (refKey) {
+      var _flattenedNodesRef$cu;
+      var node = (_flattenedNodesRef$cu = flattenedNodesRef.current) === null || _flattenedNodesRef$cu === void 0 ? void 0 : _flattenedNodesRef$cu[refKey];
+      if (node) {
+        setFocusItemValue(node[valueKey]);
+        onFocused === null || onFocused === void 0 ? void 0 : onFocused(node[valueKey]);
+      }
+    }
+  }, [onFocused, valueKey]);
+  (0, _react.useEffect)(function () {
+    var unregister = register === null || register === void 0 ? void 0 : register({
+      focusTreeFirstNode: focusTreeFirstNode,
+      focusTreeActiveNode: focusTreeActiveNode
+    });
+    return function () {
+      unregister === null || unregister === void 0 ? void 0 : unregister();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  (0, _react.useEffect)(function () {
+    flattenedNodesRef.current = flattenedNodes;
+  }, [flattenedNodes]);
+  return {
+    treeViewRef: treeViewRef,
+    focusTreeFirstNode: focusTreeFirstNode,
+    focusItemValue: focusItemValue,
+    treeNodesRefs: treeNodesRefs,
+    saveTreeNodeRef: saveTreeNodeRef,
+    setFocusItemValue: setFocusItemValue,
+    onTreeKeydown: onTreeKeydown
+  };
+}
+var _default = useFocusTree;
+exports.default = _default;

package/cjs/Tree/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+declare function useForceUpdate(): () => void;
+export default useForceUpdate;

package/cjs/Tree/hooks/useForceUpdate.js

@@ -0,0 +1,16 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+function useForceUpdate() {
+  var _useState = (0, _react.useState)(Object.create(null)),
+    dispatch = _useState[1];
+  var forceUpdate = (0, _react.useCallback)(function () {
+    dispatch(Object.create(null));
+  }, [dispatch]);
+  return forceUpdate;
+}
+var _default = useForceUpdate;
+exports.default = _default;

package/cjs/Tree/hooks/useTreeDrag.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { TREE_NODE_DROP_POSITION } from '../../utils';
+import type { DropData } from '../types';
+interface TreeDragProps {
+    draggable?: boolean;
+    flattenedNodes: Record<string, any>;
+    treeNodesRefs: Record<string, any>;
+    prefix: (className: string) => string;
+    onDragStart?: (nodeData: any, event: React.DragEvent) => void;
+    onDragEnter?: (nodeData: any, event: React.DragEvent) => void;
+    onDragOver?: (nodeData: any, event: React.DragEvent) => void;
+    onDragLeave?: (nodeData: any, event: React.DragEvent) => void;
+    onDragEnd?: (nodeData: any, event: React.DragEvent) => void;
+    onDrop?: (dropData: DropData<Record<string, any>>, event: React.DragEvent) => void;
+}
+/**
+ * Custom hook for handling tree node dragging.
+ */
+export default function useTreeDrag<T>(props: TreeDragProps): {
+    dragNode: T | null;
+    dragOverNodeKey: null;
+    dropNodePosition: -1 | TREE_NODE_DROP_POSITION | null;
+    dragEvents: {
+        onDragStart: (...args: any[]) => any;
+        onDragEnter: (...args: any[]) => any;
+        onDragOver: (...args: any[]) => any;
+        onDragLeave: (...args: any[]) => any;
+        onDragEnd: (...args: any[]) => any;
+        onDrop: (...args: any[]) => any;
+    };
+};
+export {};

package/cjs/Tree/hooks/useTreeDrag.js

@@ -0,0 +1,268 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = useTreeDrag;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = require("react");
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+var _utils = require("../../utils");
+var _utils2 = require("../../internals/utils");
+var _TreeProvider = require("../TreeProvider");
+/**
+ * The gap between tree nodes.
+ */
+var TREE_NODE_GAP = 4;
+
+/**
+ * Calculates the drop position of a tree node based on the clientY coordinate of a drag event
+ * and the bounding rectangle of the tree node element.
+ *
+ * @param event - The drag event.
+ * @param treeNodeElement - The element representing the tree node.
+ * @returns The drop position of the tree node.
+ */
+function calDropNodePosition(event, treeNodeElement) {
+  var clientY = event.clientY;
+  var _treeNodeElement$getB = treeNodeElement.getBoundingClientRect(),
+    top = _treeNodeElement$getB.top,
+    bottom = _treeNodeElement$getB.bottom;
+  var gap = TREE_NODE_GAP;
+
+  // bottom of node
+  if (clientY >= bottom - gap && clientY <= bottom) {
+    return _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM;
+  }
+
+  // top of node
+  if (clientY <= top + gap && clientY >= top) {
+    return _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP;
+  }
+  if (clientY >= top + gap && clientY <= bottom - gap) {
+    return _utils.TREE_NODE_DROP_POSITION.DRAG_OVER;
+  }
+  return -1;
+}
+
+/**
+ * Creates a drag preview element for tree nodes.
+ */
+function createDragPreview(name, className) {
+  var dragPreview = document.createElement('div');
+  dragPreview.id = 'rs-tree-drag-preview';
+  dragPreview.dataset.testid = 'drag-preview';
+  dragPreview.innerHTML = name;
+  dragPreview.classList.add(className);
+  document.body.appendChild(dragPreview);
+  return dragPreview;
+}
+
+/**
+ * Removes the drag preview element from the DOM.
+ */
+function removeDragPreview() {
+  var _dragPreview$parentNo, _dragPreview$parentNo2;
+  var dragPreview = document.getElementById('rs-tree-drag-preview');
+  dragPreview === null || dragPreview === void 0 ? void 0 : (_dragPreview$parentNo = dragPreview.parentNode) === null || _dragPreview$parentNo === void 0 ? void 0 : (_dragPreview$parentNo2 = _dragPreview$parentNo.removeChild) === null || _dragPreview$parentNo2 === void 0 ? void 0 : _dragPreview$parentNo2.call(_dragPreview$parentNo, dragPreview);
+}
+/**
+ * Custom hook for handling tree node dragging.
+ */
+function useTreeDrag(props) {
+  var _useItemDataKeys = (0, _TreeProvider.useItemDataKeys)(),
+    childrenKey = _useItemDataKeys.childrenKey,
+    valueKey = _useItemDataKeys.valueKey,
+    labelKey = _useItemDataKeys.labelKey;
+  var draggable = props.draggable,
+    flattenedNodes = props.flattenedNodes,
+    treeNodesRefs = props.treeNodesRefs,
+    onDragStart = props.onDragStart,
+    onDragEnter = props.onDragEnter,
+    onDragOver = props.onDragOver,
+    onDragLeave = props.onDragLeave,
+    onDragEnd = props.onDragEnd,
+    onDrop = props.onDrop,
+    prefix = props.prefix; // current dragging node
+  var dragNode = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(null),
+    dragOverNodeKey = _useState[0],
+    setDragOverNodeKey = _useState[1]; // drag node and it's children nodes key
+  var _useState2 = (0, _react.useState)([]),
+    dragNodeKeys = _useState2[0],
+    setDragNodeKeys = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    dropNodePosition = _useState3[0],
+    setDropNodePosition = _useState3[1];
+  var setDragNode = (0, _react.useCallback)(function (node) {
+    dragNode.current = node;
+  }, []);
+
+  /**
+   * Retrieves an array of keys for the nodes in a tree starting from the specified drag node.
+   */
+  var getDragNodeKeys = (0, _react.useCallback)(function (dragNode) {
+    var dragNodeKeys = [dragNode[valueKey]];
+    var traverse = function traverse(data) {
+      if ((data === null || data === void 0 ? void 0 : data.length) > 0) {
+        data.forEach(function (node) {
+          dragNodeKeys = dragNodeKeys.concat([node[valueKey]]);
+          if (node[childrenKey]) {
+            traverse(node[childrenKey]);
+          }
+        });
+      }
+    };
+    traverse(dragNode[childrenKey]);
+    return dragNodeKeys;
+  }, [childrenKey, valueKey]);
+
+  /**
+   * Removes the drag node from the data array.
+   *
+   */
+  var removeDragNode = (0, _react.useCallback)(function (data, params) {
+    var dragNode = params.dragNode;
+    var traverse = function traverse(items, parent) {
+      for (var index = 0; index < items.length; index += 1) {
+        var item = items[index];
+        if ((0, _utils.shallowEqual)(item[valueKey], dragNode[valueKey])) {
+          items.splice(index, 1);
+          // when children is empty, delete children prop for hidden anchor
+          if (items.length === 0 && parent) {
+            delete parent.children;
+          }
+          break;
+        }
+        if (Array.isArray(item[childrenKey])) {
+          traverse(item[childrenKey], item);
+        }
+      }
+    };
+    traverse(data);
+  }, [childrenKey, valueKey]);
+
+  /**
+   * Creates a function that modifies a tree data structure based on drag and drop parameters.
+   */
+  var createDragTreeDataFunction = (0, _react.useCallback)(function (params) {
+    return function (tree) {
+      var data = [].concat(tree);
+      var dragNode = params.dragNode,
+        dropNode = params.dropNode,
+        dropNodePosition = params.dropNodePosition;
+      var cloneDragNode = (0, _extends2.default)({}, dragNode);
+      removeDragNode(data, params);
+      var updateTree = function updateTree(items) {
+        for (var index = 0; index < items.length; index += 1) {
+          var item = items[index];
+          if ((0, _utils.shallowEqual)(item[valueKey], dropNode[valueKey])) {
+            // drag to node inside
+            if (dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER) {
+              item[childrenKey] = (0, _isNil.default)(item[childrenKey]) ? [] : item[childrenKey];
+              item[childrenKey].push(cloneDragNode);
+              break;
+            } else if (dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_TOP) {
+              // drag to top of node
+              items.splice(index, 0, cloneDragNode);
+              break;
+            } else if (dropNodePosition === _utils.TREE_NODE_DROP_POSITION.DRAG_OVER_BOTTOM) {
+              // drag to bottom of node
+              items.splice(index + 1, 0, cloneDragNode);
+              break;
+            }
+          }
+          if (Array.isArray(item[childrenKey]) && item[childrenKey].length > 0) {
+            updateTree(item[childrenKey]);
+          }
+        }
+      };
+      updateTree(data);
+      return [].concat(data);
+    };
+  }, [childrenKey, removeDragNode, valueKey]);
+  var getDropData = (0, _react.useCallback)(function (nodeData) {
+    var dragParams = {
+      dragNode: dragNode.current,
+      dropNode: nodeData,
+      dropNodePosition: dropNodePosition
+    };
+    return (0, _extends2.default)({}, dragParams, {
+      createUpdateDataFunction: createDragTreeDataFunction(dragParams)
+    });
+  }, [createDragTreeDataFunction, dropNodePosition]);
+  var handleDragStart = (0, _utils.useEventCallback)(function (nodeData, event) {
+    if (draggable) {
+      var _event$dataTransfer;
+      var dragMoverNode = createDragPreview((0, _utils2.stringifyReactNode)(nodeData[labelKey]), prefix('drag-preview'));
+      (_event$dataTransfer = event.dataTransfer) === null || _event$dataTransfer === void 0 ? void 0 : _event$dataTransfer.setDragImage(dragMoverNode, 0, 0);
+      setDragNodeKeys(getDragNodeKeys(nodeData));
+      setDragNode(flattenedNodes[nodeData.refKey]);
+      onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(nodeData, event);
+    }
+  });
+  var handleDragEnter = (0, _utils.useEventCallback)(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
+    })) {
+      return;
+    }
+    if (dragNode.current) {
+      setDragOverNodeKey(nodeData[valueKey]);
+      setDropNodePosition(calDropNodePosition(event, treeNodesRefs[nodeData.refKey]));
+    }
+    onDragEnter === null || onDragEnter === void 0 ? void 0 : onDragEnter(nodeData, event);
+  });
+  var handleDragOver = (0, _utils.useEventCallback)(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
+    })) {
+      event.dataTransfer.dropEffect = 'none';
+      return;
+    }
+    if (dragNode.current && (0, _utils.shallowEqual)(nodeData[valueKey], dragOverNodeKey)) {
+      var lastDropNodePosition = calDropNodePosition(event, treeNodesRefs[nodeData.refKey]);
+      if (lastDropNodePosition === dropNodePosition) return;
+      setDropNodePosition(lastDropNodePosition);
+    }
+    onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(nodeData, event);
+  });
+  var handleDragLeave = (0, _utils.useEventCallback)(function (nodeData, event) {
+    onDragLeave === null || onDragLeave === void 0 ? void 0 : onDragLeave(nodeData, event);
+  });
+  var handleDragEnd = (0, _utils.useEventCallback)(function (nodeData, event) {
+    removeDragPreview();
+    setDragNode(null);
+    setDragNodeKeys([]);
+    setDragOverNodeKey(null);
+    onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(nodeData, event);
+  });
+  var handleDrop = (0, _utils.useEventCallback)(function (nodeData, event) {
+    if (dragNodeKeys.some(function (d) {
+      return (0, _utils.shallowEqual)(d, nodeData[valueKey]);
+    })) {
+      console.error('Cannot drag a node to itself and its children');
+    } else {
+      var _dropData = getDropData(nodeData);
+      onDrop === null || onDrop === void 0 ? void 0 : onDrop(_dropData, event);
+    }
+    removeDragPreview();
+    setDragNode(null);
+    setDragNodeKeys([]);
+    setDragOverNodeKey(null);
+  });
+  var dragEvents = {
+    onDragStart: handleDragStart,
+    onDragEnter: handleDragEnter,
+    onDragOver: handleDragOver,
+    onDragLeave: handleDragLeave,
+    onDragEnd: handleDragEnd,
+    onDrop: handleDrop
+  };
+  return {
+    dragNode: dragNode === null || dragNode === void 0 ? void 0 : dragNode.current,
+    dragOverNodeKey: dragOverNodeKey,
+    dropNodePosition: dropNodePosition,
+    dragEvents: dragEvents
+  };
+}

package/cjs/Tree/hooks/useTreeNodeProps.d.ts

@@ -0,0 +1,29 @@
+import { TREE_NODE_DROP_POSITION } from '../../utils';
+import { DragStatus } from '../TreeNode';
+interface Props {
+    value: any;
+    disabledItemValues: any[];
+    loadingNodeValues: any[];
+    focusItemValue: any;
+    keyword: string;
+    dragNode: any;
+    dragOverNodeKey: any;
+    dropNodePosition: TREE_NODE_DROP_POSITION | -1 | null;
+}
+declare function useTreeNodeProps(props: Props): (nodeData: any, layer: number, index?: number) => {
+    id: string | undefined;
+    value: any;
+    label: any;
+    index: number | undefined;
+    layer: number;
+    loading: boolean;
+    active: boolean;
+    focus: boolean;
+    visible: any;
+    children: any;
+    nodeData: any;
+    disabled: boolean;
+    dragging: boolean;
+    dragStatus: DragStatus | undefined;
+};
+export default useTreeNodeProps;