diff --git a/src/SortableTree/container/StoreUpdater.tsx b/src/SortableTree/container/StoreUpdater.tsx index aa5cd2bc..03aa5a04 100644 --- a/src/SortableTree/container/StoreUpdater.tsx +++ b/src/SortableTree/container/StoreUpdater.tsx @@ -6,7 +6,7 @@ import { SortableTreeInstance, useSortableTree } from '../hooks/useSortableTree' import type { ControlledState, OnTreeDataChange } from '../store'; import { useStoreApi } from '../store'; -import type { FlattenNode, Projected, RenderNodeProps, TreeData } from '../types'; +import type { FlattenNode, Projected, RenderNodeProps, TreeData, VirtualConfig } from '../types'; export interface StoreUpdaterProps extends ControlledState { /** @@ -46,6 +46,11 @@ export interface StoreUpdaterProps extends ControlledState { targetNode: FlattenNode; projected: Projected; }) => boolean; + + /** + * 开启虚拟滚动 + */ + virtual?: VirtualConfig; } const StoreUpdater = ({ @@ -61,6 +66,7 @@ const StoreUpdater = ({ indentationWidth, disableDrag, sortableRule, + virtual, }: StoreUpdaterProps) => { const storeApi = useStoreApi(); @@ -75,6 +81,7 @@ const StoreUpdater = ({ useStoreUpdater('indentationWidth', indentationWidth); useStoreUpdater('hideAdd', hideAdd); useStoreUpdater('hideRemove', hideRemove); + useStoreUpdater('virtual', virtual); useStoreUpdater('disableDrag', disableDrag); useStoreUpdater('sortableRule', sortableRule); diff --git a/src/SortableTree/demos/virtual.tsx b/src/SortableTree/demos/virtual.tsx index 10b88c64..6b9b52db 100644 --- a/src/SortableTree/demos/virtual.tsx +++ b/src/SortableTree/demos/virtual.tsx @@ -1,3 +1,7 @@ +/** + * title: 虚拟滚动 + * description: 数据量较大时,使用 virtual 配置虚拟滚动 + */ import { SortableTree } from '@ant-design/pro-editor'; interface DataContent { @@ -3951,14 +3955,19 @@ const LayerManager = () => { ]; return ( - - treeData={treeData as any} - renderContent={(item) =>
{item.id}
} - SHOW_STORE_IN_DEVTOOLS - onTreeDataChange={(data) => { - console.log('变更:', data); - }} - /> +
+ + treeData={treeData as any} + renderContent={(item) =>
{item.id}
} + SHOW_STORE_IN_DEVTOOLS + virtual={{ + height: 480, + }} + onTreeDataChange={(data) => { + console.log('变更:', data); + }} + /> +
); }; export default LayerManager; diff --git a/src/SortableTree/features/TreeList.tsx b/src/SortableTree/features/TreeList.tsx index 65bdf727..26850c25 100644 --- a/src/SortableTree/features/TreeList.tsx +++ b/src/SortableTree/features/TreeList.tsx @@ -75,30 +75,36 @@ interface TreeListProps { } const TreeList = memo(({ prefixCls }) => { - const [dispatchTreeData, hideAdd] = useStore( - (s) => [s.dispatchTreeData, s.hideAdd, s.hideRemove], + const [dispatchTreeData, hideAdd, virtual] = useStore( + (s) => [s.dispatchTreeData, s.hideAdd, s.virtual], shallow, ); const flattenData: FlattenNode[] = useStore(dataFlattenSelector, isEqual); const { styles } = useStyle(prefixCls); + const { height = 800, itemHeight = () => 36, width = '100%' } = virtual || {}; + return ( <> - 36} - itemData={flattenData} - width={275} - > - {({ index, data, style }) => { - return ; - }} - - - {/* {flattenData.map((node) => ( - - ))} */} + {virtual ? ( + + {({ index, data, style }) => { + return ; + }} + + ) : ( + <> + {flattenData.map((node) => ( + + ))} + + )} {hideAdd ? null : (