feat: clsx update

Author: li-jia-nan

.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

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

@@ -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/util": "^1.4.0",
+    "clsx": "^2.1.1",
+    "rc-resize-observer": "^1.0.0"
   }
 }

src/Filler.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import ResizeObserver from 'rc-resize-observer';
-import classNames from 'classnames';
+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 { clsx } from 'clsx';
 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 { 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;