From fc8442ed281e5d8f2ae2e34c7615863eb7814bc0 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Sep 2025 12:51:38 +0800 Subject: [PATCH] perf: uninstall classnames, install clsx --- package.json | 3 ++- src/Pager.tsx | 4 ++-- src/Pagination.tsx | 16 ++++++++-------- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 1192ecc5..9e665ddb 100644 --- a/package.json +++ b/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", diff --git a/src/Pager.tsx b/src/Pager.tsx index 483ca6db..0d1dcc4f 100644 --- a/src/Pager.tsx +++ b/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 = (props) => { } = props; const prefixCls = `${rootPrefixCls}-item`; - const cls = classNames( + const cls = clsx( prefixCls, `${prefixCls}-${page}`, { diff --git a/src/Pagination.tsx b/src/Pagination.tsx index d20993bf..dbc977d4 100644 --- a/src/Pagination.tsx +++ b/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 = (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 = (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 = (props) => { if (current - 1 >= pageBufferSize * 2 && current !== 1 + 2) { pagerList[0] = React.cloneElement(pagerList[0], { - className: classNames( + className: clsx( `${prefixCls}-item-after-jump-prev`, pagerList[0].props.className, ), @@ -500,7 +500,7 @@ const Pagination: React.FC = (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 = (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 = (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 = (props) => { ); } - const cls = classNames(prefixCls, className, { + const cls = clsx(prefixCls, className, { [`${prefixCls}-start`]: align === 'start', [`${prefixCls}-center`]: align === 'center', [`${prefixCls}-end`]: align === 'end',