Skip to content

Commit 14c2211

Browse files
li-jia-nanli-jia-nan
authored
perf: uninstall classnames, install clsx (#944)
1 parent baa94f3 commit 14c2211

File tree

19 files changed

+67
-76
lines changed

19 files changed

+67
-76
lines changed

‎package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,19 +42,16 @@
4242
"@rc-component/resize-observer": "^1.0.0",
4343
"@rc-component/trigger": "^3.0.0",
4444
"@rc-component/util": "^1.3.0",
45-
"classnames": "^2.2.1",
45+
"clsx": "^2.1.1",
4646
"rc-overflow": "^1.3.2"
4747
},
48-
"engines": {
49-
"node": ">=8.x"
50-
},
51-
"devDependencies": {
48+
"devDependencies": {
5249
"@rc-component/father-plugin": "^1.0.0",
53-
"@rc-component/np":"^1.0.3",
50+
"@rc-component/np": "^1.0.3",
5451
"@testing-library/react": "^16.0.0",
55-
"@types/classnames": "^2.2.9",
5652
"@types/jest": "^29.4.0",
5753
"@types/luxon": "^3.2.0",
54+
"@types/node": "^24.5.2",
5855
"@types/react": "^18.0.28",
5956
"@types/react-dom": "^18.0.8",
6057
"coveralls": "^3.0.6",
@@ -103,5 +100,8 @@
103100
"moment": {
104101
"optional": true
105102
}
103+
},
104+
"engines": {
105+
"node": ">=8.x"
106106
}
107107
}

