docs: adjust virtual demo

docs/examples/virtual-list.tsx

@@ -1,12 +1,14 @@
-import React, { HTMLAttributes, useState } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React, { useState } from 'react';
 import Selectable, { useSelectable } from 'react-selectable-box';
-import { VirtuosoGrid } from 'react-virtuoso';
 
 const list: number[] = [];
-for (let i = 0; i < 2002; i++) {
+for (let i = 0; i < 2000; i++) {
   list.push(i);
 }
 
+const columnCount = 10;
+
 const Item = ({ value }: { value: number }) => {
   const { setNodeRef, isSelected, isAdding, isRemoving } = useSelectable({
     value,
@@ -32,17 +34,18 @@ const Item = ({ value }: { value: number }) => {
   );
 };
 
-const List: React.ForwardRefExoticComponent<
-  HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>
-> = React.forwardRef(({ style, ...props }, ref) => {
-  return (
-    <div ref={ref} {...props} style={{ ...style, display: 'flex', flexWrap: 'wrap', gap: 20 }} />
-  );
-});
-
 export default () => {
   const [value, setValue] = useState<number[]>([]);
 
+  const parentRef = React.useRef<HTMLDivElement>(null);
+
+  const rowVirtualizer = useVirtualizer({
+    count: Math.ceil(list.length / columnCount),
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 50,
+    gap: 20,
+  });
+
   return (
     <Selectable
       value={value}
@@ -53,15 +56,44 @@ export default () => {
         setValue(result);
       }}
     >
-      <VirtuosoGrid
-        totalCount={list.length}
-        style={{ height: 500 }}
-        components={{
-          List,
+      <div
+        ref={parentRef}
+        style={{
+          height: `400px`,
+          overflow: 'auto',
         }}
         className="container"
-        itemContent={(index) => <Item value={list[index]} />}
-      />
+      >
+        <div
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: '100%',
+            position: 'relative',
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualItem) => (
+            <div
+              key={virtualItem.key}
+              style={{
+                display: 'flex',
+                gap: 20,
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: `${virtualItem.size}px`,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+            >
+              {list
+                .slice(virtualItem.index * columnCount, (virtualItem.index + 1) * columnCount)
+                .map((item) => (
+                  <Item key={item} value={item} />
+                ))}
+            </div>
+          ))}
+        </div>
+      </div>
     </Selectable>
   );
 };

docs/guides/virtual-list.md

@@ -6,6 +6,6 @@ group:
 order: 7
 ---
 
-### Box selection in a virtual list using `react-virtuoso`
+### Box selection in a virtual list using `@tanstack/react-virtual`
 
 <code src="../examples/virtual-list.tsx"></code>

docs/guides/virtual-list.zh-CN.md

@@ -6,6 +6,6 @@ group:
 order: 7
 ---
 
-### 配合 `react-virtuoso` 在虚拟列表中进行框选
+### 配合 `@tanstack/react-virtual` 在虚拟列表中进行框选
 
 <code src="../examples/virtual-list.tsx"></code>

package.json

@@ -68,6 +68,7 @@
     "@dnd-kit/utilities": "^3.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@tanstack/react-virtual": "^3.8.4",
     "@testing-library/jest-dom": "^5",
     "@testing-library/react": "^14",
     "@types/react": "^18",
@@ -92,7 +93,6 @@
     "prettier-plugin-packagejson": "^2",
     "react": "^18",
     "react-dom": "^18",
-    "react-virtuoso": "^4.5.0",
     "semantic-release": "^21",
     "stylelint": "^15",
     "typescript": "^5",