From fffe54a43c56c35586285a1874f079ed099b2ee0 Mon Sep 17 00:00:00 2001
From: Haixing <65376724+HaixingOoO@users.noreply.github.com>
Date: Tue, 24 Dec 2024 00:32:26 +0800
Subject: [PATCH] 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
---
 src/tree/Tree.tsx                      |  2 ++
 src/tree/hooks/useTreeVirtualScroll.ts | 21 +++++++++++----------
 src/tree/type.ts                       |  4 ++--
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/tree/Tree.tsx b/src/tree/Tree.tsx
index a641397af7..83c019a1c3 100644
--- 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
index 8f6662f44f..17a077be0e 100644
--- 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
index deba736d66..582267f1ed 100644
--- 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;
 }
 
 /** 组件实例方法 */