feat(Picker PickerView DatePicker): unified provision of custom prefixCls

src/components/picker-view/picker-view.tsx

@@ -1,15 +1,14 @@
-import React, { memo, useCallback, useEffect, useState } from 'react'
+import { useDebounceEffect } from 'ahooks'
 import type { ReactNode } from 'react'
-import { mergeProps } from '../../utils/with-default-props'
-import { Wheel } from './wheel'
-import { useColumnsExtend } from './columns-extend'
+import React, { memo, useCallback, useEffect, useState } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { useDebounceEffect } from 'ahooks'
+import { mergeProps } from '../../utils/with-default-props'
+import { useConfig } from '../config-provider'
 import { PickerProps } from '../picker'
 import { defaultRenderLabel } from '../picker/picker-utils'
 import SpinLoading from '../spin-loading'
-
-const classPrefix = `adm-picker-view`
+import { useColumnsExtend } from './columns-extend'
+import { Wheel } from './wheel'
 
 export type PickerValue = string | number | null
 
@@ -34,23 +33,25 @@
   loading?: boolean
   loadingContent?: ReactNode
   onChange?: (value: PickerValue[], extend: PickerValueExtend) => void
-} & Pick<PickerProps, 'renderLabel'> &
+} & Pick<PickerProps, 'renderLabel' | 'prefixCls'> &
   NativeProps<'--height' | '--item-height' | '--item-font-size'>
 
 const defaultProps = {
   defaultValue: [],
   renderLabel: defaultRenderLabel,
   mouseWheel: false,
   loadingContent: (
-    <div className={`${classPrefix}-loading-content`}>
+    <div className={`adm-loading-content`}>
       <SpinLoading />
     </div>
   ),
 }
 
 export const PickerView = memo<PickerViewProps>(p => {
   const props = mergeProps(defaultProps, p)
-
+  const { getPrefixCls } = useConfig()
+  // const prefixCls = getPrefixCls('picker-view', props.prefixCls)
+  const prefixCls = `adm-picker-view`
   const [innerValue, setInnerValue] = useState<PickerValue[]>(
     props.value === undefined ? props.defaultValue : props.value
   )
@@ -100,7 +101,7 @@
 
   return withNativeProps(
     props,
-    <div className={`${classPrefix}`}>
+    <div className={`${prefixCls}`}>
       {props.loading ? (
         props.loadingContent
       ) : (
@@ -116,10 +117,10 @@
               mouseWheel={props.mouseWheel}
             />
           ))}
-          <div className={`${classPrefix}-mask`}>
-            <div className={`${classPrefix}-mask-top`} />
-            <div className={`${classPrefix}-mask-middle`} />
-            <div className={`${classPrefix}-mask-bottom`} />
+          <div className={`${prefixCls}-mask`}>
+            <div className={`${prefixCls}-mask-top`} />
+            <div className={`${prefixCls}-mask-middle`} />
+            <div className={`${prefixCls}-mask-bottom`} />
           </div>
         </>
       )}

src/components/picker/picker.tsx

@@ -1,30 +1,30 @@
+import { useMemoizedFn } from 'ahooks'
+import classNames from 'classnames'
+import type { CSSProperties, ReactNode } from 'react'
 import React, {
-  useState,
-  useEffect,
   forwardRef,
-  useImperativeHandle,
   memo,
+  useEffect,
+  useImperativeHandle,
+  useState,
 } from 'react'
-import type { ReactNode, CSSProperties } from 'react'
-import classNames from 'classnames'
-import Popup, { PopupProps } from '../popup'
-import { mergeProps } from '../../utils/with-default-props'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { usePropsValue } from '../../utils/use-props-value'
-import {
-  PickerColumn,
-  PickerColumnItem,
-  PickerValue,
-  PickerValueExtend,
-} from './index'
+import { mergeProps } from '../../utils/with-default-props'
+import { useConfig } from '../config-provider'
 import PickerView from '../picker-view'
 import {
   generateColumnsExtend,
   useColumnsExtend,
 } from '../picker-view/columns-extend'
-import { useConfig } from '../config-provider'
-import { useMemoizedFn } from 'ahooks'
+import Popup, { PopupProps } from '../popup'
 import SafeArea from '../safe-area'
