Merge pull request #137 from ant-design/fix/sortable-tree

feat: sortable tree support virtual scroll

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/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<T = any> extends ControlledState {
   /**
@@ -46,6 +46,11 @@ export interface StoreUpdaterProps<T = any> extends ControlledState {
     targetNode: FlattenNode<T>;
     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);