From 090f3a74e97c8b39abed92894cf5f7fffef520c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 23 Oct 2025 16:26:42 +0800 Subject: [PATCH 1/4] feat(Popup): unified provision of custom prefixCls --- src/components/popup/popup-base-props.tsx | 5 ++-- src/components/popup/popup.tsx | 32 +++++++++++------------ src/components/popup/tests/popup.test.tsx | 22 ++++++++++++---- 3 files changed, 35 insertions(+), 24 deletions(-) diff --git a/src/components/popup/popup-base-props.tsx b/src/components/popup/popup-base-props.tsx index 5c47b61f39..b7d839d70e 100644 --- a/src/components/popup/popup-base-props.tsx +++ b/src/components/popup/popup-base-props.tsx @@ -1,8 +1,8 @@ +import { CloseOutline } from 'antd-mobile-icons' import React, { CSSProperties, ReactNode } from 'react' import { GetContainer } from '../../utils/render-to-container' -import { MaskProps } from '../mask' import { PropagationEvent } from '../../utils/with-stop-propagation' -import { CloseOutline } from 'antd-mobile-icons' +import { MaskProps } from '../mask' export type PopupBaseProps = { afterClose?: () => void @@ -24,6 +24,7 @@ export type PopupBaseProps = { showCloseButton?: boolean stopPropagation?: PropagationEvent[] visible?: boolean + prefixCls?: string } export const defaultPopupBaseProps = { diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx index c736cb0b08..bf5de7c746 100644 --- a/src/components/popup/popup.tsx +++ b/src/components/popup/popup.tsx @@ -1,21 +1,19 @@ +import { animated, useSpring } from '@react-spring/web' +import { useDrag } from '@use-gesture/react' +import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks' import classNames from 'classnames' -import React, { useState, useRef } from 'react' import type { FC, PropsWithChildren } from 'react' -import { useIsomorphicLayoutEffect, useUnmountedRef } from 'ahooks' +import React, { useRef, useState } from 'react' import { NativeProps, withNativeProps } from '../../utils/native-props' -import { mergeProps } from '../../utils/with-default-props' -import Mask from '../mask' -import { useLockScroll } from '../../utils/use-lock-scroll' import { renderToContainer } from '../../utils/render-to-container' -import { useSpring, animated } from '@react-spring/web' -import { withStopPropagation } from '../../utils/with-stop-propagation' import { ShouldRender } from '../../utils/should-render' -import { defaultPopupBaseProps, PopupBaseProps } from './popup-base-props' import { useInnerVisible } from '../../utils/use-inner-visible' +import { useLockScroll } from '../../utils/use-lock-scroll' +import { mergeProps } from '../../utils/with-default-props' +import { withStopPropagation } from '../../utils/with-stop-propagation' import { useConfig } from '../config-provider' -import { useDrag } from '@use-gesture/react' - -const classPrefix = `adm-popup` +import Mask from '../mask' +import { defaultPopupBaseProps, PopupBaseProps } from './popup-base-props' export type PopupProps = PopupBaseProps & PropsWithChildren<{ @@ -31,13 +29,13 @@ const defaultProps = { } export const Popup: FC = p => { - const { locale, popup: componentConfig = {} } = useConfig() + const { locale, popup: componentConfig = {}, getPrefixCls } = useConfig() const props = mergeProps(defaultProps, componentConfig, p) - + const prefixCls = getPrefixCls('popup', props.prefixCls) const bodyCls = classNames( - `${classPrefix}-body`, + `${prefixCls}-body`, props.bodyClassName, - `${classPrefix}-body-position-${props.position}` + `${prefixCls}-body-position-${props.position}` ) const [active, setActive] = useState(props.visible) @@ -93,7 +91,7 @@ export const Popup: FC = p => { withNativeProps( props,
= p => { {props.showCloseButton && ( { diff --git a/src/components/popup/tests/popup.test.tsx b/src/components/popup/tests/popup.test.tsx index 33b951eac2..ce9767e9b7 100644 --- a/src/components/popup/tests/popup.test.tsx +++ b/src/components/popup/tests/popup.test.tsx @@ -69,25 +69,37 @@ describe('Popup', () => { it('context', () => { render( - + foobar ) - + expect(document.querySelector('.config-prefix-popup')).toBeTruthy() expect(screen.getByText('little')).toBeVisible() }) it('props override context', () => { render( - - + + foobar ) - + expect(document.querySelector('.component-prefix')).toBeTruthy() + expect(document.querySelector('.config-prefix-popup')).toBeFalsy() expect(screen.getByText('bamboo')).toBeVisible() }) }) From a42e614ce0a4004bfe45994bcd50fcd5b4961d96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Thu, 23 Oct 2025 16:38:36 +0800 Subject: [PATCH 2/4] feat: center popup --- src/components/center-popup/center-popup.tsx | 19 ++++++---------- .../center-popup/tests/center-popup.test.tsx | 22 ++++++++++++++----- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/components/center-popup/center-popup.tsx b/src/components/center-popup/center-popup.tsx index 29f26dd9fe..c4dcb70dec 100644 --- a/src/components/center-popup/center-popup.tsx +++ b/src/components/center-popup/center-popup.tsx @@ -17,8 +17,6 @@ import { defaultPopupBaseProps, } from '../popup/popup-base-props' -const classPrefix = 'adm-center-popup' - export type CenterPopupProps = PopupBaseProps & PropsWithChildren<{ // These props currently are only used internally. They are not exported to users: @@ -38,9 +36,9 @@ const defaultProps = { } export const CenterPopup: FC = props => { - const { popup: componentConfig = {} } = useConfig() + const { popup: componentConfig = {}, getPrefixCls } = useConfig() const mergedProps = mergeProps(defaultProps, componentConfig, props) - + const prefixCls = getPrefixCls('center-popup', mergedProps.prefixCls) const unmountedRef = useUnmountedRef() const style = useSpring({ scale: mergedProps.visible ? 1 : 0.8, @@ -76,7 +74,7 @@ export const CenterPopup: FC = props => { const body = (
{mergedProps.children} @@ -88,7 +86,7 @@ export const CenterPopup: FC = props => { withNativeProps( mergedProps,
= props => { }} style={mergedProps.maskStyle} className={classNames( - `${classPrefix}-mask`, + `${prefixCls}-mask`, mergedProps.maskClassName )} disableBodyScroll={false} @@ -115,7 +113,7 @@ export const CenterPopup: FC = props => { /> )}
@@ -130,10 +128,7 @@ export const CenterPopup: FC = props => { > {mergedProps.showCloseButton && ( { mergedProps.onClose?.() }} diff --git a/src/components/center-popup/tests/center-popup.test.tsx b/src/components/center-popup/tests/center-popup.test.tsx index 72220957bc..191e971831 100644 --- a/src/components/center-popup/tests/center-popup.test.tsx +++ b/src/components/center-popup/tests/center-popup.test.tsx @@ -29,25 +29,37 @@ describe('center-popup', () => { it('context', () => { render( - + foobar ) - + expect(document.querySelector('.config-prefix-center-popup')).toBeTruthy() expect(screen.getByText('little')).toBeVisible() }) it('props override context', () => { render( - - + + foobar ) - + expect(document.querySelector('.component-prefix')).toBeTruthy() + expect(document.querySelector('.config-prefix-center-popup')).toBeFalsy() expect(screen.getByText('bamboo')).toBeVisible() }) }) From 73d7bab83e587ad70eb4e70f2df0e6076e24297a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Fri, 24 Oct 2025 15:35:29 +0800 Subject: [PATCH 3/4] feat(Dialog): unified provision of custom prefixCls --- src/components/dialog/dialog.tsx | 31 +++++++++++---------- src/components/dialog/tests/dialog.test.tsx | 21 ++++++++++++++ 2 files changed, 38 insertions(+), 14 deletions(-) diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx index ad5fc4a090..de8ca34b7f 100644 --- a/src/components/dialog/dialog.tsx +++ b/src/components/dialog/dialog.tsx @@ -5,6 +5,7 @@ import { NativeProps } from '../../utils/native-props' import { mergeProps } from '../../utils/with-default-props' import AutoCenter from '../auto-center' import CenterPopup, { CenterPopupProps } from '../center-popup' +import { useConfig } from '../config-provider' import Image from '../image' import { Action, DialogActionButton } from './dialog-action-button' @@ -22,6 +23,7 @@ export type DialogProps = Pick< | 'maskStyle' | 'stopPropagation' | 'visible' + | 'prefixCls' > & { image?: string header?: ReactNode @@ -49,24 +51,28 @@ const defaultProps = { export const Dialog: FC = p => { const props = mergeProps(defaultProps, p) + const { getPrefixCls } = useConfig() + const prefixCls = getPrefixCls('dialog', props.prefixCls) const element = ( <> {!!props.image && ( -
+
dialog header image
)} {!!props.header && ( -
+
{props.header}
)} - {!!props.title &&
{props.title}
} + {!!props.title && ( +
{props.title}
+ )}
{typeof props.content === 'string' ? ( @@ -75,11 +81,11 @@ export const Dialog: FC = p => { props.content )}
-
+
{props.actions.map((row, index) => { const actions = Array.isArray(row) ? row : [row] return ( -
+
{actions.map((action, index) => ( = p => { return ( = p => { getContainer={props.getContainer} bodyStyle={props.bodyStyle} bodyClassName={classNames( - cls('body'), - props.image && cls('with-image'), + `${prefixCls}-body`, + props.image && `${prefixCls}-with-image`, props.bodyClassName )} maskStyle={props.maskStyle} @@ -131,12 +137,9 @@ export const Dialog: FC = p => { forceRender={props.forceRender} role='dialog' aria-label={props['aria-label']} + prefixCls={prefixCls} > {element} ) } - -function cls(name: string = '') { - return 'adm-dialog' + (name && '-') + name -} diff --git a/src/components/dialog/tests/dialog.test.tsx b/src/components/dialog/tests/dialog.test.tsx index ddeb782f36..ff93a4530d 100644 --- a/src/components/dialog/tests/dialog.test.tsx +++ b/src/components/dialog/tests/dialog.test.tsx @@ -12,6 +12,7 @@ import { waitForElementToBeRemoved, } from 'testing' import Dialog, { DialogAlertProps } from '..' +import ConfigProvider from '../../config-provider' const classPrefix = `adm-dialog` @@ -234,4 +235,24 @@ describe('Dialog', () => { await promise }) }) + + test('should apply custom prefixCls(ConfigProvider)', () => { + render( + + + + ) + expect(document.querySelector('.config-prefix-dialog')).toBeTruthy() + expect(document.querySelector('.config-prefix-dialog-content')).toBeTruthy() + }) + + test('should apply custom prefixCls(component)', () => { + render( + + + + ) + expect(document.querySelector('.component-prefix')).toBeTruthy() + expect(document.querySelector('.component-prefix-content')).toBeTruthy() + }) }) From 440f91d080021aadf1d586cbf7f34ba74a47e38f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=AC=A2?= Date: Fri, 24 Oct 2025 15:43:12 +0800 Subject: [PATCH 4/4] feat: dm-plain-anchor -> getPrefixCls('plain-anchor') --- src/components/center-popup/center-popup.tsx | 5 ++++- src/components/popup/popup.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/center-popup/center-popup.tsx b/src/components/center-popup/center-popup.tsx index c4dcb70dec..52c610b68a 100644 --- a/src/components/center-popup/center-popup.tsx +++ b/src/components/center-popup/center-popup.tsx @@ -128,7 +128,10 @@ export const CenterPopup: FC = props => { > {mergedProps.showCloseButton && ( { mergedProps.onClose?.() }} diff --git a/src/components/popup/popup.tsx b/src/components/popup/popup.tsx index bf5de7c746..22404e2ab6 100644 --- a/src/components/popup/popup.tsx +++ b/src/components/popup/popup.tsx @@ -145,7 +145,7 @@ export const Popup: FC = p => { { props.onClose?.()