feat(CapsuleTabs): unified provision of custom prefixCls

src/components/capsule-tabs/capsule-tabs.tsx

@@ -1,16 +1,15 @@
-import React, { isValidElement, useRef } from 'react'
-import type { FC, ReactNode, ReactElement } from 'react'
-import classNames from 'classnames'
 import { animated } from '@react-spring/web'
+import classNames from 'classnames'
+import type { FC, ReactElement, ReactNode } from 'react'
+import React, { isValidElement, useRef } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
+import { ShouldRender } from '../../utils/should-render'
+import { traverseReactNode } from '../../utils/traverse-react-node'
 import { usePropsValue } from '../../utils/use-props-value'
 import { useResizeEffect } from '../../utils/use-resize-effect'
 import { useTabListScroll } from '../../utils/use-tab-list-scroll'
+import { useConfig } from '../config-provider'
 import ScrollMask from '../scroll-mask'
-import { ShouldRender } from '../../utils/should-render'
-import { traverseReactNode } from '../../utils/traverse-react-node'
-
-const classPrefix = `adm-capsule-tabs`
 
 export type CapsuleTabProps = {
   title: ReactNode
@@ -27,14 +26,16 @@ export type CapsuleTabsProps = {
   defaultActiveKey?: string | null
   onChange?: (key: string) => void
   children?: ReactNode
+  prefixCls?: string
 } & NativeProps
 
 export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
   const tabListContainerRef = useRef<HTMLDivElement>(null)
   const rootRef = useRef<HTMLDivElement>(null)
   const keyToIndexRecord: Record<string, number> = {}
   let firstActiveKey: string | null = null
-
+  const { getPrefixCls } = useConfig()
+  const prefixCls = getPrefixCls('capsule-tabs', props.prefixCls)
   const panes: ReactElement<CapsuleTabProps>[] = []
 
   traverseReactNode(props.children, (child, index) => {
@@ -68,18 +69,18 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
 
   return withNativeProps(
     props,
-    <div className={classPrefix} ref={rootRef}>
-      <div className={`${classPrefix}-header`}>
+    <div className={prefixCls} ref={rootRef}>
+      <div className={`${prefixCls}-header`}>
         <ScrollMask scrollTrackRef={tabListContainerRef} />
         <animated.div
-          className={`${classPrefix}-tab-list`}
+          className={`${prefixCls}-tab-list`}
           ref={tabListContainerRef}
           scrollLeft={scrollLeft}
         >
           {panes.map(pane =>
             withNativeProps(
               pane.props,
-              <div key={pane.key} className={`${classPrefix}-tab-wrapper`}>
+              <div key={pane.key} className={`${prefixCls}-tab-wrapper`}>
                 <div
                   onClick={() => {
                     const { key } = pane
@@ -89,9 +90,9 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
                     }
                     setActiveKey(key.toString())
                   }}
-                  className={classNames(`${classPrefix}-tab`, {
-                    [`${classPrefix}-tab-active`]: pane.key === activeKey,
-                    [`${classPrefix}-tab-disabled`]: pane.props.disabled,
+                  className={classNames(`${prefixCls}-tab`, {
+                    [`${prefixCls}-tab-active`]: pane.key === activeKey,
+                    [`${prefixCls}-tab-disabled`]: pane.props.disabled,
                   })}
                 >
                   {pane.props.title}
@@ -114,7 +115,7 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
             destroyOnClose={pane.props.destroyOnClose}
           >
             <div
-              className={`${classPrefix}-content`}
+              className={`${prefixCls}-content`}
               style={{ display: active ? 'block' : 'none' }}
             >
               {pane.props.children}

src/components/capsule-tabs/tests/__snapshots__/capsule-tabs.test.tsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CapsuleTabs should apply prefixCls from ConfigProvider 1`] = `
+<div>
+  <div
+    class="config-prefix-capsule-tabs"
+  >
+    <div
+      class="config-prefix-capsule-tabs-header"
+    >
+      <div
+        class="adm-scroll-mask adm-scroll-mask-left"
+        style="opacity: 0;"
+      />
+      <div
+        class="adm-scroll-mask adm-scroll-mask-right"
+        style="opacity: 0;"
+      />
+      <div
+        class="config-prefix-capsule-tabs-tab-list"
+      >
+        <div
+          class="config-prefix-capsule-tabs-tab-wrapper"
+        >
+          <div
+            class="config-prefix-capsule-tabs-tab config-prefix-capsule-tabs-tab-active"
+          >
+            fruits
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CapsuleTabs should prioritize component prefixCls over ConfigProvider 1`] = `
+<div>
+  <div
+    class="component-prefix"
+  >
+    <div
+      class="component-prefix-header"
+    >
+      <div
+        class="adm-scroll-mask adm-scroll-mask-left"
+        style="opacity: 0;"
+      />
+      <div
+        class="adm-scroll-mask adm-scroll-mask-right"
+        style="opacity: 0;"
+      />
+      <div
+        class="component-prefix-tab-list"
+      >
+        <div
+          class="component-prefix-tab-wrapper"
+        >
+          <div
+            class="component-prefix-tab component-prefix-tab-active"
+          >
+            fruits
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/capsule-tabs/tests/capsule-tabs.test.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import { render, testA11y, fireEvent } from 'testing'
+import { fireEvent, render, testA11y } from 'testing'
 import CapsuleTabs, { CapsuleTabsProps } from '..'
+import ConfigProvider from '../../config-provider'
 
 const classPrefix = `adm-capsule-tabs`
 
@@ -95,4 +96,29 @@ describe('CapsuleTabs', () => {
     fireEvent.click(getByText('vegetables'))
     expect(queryByText('Apple')).not.toBeInTheDocument()
   })
+
+  test('should apply prefixCls from ConfigProvider', () => {
+    const { container } = render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <CapsuleTabs>
+          <CapsuleTabs.Tab title='fruits' key='fruits' />
+        </CapsuleTabs>
+      </ConfigProvider>
+    )
+    expect(container.querySelector('.config-prefix-capsule-tabs')).toBeTruthy()
+    expect(container).toMatchSnapshot()
+  })
+
+  test('should prioritize component prefixCls over ConfigProvider', () => {
+    const { container } = render(
+      <ConfigProvider prefixCls='config-prefix'>
+        <CapsuleTabs prefixCls='component-prefix'>
+          <CapsuleTabs.Tab title='fruits' key='fruits' />
+        </CapsuleTabs>
+      </ConfigProvider>
+    )
+    expect(container.querySelector('.component-prefix')).toBeTruthy()
+    expect(container.querySelector('.config-prefix-capsule-tabs')).toBeFalsy()
+    expect(container).toMatchSnapshot()
+  })
 })