feat(Cascader): unified provision of custom prefixCls

src/components/cascader-view/cascader-view.tsx

@@ -1,20 +1,18 @@
-import React, { useState, useEffect, useMemo } from 'react'
-import type { FC, ReactNode } from 'react'
+import { useUpdateEffect } from 'ahooks'
 import classNames from 'classnames'
-import Tabs from '../tabs'
-import CheckList, { CheckListValue } from '../check-list'
+import type { FC, ReactNode } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
+import type { BaseOptionType, FieldNamesType } from '../../hooks'
+import { useFieldNames } from '../../hooks'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { mergeProps } from '../../utils/with-default-props'
 import { usePropsValue } from '../../utils/use-props-value'
-import { useCascaderValueExtend } from './use-cascader-value-extend'
+import { mergeProps } from '../../utils/with-default-props'
+import CheckList, { CheckListValue } from '../check-list'
 import { useConfig } from '../config-provider'
-import { optionSkeleton } from './option-skeleton'
 import Skeleton from '../skeleton'
-import { useUpdateEffect } from 'ahooks'
-import { useFieldNames } from '../../hooks'
-import type { FieldNamesType, BaseOptionType } from '../../hooks'
-
-const classPrefix = `adm-cascader-view`
+import Tabs from '../tabs'
+import { optionSkeleton } from './option-skeleton'
+import { useCascaderValueExtend } from './use-cascader-value-extend'
 
 export type CascaderValue = CheckListValue
 
