perf: uninstall classnames, install clsx (#307)

li-jia-nan · web-flow · commit 86df45a0fd98 · 2025-09-28T14:52:02.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,7 @@ es
 coverage/
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 .storybook
 .doc
 
diff --git a/package.json b/package.json
@@ -39,21 +39,17 @@
     "coverage": "father test --coverage",
     "now-build": "npm run docs:build"
   },
-  "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
-  },
   "dependencies": {
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.4",
     "@rc-component/np": "^1.0.4",
     "@testing-library/react": "^13.0.0",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.4.0",
     "@types/keyv": "3.1.4",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.3",
     "@umijs/fabric": "^3.0.0",
@@ -69,5 +65,9 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
   }
 }
diff --git a/src/Circle/PtgCircle.tsx b/src/Circle/PtgCircle.tsx
@@ -1,14 +1,13 @@
 import * as React from 'react';
 import type { ProgressProps } from '..';
 import type { StrokeColorObject } from '../interface';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 
 interface BlockProps {
   bg: string;
-  children?: React.ReactNode;
 }
 
-const Block: React.FC<BlockProps> = ({ bg, children }) => (
+const Block: React.FC<React.PropsWithChildren<BlockProps>> = ({ bg, children }) => (
   <div style={{ width: '100%', height: '100%', background: bg }}>{children}</div>
 );
 
@@ -59,7 +58,7 @@ const PtgCircle = React.forwardRef<SVGCircleElement, ColorGradientProps>((props,
 
   const circleNode = (
     <circle
-      className={classNames(`${prefixCls}-circle-path`, className)}
+      className={clsx(`${prefixCls}-circle-path`, className)}
       r={radius}
       cx={halfSize}
       cy={halfSize}
diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import { defaultProps, useTransitionDuration } from '../common';
 import type { ProgressProps } from '../interface';
 import useId from '@rc-component/util/lib/hooks/useId';
@@ -151,7 +151,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
       return (
         <circle
           key={index}
-          className={cls(`${prefixCls}-circle-path`, classNames.track)}
+          className={clsx(`${prefixCls}-circle-path`, classNames.track)}
           r={radius}
           cx={halfSize}
           cy={halfSize}
@@ -169,7 +169,7 @@ const Circle: React.FC<ProgressProps> = (props) => {
 
   return (
     <svg
-      className={cls(`${prefixCls}-circle`, classNames.root, className)}
+      className={clsx(`${prefixCls}-circle`, classNames.root, className)}
       viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
       style={{
         ...styles.root,
@@ -181,17 +181,14 @@ const Circle: React.FC<ProgressProps> = (props) => {
     >
       {!stepCount && (
         <circle
-          className={cls(`${prefixCls}-circle-rail`, classNames.rail)}
+          className={clsx(`${prefixCls}-circle-rail`, classNames.rail)}
           r={radius}
           cx={halfSize}
           cy={halfSize}
           stroke={railColor}
           strokeLinecap={mergedStrokeLinecap}
           strokeWidth={railWidth || strokeWidth}
-          style={{
-            ...circleStyle,
-            ...styles.rail,
-          }}
+          style={{ ...circleStyle, ...styles.rail }}
         />
       )}
       {stepCount ? getStepStokeList() : getStokeList()}
diff --git a/src/Line.tsx b/src/Line.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useTransitionDuration, defaultProps } from './common';
 import type { ProgressProps } from './interface';
 import getIndeterminateLine from './utils/getIndeterminateLine';
@@ -50,7 +50,7 @@ const Line: React.FC<ProgressProps> = (props) => {
 
   return (
     <svg
-      className={classNames(`${prefixCls}-line`, className)}
+      className={clsx(`${prefixCls}-line`, className)}
       viewBox={viewBoxString}
       preserveAspectRatio="none"
       style={style}
