refactor: drop rc-virtual-list and classnames

.gitignore

@@ -7,7 +7,9 @@ lib/
 ~*
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 !tests/__mocks__/rc-util/lib
+!tests/__mocks__/@rc-component/util/lib
 bun.lockb
 
 # umi

README.md

@@ -1,19 +1,19 @@
-# rc-virtual-list
+# @rc-component/virtual-list
 
 React Virtual List Component which worked with animation.
 
 [![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![node version][node-image]][node-url] [![npm download][download-image]][download-url]
 
-[npm-image]: http://img.shields.io/npm/v/rc-virtual-list.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/rc-virtual-list
-[github-actions-image]: https://github.com/react-component/virtual-list/workflows/CI/badge.svg
+[npm-image]: http://img.shields.io/npm/v/@rc-component/virtual-list.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/@rc-component/virtual-list
+[github-actions-image]: https://github.com/react-component/virtual-list/actions/workflows/main.yml/badge.svg
 [github-actions-url]: https://github.com/react-component/virtual-list/actions
 [coveralls-image]: https://img.shields.io/codecov/c/github/react-component/virtual-list/master.svg?style=flat-square
 [coveralls-url]: https://codecov.io/gh/react-component/virtual-list
 [node-image]: https://img.shields.io/badge/node.js-%3E=_6.0-green.svg?style=flat-square
 [node-url]: http://nodejs.org/download/
-[download-image]: https://img.shields.io/npm/dm/rc-virtual-list.svg?style=flat-square
-[download-url]: https://npmjs.org/package/rc-virtual-list
+[download-image]: https://img.shields.io/npm/dm/@rc-component/virtual-list.svg?style=flat-square
+[download-url]: https://npmjs.org/package/@rc-component/virtual-list
 
 ## Online Preview
 
@@ -35,15 +35,15 @@ open http://localhost:8000/
 
 ## Install
 
-[![rc-virtual-list](https://nodei.co/npm/rc-virtual-list.png)](https://npmjs.org/package/rc-virtual-list)
+[![@rc-component/virtual-list](https://nodei.co/npm/@rc-component/virtual-list.png)](https://npmjs.org/package/@rc-component/virtual-list)
 
 ## Usage
 
-```js
-import List from 'rc-virtual-list';
+```tsx
+import List from '@rc-component/virtual-list';
 
 <List data={[0, 1, 2]} height={200} itemHeight={30} itemKey="id">
-  {index => <div>{index}</div>}
+  {(index) => <div>{index}</div>}
 </List>;
 ```
 

examples/animate.tsx

@@ -3,9 +3,9 @@
 import * as React from 'react';
 // @ts-ignore
 import CSSMotion from 'rc-animate/lib/CSSMotion';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import List, { ListRef } from '../src/List';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import './animate.less';
 
 let uuid = 0;
@@ -74,7 +74,7 @@ const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
       motionName="motion"
       motionAppear={motionAppear}
       onAppearStart={getCollapsedHeight}
-      onAppearActive={node => {
+      onAppearActive={(node) => {
         motionRef.current = true;
         return getMaxHeight(node);
       }}
@@ -87,12 +87,7 @@ const MyItem: React.ForwardRefRenderFunction<any, MyItemProps> = (
     >
       {({ className, style }, passedMotionRef) => {
         return (
-          <div
-            ref={passedMotionRef}
-            className={classNames('item', className)}
-            style={style}
-            data-id={id}
-          >
+          <div ref={passedMotionRef} className={clsx('item', className)} style={style} data-id={id}>
             <div style={{ height: itemUuid % 2 ? 100 : undefined }}>
               <button
                 type="button"
@@ -145,7 +140,7 @@ const Demo = () => {
   };
 
   const onLeave = (id: string) => {
-    const newData = data.filter(item => item.id !== id);
+    const newData = data.filter((item) => item.id !== id);
     setData(newData);
   };
 
@@ -159,14 +154,14 @@ const Demo = () => {
   }
 
   const onInsertBefore = (id: string) => {
-    const index = data.findIndex(item => item.id === id);
+    const index = data.findIndex((item) => item.id === id);
     const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
     setInsertIndex(index);
     setData(newData);
     lockForAnimation();
   };
   const onInsertAfter = (id: string) => {
-    const index = data.findIndex(item => item.id === id) + 1;
+    const index = data.findIndex((item) => item.id === id) + 1;
     const newData = [...data.slice(0, index), genItem(), ...data.slice(index)];
     setInsertIndex(index);
     setData(newData);

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "rc-virtual-list",
-  "version": "3.19.2",
+  "name": "@rc-component/virtual-list",
+  "version": "1.0.0",
   "description": "React Virtual List Component",
   "engines": {
     "node": ">=8.x"
@@ -44,9 +44,9 @@
     "@rc-component/father-plugin": "^1.0.2",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^12.1.5",
-    "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^30.0.0",
+    "@types/node": "^24.10.1",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/warning": "^3.0.0",
@@ -67,8 +67,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.0",
-    "classnames": "^2.2.6",
-    "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.36.0"
+    "@rc-component/resize-observer": "^1.0.1",
+    "@rc-component/util": "^1.4.0",
+    "clsx": "^2.1.1"
   }
 }

src/Filler.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import ResizeObserver from 'rc-resize-observer';
-import classNames from 'classnames';
+import ResizeObserver from '@rc-component/resize-observer';
+import { clsx } from 'clsx';
 
 export type InnerProps = Pick<React.HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
 
@@ -80,9 +80,7 @@ const Filler = React.forwardRef(
         >
           <div
             style={innerStyle}
-            className={classNames({
-              [`${prefixCls}-holder-inner`]: prefixCls,
-            })}
+            className={clsx({ [`${prefixCls}-holder-inner`]: prefixCls })}
             ref={ref}
             {...innerProps}
           >

src/List.tsx

@@ -1,8 +1,8 @@
-import classNames from 'classnames';
-import type { ResizeObserverProps } from 'rc-resize-observer';
-import ResizeObserver from 'rc-resize-observer';
-import { useEvent } from 'rc-util';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import { clsx } from 'clsx';
+import type { ResizeObserverProps } from '@rc-component/resize-observer';
+import ResizeObserver from '@rc-component/resize-observer';
+import { useEvent } from '@rc-component/util';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import * as React from 'react';
 import { useRef, useState } from 'react';
 import { flushSync } from 'react-dom';
@@ -146,7 +146,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     (Math.max(itemHeight * data.length, containerHeight) > height || !!scrollWidth);
   const isRTL = direction === 'rtl';
 
-  const mergedClassName = classNames(prefixCls, { [`${prefixCls}-rtl`]: isRTL }, className);
+  const mergedClassName = clsx(prefixCls, { [`${prefixCls}-rtl`]: isRTL }, className);
   const mergedData = data || EMPTY_DATA;
   const componentRef = useRef<HTMLDivElement>();
   const fillerInnerRef = useRef<HTMLDivElement>();

src/ScrollBar.tsx

@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import raf from 'rc-util/lib/raf';
+import { clsx } from 'clsx';
+import raf from '@rc-component/util/lib/raf';
 import * as React from 'react';
 import { getPageXY } from './hooks/useScrollDrag';
 
@@ -222,7 +222,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
       right: 0,
       bottom: 0,
     });
-  
+
     Object.assign(thumbStyle, {
       height: '100%',
       width: spinSize,
@@ -235,7 +235,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
       bottom: 0,
       [isLTR ? 'right' : 'left']: 0,
     });
-  
+
     Object.assign(thumbStyle, {
       width: '100%',
       height: spinSize,
@@ -246,7 +246,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
   return (
     <div
       ref={scrollbarRef}
-      className={classNames(scrollbarPrefixCls, {
+      className={clsx(scrollbarPrefixCls, {
         [`${scrollbarPrefixCls}-horizontal`]: horizontal,
         [`${scrollbarPrefixCls}-vertical`]: !horizontal,
         [`${scrollbarPrefixCls}-visible`]: visible,
@@ -257,7 +257,7 @@ const ScrollBar = React.forwardRef<ScrollBarRef, ScrollBarProps>((props, ref) =>
     >
       <div
         ref={thumbRef}
-        className={classNames(`${scrollbarPrefixCls}-thumb`, {
+        className={clsx(`${scrollbarPrefixCls}-thumb`, {
           [`${scrollbarPrefixCls}-thumb-moving`]: dragging,
         })}
         style={{ ...thumbStyle, ...propsThumbStyle }}

src/hooks/useFrameWheel.ts

@@ -1,4 +1,4 @@
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import { useRef } from 'react';
 import isFF from '../utils/isFirefox';
 import useOriginScroll from './useOriginScroll';

src/hooks/useMobileTouchMove.ts

@@ -1,4 +1,4 @@
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import type * as React from 'react';
 import { useRef } from 'react';
 

src/hooks/useScrollDrag.ts

@@ -1,4 +1,4 @@
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import * as React from 'react';
 
 function smoothScrollOffset(offset: number) {

src/hooks/useScrollTo.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable no-param-reassign */
 import * as React from 'react';
-import raf from 'rc-util/lib/raf';
+import raf from '@rc-component/util/lib/raf';
 import type { GetKey } from '../interface';
 import type CacheMap from '../utils/CacheMap';
-import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
-import { warning } from 'rc-util';
+import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import { warning } from '@rc-component/util';
 
 const MAX_TIMES = 10;
 

tests/scroll.test.js

@@ -1,8 +1,8 @@
 import '@testing-library/jest-dom';
 import { act, createEvent, fireEvent, render } from '@testing-library/react';
 import { mount } from 'enzyme';
-import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
-import { resetWarned } from 'rc-util/lib/warning';
+import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';
+import { resetWarned } from '@rc-component/util/lib/warning';
 import React from 'react';
 import List from '../src';
 import { spyElementPrototypes } from './utils/domHook';
@@ -767,7 +767,7 @@ describe('List.Scroll', () => {
     const listHolder = container.querySelector('.rc-virtual-list-holder');
     if (targetItem && listHolder) {
       selectElementText(targetItem);
-      
+
       fireEvent.scroll(listHolder, { target: { scrollTop: 100 } });
       expect(onScroll).toHaveBeenCalled();
       const scrollCallCountBeforeDrop = onScroll.mock.calls.length;
@@ -805,7 +805,7 @@ describe('List.Scroll', () => {
 
     const sel = window.getSelection();
     sel && sel.removeAllRanges();
-    
+
     document.removeEventListener('dragstart', onDragStart);
     document.removeEventListener('dragend', onDragEnd);
   });

tests/scrollWidth.test.tsx

@@ -1,14 +1,14 @@
 import '@testing-library/jest-dom';
 import { act, fireEvent, render } from '@testing-library/react';
-import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
-import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { _rs as onLibResize } from '@rc-component/resize-observer/lib/utils/observerUtil';
+import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
 import type { ListRef } from '../src';
 import List, { type ListProps } from '../src';
 
 const ITEM_HEIGHT = 20;
 
-function genData(count) {
+function genData(count: number) {
   return new Array(count).fill(null).map((_, index) => ({ id: String(index) }));
 }