diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index d71817eb..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const base = require('@umijs/fabric/dist/eslint');
-
-module.exports = {
- ...base,
- rules: {
- ...base.rules,
- 'arrow-parens': 0,
- '@typescript-eslint/no-explicit-any': 0,
- 'react/no-did-update-set-state': 0,
- 'react/no-find-dom-node': 0,
- 'no-dupe-class-members': 0,
- 'react/sort-comp': 0,
- 'no-confusing-arrow': 0,
- 'no-unused-expressions': 0,
- },
-};
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index 3b730ef9..5e6c7faa 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -8,6 +8,10 @@ updates:
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
+ groups:
+ npm-dependencies:
+ patterns:
+ - '*'
- package-ecosystem: github-actions
directory: '/'
@@ -17,3 +21,7 @@ updates:
time: '21:00'
timezone: Asia/Shanghai
open-pull-requests-limit: 10
+ groups:
+ github-actions:
+ patterns:
+ - '*'
diff --git a/README.md b/README.md
index 0d63d5f0..7f2e4d54 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
@rc-component/virtual-list
-
Part of the Ant Design ecosystem.
+
Part of the Ant Design ecosystem.
📜 Virtual scrolling list component for React.
@@ -15,7 +15,6 @@
English | 简体中文
-
## Highlights
- Built for React and maintained by the rc-component team.
diff --git a/README.zh-CN.md b/README.zh-CN.md
index d0a3192e..4e0f4062 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,6 +1,6 @@
@rc-component/virtual-list
-
Ant Design 生态的一部分。
+
Ant Design 生态的一部分。
📜 React 虚拟列表组件,用于高性能渲染长列表。
@@ -15,7 +15,6 @@
English | 简体中文
-
## 特性
- 面向 React 构建,并由 rc-component 团队维护。
@@ -61,19 +60,19 @@ npm start
### List
-| 属性 | 说明 | 类型 | 默认值 |
-| ---------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------- | ------- |
+| 属性 | 说明 | 类型 | 默认值 |
+| ---------- | ------------------------------------------------------------------ | -------------------------------------- | ------- |
| children | 每一项的渲染函数。第三个参数包含旧浏览器兼容路径使用的测量 props。 | `(item, index, props) => ReactElement` | - |
-| component | 自定义列表容器元素。 | `string` \| `ComponentType` | `div` |
-| data | 虚拟列表渲染的数据项。 | `T[]` | - |
-| disabled | 禁用滚动位置检查,通常用于配合动画。 | `boolean` | `false` |
-| fullHeight | holder 是否保持完整高度。 | `boolean` | `true` |
-| height | 可视列表高度。 | `number` | - |
-| itemHeight | 用于计算虚拟范围的最小项高度。 | `number` | - |
-| itemKey | 数据项 key 字段或 key 获取函数。 | `string` \| `(item) => React.Key` | - |
-| onScroll | 列表滚动时调用。 | `React.UIEventHandler
` | - |
-| styles | 自定义滚动条部位样式。 | `object` | - |
-| virtual | 启用虚拟渲染。 | `boolean` | `true` |
+| component | 自定义列表容器元素。 | `string` \| `ComponentType` | `div` |
+| data | 虚拟列表渲染的数据项。 | `T[]` | - |
+| disabled | 禁用滚动位置检查,通常用于配合动画。 | `boolean` | `false` |
+| fullHeight | holder 是否保持完整高度。 | `boolean` | `true` |
+| height | 可视列表高度。 | `number` | - |
+| itemHeight | 用于计算虚拟范围的最小项高度。 | `number` | - |
+| itemKey | 数据项 key 字段或 key 获取函数。 | `string` \| `(item) => React.Key` | - |
+| onScroll | 列表滚动时调用。 | `React.UIEventHandler` | - |
+| styles | 自定义滚动条部位样式。 | `object` | - |
+| virtual | 启用虚拟渲染。 | `boolean` | `true` |
## 本地开发
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..40f08ec9
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,115 @@
+import js from '@eslint/js';
+import { defineConfig } from 'eslint/config';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import prettier from 'eslint-config-prettier';
+import jest from 'eslint-plugin-jest';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+const tsconfigRootDir = dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig([
+ {
+ plugins: {
+ '@typescript-eslint': tseslint.plugin,
+ },
+ },
+ {
+ linterOptions: {
+ reportUnusedDisableDirectives: 'warn',
+ },
+ },
+ {
+ ignores: [
+ 'node_modules/',
+ 'coverage/',
+ 'es/',
+ 'lib/',
+ 'dist/',
+ 'docs-dist/',
+ '.docs-dist/',
+ '.dumi/',
+ '.doc/',
+ '.vercel/',
+ ],
+ },
+ {
+ files: ['**/*.{js,jsx,ts,tsx}'],
+ extends: [
+ js.configs.recommended,
+ react.configs.flat.recommended,
+ react.configs.flat['jsx-runtime'],
+ prettier,
+ ],
+ plugins: {
+ 'react-hooks': reactHooks,
+ },
+ languageOptions: {
+ globals: {
+ ...globals.browser,
+ ...globals.node,
+ },
+ },
+ settings: {
+ react: {
+ version: 'detect',
+ },
+ },
+ rules: {
+ 'no-async-promise-executor': 'off',
+ 'no-empty-pattern': 'off',
+ 'no-irregular-whitespace': 'off',
+ 'no-prototype-builtins': 'off',
+ 'no-useless-escape': 'off',
+ 'no-extra-boolean-cast': 'off',
+ 'no-undef': 'off',
+ 'no-unused-vars': 'off',
+ 'react/no-find-dom-node': 'off',
+ 'react/display-name': 'off',
+ 'react/no-unknown-property': 'off',
+ 'react/prop-types': 'off',
+ 'react-hooks/exhaustive-deps': 'warn',
+ 'react-hooks/rules-of-hooks': 'error',
+ },
+ },
+ {
+ files: ['**/*.{ts,tsx}'],
+ extends: [...tseslint.configs.recommended],
+ rules: {
+ '@typescript-eslint/ban-ts-comment': 'off',
+ '@typescript-eslint/no-empty-object-type': 'off',
+ '@typescript-eslint/no-explicit-any': 'off',
+ '@typescript-eslint/no-unsafe-function-type': 'off',
+ '@typescript-eslint/no-unnecessary-type-constraint': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+ },
+ },
+ {
+ files: ['src/**/*.{ts,tsx}'],
+ languageOptions: {
+ parserOptions: {
+ projectService: true,
+ tsconfigRootDir,
+ },
+ },
+ },
+ {
+ files: ['tests/**/*.{js,jsx,ts,tsx}', '**/*.{test,spec}.{js,jsx,ts,tsx}'],
+ extends: [jest.configs['flat/recommended']],
+ rules: {
+ 'jest/no-disabled-tests': 'off',
+ 'jest/no-done-callback': 'off',
+ 'jest/no-identical-title': 'off',
+ 'jest/expect-expect': 'off',
+ 'jest/no-alias-methods': 'off',
+ 'jest/no-conditional-expect': 'off',
+ 'jest/no-export': 'off',
+ 'jest/no-standalone-expect': 'off',
+ 'jest/valid-expect': 'off',
+ 'jest/valid-title': 'off',
+ },
+ },
+]);
diff --git a/examples/animate.tsx b/examples/animate.tsx
index 90939765..a5c78a2f 100644
--- a/examples/animate.tsx
+++ b/examples/animate.tsx
@@ -130,7 +130,7 @@ const Demo = () => {
const [animating, setAnimating] = React.useState(false);
const [insertIndex, setInsertIndex] = React.useState();
- const listRef = React.useRef();
+ const listRef = React.useRef(null);
const onClose = (id: string) => {
setCloseMap({
diff --git a/examples/no-virtual.tsx b/examples/no-virtual.tsx
index 793ab907..b817514f 100644
--- a/examples/no-virtual.tsx
+++ b/examples/no-virtual.tsx
@@ -7,7 +7,7 @@ interface Item {
height: number;
}
-const MyItem: React.FC- = ({ id, height }, ref) => {
+const MyItem = React.forwardRef(({ id, height }, ref) => {
return (
= ({ id, height }, ref) => {
{id}
);
-};
+});
-const ForwardMyItem = React.forwardRef(MyItem as any);
+const ForwardMyItem = MyItem;
const data: Item[] = [];
for (let i = 0; i < 100; i += 1) {
diff --git a/examples/switch.tsx b/examples/switch.tsx
index 5339e887..7d804de1 100644
--- a/examples/switch.tsx
+++ b/examples/switch.tsx
@@ -6,7 +6,7 @@ interface Item {
id: number;
}
-const MyItem: React.FC
- = ({ id }, ref) => (
+const MyItem = React.forwardRef(({ id }, ref) => (
= ({ id }, ref) => (
>
{id}
-);
+));
-const ForwardMyItem = React.forwardRef(MyItem as any);
+const ForwardMyItem = MyItem;
function getData(count: number) {
const data: Item[] = [];
@@ -39,7 +39,7 @@ const Demo = () => {
const [height, setHeight] = React.useState(200);
const [data, setData] = React.useState(getData(20));
const [fullHeight, setFullHeight] = React.useState(true);
- const listRef = React.useRef();
+ const listRef = React.useRef(null);
return (
diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 00000000..e0bd355c
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,11 @@
+///
+///
+///
+///
+///
+
+declare module '*.css';
+declare module '*.less';
+declare module 'jsonp';
+
+declare module 'moment/locale/zh-cn';
diff --git a/package.json b/package.json
index 62e4e0d9..98f74ad9 100644
--- a/package.json
+++ b/package.json
@@ -48,33 +48,40 @@
"react-dom": ">=18.0.0"
},
"devDependencies": {
+ "@eslint/js": "^9.39.4",
"@rc-component/father-plugin": "^2.2.0",
"@rc-component/np": "^1.0.4",
+ "@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
- "@testing-library/react": "^15.0.7",
- "@types/jest": "^29.5.14",
+ "@testing-library/react": "^16.3.2",
+ "@types/jest": "^30.0.0",
"@types/node": "^26.0.1",
- "@types/react": "^18.3.31",
- "@types/react-dom": "^18.3.7",
+ "@types/react": "^19.2.17",
+ "@types/react-dom": "^19.2.3",
"@types/warning": "^3.0.4",
- "dumi": "^2.4.35",
- "eslint": "^8.57.1",
- "eslint-plugin-unicorn": "^56.0.1",
- "father": "^4.6.23",
- "glob": "^13.0.6",
- "rc-animate": "^2.9.1",
- "rc-test": "^7.1.3",
- "react": "^18.3.1",
- "react-dom": "^18.3.1",
- "typescript": "^5.9.3",
"cross-env": "^10.1.0",
+ "dumi": "^2.4.38",
+ "eslint": "^9.39.4",
+ "eslint-config-prettier": "^10.1.8",
+ "eslint-plugin-jest": "^29.15.4",
+ "eslint-plugin-react": "^7.37.5",
+ "eslint-plugin-react-hooks": "^7.1.1",
+ "father": "^4.6.24",
"gh-pages": "^6.3.0",
- "prettier": "^3.9.0",
+ "glob": "^13.0.6",
+ "globals": "^17.7.0",
"husky": "^9.1.7",
- "lint-staged": "^16.4.0"
+ "lint-staged": "^17.0.8",
+ "prettier": "^3.9.4",
+ "rc-animate": "^2.9.1",
+ "rc-test": "^7.1.3",
+ "react": "^19.2.7",
+ "react-dom": "^19.2.7",
+ "typescript": "^6.0.3",
+ "typescript-eslint": "^8.62.1"
},
"dependencies": {
- "@babel/runtime": "^7.20.0",
+ "@babel/runtime": "^7.29.7",
"@rc-component/resize-observer": "^1.0.1",
"@rc-component/util": "^1.4.0",
"clsx": "^2.1.1"
diff --git a/src/Item.tsx b/src/Item.tsx
index 8a8cb6c5..6f422a94 100644
--- a/src/Item.tsx
+++ b/src/Item.tsx
@@ -2,15 +2,18 @@ import * as React from 'react';
export interface ItemProps {
children: React.ReactElement;
- setRef: (element: HTMLElement) => void;
+ setRef: (element: HTMLElement | null) => void;
}
export function Item({ children, setRef }: ItemProps) {
- const refFunc = React.useCallback(node => {
- setRef(node);
- }, []);
+ const refFunc = React.useCallback(
+ (node) => {
+ setRef(node);
+ },
+ [setRef],
+ );
- return React.cloneElement(children, {
+ return React.cloneElement(children as React.ReactElement, {
ref: refFunc,
});
}
diff --git a/src/List.tsx b/src/List.tsx
index 046cae24..a7b438cc 100644
--- a/src/List.tsx
+++ b/src/List.tsx
@@ -15,12 +15,7 @@ import useHeights from './hooks/useHeights';
import useMobileTouchMove from './hooks/useMobileTouchMove';
import useOriginScroll from './hooks/useOriginScroll';
import useScrollDrag from './hooks/useScrollDrag';
-import type {
- ScrollOffset,
- ScrollOffsetInfo,
- ScrollPos,
- ScrollTarget,
-} from './hooks/useScrollTo';
+import type { ScrollOffset, ScrollOffsetInfo, ScrollPos, ScrollTarget } from './hooks/useScrollTo';
import useScrollTo from './hooks/useScrollTo';
import type { ExtraRenderInfo, GetKey, RenderFunc, SharedConfig } from './interface';
import type { ScrollBarDirectionType, ScrollBarRef } from './ScrollBar';
@@ -154,9 +149,9 @@ export function RawList(props: ListProps, ref: React.Ref) {
const mergedClassName = clsx(prefixCls, { [`${prefixCls}-rtl`]: isRTL }, className);
const mergedData = data || EMPTY_DATA;
- const componentRef = useRef();
- const fillerInnerRef = useRef();
- const containerRef = useRef();
+ const componentRef = useRef(null);
+ const fillerInnerRef = useRef(null);
+ const containerRef = useRef(null);
// =============================== Item Key ===============================
@@ -196,7 +191,7 @@ export function RawList(props: ListProps, ref: React.Ref) {
// Put ref here since the range is generate by follow
const rangeRef = useRef({ start: 0, end: mergedData.length });
- const diffItemRef = useRef();
+ const diffItemRef = useRef(undefined);
const [diffItem] = useDiffItem(mergedData, getKey);
diffItemRef.current = diffItem;
@@ -315,8 +310,8 @@ export function RawList(props: ListProps, ref: React.Ref) {
};
// Hack on scrollbar to enable flash call
- const verticalScrollBarRef = useRef();
- const horizontalScrollBarRef = useRef();
+ const verticalScrollBarRef = useRef(null);
+ const horizontalScrollBarRef = useRef(null);
const horizontalScrollBarSpinSize = React.useMemo(
() => getSpinSize(size.width, scrollWidth),
diff --git a/src/ScrollBar.tsx b/src/ScrollBar.tsx
index ce4ff6fa..ade435e2 100644
--- a/src/ScrollBar.tsx
+++ b/src/ScrollBar.tsx
@@ -1,5 +1,5 @@
import { clsx } from 'clsx';
-import { raf } from '@rc-component/util';
+import { raf, useEvent } from '@rc-component/util';
import * as React from 'react';
import { getPageXY } from './hooks/useScrollDrag';
@@ -49,12 +49,12 @@ const ScrollBar = React.forwardRef((props, ref) =>
const isLTR = !rtl;
// ========================= Refs =========================
- const scrollbarRef = React.useRef();
- const thumbRef = React.useRef();
+ const scrollbarRef = React.useRef(null);
+ const thumbRef = React.useRef(null);
// ======================= Visible ========================
const [visible, setVisible] = React.useState(showScrollBar);
- const visibleTimeoutRef = React.useRef>();
+ const visibleTimeoutRef = React.useRef | undefined>(undefined);
const delayHidden = () => {
if (showScrollBar === true || showScrollBar === false) return;
@@ -88,7 +88,7 @@ const ScrollBar = React.forwardRef((props, ref) =>
const stateRef = React.useRef({ top, dragging, pageY: pageXY, startTop });
stateRef.current = { top, dragging, pageY: pageXY, startTop };
- const onThumbMouseDown = (e: React.MouseEvent | React.TouchEvent | TouchEvent) => {
+ const onThumbMouseDown = useEvent((e: React.MouseEvent | React.TouchEvent | TouchEvent) => {
setDragging(true);
setPageXY(getPageXY(e, horizontal));
setStartTop(stateRef.current.top);
@@ -96,7 +96,7 @@ const ScrollBar = React.forwardRef((props, ref) =>
onStartMove();
e.stopPropagation();
e.preventDefault();
- };
+ });
// ======================== Effect ========================
@@ -117,12 +117,12 @@ const ScrollBar = React.forwardRef((props, ref) =>
scrollbarEle.removeEventListener('touchstart', onScrollbarTouchStart);
thumbEle.removeEventListener('touchstart', onThumbMouseDown);
};
- }, []);
+ }, [onThumbMouseDown]);
// Pass to effect
- const enableScrollRangeRef = React.useRef();
+ const enableScrollRangeRef = React.useRef(undefined);
enableScrollRangeRef.current = enableScrollRange;
- const enableOffsetRangeRef = React.useRef();
+ const enableOffsetRangeRef = React.useRef(undefined);
enableOffsetRangeRef.current = enableOffsetRange;
React.useEffect(() => {
diff --git a/src/hooks/useChildren.tsx b/src/hooks/useChildren.tsx
index 8c4fdf6d..9767ccf7 100644
--- a/src/hooks/useChildren.tsx
+++ b/src/hooks/useChildren.tsx
@@ -8,7 +8,7 @@ export default function useChildren(
endIndex: number,
scrollWidth: number,
offsetX: number,
- setNodeRef: (item: T, element: HTMLElement) => void,
+ setNodeRef: (item: T, element: HTMLElement | null) => void,
renderFunc: RenderFunc,
{ getKey }: SharedConfig,
) {
diff --git a/src/hooks/useHeights.tsx b/src/hooks/useHeights.tsx
index ed13de72..20aa243c 100644
--- a/src/hooks/useHeights.tsx
+++ b/src/hooks/useHeights.tsx
@@ -13,7 +13,7 @@ export default function useHeights(
onItemAdd?: (item: T) => void,
onItemRemove?: (item: T) => void,
): [
- setInstanceRef: (item: T, instance: HTMLElement) => void,
+ setInstanceRef: (item: T, instance: HTMLElement | null) => void,
collectHeight: (sync?: boolean) => void,
cacheMap: CacheMap,
updatedMark: number,
@@ -69,7 +69,7 @@ export default function useHeights(
}
}
- function setInstanceRef(item: T, instance: HTMLElement) {
+ function setInstanceRef(item: T, instance: HTMLElement | null) {
const key = getKey(item);
const origin = instanceRef.current.get(key);
diff --git a/src/hooks/useScrollTo.tsx b/src/hooks/useScrollTo.tsx
index 8a678067..12553fef 100644
--- a/src/hooks/useScrollTo.tsx
+++ b/src/hooks/useScrollTo.tsx
@@ -52,7 +52,7 @@ export default function useScrollTo(
syncScrollTop: (newTop: number) => void,
triggerFlash: () => void,
): (arg: number | ScrollTarget) => void {
- const scrollRef = React.useRef();
+ const scrollRef = React.useRef(undefined);
const [syncState, setSyncState] = React.useState<{
times: number;
diff --git a/tsconfig.json b/tsconfig.json
index edc503cd..d6811baf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,41 +1,21 @@
{
"compilerOptions": {
"target": "esnext",
- "moduleResolution": "node",
- "baseUrl": "./",
- "jsx": "react",
+ "moduleResolution": "bundler",
+ "jsx": "react-jsx",
"declaration": true,
"skipLibCheck": true,
"esModuleInterop": true,
"paths": {
- "@/*": [
- "src/*"
- ],
- "@@/*": [
- ".dumi/tmp/*"
- ],
- "@rc-component/virtual-list": [
- "src/index.ts"
- ],
- "@rc-component/virtual-list/es": [
- "src"
- ],
- "@rc-component/virtual-list/es/*": [
- "src/*"
- ]
+ "@/*": ["./src/*"],
+ "@@/*": ["./.dumi/tmp/*"],
+ "@rc-component/virtual-list": ["./src/index.ts"],
+ "@rc-component/virtual-list/es": ["./src"],
+ "@rc-component/virtual-list/es/*": ["./src/*"]
},
- "ignoreDeprecations": "5.0"
+ "strict": false,
+ "module": "ESNext"
},
- "include": [
- ".dumirc.ts",
- ".fatherrc.ts",
- "src",
- "tests",
- "examples"
- ],
- "exclude": [
- "docs-dist",
- "lib",
- "es"
- ]
+ "include": ["global.d.ts", ".dumirc.ts", ".fatherrc.ts", "src", "tests", "examples"],
+ "exclude": ["docs-dist", "lib", "es"]
}