perf: uninstall classnames, install clsx (#720)

Author: li-jia-nan

package.json

@@ -46,19 +46,19 @@
     ]
   },
   "dependencies": {
-    "@rc-component/mini-decimal": "^1.0.1",
-    "classnames": "^2.2.5",
     "@rc-component/input": "~1.0.0",
-    "@rc-component/util": "^1.2.0"
+    "@rc-component/mini-decimal": "^1.0.1",
+    "@rc-component/util": "^1.2.0",
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
     "@rc-component/np": "^1.0.3",
     "@swc-node/jest": "^1.5.5",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^16.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.2.4",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@types/responselike": "^1.0.0",

src/InputNumber.tsx

@@ -6,7 +6,7 @@ import getMiniDecimal, {
   validateNumber,
   ValueType,
 } from '@rc-component/mini-decimal';
-import clsx from 'classnames';
+import { clsx } from 'clsx';
 import { BaseInput } from '@rc-component/input';
 import { useLayoutUpdateEffect } from '@rc-component/util/lib/hooks/useLayoutEffect';
 import proxyObject from '@rc-component/util/lib/proxyObject';

src/StepHandler.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-unknown-property */
 import * as React from 'react';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import raf from '@rc-component/util/lib/raf';
 import SemanticContext from './SemanticContext';
 
@@ -22,6 +22,7 @@ export interface StepHandlerProps {
   downDisabled?: boolean;
   onStep: (up: boolean, emitter: 'handler' | 'keyboard' | 'wheel') => void;
 }
+
 export default function StepHandler({
   prefixCls,
   upNode,
@@ -64,18 +65,20 @@ export default function StepHandler({
   React.useEffect(
     () => () => {
       onStopStep();
-      frameIds.current.forEach((id) => raf.cancel(id));
+      frameIds.current.forEach((id) => {
+        raf.cancel(id);
+      });
     },
     [],
   );
 
   // ======================= Render =======================
   const handlerClassName = `${prefixCls}-handler`;
 
-  const upClassName = cls(handlerClassName, `${handlerClassName}-up`, {
+  const upClassName = clsx(handlerClassName, `${handlerClassName}-up`, {
     [`${handlerClassName}-up-disabled`]: upDisabled,
   });
-  const downClassName = cls(handlerClassName, `${handlerClassName}-down`, {
+  const downClassName = clsx(handlerClassName, `${handlerClassName}-down`, {
     [`${handlerClassName}-down-disabled`]: downDisabled,
   });
 
@@ -94,7 +97,7 @@ export default function StepHandler({
   };
 
   return (
-    <div className={cls(`${handlerClassName}-wrap`, classNames?.actions)} style={styles?.actions}>
+    <div className={clsx(`${handlerClassName}-wrap`, classNames?.actions)} style={styles?.actions}>
       <span
         {...sharedHandlerProps}
         onMouseDown={(e) => {