From 46e890cefa883a9356145667b916dc3b62aafab2 Mon Sep 17 00:00:00 2001 From: linxianxi <904492381@qq.com> Date: Mon, 5 Aug 2024 17:44:44 +0800 Subject: [PATCH] docs: adjust virtual demo --- docs/examples/virtual-list.tsx | 68 +++++++++++++++++++++++-------- docs/guides/virtual-list.md | 2 +- docs/guides/virtual-list.zh-CN.md | 2 +- package.json | 2 +- pnpm-lock.yaml | 32 ++++++++------- 5 files changed, 71 insertions(+), 35 deletions(-) diff --git a/docs/examples/virtual-list.tsx b/docs/examples/virtual-list.tsx index 481000f..e5b19d2 100644 --- a/docs/examples/virtual-list.tsx +++ b/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 & React.RefAttributes -> = React.forwardRef(({ style, ...props }, ref) => { - return ( -
- ); -}); - export default () => { const [value, setValue] = useState([]); + const parentRef = React.useRef(null); + + const rowVirtualizer = useVirtualizer({ + count: Math.ceil(list.length / columnCount), + getScrollElement: () => parentRef.current, + estimateSize: () => 50, + gap: 10, + }); + return ( { setValue(result); }} > - } - /> + > +
+ {rowVirtualizer.getVirtualItems().map((virtualItem) => ( +
+ {list + .slice(virtualItem.index * columnCount, (virtualItem.index + 1) * columnCount) + .map((item) => ( + + ))} +
+ ))} +
+
); }; diff --git a/docs/guides/virtual-list.md b/docs/guides/virtual-list.md index e8fdfa2..ee377ed 100644 --- a/docs/guides/virtual-list.md +++ b/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` diff --git a/docs/guides/virtual-list.zh-CN.md b/docs/guides/virtual-list.zh-CN.md index 1d7f28b..b745923 100644 --- a/docs/guides/virtual-list.zh-CN.md +++ b/docs/guides/virtual-list.zh-CN.md @@ -6,6 +6,6 @@ group: order: 7 --- -### 配合 `react-virtuoso` 在虚拟列表中进行框选 +### 配合 `@tanstack/react-virtual` 在虚拟列表中进行框选 diff --git a/package.json b/package.json index dd1801f..bb90cef 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 486108c..7726b7b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ devDependencies: '@semantic-release/git': specifier: ^10.0.1 version: 10.0.1(semantic-release@21.0.7) + '@tanstack/react-virtual': + specifier: ^3.8.4 + version: 3.8.4(react-dom@18.2.0)(react@18.2.0) '@testing-library/jest-dom': specifier: ^5 version: 5.17.0 @@ -98,9 +101,6 @@ devDependencies: react-dom: specifier: ^18 version: 18.2.0(react@18.2.0) - react-virtuoso: - specifier: ^4.5.0 - version: 4.5.0(react-dom@18.2.0)(react@18.2.0) semantic-release: specifier: ^21 version: 21.0.7 @@ -3718,6 +3718,21 @@ packages: '@swc/core-win32-x64-msvc': 1.3.72 dev: true + /@tanstack/react-virtual@3.8.4(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-Dq0VQr3QlTS2qL35g360QaJWBt7tCn/0xw4uZ0dHXPLO1Ak4Z4nVX4vuj1Npg1b/jqNMDToRtR5OIxM2NXRBWg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@tanstack/virtual-core': 3.8.4 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: true + + /@tanstack/virtual-core@3.8.4: + resolution: {integrity: sha512-iO5Ujgw3O1yIxWDe9FgUPNkGjyT657b1WNX52u+Wv1DyBFEpdCdGkuVaky0M3hHFqNWjAmHWTn4wgj9rTr7ZQg==} + dev: true + /@testing-library/dom@9.3.1: resolution: {integrity: sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==} engines: {node: '>=14'} @@ -13950,17 +13965,6 @@ packages: refractor: 3.6.0 dev: true - /react-virtuoso@4.5.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-OMP6XrzJMMos1vbJZC16RxGW7utAxUMP7i5PNPi6epBNVH7nz+CF/DlmecNBep5wyjLud51dQ5epjb2A0w9W/Q==} - engines: {node: '>=10'} - peerDependencies: - react: '>=16 || >=17 || >= 18' - react-dom: '>=16 || >=17 || >= 18' - dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - /react@18.1.0: resolution: {integrity: sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ==} engines: {node: '>=0.10.0'}