feat(Popup CenterPopup): unified provision of custom prefixCls

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<CenterPopupProps> = 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<CenterPopupProps> = props => {
 
   const body = (
     <div
-      className={classNames(`${classPrefix}-body`, mergedProps.bodyClassName)}
+      className={classNames(`${prefixCls}-body`, mergedProps.bodyClassName)}
       style={mergedProps.bodyStyle}
     >
       {mergedProps.children}
@@ -88,7 +86,7 @@ export const CenterPopup: FC<CenterPopupProps> = props => {
     withNativeProps(
       mergedProps,
       <div
-        className={classPrefix}
+        className={prefixCls}
         style={{
           display: active ? undefined : 'none',
           pointerEvents: active ? undefined : 'none',
@@ -107,15 +105,15 @@ export const CenterPopup: FC<CenterPopupProps> = props => {
             }}
             style={mergedProps.maskStyle}
             className={classNames(
-              `${classPrefix}-mask`,
+              `${prefixCls}-mask`,
               mergedProps.maskClassName
             )}
             disableBodyScroll={false}
             stopPropagation={mergedProps.stopPropagation}
           />
         )}
         <div
-          className={`${classPrefix}-wrap`}
+          className={`${prefixCls}-wrap`}
           role={mergedProps.role}
           aria-label={mergedProps['aria-label']}
         >
@@ -131,8 +129,8 @@ export const CenterPopup: FC<CenterPopupProps> = props => {
             {mergedProps.showCloseButton && (
               <a
                 className={classNames(
-                  `${classPrefix}-close`,
-                  'adm-plain-anchor'
+                  `${prefixCls}-close`,
+                  getPrefixCls('plain-anchor')
                 )}
                 onClick={() => {
                   mergedProps.onClose?.()

src/components/center-popup/tests/center-popup.test.tsx

@@ -29,25 +29,37 @@ describe('center-popup', () => {
 
     it('context', () => {
       render(
-        <ConfigProvider popup={{ closeIcon: 'little' }}>
+        <ConfigProvider
+          popup={{ closeIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
           <CenterPopup visible showCloseButton>
             foobar
           </CenterPopup>
         </ConfigProvider>
       )
-
+      expect(document.querySelector('.config-prefix-center-popup')).toBeTruthy()
       expect(screen.getByText('little')).toBeVisible()
     })
 
     it('props override context', () => {
       render(
-        <ConfigProvider popup={{ closeIcon: 'little' }}>
-          <CenterPopup visible showCloseButton closeIcon='bamboo'>
+        <ConfigProvider
+          popup={{ closeIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
+          <CenterPopup
+            visible
+            showCloseButton
+            closeIcon='bamboo'
+            prefixCls='component-prefix'
+          >
             foobar
           </CenterPopup>
         </ConfigProvider>
       )
-
+      expect(document.querySelector('.component-prefix')).toBeTruthy()
+      expect(document.querySelector('.config-prefix-center-popup')).toBeFalsy()
       expect(screen.getByText('bamboo')).toBeVisible()
     })
   })

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<DialogProps> = p => {
   const props = mergeProps(defaultProps, p)
+  const { getPrefixCls } = useConfig()
+  const prefixCls = getPrefixCls('dialog', props.prefixCls)
 
   const element = (
     <>
       {!!props.image && (
-        <div className={cls('image-container')}>
+        <div className={`${prefixCls}-image-container`}>
           <Image src={props.image} alt='dialog header image' width='100%' />
         </div>
       )}
       {!!props.header && (
-        <div className={cls('header')}>
+        <div className={`${prefixCls}-header`}>
           <AutoCenter>{props.header}</AutoCenter>
         </div>
       )}
-      {!!props.title && <div className={cls('title')}>{props.title}</div>}
+      {!!props.title && (
+        <div className={`${prefixCls}-title`}>{props.title}</div>
+      )}
       <div
         className={classNames(
-          cls('content'),
-          !props.content && cls('content-empty')
+          `${prefixCls}-content`,
+          !props.content && `${prefixCls}-content-empty`
         )}
       >
         {typeof props.content === 'string' ? (
@@ -75,11 +81,11 @@ export const Dialog: FC<DialogProps> = p => {
           props.content
         )}
       </div>
-      <div className={cls('footer')}>
+      <div className={`${prefixCls}-footer`}>
         {props.actions.map((row, index) => {
           const actions = Array.isArray(row) ? row : [row]
           return (
-            <div className={cls('action-row')} key={index}>
+            <div className={`${prefixCls}-action-row`} key={index}>
               {actions.map((action, index) => (
                 <DialogActionButton
                   key={action.key}
@@ -104,7 +110,7 @@ export const Dialog: FC<DialogProps> = p => {
 
   return (
     <CenterPopup
-      className={classNames(cls(), props.className)}
+      className={classNames(prefixCls, props.className)}
       style={props.style}
       afterClose={props.afterClose}
       afterShow={props.afterShow}
@@ -119,8 +125,8 @@ export const Dialog: FC<DialogProps> = 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<DialogProps> = p => {
       forceRender={props.forceRender}
       role='dialog'
       aria-label={props['aria-label']}
+      prefixCls={prefixCls}
     >
       {element}
     </CenterPopup>
   )
 }
-
-function cls(name: string = '') {
-  return 'adm-dialog' + (name && '-') + name
-}

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(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Dialog visible={true} />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.config-prefix-dialog')).toBeTruthy()
+    expect(document.querySelector('.config-prefix-dialog-content')).toBeTruthy()
+  })
+
+  test('should apply custom prefixCls(component)', () => {
+    render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Dialog visible={true} prefixCls='component-prefix' />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.component-prefix')).toBeTruthy()
+    expect(document.querySelector('.component-prefix-content')).toBeTruthy()
+  })
 })

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 = {

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<PopupProps> = 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<PopupProps> = p => {
     withNativeProps(
       props,
       <div
-        className={classPrefix}
+        className={prefixCls}
         onClick={props.onClick}
         style={{
           display: active ? undefined : 'none',
@@ -146,8 +144,8 @@ export const Popup: FC<PopupProps> = p => {
           {props.showCloseButton && (
             <a
               className={classNames(
-                `${classPrefix}-close-icon`,
-                'adm-plain-anchor'
+                `${prefixCls}-close-icon`,
+                getPrefixCls('plain-anchor')
               )}
               onClick={() => {
                 props.onClose?.()

src/components/popup/tests/popup.test.tsx

@@ -69,25 +69,37 @@ describe('Popup', () => {
 
     it('context', () => {
       render(
-        <ConfigProvider popup={{ closeIcon: 'little' }}>
+        <ConfigProvider
+          popup={{ closeIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
           <Popup visible showCloseButton>
             foobar
           </Popup>
         </ConfigProvider>
       )
-
+      expect(document.querySelector('.config-prefix-popup')).toBeTruthy()
       expect(screen.getByText('little')).toBeVisible()
     })
 
     it('props override context', () => {
       render(
-        <ConfigProvider popup={{ closeIcon: 'little' }}>
-          <Popup visible showCloseButton closeIcon='bamboo'>
+        <ConfigProvider
+          popup={{ closeIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
+          <Popup
+            visible
+            showCloseButton
+            closeIcon='bamboo'
+            prefixCls='component-prefix'
+          >
             foobar
           </Popup>
         </ConfigProvider>
       )
-
+      expect(document.querySelector('.component-prefix')).toBeTruthy()
+      expect(document.querySelector('.config-prefix-popup')).toBeFalsy()
       expect(screen.getByText('bamboo')).toBeVisible()
     })
   })