perf: uninstall classnames, install clsx (#659)

Author: li-jia-nan

package.json

@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@rc-component/util": "^1.3.0",
-    "classnames": "^2.3.2"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.2",
@@ -52,6 +52,7 @@
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.2.2",
+    "@types/node": "^24.5.2",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@umijs/fabric": "^4.0.1",

src/Pager.tsx

@@ -1,5 +1,5 @@
 /* eslint react/prop-types: 0 */
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import type { PaginationProps } from './interface';
 
@@ -32,7 +32,7 @@ const Pager: React.FC<PagerProps> = (props) => {
   } = props;
   const prefixCls = `${rootPrefixCls}-item`;
 
-  const cls = classNames(
+  const cls = clsx(
     prefixCls,
     `${prefixCls}-${page}`,
     {

src/Pagination.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -446,7 +446,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
           onClick={jumpPrevHandle}
           tabIndex={0}
           onKeyDown={runIfEnterJumpPrev}
-          className={classNames(`${prefixCls}-jump-prev`, {
+          className={clsx(`${prefixCls}-jump-prev`, {
             [`${prefixCls}-jump-prev-custom-icon`]: !!jumpPrevIcon,
           })}
         >
@@ -461,7 +461,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
           onClick={jumpNextHandle}
           tabIndex={0}
           onKeyDown={runIfEnterJumpNext}
-          className={classNames(`${prefixCls}-jump-next`, {
+          className={clsx(`${prefixCls}-jump-next`, {
             [`${prefixCls}-jump-next-custom-icon`]: !!jumpNextIcon,
           })}
         >
@@ -488,7 +488,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
 
     if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) {
       pagerList[0] = React.cloneElement<PagerProps>(pagerList[0], {
-        className: classNames(
+        className: clsx(
           `${prefixCls}-item-after-jump-prev`,
           pagerList[0].props.className,
         ),
@@ -500,7 +500,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     if (allPages - current >= pageBufferSize * 2 && current !== allPages - 2) {
       const lastOne = pagerList[pagerList.length - 1];
       pagerList[pagerList.length - 1] = React.cloneElement(lastOne, {
-        className: classNames(
+        className: clsx(
           `${prefixCls}-item-before-jump-next`,
           lastOne.props.className,
         ),
@@ -526,7 +526,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         onClick={prevHandle}
         tabIndex={prevDisabled ? null : 0}
         onKeyDown={runIfEnterPrev}
-        className={classNames(`${prefixCls}-prev`, paginationClassNames?.item, {
+        className={clsx(`${prefixCls}-prev`, paginationClassNames?.item, {
           [`${prefixCls}-disabled`]: prevDisabled,
         })}
         style={styles?.item}
@@ -555,7 +555,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
         onClick={nextHandle}
         tabIndex={nextTabIndex}
         onKeyDown={runIfEnterNext}
-        className={classNames(`${prefixCls}-next`, paginationClassNames?.item, {
+        className={clsx(`${prefixCls}-next`, paginationClassNames?.item, {
           [`${prefixCls}-disabled`]: nextDisabled,
         })}
         style={styles?.item}
@@ -566,7 +566,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     );
   }
 
-  const cls = classNames(prefixCls, className, {
+  const cls = clsx(prefixCls, className, {
     [`${prefixCls}-start`]: align === 'start',
     [`${prefixCls}-center`]: align === 'center',
     [`${prefixCls}-end`]: align === 'end',