@@ -40,6 +38,7 @@ export type CascaderViewProps = {
   activeIcon?: ReactNode
   loading?: boolean
   fieldNames?: FieldNamesType
+  prefixCls?: string
 } & NativeProps<'--height'>
 
 const defaultProps = {
@@ -49,7 +48,8 @@ const defaultProps = {
 export const CascaderView: FC<CascaderViewProps> = p => {
   const props = mergeProps(defaultProps, p)
 
-  const { locale } = useConfig()
+  const { locale, getPrefixCls } = useConfig()
+  const prefixCls = getPrefixCls('cascader-view', props.prefixCls)
   const [labelName, valueName, childrenName, disabledName] = useFieldNames(
     props.fieldNames
   )
@@ -123,49 +123,49 @@ export const CascaderView: FC<CascaderViewProps> = p => {
 
   return withNativeProps(
     props,
-    <div className={classPrefix}>
+    <div className={prefixCls}>
       <Tabs
         activeKey={tabActiveIndex.toString()}
         onChange={key => {
           const activeIndex = parseInt(key)
           setTabActiveIndex(activeIndex)
         }}
         stretch={false}
-        className={`${classPrefix}-tabs`}
+        className={`${prefixCls}-tabs`}
       >
         {levels.map((level, index) => {
           const selected = level.selected
           return (
             <Tabs.Tab
               key={index.toString()}
               title={
-                <div className={`${classPrefix}-header-title`}>
+                <div className={`${prefixCls}-header-title`}>
                   {selected
                     ? selected[labelName]
                     : typeof placeholder === 'function'
-                    ? placeholder(index)
-                    : placeholder}
+                      ? placeholder(index)
+                      : placeholder}
                 </div>
               }
               forceRender
             >
-              <div className={`${classPrefix}-content`}>
+              <div className={`${prefixCls}-content`}>
                 {whetherLoading(level.options) ? (
-                  <div className={`${classPrefix}-skeleton`}>
+                  <div className={`${prefixCls}-skeleton`}>
                     <Skeleton
-                      className={`${classPrefix}-skeleton-line-1`}
+                      className={`${prefixCls}-skeleton-line-1`}
                       animated
                     />
                     <Skeleton
-                      className={`${classPrefix}-skeleton-line-2`}
+                      className={`${prefixCls}-skeleton-line-2`}
                       animated
                     />
                     <Skeleton
-                      className={`${classPrefix}-skeleton-line-3`}
+                      className={`${prefixCls}-skeleton-line-3`}
                       animated
                     />
                     <Skeleton
-                      className={`${classPrefix}-skeleton-line-4`}
+                      className={`${prefixCls}-skeleton-line-4`}
                       animated
                     />
                   </div>
@@ -184,8 +184,8 @@ export const CascaderView: FC<CascaderViewProps> = p => {
                           value={option[valueName]}
                           key={option[valueName]}
                           disabled={option[disabledName]}
-                          className={classNames(`${classPrefix}-item`, {
-                            [`${classPrefix}-item-active`]: active,
+                          className={classNames(`${prefixCls}-item`, {
+                            [`${prefixCls}-item-active`]: active,
                           })}
                         >
                           {option[labelName]}

src/components/cascader-view/tests/cascader-view.test.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { fireEvent, render, testA11y } from 'testing'
 import CascaderView from '../'
 import { options, sameValueOptions } from '../../cascader/demos/data'
+import ConfigProvider from '../../config-provider'
 
 const classPrefix = `adm-cascader-view`
 
@@ -137,4 +138,36 @@ describe('CascaderView', () => {
 
     expect(baseElement.querySelector('.adm-skeleton')).toBeInTheDocument()
   })
+
+  test('should apply prefixCls from ConfigProvider', () => {
+    render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <CascaderView
+          options={options}
+          placeholder={i => {
+            if (i === 2) return '区/县'
+            return '请选择'
+          }}
+        />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.config-prefix-cascader-view')).toBeTruthy()
+  })
+
+  test('should prioritize component prefixCls over ConfigProvider', () => {
+    render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <CascaderView
+          options={options}
+          placeholder={i => {
+            if (i === 2) return '区/县'
+            return '请选择'
+          }}
+          prefixCls='component-prefix'
+        />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.component-prefix')).toBeTruthy()
+    expect(document.querySelector('.config-prefix-cascader-view')).toBeFalsy()
+  })
 })

src/components/cascader/cascader.tsx

@@ -1,26 +1,23 @@
 import React, {
-  useState,
-  useEffect,
   ReactNode,
   forwardRef,
+  useEffect,
   useImperativeHandle,
+  useState,
 } from 'react'
-import Popup, { PopupProps } from '../popup'
-import {
+import type { FieldNamesType } from '../../hooks'
+import { useFieldNames } from '../../hooks'
+import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { usePropsValue } from '../../utils/use-props-value'
+import { mergeProps } from '../../utils/with-default-props'
+import CascaderView, {
+  CascaderOption,
   CascaderValue,
   CascaderValueExtend,
-  CascaderOption,
 } from '../cascader-view'
-import { mergeProps } from '../../utils/with-default-props'
-import { NativeProps, withNativeProps } from '../../utils/native-props'
-import { usePropsValue } from '../../utils/use-props-value'
-import CascaderView from '../cascader-view'
-import { useConfig } from '../config-provider'
 import { useCascaderValueExtend } from '../cascader-view/use-cascader-value-extend'
-import { useFieldNames } from '../../hooks'
-import type { FieldNamesType } from '../../hooks'
-
-const classPrefix = `adm-cascader`
+import { useConfig } from '../config-provider'
+import Popup, { PopupProps } from '../popup'
 
 export type CascaderActions = {
   open: () => void
@@ -50,6 +47,7 @@ export type CascaderProps = {
   onTabsChange?: (index: number) => void
   activeIcon?: ReactNode
   fieldNames?: FieldNamesType
+  prefixCls?: string
 } & Pick<
   PopupProps,
   | 'getContainer'
@@ -69,7 +67,7 @@ const defaultProps = {
 }
 
 export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
-  const { locale } = useConfig()
+  const { locale, getPrefixCls } = useConfig()
   const props = mergeProps(
     defaultProps,
     {
@@ -79,6 +77,7 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
     },
     p
   )
+  const prefixCls = getPrefixCls('cascader', props.prefixCls)
 
   const [visible, setVisible] = usePropsValue({
     value: props.visible,
@@ -127,20 +126,20 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
 
   const cascaderElement = withNativeProps(
     props,
-    <div className={classPrefix}>
-      <div className={`${classPrefix}-header`}>
+    <div className={prefixCls}>
+      <div className={`${prefixCls}-header`}>
         <a
-          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
-          className={`${classPrefix}-header-button`}
+          className={`${prefixCls}-header-button`}
           onClick={() => {
             setValue(innerValue, true)
             setVisible(false)
@@ -149,9 +148,10 @@ export const Cascader = forwardRef<CascaderRef, CascaderProps>((p, ref) => {
           {props.confirmText}
         </a>
       </div>
-      <div className={`${classPrefix}-body`}>
+      <div className={`${prefixCls}-body`}>
         <CascaderView
           {...props}
+          prefixCls={`${prefixCls}-view`}
           value={innerValue}
           onChange={(val, ext) => {
             setInnerValue(val)

src/components/cascader/tests/cascader.test.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { fireEvent, render, testA11y, waitFor } from 'testing'
 import Cascader from '../'
+import ConfigProvider from '../../config-provider'
 import { options } from '../demos/data'
 
 describe('Cascader', () => {
@@ -78,4 +79,23 @@ describe('Cascader', () => {
       expect(fn.mock.calls[0][0]).toEqual(['浙江', '杭州', '西湖区'])
     })
   })
+
+  test('should apply prefixCls from ConfigProvider', () => {
+    render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Cascader options={[]} visible />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.config-prefix-cascader')).toBeTruthy()
+  })
+
+  test('should prioritize component prefixCls over ConfigProvider', () => {
+    render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <Cascader options={[]} visible prefixCls='component-prefix' />
+      </ConfigProvider>
+    )
+    expect(document.querySelector('.component-prefix')).toBeTruthy()
+    expect(document.querySelector('.config-prefix-cascader')).toBeFalsy()
+  })
 })