From b18098ddd0b5dab14ca2ad7c6022e3f0ad571b17 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Sep 2025 03:45:04 +0800 Subject: [PATCH 1/2] perf: uninstall classnames, install clsx --- .gitignore | 3 ++- package.json | 3 +-- src/Handles/Handle.tsx | 10 +++------- src/Marks/Mark.tsx | 4 ++-- src/Slider.tsx | 6 +++--- src/Steps/Dot.tsx | 4 ++-- src/Tracks/Track.tsx | 4 ++-- src/Tracks/index.tsx | 6 +++--- tests/Slider.test.js | 8 +++----- 9 files changed, 21 insertions(+), 27 deletions(-) diff --git a/.gitignore b/.gitignore index 5289a2524..fc07c1aed 100644 --- a/.gitignore +++ b/.gitignore @@ -29,6 +29,7 @@ es /coverage yarn.lock package-lock.json +pnpm-lock.yaml .doc .storybook @@ -37,4 +38,4 @@ package-lock.json .umi-production .umi-test .env.local -.dumi/ \ No newline at end of file +.dumi/ diff --git a/package.json b/package.json index b80ff4d3f..6543ba12a 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ }, "dependencies": { "@rc-component/util": "^1.3.0", - "classnames": "^2.2.5" + "clsx": "^2.1.1" }, "devDependencies": { "@rc-component/father-plugin": "^2.1.3", @@ -52,7 +52,6 @@ "@rc-component/trigger": "^3.5.2", "@testing-library/jest-dom": "^6.1.5", "@testing-library/react": "^12.1.3", - "@types/classnames": "^2.2.9", "@types/jest": "^29.5.1", "@types/node": "^22.5.0", "@types/react": "^18.2.42", diff --git a/src/Handles/Handle.tsx b/src/Handles/Handle.tsx index c7afa3986..903d7233a 100644 --- a/src/Handles/Handle.tsx +++ b/src/Handles/Handle.tsx @@ -1,4 +1,4 @@ -import cls from 'classnames'; +import { clsx } from 'clsx'; import KeyCode from '@rc-component/util/lib/KeyCode'; import * as React from 'react'; import SliderContext from '../context'; @@ -184,7 +184,7 @@ const Handle = React.forwardRef((props, ref) => { let handleNode = (
((props, ref) => { }, classNames.handle, )} - style={{ - ...positionStyle, - ...style, - ...styles.handle, - }} + style={{ ...positionStyle, ...style, ...styles.handle }} {...divProps} {...restProps} /> diff --git a/src/Marks/Mark.tsx b/src/Marks/Mark.tsx index 641a61631..437ee555f 100644 --- a/src/Marks/Mark.tsx +++ b/src/Marks/Mark.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import * as React from 'react'; import SliderContext from '../context'; import { getDirectionStyle } from '../util'; @@ -23,7 +23,7 @@ const Mark: React.FC = (props) => { return ( >((prop
>((prop id={id} >
diff --git a/src/Steps/Dot.tsx b/src/Steps/Dot.tsx index 4b6d83f07..3820ee951 100644 --- a/src/Steps/Dot.tsx +++ b/src/Steps/Dot.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import * as React from 'react'; import SliderContext from '../context'; import { getDirectionStyle } from '../util'; @@ -33,7 +33,7 @@ const Dot: React.FC = (props) => { return ( ); diff --git a/src/Tracks/Track.tsx b/src/Tracks/Track.tsx index 45a96b55a..da6d10b96 100644 --- a/src/Tracks/Track.tsx +++ b/src/Tracks/Track.tsx @@ -1,4 +1,4 @@ -import cls from 'classnames'; +import { clsx } from 'clsx'; import * as React from 'react'; import SliderContext from '../context'; import type { OnStartMove } from '../interface'; @@ -57,7 +57,7 @@ const Track: React.FC = (props) => { const className = replaceCls || - cls( + clsx( trackPrefixCls, { [`${trackPrefixCls}-${index + 1}`]: index !== null && range, diff --git a/src/Tracks/index.tsx b/src/Tracks/index.tsx index 44f7c1d8b..4242bb86c 100644 --- a/src/Tracks/index.tsx +++ b/src/Tracks/index.tsx @@ -1,4 +1,4 @@ -import cls from 'classnames'; +import { clsx } from 'clsx'; import * as React from 'react'; import SliderContext from '../context'; import type { OnStartMove } from '../interface'; @@ -47,13 +47,13 @@ const Tracks: React.FC = (props) => { // ========================== Render ========================== const tracksNode = - trackList?.length && (classNames.tracks || styles.tracks) ? ( + trackList?.length && (classNames.tracks || styles.tracks) ? ( ) : null; diff --git a/tests/Slider.test.js b/tests/Slider.test.js index 4c74bdda4..c7b6f0376 100644 --- a/tests/Slider.test.js +++ b/tests/Slider.test.js @@ -1,6 +1,6 @@ import '@testing-library/jest-dom'; import { createEvent, fireEvent, render } from '@testing-library/react'; -import classNames from 'classnames'; +import { clsx } from 'clsx'; import keyCode from '@rc-component/util/lib/KeyCode'; import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; import React from 'react'; @@ -598,9 +598,7 @@ describe('Slider', () => { const { container } = render( - React.cloneElement(node, { - className: classNames(node.props.className, 'custom-handle'), - }) + React.cloneElement(node, { className: clsx(node.props.className, 'custom-handle') }) } />, ); @@ -665,7 +663,7 @@ describe('Slider', () => { it('tipFormatter should not crash with undefined value', () => { [undefined, null].forEach((value) => { - render(); + render(); }); }); }); From 48d5f36e574f7201ccfbc61ff2f888d447011b01 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Sep 2025 03:49:09 +0800 Subject: [PATCH 2/2] update demo --- docs/examples/components/TooltipSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/examples/components/TooltipSlider.tsx b/docs/examples/components/TooltipSlider.tsx index 4ce44a8fe..97a14517f 100644 --- a/docs/examples/components/TooltipSlider.tsx +++ b/docs/examples/components/TooltipSlider.tsx @@ -43,7 +43,7 @@ const HandleTooltip: React.FC = (props) => {