perf: uninstall classnames, install clsx (#272)

Author: li-jia-nan

.gitignore

@@ -31,6 +31,7 @@ yarn.lock
 storybook/
 es/
 package-lock.json
+pnpm-lock.yaml
 src/*.js
 src/*.map
 tslint.json

package.json

@@ -47,15 +47,15 @@
   "dependencies": {
     "@ant-design/fast-color": "^3.0.0",
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.4",
     "@rc-component/np": "^1.0.0",
     "@rc-component/trigger": "^1.13.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
-    "@types/classnames": "^2.2.6",
+    "@types/node": "^24.5.2",
     "@types/react": "^18.0.8",
     "@types/react-dom": "^18.0.3",
     "@types/warning": "^3.0.0",

src/ColorPicker.tsx

@@ -2,7 +2,7 @@ import type { CSSProperties } from 'react';
 import React, { forwardRef, useMemo } from 'react';
 import { ColorPickerPrefixCls, defaultColor } from './util';
 
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Color } from './color';
 import ColorBlock from './components/ColorBlock';
 import Picker from './components/Picker';
@@ -119,7 +119,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
     };
 
     // ============================ Render ============================
-    const mergeCls = classNames(`${prefixCls}-panel`, className, {
+    const mergeCls = clsx(`${prefixCls}-panel`, className, {
       [`${prefixCls}-panel-disabled`]: disabled,
     });
 
@@ -138,7 +138,7 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
         />
         <div className={`${prefixCls}-slider-container`}>
           <div
-            className={classNames(`${prefixCls}-slider-group`, {
+            className={clsx(`${prefixCls}-slider-group`, {
               [`${prefixCls}-slider-group-disabled-alpha`]: disabledAlpha,
             })}
           >

src/components/ColorBlock.tsx

@@ -1,5 +1,4 @@
-import classNames from 'classnames';
-import type { FC } from 'react';
+import { clsx } from 'clsx';
 import React from 'react';
 
 export type ColorBlockProps = {
@@ -10,7 +9,7 @@ export type ColorBlockProps = {
   onClick?: React.MouseEventHandler<HTMLDivElement>;
 };
 
-const ColorBlock: FC<ColorBlockProps> = ({
+const ColorBlock: React.FC<ColorBlockProps> = ({
   color,
   prefixCls,
   className,
@@ -20,16 +19,11 @@ const ColorBlock: FC<ColorBlockProps> = ({
   const colorBlockCls = `${prefixCls}-color-block`;
   return (
     <div
-      className={classNames(colorBlockCls, className)}
+      className={clsx(colorBlockCls, className)}
       style={style}
       onClick={onClick}
     >
-      <div
-        className={`${colorBlockCls}-inner`}
-        style={{
-          background: color,
-        }}
-      />
+      <div className={`${colorBlockCls}-inner`} style={{ background: color }} />
     </div>
   );
 };

src/components/Handler.tsx

@@ -1,22 +1,19 @@
-import classNames from 'classnames';
-import type { FC } from 'react';
+import { clsx } from 'clsx';
 import React from 'react';
 
 type HandlerSize = 'default' | 'small';
 
-const Handler: FC<{
+const Handler: React.FC<{
   size?: HandlerSize;
   color?: string;
   prefixCls?: string;
 }> = ({ size = 'default', color, prefixCls }) => {
   return (
     <div
-      className={classNames(`${prefixCls}-handler`, {
+      className={clsx(`${prefixCls}-handler`, {
         [`${prefixCls}-handler-sm`]: size === 'small',
       })}
-      style={{
-        backgroundColor: color,
-      }}
+      style={{ backgroundColor: color }}
     />
   );
 };

src/components/Slider.tsx

@@ -1,11 +1,10 @@
-import type { FC } from 'react';
 import React, { useRef } from 'react';
 import useColorDrag from '../hooks/useColorDrag';
 import type { HsbaColorType, TransformOffset } from '../interface';
 import Palette from './Palette';
 
 import { useEvent } from '@rc-component/util';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { Color } from '../color';
 import { calcOffset, calculateColor } from '../util';
 import Gradient from './Gradient';
@@ -25,7 +24,7 @@ export interface BaseSliderProps {
   color: Color;
 }
 
-const Slider: FC<BaseSliderProps> = props => {
+const Slider: React.FC<BaseSliderProps> = props => {
   const {
     prefixCls,
     colors,
@@ -36,9 +35,9 @@ const Slider: FC<BaseSliderProps> = props => {
     type,
   } = props;
 
-  const sliderRef = useRef();
-  const transformRef = useRef();
-  const colorRef = useRef(color);
+  const sliderRef = useRef<HTMLDivElement>(null);
+  const transformRef = useRef<HTMLDivElement>(null);
+  const colorRef = useRef<Color>(color);
 
   const getValue = (c: Color) => {
     return type === 'hue' ? c.getHue() : c.a * 100;
@@ -94,10 +93,7 @@ const Slider: FC<BaseSliderProps> = props => {
   return (
     <div
       ref={sliderRef}
-      className={classNames(
-        `${prefixCls}-slider`,
-        `${prefixCls}-slider-${type}`,
-      )}
+      className={clsx(`${prefixCls}-slider`, `${prefixCls}-slider-${type}`)}
       onMouseDown={dragStartHandle}
       onTouchStart={dragStartHandle}
     >