From 71ce071c6193d26dbb4b28e17ff234f50676afb7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 21 Oct 2025 15:27:24 +0800 Subject: [PATCH 1/3] feat(Button): unified provision of custom prefixCls --- src/components/button/button.tsx | 40 ++++++++++--------- .../tests/__snapshots__/button.test.tsx.snap | 14 +++++++ src/components/button/tests/button.test.tsx | 22 ++++++++-- .../config-provider.test.tsx.snap | 13 ++++++ .../tests/config-provider.test.tsx | 11 +++++ 5 files changed, 77 insertions(+), 23 deletions(-) create mode 100644 src/components/button/tests/__snapshots__/button.test.tsx.snap diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx index f6afde16cc..c6a35ee206 100644 --- a/src/components/button/button.tsx +++ b/src/components/button/button.tsx @@ -1,17 +1,16 @@ -import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react' +import classNames from 'classnames' import type { - ReactNode, ButtonHTMLAttributes, DetailedHTMLProps, MouseEventHandler, + ReactNode, } from 'react' -import classNames from 'classnames' -import DotLoading from '../dot-loading' -import { mergeProps } from '../../utils/with-default-props' +import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react' import { NativeProps, withNativeProps } from '../../utils/native-props' import { isPromise } from '../../utils/validate' - -const classPrefix = `adm-button` +import { mergeProps } from '../../utils/with-default-props' +import { useConfig } from '../config-provider' +import DotLoading from '../dot-loading' type NativeButtonProps = DetailedHTMLProps< ButtonHTMLAttributes, @@ -33,6 +32,7 @@ export type ButtonProps = { type?: 'submit' | 'reset' | 'button' shape?: 'default' | 'rounded' | 'rectangular' children?: ReactNode + prefixCls?: string } & Pick< NativeButtonProps, 'onMouseDown' | 'onMouseUp' | 'onTouchStart' | 'onTouchEnd' | 'id' | 'form' @@ -63,6 +63,8 @@ const defaultProps: ButtonProps = { export const Button = forwardRef((p, ref) => { const props = mergeProps(defaultProps, p) + const { getPrefixCls } = useConfig() + const prefixCls = getPrefixCls('button', props.prefixCls) const [innerLoading, setInnerLoading] = useState(false) const nativeButtonRef = useRef(null) const loading = props.loading === 'auto' ? innerLoading : props.loading @@ -99,19 +101,19 @@ export const Button = forwardRef((p, ref) => { form={props.form} onClick={handleClick} className={classNames( - classPrefix, + prefixCls, { - [`${classPrefix}-${props.color}`]: props.color, - [`${classPrefix}-block`]: props.block, - [`${classPrefix}-disabled`]: disabled, - [`${classPrefix}-fill-outline`]: props.fill === 'outline', - [`${classPrefix}-fill-none`]: props.fill === 'none', - [`${classPrefix}-mini`]: props.size === 'mini', - [`${classPrefix}-small`]: props.size === 'small', - [`${classPrefix}-large`]: props.size === 'large', - [`${classPrefix}-loading`]: loading, + [`${prefixCls}-${props.color}`]: props.color, + [`${prefixCls}-block`]: props.block, + [`${prefixCls}-disabled`]: disabled, + [`${prefixCls}-fill-outline`]: props.fill === 'outline', + [`${prefixCls}-fill-none`]: props.fill === 'none', + [`${prefixCls}-mini`]: props.size === 'mini', + [`${prefixCls}-small`]: props.size === 'small', + [`${prefixCls}-large`]: props.size === 'large', + [`${prefixCls}-loading`]: loading, }, - `${classPrefix}-shape-${props.shape}` + `${prefixCls}-shape-${props.shape}` )} disabled={disabled} onMouseDown={props.onMouseDown} @@ -120,7 +122,7 @@ export const Button = forwardRef((p, ref) => { onTouchEnd={props.onTouchEnd} > {loading ? ( -
+
{props.loadingIcon} {props.loadingText}
diff --git a/src/components/button/tests/__snapshots__/button.test.tsx.snap b/src/components/button/tests/__snapshots__/button.test.tsx.snap new file mode 100644 index 0000000000..2d6327d195 --- /dev/null +++ b/src/components/button/tests/__snapshots__/button.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Button should apply custom prefixCls 1`] = ` +
+ +
+`; diff --git a/src/components/button/tests/button.test.tsx b/src/components/button/tests/button.test.tsx index b847a61b73..5eef36a7d2 100644 --- a/src/components/button/tests/button.test.tsx +++ b/src/components/button/tests/button.test.tsx @@ -1,15 +1,16 @@ import React, { createRef } from 'react' import { + act, + fireEvent, render, - testA11y, screen, - fireEvent, sleep, + testA11y, waitFor, - act, } from 'testing' -import Button from '../' import type { ButtonRef } from '..' +import Button from '../' +import ConfigProvider from '../../config-provider' const classPrefix = `adm-button` @@ -218,4 +219,17 @@ describe('Button', () => { screen.getByText('Button') }) }) + + test('should apply custom prefixCls', () => { + const { container } = render( + + + + ) + expect(container.querySelector('.component-prefix')).toBeTruthy() + expect(container.querySelector('.config-prefix-button')).toBeFalsy() + expect(container).toMatchSnapshot() + }) }) diff --git a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap index 904400ade7..8911f39f4a 100644 --- a/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap +++ b/src/components/config-provider/tests/__snapshots__/config-provider.test.tsx.snap @@ -1,5 +1,18 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ConfigProvider should apply custom prefixCls 1`] = ` +
+ +
+`; + exports[`ConfigProvider should display the text as ar-SA 1`] = `
{ expect(Object.keys(config!)).toEqual(['locale', 'getPrefixCls']) }) + + test('should apply custom prefixCls', () => { + const { container } = render( + + + + ) + expect(container.querySelector('.config-prefix-button')).toBeTruthy() + expect(container).toMatchSnapshot() + }) }) From ca48b14965987af9359a36dcbadf8227ec8c937a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 21 Oct 2025 17:17:05 +0800 Subject: [PATCH 2/3] feat: add callback to getPrefixCls --- src/components/button/tests/button.test.tsx | 10 ++++++++++ .../config-provider/tests/config-provider.test.tsx | 11 ----------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/button/tests/button.test.tsx b/src/components/button/tests/button.test.tsx index 5eef36a7d2..e2b57fedd2 100644 --- a/src/components/button/tests/button.test.tsx +++ b/src/components/button/tests/button.test.tsx @@ -220,6 +220,16 @@ describe('Button', () => { }) }) + test('should apply custom prefixCls', () => { + const { container } = render( + + + + ) + expect(container.querySelector('.config-prefix-button')).toBeTruthy() + expect(container).toMatchSnapshot() + }) + test('should apply custom prefixCls', () => { const { container } = render( diff --git a/src/components/config-provider/tests/config-provider.test.tsx b/src/components/config-provider/tests/config-provider.test.tsx index dbca798300..8801bf54eb 100644 --- a/src/components/config-provider/tests/config-provider.test.tsx +++ b/src/components/config-provider/tests/config-provider.test.tsx @@ -40,7 +40,6 @@ import viVN from '../../../locales/vi-VN' import zhCN from '../../../locales/zh-CN' import zhHK from '../../../locales/zh-HK' import zhTW from '../../../locales/zh-TW' -import Button from '../../button' const locales = [ zhCN, @@ -130,14 +129,4 @@ describe('ConfigProvider', () => { expect(Object.keys(config!)).toEqual(['locale', 'getPrefixCls']) }) - - test('should apply custom prefixCls', () => { - const { container } = render( - - - - ) - expect(container.querySelector('.config-prefix-button')).toBeTruthy() - expect(container).toMatchSnapshot() - }) }) From d1de569ceb7314c1b9fd39426ae13bb94a227a95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Tue, 21 Oct 2025 17:34:14 +0800 Subject: [PATCH 3/3] test: update snap --- .../tests/__snapshots__/button.test.tsx.snap | 15 ++++++++++++++- src/components/button/tests/button.test.tsx | 4 ++-- .../__snapshots__/config-provider.test.tsx.snap | 13 ------------- 3 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/components/button/tests/__snapshots__/button.test.tsx.snap b/src/components/button/tests/__snapshots__/button.test.tsx.snap index 2d6327d195..6816e160ea 100644 --- a/src/components/button/tests/__snapshots__/button.test.tsx.snap +++ b/src/components/button/tests/__snapshots__/button.test.tsx.snap @@ -1,6 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Button should apply custom prefixCls 1`] = ` +exports[`Button should apply custom prefixCls(ConfigProvider) 1`] = ` +
+ +
+`; + +exports[`Button should apply custom prefixCls(component) 1`] = `
@@ -230,7 +230,7 @@ describe('Button', () => { expect(container).toMatchSnapshot() }) - test('should apply custom prefixCls', () => { + test('should apply custom prefixCls(component)', () => { const { container } = render( -
-`; - exports[`ConfigProvider should display the text as ar-SA 1`] = `