perf: uninstall classnames, install clsx (#1066)

* perf: uninstall classnames, install clsx

* update demo

Author: li-jia-nan

.gitignore

@@ -29,6 +29,7 @@ es
 /coverage
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 .doc
 .storybook
 
@@ -37,4 +38,4 @@ package-lock.json
 .umi-production
 .umi-test
 .env.local
-.dumi/
+.dumi/

docs/examples/components/TooltipSlider.tsx

@@ -43,7 +43,7 @@ const HandleTooltip: React.FC<HandleTooltipProps> = (props) => {
     <Tooltip
       placement="top"
       overlay={tipFormatter(value)}
-      overlayInnerStyle={{ minHeight: 'auto' }}
+      styles={{ container: { minHeight: 'auto' } }}
       ref={tooltipRef}
       visible={visible}
       {...restProps}

package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.2.5"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.1.3",
@@ -52,7 +52,6 @@
     "@rc-component/trigger": "^3.5.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^12.1.3",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.1",
     "@types/node": "^22.5.0",
     "@types/react": "^18.2.42",

src/Handles/Handle.tsx

@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import * as React from 'react';
 import SliderContext from '../context';
@@ -184,7 +184,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
   let handleNode = (
     <div
       ref={ref}
-      className={cls(
+      className={clsx(
         handlePrefixCls,
         {
           [`${handlePrefixCls}-${valueIndex + 1}`]: valueIndex !== null && range,
@@ -193,11 +193,7 @@ const Handle = React.forwardRef<HTMLDivElement, HandleProps>((props, ref) => {
         },
         classNames.handle,
       )}
-      style={{
-        ...positionStyle,
-        ...style,
-        ...styles.handle,
-      }}
+      style={{ ...positionStyle, ...style, ...styles.handle }}
       {...divProps}
       {...restProps}
     />

src/Marks/Mark.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import SliderContext from '../context';
 import { getDirectionStyle } from '../util';
@@ -23,7 +23,7 @@ const Mark: React.FC<MarkProps> = (props) => {
 
   return (
     <span
-      className={classNames(textCls, {
+      className={clsx(textCls, {
         [`${textCls}-active`]: included && includedStart <= value && value <= includedEnd,
       })}
       style={{ ...positionStyle, ...style }}

src/Slider.tsx

@@ -2,7 +2,7 @@ import useControlledState from '@rc-component/util/lib/hooks/useControlledState'
 import useEvent from '@rc-component/util/lib/hooks/useEvent';
 import isEqual from '@rc-component/util/lib/isEqual';
 import warning from '@rc-component/util/lib/warning';
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import type { HandlesProps, HandlesRef } from './Handles';
 import Handles from './Handles';
@@ -573,7 +573,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
     <SliderContext.Provider value={context}>
       <div
         ref={containerRef}
-        className={cls(prefixCls, className, {
+        className={clsx(prefixCls, className, {
           [`${prefixCls}-disabled`]: disabled,
           [`${prefixCls}-vertical`]: vertical,
           [`${prefixCls}-horizontal`]: !vertical,
@@ -584,7 +584,7 @@ const Slider = React.forwardRef<SliderRef, SliderProps<number | number[]>>((prop
         id={id}
       >
         <div
-          className={cls(`${prefixCls}-rail`, classNames?.rail)}
+          className={clsx(`${prefixCls}-rail`, classNames?.rail)}
           style={{ ...railStyle, ...styles?.rail }}
         />
 

src/Steps/Dot.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import SliderContext from '../context';
 import { getDirectionStyle } from '../util';
@@ -33,7 +33,7 @@ const Dot: React.FC<DotProps> = (props) => {
 
   return (
     <span
-      className={classNames(dotClassName, { [`${dotClassName}-active`]: active })}
+      className={clsx(dotClassName, { [`${dotClassName}-active`]: active })}
       style={mergedStyle}
     />
   );

src/Tracks/Track.tsx

@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import SliderContext from '../context';
 import type { OnStartMove } from '../interface';
@@ -57,7 +57,7 @@ const Track: React.FC<TrackProps> = (props) => {
 
   const className =
     replaceCls ||
-    cls(
+    clsx(
       trackPrefixCls,
       {
         [`${trackPrefixCls}-${index + 1}`]: index !== null && range,

src/Tracks/index.tsx

@@ -1,4 +1,4 @@
-import cls from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import SliderContext from '../context';
 import type { OnStartMove } from '../interface';
@@ -47,13 +47,13 @@ const Tracks: React.FC<TrackProps> = (props) => {
 
   // ========================== Render ==========================
   const tracksNode =
-      trackList?.length && (classNames.tracks || styles.tracks) ? (
+    trackList?.length && (classNames.tracks || styles.tracks) ? (
       <Track
         index={null}
         prefixCls={prefixCls}
         start={trackList[0].start}
         end={trackList[trackList.length - 1].end}
-        replaceCls={cls(classNames.tracks, `${prefixCls}-tracks`)}
+        replaceCls={clsx(classNames.tracks, `${prefixCls}-tracks`)}
         style={styles.tracks}
       />
     ) : null;

tests/Slider.test.js

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
 import { createEvent, fireEvent, render } from '@testing-library/react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import keyCode from '@rc-component/util/lib/KeyCode';
 import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
 import React from 'react';
@@ -598,9 +598,7 @@ describe('Slider', () => {
     const { container } = render(
       <Slider
         handleRender={(node) =>
-          React.cloneElement(node, {
-            className: classNames(node.props.className, 'custom-handle'),
-          })
+          React.cloneElement(node, { className: clsx(node.props.className, 'custom-handle') })
         }
       />,
     );
@@ -665,7 +663,7 @@ describe('Slider', () => {
 
   it('tipFormatter should not crash with undefined value', () => {
     [undefined, null].forEach((value) => {
-      render(<Slider value={value} tooltip={{ open: true }} styles={{ tracks: {} }}/>);
+      render(<Slider value={value} tooltip={{ open: true }} styles={{ tracks: {} }} />);
     });
   });
 });