Skip to content

Commit 5a33ccf

Browse files
li-jia-nanli-jia-nan
authored
perf: uninstall classnames, install clsx (#903)
* perf: uninstall classnames, install clsx * update
1 parent 0c5dbbb commit 5a33ccf

File tree

7 files changed

+31
-28
lines changed

7 files changed

+31
-28
lines changed

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,27 +38,27 @@
3838
"prepare": "husky && dumi setup"
3939
},
4040
"dependencies": {
41+
"@rc-component/dropdown": "~1.0.0",
42+
"@rc-component/menu": "~1.1.0",
43+
"@rc-component/motion": "^1.1.3",
4144
"@rc-component/resize-observer": "^1.0.0",
4245
"@rc-component/util": "^1.3.0",
43-
"@rc-component/motion": "^1.1.3",
44-
"classnames": "2.x",
45-
"@rc-component/dropdown": "~1.0.0",
46-
"@rc-component/menu": "~1.1.0"
46+
"clsx": "^2.1.1"
4747
},
4848
"devDependencies": {
49-
"@typescript-eslint/eslint-plugin": "^5.59.7",
50-
"@typescript-eslint/parser": "^8.31.1",
5149
"@rc-component/father-plugin": "^2.0.0",
5250
"@rc-component/np": "^1.0.3",
5351
"@rc-component/trigger": "^3.0.0",
5452
"@testing-library/jest-dom": "^6.1.4",
5553
"@testing-library/react": "^16.0.1",
5654
"@testing-library/user-event": "^14.5.2",
57-
"@types/classnames": "^2.2.10",
5855
"@types/enzyme": "^3.10.5",
5956
"@types/jest": "^29.4.0",
57+
"@types/node": "^24.5.2",
6058
"@types/react": "^18.2.42",
6159
"@types/react-dom": "^19.1.3",
60+
"@typescript-eslint/eslint-plugin": "^5.59.7",
61+
"@typescript-eslint/parser": "^8.31.1",
6262
"@umijs/fabric": "^4.0.1",
6363
"cross-env": "^7.0.2",
6464
"dumi": "^2.0.0",

‎src/TabNavList/OperationNode.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import Dropdown from '@rc-component/dropdown';
33
import Menu, { MenuItem } from '@rc-component/menu';
44
import KeyCode from '@rc-component/util/lib/KeyCode';
@@ -184,9 +184,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
184184
moreStyle.order = 1;
185185
}
186186

187-
const overlayClassName = classNames(popupClassName, {
188-
[`${dropdownPrefix}-rtl`]: rtl,
189-
});
187+
const overlayClassName = clsx(popupClassName, { [`${dropdownPrefix}-rtl`]: rtl });
190188