‎src/PickerInput/Popup/Footer.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cls from 'classnames';
1+
import { clsx } from 'clsx';
22
import * as React from 'react';
33
import type { GenerateConfig } from '../../generate';
44
import useTimeInfo from '../../hooks/useTimeInfo';
@@ -76,7 +76,7 @@ export default function Footer(props: FooterProps) {
7676
const presetNode = showNow && (
7777
<li className={nowPrefixCls}>
7878
<a
79-
className={cls(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
79+
className={clsx(nowBtnPrefixCls, nowDisabled && `${nowBtnPrefixCls}-disabled`)}
8080
aria-disabled={nowDisabled}
8181
onClick={onInternalNow}
8282
>
@@ -108,7 +108,7 @@ export default function Footer(props: FooterProps) {
108108

109109
return (
110110
<div
111-
className={cls(`${prefixCls}-footer`, classNames.popup.footer)}
111+
className={clsx(`${prefixCls}-footer`, classNames.popup.footer)}
112112
style={styles.popup.footer}
113113
>
114114
{extraNode && <div className={`${prefixCls}-footer-extra`}>{extraNode}</div>}

‎src/PickerInput/Popup/index.tsx‎

Lines changed: 3 additions & 3 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, { type ResizeObserverProps } from '@rc-component/resize-observer';
33
import * as React from 'react';
44
import type {
@@ -213,7 +213,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
213213
<div
214214
onMouseDown={onPanelMouseDown}
215215
tabIndex={-1}
216-
className={classNames(
216+
className={clsx(
217217
containerPrefixCls,
218218
// Used for Today Button style, safe to remove if no need
219219
`${prefixCls}-${internalMode}-panel-container`,
@@ -238,7 +238,7 @@ export default function Popup<DateType extends object = any>(props: PopupProps<D
238238
<div
239239
onMouseDown={onPanelMouseDown}
240240
ref={wrapperRef}
241-
className={classNames(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
241+
className={clsx(`${prefixCls}-range-wrapper`, `${prefixCls}-${picker}-range-wrapper`)}
242242
>
243243
<div ref={arrowRef} className={`${prefixCls}-range-arrow`} style={{ left: arrowOffset }} />
244244

‎src/PickerInput/RangePicker.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEvent, useControlledState } from '@rc-component/util';
2-
import cls from 'classnames';
2+
import { clsx } from 'clsx';
33
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
44
import omit from '@rc-component/util/lib/omit';
55
import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -777,7 +777,7 @@ function RangePicker<DateType extends object = any>(
777777
{...pickTriggerProps(filledProps)}
778778
popupElement={panel}
779779
popupStyle={mergedStyles.popup.root}
780-
popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
780+
popupClassName={clsx(rootClassName, mergedClassNames.popup.root)}
781781
// Visible
782782
visible={mergedOpen}
783783
onClose={onPopupClose}
@@ -790,11 +790,8 @@ function RangePicker<DateType extends object = any>(
790790
// Ref
791791
ref={selectorRef}
792792
// Style
793-
className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
794-
style={{
795-
...mergedStyles.root,
796-
...filledProps.style,
797-
}}
793+
className={clsx(filledProps.className, rootClassName, mergedClassNames.root)}
794+
style={{ ...mergedStyles.root, ...filledProps.style }}
798795
// Icon
799796
suffixIcon={suffixIcon}
800797
// Active

‎src/PickerInput/Selector/Icon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import PickerContext from '../context';
3-
import cls from 'classnames';
3+
import { clsx } from 'clsx';
44

55
export interface IconProps extends React.HtmlHTMLAttributes<HTMLElement> {
66
icon?: React.ReactNode;
@@ -13,7 +13,7 @@ export default function Icon(props: IconProps) {
1313

1414
return icon ? (
1515
<span
16-
className={cls(`${prefixCls}-${type}`, classNames.suffix)}
16+
className={clsx(`${prefixCls}-${type}`, classNames.suffix)}
1717
style={styles.suffix}
1818
{...restProps}
1919
>

‎src/PickerInput/Selector/Input.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cls from 'classnames';
1+
import { clsx } from 'clsx';
22
import { useEvent } from '@rc-component/util';
33
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
44
import raf from '@rc-component/util/lib/raf';
@@ -95,8 +95,8 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
9595
}, [value]);
9696

9797
// ========================= Refs =========================
98-
const holderRef = React.useRef<HTMLDivElement>();
99-
const inputRef = React.useRef<HTMLInputElement>();
98+
const holderRef = React.useRef<HTMLDivElement>(null);
99+
const inputRef = React.useRef<HTMLInputElement>(null);
100100

101101
React.useImperativeHandle(ref, () => ({
102102
nativeElement: holderRef.current,
@@ -383,7 +383,7 @@ const Input = React.forwardRef<InputRef, InputProps>((props, ref) => {
383383
return (
384384
<div
385385
ref={holderRef}
386-
className={cls(
386+
className={clsx(
387387
inputPrefixCls,
388388
{
389389
[`${inputPrefixCls}-active`]: active && showActiveCls,

‎src/PickerInput/Selector/RangeSelector.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cls from 'classnames';
1+
import { clsx } from 'clsx';
22
import ResizeObserver from '@rc-component/resize-observer';
33
import { useEvent } from '@rc-component/util';
44
import * as React from 'react';
@@ -211,7 +211,7 @@ function RangeSelector<DateType extends object = any>(
211211
<ResizeObserver onResize={syncActiveOffset}>
212212
<div
213213
{...rootProps}
214-
className={cls(
214+
className={clsx(
215215
prefixCls,
216216
`${prefixCls}-range`,
217217
{
@@ -239,7 +239,7 @@ function RangeSelector<DateType extends object = any>(
239239
}}
240240
>
241241
{prefix && (
242-
<div className={cls(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
242+
<div className={clsx(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
243243
{prefix}
244244
</div>
245245
)}

‎src/PickerInput/Selector/SingleSelector/MultipleDates.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 Overflow from 'rc-overflow';
33
import * as React from 'react';
44
import type { PickerProps } from '../../SinglePicker';
@@ -36,7 +36,7 @@ export default function MultipleDates<DateType extends object = any>(
3636
function renderSelector(content: React.ReactNode, onClose?: React.MouseEventHandler) {
3737
return (
3838
<span
39-
className={classNames(`${selectionCls}-item`)}
39+
className={clsx(`${selectionCls}-item`)}
4040
title={typeof content === 'string' ? content : null}
4141
>
4242
<span className={`${selectionCls}-item-content`}>{content}</span>

‎src/PickerInput/Selector/SingleSelector/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import cls from 'classnames';
1+
import { clsx } from 'clsx';
22
import * as React from 'react';
33
import type { InternalMode, PickerRef, SelectorProps } from '../../../interface';
44
import { isSame } from '../../../utils/dateUtil';
@@ -201,7 +201,7 @@ function SingleSelector<DateType extends object = any>(
201201
return (
202202
<div
203203
{...rootProps}
204-
className={cls(
204+
className={clsx(
205205
prefixCls,
206206
{
207207
[`${prefixCls}-multiple`]: multiple,
@@ -226,7 +226,7 @@ function SingleSelector<DateType extends object = any>(
226226
}}
227227
>
228228
{prefix && (
229-
<div className={cls(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
229+
<div className={clsx(`${prefixCls}-prefix`, classNames.prefix)} style={styles.prefix}>
230230
{prefix}
231231
</div>
232232
)}

‎src/PickerInput/SinglePicker.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEvent, useControlledState } from '@rc-component/util';
2-
import cls from 'classnames';
2+
import { clsx } from 'clsx';
33
import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
44
import omit from '@rc-component/util/lib/omit';
55
import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -638,7 +638,7 @@ function Picker<DateType extends object = any>(
638638
{...pickTriggerProps(filledProps)}
639639
popupElement={panel}
640640
popupStyle={mergedStyles.popup.root}
641-
popupClassName={cls(rootClassName, mergedClassNames.popup.root)}
641+
popupClassName={clsx(rootClassName, mergedClassNames.popup.root)}
642642
// Visible
643643
visible={mergedOpen}
644644
onClose={onPopupClose}
@@ -649,11 +649,8 @@ function Picker<DateType extends object = any>(
649649
// Ref
650650
ref={selectorRef}
651651
// Style
652-
className={cls(filledProps.className, rootClassName, mergedClassNames.root)}
653-
style={{
654-
...mergedStyles.root,
655-
...filledProps.style,
656-
}}
652+
className={clsx(filledProps.className, rootClassName, mergedClassNames.root)}
653+
style={{ ...mergedStyles.root, ...filledProps.style }}
657654
// Icon
658655
suffixIcon={suffixIcon}
659656
removeIcon={removeIcon}

0 commit comments

Comments
 (0)