feat(List CheckList): unified provision of custom prefixCls

src/components/check-list/check-list-item.tsx

@@ -1,13 +1,12 @@
-import React, { useContext } from 'react'
+import classNames from 'classnames'
 import type { FC } from 'react'
-import List, { ListItemProps } from '../list'
+import React, { useContext } from 'react'
+import { CheckListValue } from '.'
+import { devWarning } from '../../utils/dev-log'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { useConfig } from '../config-provider'
+import List, { ListItemProps } from '../list'
 import { CheckListContext } from './context'
-import { devWarning } from '../../utils/dev-log'
-import classNames from 'classnames'
-import { CheckListValue } from '.'
-
-const classPrefix = `adm-check-list-item`
 
 export type CheckListItemProps = Pick<
   ListItemProps,
@@ -18,13 +17,16 @@ export type CheckListItemProps = Pick<
   | 'disabled'
   | 'onClick'
   | 'style'
+  | 'prefixCls'
 > & {
   value: CheckListValue
   readOnly?: boolean
 } & NativeProps
 
 export const CheckListItem: FC<CheckListItemProps> = props => {
   const context = useContext(CheckListContext)
+  const { getPrefixCls } = useConfig()
+  const prefixCls = getPrefixCls('check-list-item', props.prefixCls)
   if (context === null) {
     devWarning(
       'CheckList.Item',
@@ -36,16 +38,16 @@ export const CheckListItem: FC<CheckListItemProps> = props => {
   const readOnly = props.readOnly || context.readOnly
   const defaultExtra = active ? context.activeIcon : null
   const renderExtra = context.extra ? context.extra(active) : defaultExtra
-  const extra = <div className={`${classPrefix}-extra`}>{renderExtra}</div>
+  const extra = <div className={`${prefixCls}-extra`}>{renderExtra}</div>
 
   return withNativeProps(
     props,
     <List.Item
       title={props.title}
       className={classNames(
-        classPrefix,
-        readOnly && `${classPrefix}-readonly`,
-        active && `${classPrefix}-active`
+        prefixCls,
+        readOnly && `${prefixCls}-readonly`,
+        active && `${prefixCls}-active`
       )}
       description={props.description}
       prefix={props.prefix}

src/components/check-list/check-list.tsx

@@ -8,11 +8,9 @@ import { useConfig } from '../config-provider'
 import List, { ListProps } from '../list'
 import { CheckListContext } from './context'
 
-const classPrefix = 'adm-check-list'
-
 export type CheckListValue = string | number
 
-export type CheckListProps = Pick<ListProps, 'mode' | 'style'> & {
+export type CheckListProps = Pick<ListProps, 'mode' | 'style' | 'prefixCls'> & {
   defaultValue?: CheckListValue[]
   value?: CheckListValue[]
   onChange?: (val: CheckListValue[]) => void
@@ -31,9 +29,9 @@ const defaultProps = {
 }
 
 export const CheckList: FC<CheckListProps> = props => {
-  const { checkList: componentConfig = {} } = useConfig()
+  const { checkList: componentConfig = {}, getPrefixCls } = useConfig()
   const mergedProps = mergeProps(defaultProps, componentConfig, props)
-
+  const prefixCls = getPrefixCls('check-list', mergedProps.prefixCls)
   const [value, setValue] = usePropsValue(mergedProps)
 
   function check(val: CheckListValue) {
@@ -64,7 +62,7 @@ export const CheckList: FC<CheckListProps> = props => {
     >
       {withNativeProps(
         mergedProps,
-        <List mode={mergedProps.mode} className={classPrefix}>
+        <List mode={mergedProps.mode} className={prefixCls}>
           {mergedProps.children}
         </List>
       )}

src/components/check-list/tests/check-list.test.tsx

@@ -76,7 +76,7 @@ describe('CheckList', () => {
     expect(getByText('NO')).toBeVisible()
   })
 
-  describe('closeIcon', () => {
+  describe('closeIcon and prefixCls', () => {
     it('default', () => {
       const { baseElement } = render(
         <CheckList defaultValue={['B']}>
@@ -99,27 +99,41 @@ describe('CheckList', () => {
 
     it('context', () => {
       render(
-        <ConfigProvider checkList={{ activeIcon: 'little' }}>
+        <ConfigProvider
+          checkList={{ activeIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
           <CheckList defaultValue={['B']}>
             <CheckList.Item value='A'>A</CheckList.Item>
             <CheckList.Item value='B'>B</CheckList.Item>
           </CheckList>
         </ConfigProvider>
       )
-
+      expect(document.querySelector('.config-prefix-check-list')).toBeTruthy()
       expect(screen.getByText('little')).toBeVisible()
     })
 
     it('props override context', () => {
       render(
-        <ConfigProvider checkList={{ activeIcon: 'little' }}>
-          <CheckList defaultValue={['B']} activeIcon='bamboo'>
-            <CheckList.Item value='A'>A</CheckList.Item>
+        <ConfigProvider
+          checkList={{ activeIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
+          <CheckList
+            defaultValue={['B']}
+            activeIcon='bamboo'
+            prefixCls='list-prefix'
+          >
+            <CheckList.Item value='A' prefixCls='item-prefix'>
+              A
+            </CheckList.Item>
             <CheckList.Item value='B'>B</CheckList.Item>
           </CheckList>
         </ConfigProvider>
       )
-
+      expect(document.querySelector('.item-prefix')).toBeTruthy()
+      expect(document.querySelector('.list-prefix')).toBeTruthy()
+      expect(document.querySelector('.config-prefix-check-list')).toBeFalsy()
       expect(screen.getByText('bamboo')).toBeVisible()
     })
   })

src/components/list/list-item.tsx

@@ -7,8 +7,6 @@ import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProp } from '../../utils/with-default-props'
 import { useConfig } from '../config-provider'
 
-const classPrefix = `adm-list-item`
-
 export type ListItemProps = {
   title?: ReactNode
   children?: ReactNode
@@ -23,13 +21,15 @@ export type ListItemProps = {
    * @deprecated use `arrowIcon` instead
    */
   arrow?: boolean | ReactNode
+  prefixCls?: string
 } & NativeProps<
   '--prefix-width' | '--align-items' | '--active-background-color'
 >
 
 export const ListItem: FC<ListItemProps> = props => {
   const { arrow, arrowIcon } = props
-  const { list: componentConfig = {} } = useConfig()
+  const { list: componentConfig = {}, getPrefixCls } = useConfig()
+  const prefixCls = getPrefixCls('list-item', props.prefixCls)
   const clickable = props.clickable ?? !!props.onClick
 
   const showArrow = arrow ?? arrowIcon ?? clickable
@@ -40,26 +40,24 @@ export const ListItem: FC<ListItemProps> = props => {
   )
 
   const content = (
-    <div className={`${classPrefix}-content`}>
+    <div className={`${prefixCls}-content`}>
       {isNodeWithContent(props.prefix) && (
-        <div className={`${classPrefix}-content-prefix`}>{props.prefix}</div>
+        <div className={`${prefixCls}-content-prefix`}>{props.prefix}</div>
       )}
-      <div className={`${classPrefix}-content-main`}>
+      <div className={`${prefixCls}-content-main`}>
         {isNodeWithContent(props.title) && (
-          <div className={`${classPrefix}-title`}>{props.title}</div>
+          <div className={`${prefixCls}-title`}>{props.title}</div>
         )}
         {props.children}
         {isNodeWithContent(props.description) && (
-          <div className={`${classPrefix}-description`}>
-            {props.description}
-          </div>
+          <div className={`${prefixCls}-description`}>{props.description}</div>
         )}
       </div>
       {isNodeWithContent(props.extra) && (
-        <div className={`${classPrefix}-content-extra`}>{props.extra}</div>
+        <div className={`${prefixCls}-content-extra`}>{props.extra}</div>
       )}
       {showArrow && (
-        <div className={`${classPrefix}-content-arrow`}>
+        <div className={`${prefixCls}-content-arrow`}>
           {mergedArrowIcon || <RightOutline />}
         </div>
       )}
@@ -72,9 +70,9 @@ export const ListItem: FC<ListItemProps> = props => {
       clickable ? 'a' : 'div',
       {
         className: classNames(
-          `${classPrefix}`,
+          `${prefixCls}`,
           clickable ? ['adm-plain-anchor'] : [],
-          props.disabled && `${classPrefix}-disabled`
+          props.disabled && `${prefixCls}-disabled`
         ),
         onClick: props.disabled ? undefined : props.onClick,
       },

src/components/list/list.tsx

@@ -1,15 +1,15 @@
-import React, { forwardRef, useImperativeHandle, useRef } from 'react'
-import type { ReactNode } from 'react'
 import classNames from 'classnames'
+import type { ReactNode } from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { mergeProps } from '../../utils/with-default-props'
-
-const classPrefix = `adm-list`
+import { useConfig } from '../config-provider'
 
 export type ListProps = {
   header?: ReactNode
   mode?: 'default' | 'card' // 默认是整宽的列表，card 模式下展示为带 margin 和圆角的卡片
   children?: ReactNode
+  prefixCls?: string
 } & NativeProps<
   | '--active-background-color'
   | '--align-items'
@@ -35,6 +35,8 @@ export type ListRef = {
 
 export const List = forwardRef<ListRef, ListProps>((p, ref) => {
   const props = mergeProps(defaultProps, p)
+  const { getPrefixCls } = useConfig()
+  const prefixCls = getPrefixCls('list', props.prefixCls)
   const nativeElementRef = useRef<HTMLDivElement>(null)
 
   useImperativeHandle(ref, () => ({
@@ -46,14 +48,14 @@ export const List = forwardRef<ListRef, ListProps>((p, ref) => {
   return withNativeProps(
     props,
     <div
-      className={classNames(classPrefix, `${classPrefix}-${props.mode}`)}
+      className={classNames(prefixCls, `${prefixCls}-${props.mode}`)}
       ref={nativeElementRef}
     >
       {props.header && (
-        <div className={`${classPrefix}-header`}>{props.header}</div>
+        <div className={`${prefixCls}-header`}>{props.header}</div>
       )}
-      <div className={`${classPrefix}-body`}>
-        <div className={`${classPrefix}-body-inner`}>{props.children}</div>
+      <div className={`${prefixCls}-body`}>
+        <div className={`${prefixCls}-body-inner`}>{props.children}</div>
       </div>
     </div>
   )

src/components/list/tests/list.test.tsx

@@ -25,7 +25,7 @@ describe('list', () => {
     expect(baseElement).toMatchSnapshot()
   })
 
-  describe('arrow', () => {
+  describe('arrow and prefixCls', () => {
     it('show arrow', () => {
       const { baseElement } = render(
         <List>
@@ -57,25 +57,34 @@ describe('list', () => {
 
     it('context', () => {
       render(
-        <ConfigProvider list={{ arrowIcon: 'little' }}>
+        <ConfigProvider
+          list={{ arrowIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
           <List>
             <List.Item clickable />
           </List>
         </ConfigProvider>
       )
 
+      expect(document.querySelector('.config-prefix-list')).toBeTruthy()
       expect(screen.getByText('little')).toBeVisible()
     })
 
     it('props override context', () => {
       render(
-        <ConfigProvider list={{ arrowIcon: 'little' }}>
-          <List>
-            <List.Item clickable arrowIcon='bamboo' />
+        <ConfigProvider
+          list={{ arrowIcon: 'little' }}
+          prefixCls='config-prefix'
+        >
+          <List prefixCls='list-prefix'>
+            <List.Item clickable arrowIcon='bamboo' prefixCls='item-prefix' />
           </List>
         </ConfigProvider>
       )
-
+      expect(document.querySelector('.item-prefix')).toBeTruthy()
+      expect(document.querySelector('.list-prefix')).toBeTruthy()
+      expect(document.querySelector('.config-prefix-list')).toBeFalsy()
       expect(screen.getByText('bamboo')).toBeVisible()
     })
   })