191189
const moreNode: React.ReactNode = mobile ? null : (
192190
<Dropdown
@@ -217,7 +215,7 @@ const OperationNode = React.forwardRef<HTMLDivElement, OperationNodeProps>((prop
217215
);
218216

219217
return (
220-
<div className={classNames(`${prefixCls}-nav-operations`, className)} style={style} ref={ref}>
218+
<div className={clsx(`${prefixCls}-nav-operations`, className)} style={style} ref={ref}>
221219
{moreNode}
222220
<AddButton prefixCls={prefixCls} locale={locale} editable={editable} />
223221
</div>

‎src/TabNavList/TabNode.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import * as React from 'react';
33
import type { EditableConfig, Tab } from '../interface';
44
import { genDataNodeKey, getRemovable } from '../util';
@@ -83,7 +83,7 @@ const TabNode: React.FC<TabNodeProps> = props => {
8383
<div
8484
key={key}
8585
data-node-key={genDataNodeKey(key)}
86-
className={classNames(tabPrefix, className, {
86+
className={clsx(tabPrefix, className, {
8787
[`${tabPrefix}-with-remove`]: removable,
8888
[`${tabPrefix}-active`]: active,
8989
[`${tabPrefix}-disabled`]: disabled,

‎src/TabNavList/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import ResizeObserver from '@rc-component/resize-observer';
33
import useEvent from '@rc-component/util/lib/hooks/useEvent';
44
import { useComposeRef } from '@rc-component/util/lib/ref';
@@ -584,7 +584,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
584584
ref={useComposeRef(ref, containerRef)}
585585
role="tablist"
586586
aria-orientation={tabPositionTopOrBottom ? 'horizontal' : 'vertical'}
587-
className={classNames(`${prefixCls}-nav`, className, tabsClassNames?.header)}
587+
className={clsx(`${prefixCls}-nav`, className, tabsClassNames?.header)}
588588
style={{ ...styles?.header, ...style }}
589589
onKeyDown={() => {
590590
// No need animation when use keyboard
@@ -595,7 +595,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
595595

596596
<ResizeObserver onResize={onListHolderResize}>
597597
<div
598-
className={classNames(wrapPrefix, {
598+
className={clsx(wrapPrefix, {
599599
[`${wrapPrefix}-ping-left`]: pingLeft,
600600
[`${wrapPrefix}-ping-right`]: pingRight,
601601
[`${wrapPrefix}-ping-top`]: pingTop,
@@ -624,7 +624,7 @@ const TabNavList = React.forwardRef<HTMLDivElement, TabNavListProps>((props, ref
624624
}}
625625
/>
626626
<div
627-
className={classNames(`${prefixCls}-ink-bar`, tabsClassNames?.indicator, {
627+
className={clsx(`${prefixCls}-ink-bar`, tabsClassNames?.indicator, {
628628
[`${prefixCls}-ink-bar-animated`]: animated.inkBar,
629629
})}
630630
style={{ ...indicatorStyle, ...styles?.indicator }}

‎src/TabPanelList/TabPane.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import * as React from 'react';
33

44
export interface TabPaneProps {
@@ -33,7 +33,7 @@ const TabPane = React.forwardRef<HTMLDivElement, TabPaneProps>((props, ref) => {
3333
aria-labelledby={id && `${id}-tab-${tabKey}`}
3434
aria-hidden={!active}
3535
style={style}
36-
className={classNames(prefixCls, active && `${prefixCls}-active`, className)}
36+
className={clsx(prefixCls, active && `${prefixCls}-active`, className)}
3737
ref={ref}
3838
>
3939
{children}

‎src/TabPanelList/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import classNames from 'classnames';
1+
import { clsx } from 'clsx';
22
import CSSMotion from '@rc-component/motion';
33
import * as React from 'react';
44
import type { AnimatedConfig, TabPosition } from '../interface';
@@ -24,9 +24,9 @@ const TabPanelList: React.FC<TabPanelListProps> = props => {
2424
const tabPanePrefixCls = `${prefixCls}-tabpane`;
2525

2626
return (
27-
<div className={classNames(`${prefixCls}-content-holder`)}>
27+
<div className={clsx(`${prefixCls}-content-holder`)}>
2828
<div
29-
className={classNames(`${prefixCls}-content`, `${prefixCls}-content-${tabPosition}`, {
29+
className={clsx(`${prefixCls}-content`, `${prefixCls}-content-${tabPosition}`, {
3030
[`${prefixCls}-content-animated`]: tabPaneAnimated,
3131
})}
3232
>
@@ -58,7 +58,7 @@ const TabPanelList: React.FC<TabPanelListProps> = props => {
5858
animated={tabPaneAnimated}
5959
active={active}
6060
style={{ ...contentStyle, ...paneStyle, ...motionStyle }}
61-
className={classNames(contentClassName, paneClassName, motionClassName)}
61+
className={clsx(contentClassName, paneClassName, motionClassName)}
6262
ref={ref}
6363
/>
6464
)}

‎src/Tabs.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
// Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role
2-
import classNames from 'classnames';
2+
import { clsx } from 'clsx';
33
import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
44
import isMobile from '@rc-component/util/lib/isMobile';
55
import * as React from 'react';
66
import { useEffect, useState } from 'react';
77
import TabContext from './TabContext';
8+
import type { TabContextProps } from './TabContext';
89
import TabNavListWrapper from './TabNavList/Wrapper';
910
import TabPanelList from './TabPanelList';
1011
import useAnimateConfig from './hooks/useAnimateConfig';
@@ -183,18 +184,22 @@ const Tabs = React.forwardRef<HTMLDivElement, TabsProps>((props, ref) => {
183184
extra: tabBarExtraContent,
184185
style: tabBarStyle,
185186
getPopupContainer,
186-
popupClassName: classNames(popupClassName, tabsClassNames?.popup),
187+
popupClassName: clsx(popupClassName, tabsClassNames?.popup),
187188
indicator,
188189
styles,
189190
classNames: tabsClassNames,
190191
};
191192

193+
const memoizedValue = React.useMemo<TabContextProps>(() => {
194+
return { tabs, prefixCls };
195+
}, [tabs, prefixCls]);
196+
192197
return (
193-
<TabContext.Provider value={{ tabs, prefixCls }}>
198+
<TabContext.Provider value={memoizedValue}>
194199
<div
195200
ref={ref}
196201
id={id}
197-
className={classNames(
202+
className={clsx(
198203
prefixCls,
199204
`${prefixCls}-${tabPosition}`,
200205
{

0 commit comments

Comments
 (0)