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

-

Ant Design Part of the Ant Design ecosystem.

+

Ant Design 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 生态的一部分。

+

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"] }