feat: configProvider prefixCls

Author: 刘欢

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,13 +44,22 @@ type Config = {
   searchBar?: {
     searchIcon?: ReactNode
   }
+  prefixCls?: string
+  getPrefixCls: GetPrefixCls
 }
+export const defaultPrefixCls = 'adm'
 
 export const defaultConfigRef: {
   current: Config
 } = {
   current: {
     locale: zhCN,
+    getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
+      if (customizePrefixCls) {
+        return customizePrefixCls
+      }
+      return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls
+    },
   },
 }
 
@@ -70,11 +81,21 @@ export const ConfigProvider: FC<ConfigProviderProps> = props => {
   const { children, ...config } = props
   const parentConfig = useConfig()
 
+  const getPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => {
+    if (customizePrefixCls) {
+      return customizePrefixCls
+    }
+    const mergedPrefixCls =
+      config.prefixCls || parentConfig.prefixCls || defaultPrefixCls
+    return suffixCls ? `${mergedPrefixCls}-${suffixCls}` : mergedPrefixCls
+  }
+
   return (
     <ConfigContext.Provider
       value={{
         ...parentConfig,
         ...config,
+        getPrefixCls,
       }}
     >
       {children}

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'])
   })
 })