feat: center popup

Author: 刘欢

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