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']}
         >
@@ -130,10 +128,7 @@ export const CenterPopup: FC<CenterPopupProps> = props => {
           >
             {mergedProps.showCloseButton && (
               <a
-                className={classNames(
-                  `${classPrefix}-close`,
-                  'adm-plain-anchor'
-                )}
+                className={classNames(`${prefixCls}-close`, 'adm-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/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,7 +144,7 @@ export const Popup: FC<PopupProps> = p => {
           {props.showCloseButton && (
             <a
               className={classNames(
-                `${classPrefix}-close-icon`,
+                `${prefixCls}-close-icon`,
                 'adm-plain-anchor'
               )}
               onClick={() => {

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()
     })
   })