feat(Collapse configProvider): unified provision of custom prefixCls (#6961)

* feat(Collapse configProvider): unified provision of custom prefixCls

* Update src/components/config-provider/index.zh.md

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

* test: collapse test

* test: collapse test

* feat: add callback to getPrefixCls

* feat: change context ts

* feat: useConfig

* test: add test

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>

Author: 3 people

src/components/collapse/collapse.tsx

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

src/components/collapse/tests/collapse.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { fireEvent, render, screen, testA11y, waitFor } from 'testing'
 import Collapse from '../'
+import ConfigProvider from '../../config-provider'
 
 const classPrefix = `adm-collapse`
 
@@ -178,4 +179,44 @@ describe('arrow', () => {
     )
     expect(screen.getByText('bar')).toBeVisible()
   })
+
+  test('default adm class', () => {
+    const { container } = render(
+      <ConfigProvider>
+        <Collapse defaultActiveKey={['1']}>
+          <Collapse.Panel key='1' title='第一项'>
+            第一项
+          </Collapse.Panel>
+        </Collapse>
+      </ConfigProvider>
+    )
+    expect(container.querySelector('.adm-collapse')).toBeTruthy()
+  })
+
+  test('should apply custom prefixCls(ConfigProvider)', () => {
+    const { container } = render(
+      <ConfigProvider prefixCls='custom-prefix'>
+        <Collapse defaultActiveKey={['1']}>
+          <Collapse.Panel key='1' title='第一项'>
+            第一项
+          </Collapse.Panel>
+        </Collapse>
+      </ConfigProvider>
+    )
+    expect(container.querySelector('.custom-prefix-collapse')).toBeTruthy()
+  })
+
+  test('should apply custom prefixCls(component) ', () => {
+    const { container } = render(
+      <ConfigProvider prefixCls='custom-prefix'>
+        <Collapse defaultActiveKey={['1']} prefixCls='another-prefix'>
+          <Collapse.Panel key='1' title='第一项'>
+            第一项
+          </Collapse.Panel>
+        </Collapse>
+      </ConfigProvider>
+    )
+    expect(container.querySelector('.custom-prefix-collapse')).toBeFalsy()
+    expect(container.querySelector('.another-prefix')).toBeTruthy()
+  })
 })

src/components/config-provider/config-provider.tsx

@@ -2,6 +2,8 @@ import React, { FC, ReactNode, useContext } from 'react'
 import { Locale } from '../../locales/base'
 import zhCN from '../../locales/zh-CN'
 
+type GetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => string
+
 type Config = {
   locale: Locale
   checkList?: {
@@ -42,7 +44,9 @@ type Config = {
   searchBar?: {
     searchIcon?: ReactNode
   }
+  prefixCls?: string
 }
+export const defaultPrefixCls = 'adm'
 
 export const defaultConfigRef: {
   current: Config
@@ -60,7 +64,9 @@ export function getDefaultConfig() {
   return defaultConfigRef.current
 }
 
-const ConfigContext = React.createContext<Config | null>(null)
+const ConfigContext = React.createContext<
+  (Config & { getPrefixCls: GetPrefixCls }) | null
+>(null)
 
 export type ConfigProviderProps = Partial<Config> & {
   children?: ReactNode
@@ -70,11 +76,24 @@ export const ConfigProvider: FC<ConfigProviderProps> = props => {
   const { children, ...config } = props
   const parentConfig = useConfig()
 
+  const getPrefixCls = React.useCallback(
+    (suffixCls?: string, customizePrefixCls?: string) => {
+      if (customizePrefixCls) {
+        return customizePrefixCls
+      }
+      const mergedPrefixCls =
+        config.prefixCls || parentConfig.prefixCls || defaultPrefixCls
+      return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
+    },
+    [config.prefixCls, parentConfig.prefixCls]
+  )
+
   return (
     <ConfigContext.Provider
       value={{
         ...parentConfig,
         ...config,
+        getPrefixCls,
       }}
     >
       {children}
@@ -83,5 +102,16 @@ export const ConfigProvider: FC<ConfigProviderProps> = props => {
 }
 
 export function useConfig() {
-  return useContext(ConfigContext) ?? getDefaultConfig()
+  const context = useContext(ConfigContext)
+  if (!context) {
+    const defaultConfig = getDefaultConfig()
+    return {
+      ...defaultConfig,
+      getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
+        if (customizePrefixCls) return customizePrefixCls
+        return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls
+      },
+    }
+  }
+  return context
 }

src/components/config-provider/index.en.md

@@ -29,6 +29,7 @@ Configure locale messages and custom icons globally.
 | navBar | NavBar config | `{ backIcon?: ReactNode }` | - |
 | noticeBar | NoticeBar config | `{ icon?: ReactNode, closeIcon?: ReactNode }` | - |
 | popup | Popup config | `{ closeIcon?: ReactNode }` | - |
+| prefixCls | Set prefix className | string | `adm` |
 | result | Result config | `{ successIcon?: ReactNode, errorIcon?: ReactNode, infoIcon?: ReactNode, waitingIcon?: ReactNode, warningIcon?: ReactNode }` | - |
 | searchBar | SearchBar config | `{ searchIcon?: ReactNode }` | - |
 

src/components/config-provider/index.zh.md

@@ -29,6 +29,7 @@
 | navBar | NavBar 配置 | `{ backIcon?: ReactNode }` | - |
 | noticeBar | NoticeBar 配置 | `{ icon?: ReactNode, closeIcon?: ReactNode }` | - |
 | popup | Popup 配置 | `{ closeIcon?: ReactNode }` | - |
+| prefixCls | 设置统一样式前缀 | string | `adm` |
 | result | Result 配置 | `{ successIcon?: ReactNode, errorIcon?: ReactNode, infoIcon?: ReactNode, waitingIcon?: ReactNode, warningIcon?: ReactNode }` | - |
 | searchBar | SearchBar 配置 | `{ searchIcon?: ReactNode }` | - |
 

src/components/config-provider/tests/config-provider.test.tsx

@@ -118,7 +118,7 @@ describe('ConfigProvider', () => {
     })
   })
 
-  test('useConfig should only has `locale`', () => {
+  test('useConfig should only has `locale` and `getPrefixCls`', () => {
     let config: ReturnType<typeof useConfig>
 
     const Demo = () => {
@@ -127,6 +127,6 @@ describe('ConfigProvider', () => {
     }
     render(<Demo />)
 
-    expect(Object.keys(config!)).toEqual(['locale'])
+    expect(Object.keys(config!)).toEqual(['locale', 'getPrefixCls'])
   })
 })