feat(tree): add Tree onScroll api (#3295)

* feat(tree): add Tree onScroll api * chore(tree): adjustment onScroll * perf(tree): code clean * perf(tree): code perf
Tencent · Dec 23, 2024 · fffe54a · fffe54a
1 parent a2e730d
commit fffe54a
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/tree/Tree.tsx b/src/tree/Tree.tsx
@@ -65,6 +65,7 @@ const Tree = forwardRef<TreeInstanceFunctions<TreeOptionData>, TreeProps>((origi
     className,
     style,
     allowDrop,
+    onScroll,
   } = props;
 
   const { value, onChange, expanded, onExpand, onActive, actived, setTreeIndeterminate, indeterminate } =
@@ -135,6 +136,7 @@ const Tree = forwardRef<TreeInstanceFunctions<TreeOptionData>, TreeProps>((origi
     treeRef,
     scroll,
     data: visibleNodes,
+    onScroll,
   });
 
   const setActived = usePersistFn(

diff --git a/src/tree/hooks/useTreeVirtualScroll.ts b/src/tree/hooks/useTreeVirtualScroll.ts
@@ -2,15 +2,19 @@ import { useMemo, useEffect, CSSProperties } from 'react';
 import useVirtualScroll from '../../hooks/useVirtualScroll';
 import TreeNode from '../../_common/js/tree-v1/tree-node';
 import { TScroll } from '../../common';
+import type { TdTreeProps } from '../type';
+import useEventCallback from '../../hooks/useEventCallback';
 
 export default function useTreeVirtualScroll({
   treeRef,
   scroll,
   data = [],
+  onScroll,
 }: {
   data: TreeNode[];
   scroll: TScroll;
   treeRef: React.MutableRefObject<HTMLElement>;
+  onScroll: TdTreeProps['onScroll'];
 }) {
   const scrollThreshold = scroll?.threshold || 100;
   const scrollType = scroll?.type;
@@ -45,7 +49,8 @@ export default function useTreeVirtualScroll({
   });
 
   let lastScrollY = -1;
-  const onInnerVirtualScroll = (e: WheelEvent) => {
+  const onInnerVirtualScroll = useEventCallback((e: WheelEvent) => {
+    onScroll?.({ e });
     if (!isVirtual) {
       return;
     }
@@ -58,21 +63,17 @@ export default function useTreeVirtualScroll({
       lastScrollY = -1;
     }
     lastScrollY = top;
-  };
+  });
 
   useEffect(() => {
     const treeList = treeRef?.current;
-    if (isVirtual) {
-      treeList?.addEventListener?.('scroll', onInnerVirtualScroll);
-    }
+    treeList?.addEventListener?.('scroll', onInnerVirtualScroll);
+
     return () => {
       // 卸载时取消监听
-      if (isVirtual) {
-        treeList?.removeEventListener?.('scroll', onInnerVirtualScroll);
-      }
+      treeList?.removeEventListener?.('scroll', onInnerVirtualScroll);
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isVirtual, onInnerVirtualScroll]);
+  }, [treeRef, onInnerVirtualScroll]);
 
   const cursorStyle = {
     position: 'absolute',

diff --git a/src/tree/type.ts b/src/tree/type.ts
@@ -6,7 +6,7 @@
 
 import { CheckboxProps } from '../checkbox';
 import { TNode, TreeOptionData, TScroll, ComponentScrollToElementParams } from '../common';
-import { MouseEvent, WheelEvent, DragEvent } from 'react';
+import { MouseEvent, DragEvent } from 'react';
 
 export interface TdTreeProps<T extends TreeOptionData = TreeOptionData> {
   /**
@@ -238,7 +238,7 @@ export interface TdTreeProps<T extends TreeOptionData = TreeOptionData> {
   /**
    * 滚动事件
    */
-  onScroll?: (params: { e: WheelEvent<HTMLDivElement> }) => void;
+  onScroll?: (params: { e: WheelEvent }) => void;
 }
 
 /** 组件实例方法 */