perf: uninstall classnames, install clsx (#457)

Author: li-jia-nan

package.json

@@ -40,19 +40,19 @@
     "tsc": "bunx tsc --noEmit"
   },
   "dependencies": {
-    "@rc-component/portal": "^2.0.0",
     "@rc-component/motion": "^1.0.0",
+    "@rc-component/portal": "^2.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.0.1",
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.4.0",
     "@testing-library/react": "^15.0.6",
-    "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.11",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@umijs/fabric": "^4.0.1",

src/Image.tsx

@@ -1,5 +1,5 @@
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { useContext, useMemo, useState } from 'react';
 import type { InternalPreviewConfig, PreviewSemanticName, ToolbarRenderInfoType } from './Preview';
@@ -208,7 +208,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
     <>
       <div
         {...otherProps}
-        className={classnames(prefixCls, rootClassName, classNames.root, {
+        className={clsx(prefixCls, rootClassName, classNames.root, {
           [`${prefixCls}-error`]: status === 'error',
         })}
         onClick={canPreview ? onPreview : onClick}
@@ -220,7 +220,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
       >
         <img
           {...imgCommonProps}
-          className={classnames(
+          className={clsx(
             `${prefixCls}-img`,
             {
               [`${prefixCls}-img-placeholder`]: placeholder === true,
@@ -249,7 +249,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
         {/* Preview Click Mask */}
         {cover !== false && canPreview && (
           <div
-            className={classnames(
+            className={clsx(
               `${prefixCls}-cover`,
               classNames.cover,
               `${prefixCls}-cover-${coverPlacement}`,
@@ -278,7 +278,7 @@ const ImageInternal: CompoundedComponent<ImageProps> = props => {
           {...restProps}
           classNames={classNames?.popup}
           styles={styles?.popup}
-          rootClassName={classnames(previewRootClassName, rootClassName)}
+          rootClassName={clsx(previewRootClassName, rootClassName)}
         />
       )}
     </>

src/Preview/Footer.tsx

@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { Actions, PreviewProps } from '.';
 import type { ImgInfo } from '../Image';
@@ -97,7 +97,7 @@ export default function Footer(props: FooterProps) {
     return (
       <div
         key={type}
-        className={classnames(actionCls, `${actionCls}-${type}`, {
+        className={clsx(actionCls, `${actionCls}-${type}`, {
           [`${actionCls}-disabled`]: !!disabled,
         })}
         onClick={onClick}
@@ -164,7 +164,7 @@ export default function Footer(props: FooterProps) {
   });
 
   const actionsNode = (
-    <div className={classnames(`${prefixCls}-actions`, classNames.actions)} style={styles.actions}>
+    <div className={clsx(`${prefixCls}-actions`, classNames.actions)} style={styles.actions}>
       {flipYNode}
       {flipXNode}
       {rotateLeftNode}
@@ -176,7 +176,7 @@ export default function Footer(props: FooterProps) {
 
   // >>>>> Render
   return (
-    <div className={classnames(`${prefixCls}-footer`, classNames.footer)} style={styles.footer}>
+    <div className={clsx(`${prefixCls}-footer`, classNames.footer)} style={styles.footer}>
       {progressNode}
       {actionsRender
         ? actionsRender(actionsNode, {

src/Preview/PrevNext.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { OperationIcons } from '.';
 
@@ -24,15 +24,15 @@ export default function PrevNext(props: PrevNextProps) {
   return (
     <>
       <div
-        className={classNames(switchCls, `${switchCls}-prev`, {
+        className={clsx(switchCls, `${switchCls}-prev`, {
           [`${switchCls}-disabled`]: current === 0,
         })}
         onClick={() => onActive(-1)}
       >
         {prev ?? left}
       </div>
       <div
-        className={classNames(switchCls, `${switchCls}-next`, {
+        className={clsx(switchCls, `${switchCls}-next`, {
           [`${switchCls}-disabled`]: current === count - 1,
         })}
         onClick={() => onActive(1)}

src/Preview/index.tsx

@@ -3,7 +3,7 @@ import Portal, { type PortalProps } from '@rc-component/portal';
 import { useEvent } from '@rc-component/util';
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import KeyCode from '@rc-component/util/lib/KeyCode';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { PreviewGroupContext } from '../context';
 import type { TransformAction, TransformType } from '../hooks/useImageTransform';
@@ -410,27 +410,23 @@ const Preview: React.FC<PreviewProps> = props => {
 
           return (
             <div
-              className={classnames(prefixCls, rootClassName, classNames.root, motionClassName, {
+              className={clsx(prefixCls, rootClassName, classNames.root, motionClassName, {
                 [`${prefixCls}-moving`]: isMoving,
               })}
               style={mergedStyle}
             >
               {/* Mask */}
               <div
-                className={classnames(`${prefixCls}-mask`, classNames.mask)}
+                className={clsx(`${prefixCls}-mask`, classNames.mask)}
                 style={styles.mask}
                 onClick={onClose}
               />
 
               {/* Body */}
-              <div className={classnames(`${prefixCls}-body`, classNames.body)} style={bodyStyle}>
+              <div className={clsx(`${prefixCls}-body`, classNames.body)} style={bodyStyle}>
                 {/* Preview Image */}
                 {imageRender
-                  ? imageRender(imgNode, {
-                      transform,
-                      image,
-                      ...(groupContext ? { current } : {}),
-                    })
+                  ? imageRender(imgNode, { transform, image, ...(groupContext ? { current } : {}) })
                   : imgNode}
               </div>