✨ feat: add vertual list"

package.json

@@ -105,6 +105,8 @@
     "react-layout-kit": "^1.7.4",
     "react-markdown": "^8.0.7",
     "react-rnd": "^10.4.1",
+    "react-virtualized-auto-sizer": "^1.0.20",
+    "react-window": "^1.8.10",
     "reactflow": "^11.10.1",
     "rehype-katex": "^6.0.3",
     "remark-gfm": "^3.0.1",
@@ -129,6 +131,7 @@
     "@types/json-schema": "^7.0.15",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
+    "@types/react-window": "^1.8.8",
     "@umijs/lint": "^4.0.90",
     "@vitest/coverage-v8": "latest",
     "antd": "^5.12.5",

src/SortableTree/components/TreeItem/index.tsx

@@ -113,6 +113,10 @@ export interface TreeItemProps extends Omit<HTMLAttributes<HTMLLIElement>, 'id'>
    * @title 样式类名前缀
    */
   prefixCls: string;
+  /**
+   * 虚拟滚动添加样式
+   */
+  virtualStyle?: CSSProperties;
 }
 
 const animateLayoutChanges: AnimateLayoutChanges = ({ isSorting, wasDragging }) =>
@@ -134,6 +138,7 @@ const TreeItem: FC<TreeItemProps> = memo(
     hideRemove,
     node,
     prefixCls,
+    virtualStyle,
     ...props
   }) => {
     const prefix = `${prefixCls}-node`;
@@ -200,6 +205,7 @@ const TreeItem: FC<TreeItemProps> = memo(
 
               transform: CSS.Translate.toString(transform),
               transition,
+              ...virtualStyle,
             } as CSSProperties
           }
           onClick={(e) => {

src/SortableTree/demos/virtual.tsx

@@ -1,29 +1,12 @@
-import type { TreeData } from '@ant-design/pro-editor';
 import { SortableTree } from '@ant-design/pro-editor';
-import React from 'react';
 
 interface DataContent {
   name: string;
   visible: boolean;
   isLeaf: boolean;
 }
 
-interface IContentProps {
-  content: any;
-  id: string;
-  setCheckedId: any;
-  checked: boolean;
-}
-
-interface IProps {
-  layer: TreeData;
-  setLayer: any;
-  onLeafMove?: (leaf: any, layer: any) => void;
-  onLeafDelete?: (leaf: any) => void;
-  onLeafLock?: (leaf: any, locked: boolean) => void;
-}
-
-const LayerManager = (props: IProps) => {
+const LayerManager = () => {
   const treeData = [
     {
       id: '33',
@@ -3966,15 +3949,16 @@ const LayerManager = (props: IProps) => {
       ],
     },
   ];
-  console.log('treeData:11 ', treeData);
 
   return (
-    <div style={{ width: 275, padding: '0 12px', height: 800 }}>
-      <SortableTree<DataContent>
-        treeData={treeData as any}
-        renderContent={(item) => <div>{item.id}</div>}
-      />
-    </div>
+    <SortableTree<DataContent>
+      treeData={treeData as any}
+      renderContent={(item) => <div>{item.id}</div>}
+      SHOW_STORE_IN_DEVTOOLS
+      onTreeDataChange={(data) => {
+        console.log('变更：', data);
+      }}
+    />
   );
 };
-export default LayerManager;
+export default LayerManager;

src/SortableTree/features/TreeList.tsx

@@ -1,23 +1,25 @@
 import { createStyles, cx, getStudioStylish } from '@/theme';
-import { PlusOutlined } from '@ant-design/icons';
 import { useMemoizedFn } from 'ahooks';
-import { Button } from 'antd';
 import isEqual from 'lodash.isequal';
 import { memo } from 'react';
+import { VariableSizeList } from 'react-window';
 import { shallow } from 'zustand/shallow';
 
 import { SortableTreeItem } from '../components';
 import { dataFlattenSelector, projectedSelector, useStore } from '../store';
 
-import { genUniqueId } from '../../utils';
+import { genUniqueId } from '@/utils';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button } from 'antd';
 import type { FlattenNode } from '../types';
 
 interface TreeNodeProps {
   prefixCls: string;
   node: FlattenNode;
+  virtualStyle?: React.CSSProperties;
 }
 
-const TreeNode = memo<TreeNodeProps>(({ prefixCls, node }) => {
+const TreeNode = memo<TreeNodeProps>(({ prefixCls, node, virtualStyle }) => {
   const [activeId, indentationWidth, dispatchTreeData, hideRemove] = useStore(
     (s) => [s.activeId, s.indentationWidth, s.dispatchTreeData, s.hideRemove],
     shallow,
@@ -44,6 +46,7 @@ const TreeNode = memo<TreeNodeProps>(({ prefixCls, node }) => {
         children.length ? () => dispatchTreeData({ type: 'toggleCollapse', id }) : undefined
       }
       node={node}
+      virtualStyle={virtualStyle}
       onRemove={onRemove}
     />
   );
@@ -81,9 +84,21 @@ const TreeList = memo<TreeListProps>(({ prefixCls }) => {
 
   return (
     <>
-      {flattenData.map((node) => (
+      <VariableSizeList
+        itemCount={flattenData!.length}
+        height={800}
+        itemSize={() => 36}
+        itemData={flattenData}
+        width={275}
+      >
+        {({ index, data, style }) => {
+          return <TreeNode prefixCls={prefixCls} node={data[index]} virtualStyle={style} />;
+        }}
+      </VariableSizeList>
+
+      {/* {flattenData.map((node) => (
         <TreeNode key={node.id} node={node} prefixCls={prefixCls} />
-      ))}
+      ))} */}
       {hideAdd ? null : (
         <Button
           block

src/SortableTree/index.en-US.md

@@ -21,6 +21,7 @@ It can be used when editing tree-like data structures (adding, deleting, sorting
 <code src="./demos/default.tsx" ></code> <code src="./demos/controlled.tsx" ></code>
 
 <code src="./demos/renderContent.tsx" ></code> <code src="./demos/disableDrag.tsx" ></code> <code src="./demos/sortableRule.tsx" ></code>
+<code src="./demos/virtual.tsx" ></code>
 
 ## API