perf: uninstall classnames, install clsx (#304)

li-jia-nan · web-flow · commit 921e47a0dc03 · 2025-09-28T14:49:47.000+08:00
diff --git a/package.json b/package.json
@@ -47,18 +47,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.1",
-    "classnames": "^2.2.1",
-    "rc-motion": "^2.4.4",
-    "@rc-component/util": "^1.3.0"
+    "@rc-component/util": "^1.3.0",
+    "clsx": "^2.1.1",
+    "rc-motion": "^2.4.4"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
     "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.2.4",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@umijs/fabric": "^3.0.0",
diff --git a/src/MotionThumb.tsx b/src/MotionThumb.tsx
@@ -1,6 +1,6 @@
 import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
 import { composeRef } from '@rc-component/util/lib/ref';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from 'rc-motion';
 import * as React from 'react';
 import type { SegmentedValue } from '.';
@@ -211,7 +211,7 @@ export default function MotionThumb(props: MotionThumbInterface) {
         const motionProps = {
           ref: composeRef(thumbRef, ref),
           style: mergedStyle,
-          className: classNames(`${prefixCls}-thumb`, motionClassName),
+          className: clsx(`${prefixCls}-thumb`, motionClassName),
         };
 
         if (process.env.NODE_ENV === 'test') {
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,7 +1,7 @@
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import omit from '@rc-component/util/lib/omit';
 import { composeRef } from '@rc-component/util/lib/ref';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 
 import MotionThumb from './MotionThumb';
@@ -132,9 +132,7 @@ const InternalSegmentedOption: React.FC<{
   };
   const itemContent: React.ReactNode = (
     <label
-      className={classNames(className, {
-        [`${prefixCls}-item-disabled`]: disabled,
-      })}
+      className={clsx(className, { [`${prefixCls}-item-disabled`]: disabled })}
       style={style}
       onMouseDown={onMouseDown}
     >
@@ -151,10 +149,7 @@ const InternalSegmentedOption: React.FC<{
         onKeyUp={onKeyUp}
       />
       <div
-        className={classNames(
-          `${prefixCls}-item-label`,
-          segmentedClassNames?.label,
-        )}
+        className={clsx(`${prefixCls}-item-label`, segmentedClassNames?.label)}
         title={title}
         role="radio"
         aria-checked={checked}
@@ -189,6 +184,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
     } = props;
 
     const containerRef = React.useRef<HTMLDivElement>(null);
+
     const mergedRef = React.useMemo(
       () => composeRef<HTMLDivElement>(containerRef, ref),
       [containerRef, ref],
@@ -281,7 +277,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
           itemRender={itemRender}
           key={optionValue}
           prefixCls={prefixCls}
-          className={classNames(
+          className={clsx(
             segmentedOption.className,
             `${prefixCls}-item`,
             segmentedClassNames?.item,
@@ -314,7 +310,7 @@ const Segmented = React.forwardRef<HTMLDivElement, SegmentedProps>(
         tabIndex={disabled ? undefined : 0}
         style={style}
         {...divProps}
-        className={classNames(
+        className={clsx(
           prefixCls,
           {
             [`${prefixCls}-rtl`]: direction === 'rtl',
