feat(Popup): unified provision of custom prefixCls

Author: 刘欢

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