feat(ActionSheet): unified provision of custom prefixCls

Author: 刘欢

src/components/action-sheet/action-sheet.tsx

@@ -1,13 +1,12 @@
+import classNames from 'classnames'
+import type { CSSProperties, FC, ReactNode } from 'react'
 import React from 'react'
-import type { FC, ReactNode, CSSProperties } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { renderImperatively } from '../../utils/render-imperatively'
 import { mergeProps } from '../../utils/with-default-props'
-import classNames from 'classnames'
+import { useConfig } from '../config-provider'
 import Popup, { PopupProps } from '../popup'
 import SafeArea from '../safe-area'
-import { renderImperatively } from '../../utils/render-imperatively'
-
-const classPrefix = `adm-action-sheet`
 
 export type Action = {
   key: string | number
@@ -34,6 +33,7 @@ export type ActionSheetProps = {
   /** @deprecated use `styles` instead */
   popupStyle?: CSSProperties
   styles?: Partial<Record<'body' | 'mask', CSSProperties>>
+  prefixCls?: string
 } & Pick<
   PopupProps,
   'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'
@@ -53,8 +53,9 @@ const defaultProps = {
 
 export const ActionSheet: FC<ActionSheetProps> = p => {
   const props = mergeProps(defaultProps, p)
+  const { getPrefixCls } = useConfig()
   const { styles } = props
-
+  const prefixCls = getPrefixCls('action-sheet', props.prefixCls)
   return (
     <Popup
       visible={props.visible}
@@ -65,7 +66,7 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
         }
       }}
       afterClose={props.afterClose}
-      className={classNames(`${classPrefix}-popup`, props.popupClassName)}
+      className={classNames(`${prefixCls}-popup`, props.popupClassName)}
       style={props.popupStyle}
       getContainer={props.getContainer}
       destroyOnClose={props.destroyOnClose}
@@ -75,24 +76,24 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
     >
       {withNativeProps(
         props,
-        <div className={classPrefix}>
+        <div className={prefixCls}>
           {props.extra && (
-            <div className={`${classPrefix}-extra`}>{props.extra}</div>
+            <div className={`${prefixCls}-extra`}>{props.extra}</div>
           )}
-          <div className={`${classPrefix}-button-list`}>
+          <div className={`${prefixCls}-button-list`}>
             {props.actions.map((action, index) => (
               <div
                 key={action.key}
-                className={`${classPrefix}-button-item-wrapper`}
+                className={`${prefixCls}-button-item-wrapper`}
               >
                 <a
                   className={classNames(
                     'adm-plain-anchor',
-                    `${classPrefix}-button-item`,
+                    `${prefixCls}-button-item`,
                     {
-                      [`${classPrefix}-button-item-danger`]: action.danger,
-                      [`${classPrefix}-button-item-disabled`]: action.disabled,
-                      [`${classPrefix}-button-item-bold`]: action.bold,
+                      [`${prefixCls}-button-item-danger`]: action.danger,
+                      [`${prefixCls}-button-item-disabled`]: action.disabled,
+                      [`${prefixCls}-button-item-bold`]: action.bold,
                     }
                   )}
                   onClick={() => {
@@ -105,11 +106,11 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
                   role='option'
                   aria-disabled={action.disabled}
                 >
-                  <div className={`${classPrefix}-button-item-name`}>
+                  <div className={`${prefixCls}-button-item-name`}>
                     {action.text}
                   </div>
                   {action.description && (
-                    <div className={`${classPrefix}-button-item-description`}>
+                    <div className={`${prefixCls}-button-item-description`}>
                       {action.description}
                     </div>
                   )}
@@ -120,19 +121,19 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
 
           {props.cancelText && (
             <div
-              className={`${classPrefix}-cancel`}
+              className={`${prefixCls}-cancel`}
               role='option'
               aria-label={props.cancelText}
             >
-              <div className={`${classPrefix}-button-item-wrapper`}>
+              <div className={`${prefixCls}-button-item-wrapper`}>
                 <a
                   className={classNames(
                     'adm-plain-anchor',
-                    `${classPrefix}-button-item`
+                    `${prefixCls}-button-item`
                   )}
                   onClick={props.onClose}
                 >
-                  <div className={`${classPrefix}-button-item-name`}>
+                  <div className={`${prefixCls}-button-item-name`}>
                     {props.cancelText}
                   </div>
                 </a>

src/components/action-sheet/tests/action-sheet.test.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
-import { render, testA11y, fireEvent, waitFor, cleanup, sleep } from 'testing'
-import ActionSheet, { Action } from '../'
-import Button from '../../button'
+import { cleanup, fireEvent, render, testA11y, waitFor } from 'testing'
 import type { ActionSheetProps, ActionSheetShowHandler } from '..'
+import ActionSheet, { Action } from '../'
 import {
   reduceMotion,
   restoreMotion,
 } from '../../../utils/reduce-and-restore-motion'
+import Button from '../../button'
+import ConfigProvider from '../../config-provider'
 
 const classPrefix = `adm-action-sheet`
 
@@ -249,4 +250,14 @@ describe('ActionSheet', () => {
       'fontSize: 18'
     )
   })
+
+  test('should apply custom prefixCls(component) ', () => {
+    const { container } = render(
+      <ConfigProvider prefixCls='custom-prefix'>
+        <ActionSheet visible prefixCls='another-prefix' actions={[]} />
+      </ConfigProvider>
+    )
+    expect(container.querySelector('.custom-prefix-action-sheet')).toBeFalsy()
+    expect(container.querySelector('.another-prefix')).toBeTruthy()
+  })
 })

src/components/collapse/collapse.tsx

@@ -14,6 +14,8 @@ import { mergeProp, mergeProps } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
 import List from '../list'
 
+const classPrefix = `adm-collapse`
+
 export type CollapsePanelProps = {
   key: string
   title: ReactNode
@@ -38,9 +40,8 @@ const CollapsePanelContent: FC<{
   forceRender: boolean
   destroyOnClose: boolean
   children?: ReactNode
-  prefixCls?: string
 }> = props => {
-  const { visible, prefixCls } = props
+  const { visible } = props
   const innerRef = useRef<HTMLDivElement>(null)
   const shouldRender = useShouldRender(
     visible,
@@ -102,8 +103,8 @@ const CollapsePanelContent: FC<{
 
   return (
     <animated.div
-      className={classNames(`${prefixCls}-panel-content`, {
-        [`${prefixCls}-panel-content-active`]: visible,
+      className={classNames(`${classPrefix}-panel-content`, {
+        [`${classPrefix}-panel-content-active`]: visible,
       })}
       style={{
         height: height.to(v => {
@@ -115,7 +116,7 @@ const CollapsePanelContent: FC<{
         }),
       }}
     >
-      <div className={`${prefixCls}-panel-content-inner`} ref={innerRef}>
+      <div className={`${classPrefix}-panel-content-inner`} ref={innerRef}>
         <List.Item>{shouldRender && props.children}</List.Item>
       </div>
     </animated.div>
@@ -142,14 +143,11 @@ export type CollapseProps = (
     } & ValueProps<string | null>)
 ) & {
   children?: ReactNode
-  prefixCls?: string
 } & NativeProps
 
 export const Collapse: FC<CollapseProps> = props => {
-  const { collapse: componentConfig = {}, getPrefixCls } = useConfig()
+  const { collapse: componentConfig = {} } = useConfig()
   const mergedProps = mergeProps(componentConfig, props)
-  const prefixCls = getPrefixCls('collapse', props.prefixCls)
-
   const panels: ReactElement<CollapsePanelProps>[] = []
   traverseReactNode(mergedProps.children, child => {
     if (!isValidElement<CollapsePanelProps>(child)) return
@@ -204,7 +202,7 @@ export const Collapse: FC<CollapseProps> = props => {
 
   return withNativeProps(
     mergedProps,
-    <div className={prefixCls}>
+    <div className={classPrefix}>
       <List>
         {panels.map(panel => {
           const key = panel.key as string
@@ -240,8 +238,8 @@ export const Collapse: FC<CollapseProps> = props => {
               arrow(active)
             ) : (
               <div
-                className={classNames(`${prefixCls}-arrow`, {
-                  [`${prefixCls}-arrow-active`]: active,
+                className={classNames(`${classPrefix}-arrow`, {
+                  [`${classPrefix}-arrow-active`]: active,
                 })}
               >
                 {arrow}
@@ -253,7 +251,7 @@ export const Collapse: FC<CollapseProps> = props => {
               {withNativeProps(
                 panel.props,
                 <List.Item
-                  className={`${prefixCls}-panel-header`}
+                  className={`${classPrefix}-panel-header`}
                   onClick={handleClick}
                   disabled={panel.props.disabled}
                   arrowIcon={arrowIcon}
@@ -265,7 +263,6 @@ export const Collapse: FC<CollapseProps> = props => {
                 visible={active}
                 forceRender={!!panel.props.forceRender}
                 destroyOnClose={!!panel.props.destroyOnClose}
-                prefixCls={prefixCls}
               >
                 {panel.props.children}
               </CollapsePanelContent>