feat(card): unified provision of custom prefixCls

Author: 刘欢

src/components/card/card.tsx

@@ -2,8 +2,7 @@ import classNames from 'classnames'
 import type { CSSProperties, FC, ReactNode } from 'react'
 import React from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
-
-const classPrefix = `adm-card`
+import { useConfig } from '../config-provider'
 
 export type CardProps = {
   title?: ReactNode
@@ -17,25 +16,28 @@ export type CardProps = {
   onBodyClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   onHeaderClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   children?: ReactNode
+  prefixCls?: string
 } & NativeProps
 
 export const Card: FC<CardProps> = props => {
+  const { getPrefixCls } = useConfig()
+  const prefixCls = getPrefixCls('card', props.prefixCls)
   const renderHeader = () => {
     if (!(props.title || props.extra)) {
       return null
     }
     return (
       <div
-        className={classNames(`${classPrefix}-header`, props.headerClassName)}
+        className={classNames(`${prefixCls}-header`, props.headerClassName)}
         style={props.headerStyle}
         onClick={props.onHeaderClick}
       >
         {props.icon && (
-          <div className={`${classPrefix}-header-icon`}>{props.icon}</div>
+          <div className={`${prefixCls}-header-icon`}>{props.icon}</div>
         )}
-        <div className={`${classPrefix}-header-title`}>{props.title}</div>
+        <div className={`${prefixCls}-header-title`}>{props.title}</div>
         {props.extra && (
-          <div className={`${classPrefix}-header-extra`}>{props.extra}</div>
+          <div className={`${prefixCls}-header-extra`}>{props.extra}</div>
         )}
       </div>
     )
@@ -47,7 +49,7 @@ export const Card: FC<CardProps> = props => {
     }
     return (
       <div
-        className={classNames(`${classPrefix}-body`, props.bodyClassName)}
+        className={classNames(`${prefixCls}-body`, props.bodyClassName)}
         style={props.bodyStyle}
         onClick={props.onBodyClick}
       >
@@ -58,7 +60,7 @@ export const Card: FC<CardProps> = props => {
 
   return withNativeProps(
     props,
-    <div className={classPrefix} onClick={props.onClick}>
+    <div className={prefixCls} onClick={props.onClick}>
       {renderHeader()}
       {renderBody()}
     </div>

src/components/card/tests/__snapshots__/card.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should apply prefixCls from ConfigProvider 1`] = `
+<div>
+  <div
+    class="config-prefix-card"
+    data-testid="test-card-id"
+  >
+    <div
+      class="config-prefix-card-header"
+    >
+      <div
+        class="config-prefix-card-header-title"
+      >
+        title
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should prioritize component prefixCls over ConfigProvider 1`] = `
+<div>
+  <div
+    class="component-prefix"
+    data-testid="test-card-id"
+  >
+    <div
+      class="component-prefix-header"
+    >
+      <div
+        class="component-prefix-header-title"
+      >
+        title
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/card/tests/card.test.tsx

@@ -2,6 +2,7 @@ import { RightOutline } from 'antd-mobile-icons'
 import * as React from 'react'
 import { fireEvent, render, testA11y, waitFor } from 'testing'
 import Card from '../'
+import ConfigProvider from '../../config-provider'
 
 const classPrefix = `adm-card`
 
@@ -47,3 +48,27 @@ test('renders without children', async () => {
   )
   expect(getByTestId('test-card-id')).not.toHaveClass(`${classPrefix}-body`)
 })
+test('should apply prefixCls from ConfigProvider', () => {
+  const { container } = render(
+    <ConfigProvider prefixCls='config-prefix'>
+      <Card title='title' data-testid='test-card-id' />
+    </ConfigProvider>
+  )
+  expect(container.querySelector('.config-prefix-card')).toBeTruthy()
+  expect(container).toMatchSnapshot()
+})
+
+test('should prioritize component prefixCls over ConfigProvider', () => {
+  const { container } = render(
+    <ConfigProvider prefixCls='config-prefix'>
+      <Card
+        title='title'
+        data-testid='test-card-id'
+        prefixCls='component-prefix'
+      />
+    </ConfigProvider>
+  )
+  expect(container.querySelector('.component-prefix')).toBeTruthy()
+  expect(container.querySelector('.config-prefix-card')).toBeFalsy()
+  expect(container).toMatchSnapshot()
+})