+import {
+  PickerColumn,
+  PickerColumnItem,
+  PickerValue,
+  PickerValueExtend,
+} from './index'
 import { defaultRenderLabel } from './picker-utils'
 
 export type PickerActions = {
@@ -34,8 +34,6 @@ export type PickerActions = {
 }
 export type PickerRef = PickerActions
 
-const classPrefix = `adm-picker`
-
 export type PickerProps = {
   columns: PickerColumn[] | ((value: PickerValue[]) => PickerColumn[])
   value?: PickerValue[]
@@ -59,6 +57,7 @@ export type PickerProps = {
   mouseWheel?: boolean
   popupClassName?: string
   popupStyle?: CSSProperties
+  prefixCls?: string
 } & Pick<
   PopupProps,
   | 'getContainer'
@@ -86,7 +85,7 @@ const defaultProps = {
 
 export const Picker = memo(
   forwardRef<PickerRef, PickerProps>((p, ref) => {
-    const { locale } = useConfig()
+    const { locale, getPrefixCls } = useConfig()
     const props = mergeProps(
       defaultProps,
       {
@@ -95,7 +94,7 @@ export const Picker = memo(
       },
       p
     )
-
+    const prefixCls = getPrefixCls('picker', props.prefixCls)
     const [visible, setVisible] = usePropsValue({
       value: props.visible,
       defaultValue: false,
@@ -151,24 +150,24 @@ export const Picker = memo(
 
     const pickerElement = withNativeProps(
       props,
-      <div className={classPrefix}>
-        <div className={`${classPrefix}-header`}>
+      <div className={prefixCls}>
+        <div className={`${prefixCls}-header`}>
           <a
             role='button'
-            className={`${classPrefix}-header-button`}
+            className={`${prefixCls}-header-button`}
             onClick={() => {
               props.onCancel?.()
               setVisible(false)
             }}
           >
             {props.cancelText}
           </a>
-          <div className={`${classPrefix}-header-title`}>{props.title}</div>
+          <div className={`${prefixCls}-header-title`}>{props.title}</div>
           <a
             role='button'
             className={classNames(
-              `${classPrefix}-header-button`,
-              props.loading && `${classPrefix}-header-button-disabled`
+              `${prefixCls}-header-button`,
+              props.loading && `${prefixCls}-header-button-disabled`
             )}
             onClick={() => {
               if (props.loading) return
@@ -180,7 +179,7 @@ export const Picker = memo(
             {props.confirmText}
           </a>
         </div>
-        <div className={`${classPrefix}-body`}>
+        <div className={`${prefixCls}-body`}>
           <PickerView
             loading={props.loading}
             loadingContent={props.loadingContent}
@@ -189,6 +188,7 @@ export const Picker = memo(
             value={innerValue}
             mouseWheel={props.mouseWheel}
             onChange={onChange}
+            prefixCls={`${prefixCls}-view`}
           />
         </div>
       </div>
@@ -197,7 +197,7 @@ export const Picker = memo(
     const popupElement = (
       <Popup
         style={props.popupStyle}
-        className={classNames(`${classPrefix}-popup`, props.popupClassName)}
+        className={classNames(`${prefixCls}-popup`, props.popupClassName)}
         visible={visible}
         position='bottom'
         onMaskClick={() => {

src/components/picker/tests/picker.test.tsx

@@ -1,16 +1,17 @@
 import React, { createRef, useState } from 'react'
 import {
-  render,
+  act,
   fireEvent,
-  waitFor,
+  render,
   screen,
   sleep,
-  act,
+  waitFor,
   waitForElementToBeRemoved,
 } from 'testing'
-import { basicColumns } from '../demos/columns-data'
-import Picker, { PickerRef, PickerColumnItem, PickerColumn } from '..'
+import Picker, { PickerRef } from '..'
 import Button from '../../button'
+import ConfigProvider from '../../config-provider'
+import { basicColumns } from '../demos/columns-data'
 
 describe('Picker', () => {
   test('renderLabel works', async () => {
@@ -213,4 +214,25 @@ describe('Picker', () => {
     fireEvent.click(confirm)
     expect(fn.mock.calls[0][0]).toEqual(['Mon', 'am'])
   })
+
+  test('should apply custom prefixCls(ConfigProvider)', () => {
+    render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Picker columns={basicColumns} visible />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.config-prefix-picker')).toBeTruthy()
+    expect(document.querySelector('.config-prefix-picker-view')).toBeTruthy()
+  })
+
+  test('should apply custom prefixCls(component)', () => {
+    render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Picker prefixCls='component-prefix' columns={basicColumns} visible />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.component-prefix')).toBeTruthy()
+    expect(document.querySelector('.component-prefix-view')).toBeTruthy()
+    expect(document.querySelector('.config-prefix-picker')).toBeFalsy()
+  })
 })