diff --git a/src/tree/Tree.tsx b/src/tree/Tree.tsx index 41d8c46f1..83616b3fd 100644 --- a/src/tree/Tree.tsx +++ b/src/tree/Tree.tsx @@ -94,6 +94,7 @@ const Tree = forwardRef((props: TreeProps, ref: React.Ref treeNodeStyle: virtualTreeNodeStyle, cursorStyle, handleRowMounted, + scrollToElement, } = useTreeVirtualScroll({ treeRef, scroll, @@ -149,6 +150,7 @@ const Tree = forwardRef((props: TreeProps, ref: React.Ref ref, () => ({ store, + scrollTo: scrollToElement, appendTo(value, newData) { let list = []; if (Array.isArray(newData)) { @@ -216,7 +218,7 @@ const Tree = forwardRef((props: TreeProps, ref: React.Ref } }, }), - [store, setExpanded, setActived, setChecked], + [store, setExpanded, setActived, setChecked, scrollToElement], ); /* ======== render ======= */ diff --git a/src/tree/_example/vscroll.jsx b/src/tree/_example/vscroll.jsx index 40cf0dc1d..7faf3be15 100644 --- a/src/tree/_example/vscroll.jsx +++ b/src/tree/_example/vscroll.jsx @@ -1,10 +1,11 @@ -import React, { useEffect, useState } from 'react'; -import { Tree, Switch, Space, Form } from 'tdesign-react'; +import React, { useEffect, useState, useRef } from 'react'; +import { Tree, Switch, Space, Form, Button } from 'tdesign-react'; export default () => { const [checkable, setCheckable] = useState(true); const [showLine, toggleShowLine] = useState(true); const [options, setOptions] = useState([]); + const treeRef = useRef(null); useEffect(() => { const newOptions = []; @@ -27,6 +28,10 @@ export default () => { setOptions(newOptions); }, []); + const handleScroll = () => { + treeRef.current.scrollTo({ index: 100, behavior: 'smooth' }); + }; + const defaultChecked = ['1.2', '2.2']; return ( @@ -38,6 +43,7 @@ export default () => { + { hover scroll={{ type: 'virtual' }} style={{ height: '300px' }} + ref={treeRef} /> ); diff --git a/src/tree/hooks/useTreeVirtualScroll.ts b/src/tree/hooks/useTreeVirtualScroll.ts index fd671744e..0f340747e 100644 --- a/src/tree/hooks/useTreeVirtualScroll.ts +++ b/src/tree/hooks/useTreeVirtualScroll.ts @@ -39,6 +39,7 @@ export default function useTreeVirtualScroll({ scrollHeight = null, translateY = null, handleRowMounted = null, + scrollToElement, } = useVirtualScroll(treeRef, { data: data || [], scroll: scrollParams, @@ -100,5 +101,6 @@ export default function useTreeVirtualScroll({ isVirtual, cursorStyle, treeNodeStyle, + scrollToElement, }; } diff --git a/src/tree/tree.en-US.md b/src/tree/tree.en-US.md index 085b38990..c9f246e11 100644 --- a/src/tree/tree.en-US.md +++ b/src/tree/tree.en-US.md @@ -67,6 +67,7 @@ getPath | `(value: TreeNodeValue)` | `TreeNodeModel[]` | required insertAfter | `(value: TreeNodeValue, newData: T)` | \- | required insertBefore | `(value: TreeNodeValue, newData: T)` | \- | required remove | `(value: TreeNodeValue)` | \- | required +scrollTo | `(scrollToParams: ScrollToElementParams)` | \- | support scrolling to a specific node when virtual scrolling setItem | `(value: TreeNodeValue, options: TreeNodeState)` | \- | required ### TreeNodeState diff --git a/src/tree/tree.md b/src/tree/tree.md index 16563f3f7..870f31aa5 100644 --- a/src/tree/tree.md +++ b/src/tree/tree.md @@ -67,6 +67,7 @@ getPath | `(value: TreeNodeValue)` | `TreeNodeModel[]` | 必需。自下而 insertAfter | `(value: TreeNodeValue, newData: T)` | \- | 必需。插入新节点到指定节点后面，泛型 `T` 表示树节点 TS 类型 insertBefore | `(value: TreeNodeValue, newData: T)` | \- | 必需。插入新节点到指定节点前面，泛型 `T` 表示树节点 TS 类型 remove | `(value: TreeNodeValue)` | \- | 必需。移除指定节点 +scrollTo | `(scrollToParams: ScrollToElementParams)` | \- | 虚拟滚动场景下 支持指定滚动到具体的节点 setItem | `(value: TreeNodeValue, options: TreeNodeState)` | \- | 必需。设置节点状态 ### TreeNodeState diff --git a/src/tree/type.ts b/src/tree/type.ts index 3e50bee36..4813df311 100644 --- a/src/tree/type.ts +++ b/src/tree/type.ts @@ -5,7 +5,7 @@ * */ import { CheckboxProps } from '../checkbox'; -import { TNode, TreeOptionData, TScroll } from '../common'; +import { TNode, TreeOptionData, TScroll, ScrollToElementParams } from '../common'; import { MouseEvent, WheelEvent, DragEvent } from 'react'; export interface TdTreeProps { @@ -118,7 +118,7 @@ export interface TdTreeProps { */ icon?: boolean | TNode>; /** - * 用来定义 `value / label / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }` + * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label 'name', children: 'list' }`。其中，disabled 待开发。 */ keys?: TreeKeysType; /** @@ -274,6 +274,10 @@ export interface TreeInstanceFunctions void; + /** + * 虚拟滚动场景下 支持指定滚动到具体的节点 + */ + scrollTo?: (scrollToParams: ScrollToElementParams) => void; /** * 设置节点状态 */ diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 1b88a5cc9..8f6961ea9 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -285176,6 +285176,20 @@ exports[`csr snapshot test > csr test src/tree/_example/vscroll.jsx 1`] = ` +
+ +
@@ -285268,6 +285282,20 @@ exports[`csr snapshot test > csr test src/tree/_example/vscroll.jsx 1`] = `
+
+ +
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index d8e9c3c75..fffe50ce2 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -1100,7 +1100,7 @@ exports[`ssr snapshot test > ssr test src/tree/_example/state.jsx 1`] = `"
ssr test src/tree/_example/sync.jsx 1`] = `"
checked:
expanded:
actived:
Tree Empty Data
"`; -exports[`ssr snapshot test > ssr test src/tree/_example/vscroll.jsx 1`] = `"
Tree Empty Data
"`; +exports[`ssr snapshot test > ssr test src/tree/_example/vscroll.jsx 1`] = `"
Tree Empty Data
"`; exports[`ssr snapshot test > ssr test src/tree-select/_example/base.jsx 1`] = `"
"`;