Skip to content

Commit d6d8942

Browse files
author
刘欢
committed
feat: unified provision of custom prefixCls
1 parent bfde19d commit d6d8942

File tree

3 files changed

+113
-17
lines changed

3 files changed

+113
-17
lines changed

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
import React, { isValidElement, useRef } from 'react'
2-
import type { FC, ReactNode, ReactElement } from 'react'
3-
import classNames from 'classnames'
41
import { animated } from '@react-spring/web'
2+
import classNames from 'classnames'
3+
import type { FC, ReactElement, ReactNode } from 'react'
4+
import React, { isValidElement, useRef } from 'react'
55
import { NativeProps, withNativeProps } from '../../utils/native-props'
6+
import { ShouldRender } from '../../utils/should-render'
7+
import { traverseReactNode } from '../../utils/traverse-react-node'
68
import { usePropsValue } from '../../utils/use-props-value'
79
import { useResizeEffect } from '../../utils/use-resize-effect'
810
import { useTabListScroll } from '../../utils/use-tab-list-scroll'
11+
import { useConfig } from '../config-provider'
912
import ScrollMask from '../scroll-mask'
10-
import { ShouldRender } from '../../utils/should-render'
11-
import { traverseReactNode } from '../../utils/traverse-react-node'
12-
13-
const classPrefix = `adm-capsule-tabs`
1413

1514
export type CapsuleTabProps = {
1615
title: ReactNode
@@ -27,14 +26,16 @@ export type CapsuleTabsProps = {
2726
defaultActiveKey?: string | null
2827
onChange?: (key: string) => void
2928
children?: ReactNode
29+
prefixCls?: string
3030
} & NativeProps
3131

3232
export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
3333
const tabListContainerRef = useRef<HTMLDivElement>(null)
3434
const rootRef = useRef<HTMLDivElement>(null)
3535
const keyToIndexRecord: Record<string, number> = {}
3636
let firstActiveKey: string | null = null
37-
37+
const { getPrefixCls } = useConfig()
38+
const prefixCls = getPrefixCls('capsule-tabs', props.prefixCls)
3839
const panes: ReactElement<CapsuleTabProps>[] = []
3940

4041
traverseReactNode(props.children, (child, index) => {
@@ -68,18 +69,18 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
6869

6970
return withNativeProps(
7071
props,
71-
<div className={classPrefix} ref={rootRef}>
72-
<div className={`${classPrefix}-header`}>
72+
<div className={prefixCls} ref={rootRef}>
73+
<div className={`${prefixCls}-header`}>
7374
<ScrollMask scrollTrackRef={tabListContainerRef} />
7475
<animated.div
75-
className={`${classPrefix}-tab-list`}
76+
className={`${prefixCls}-tab-list`}
7677
ref={tabListContainerRef}
7778
scrollLeft={scrollLeft}
7879
>
7980
{panes.map(pane =>
8081
withNativeProps(
8182
pane.props,
82-
<div key={pane.key} className={`${classPrefix}-tab-wrapper`}>
83+
<div key={pane.key} className={`${prefixCls}-tab-wrapper`}>
8384
<div
8485
onClick={() => {
8586
const { key } = pane
@@ -89,9 +90,9 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
8990
}
9091
setActiveKey(key.toString())
9192
}}
92-
className={classNames(`${classPrefix}-tab`, {
93-
[`${classPrefix}-tab-active`]: pane.key === activeKey,
94-
[`${classPrefix}-tab-disabled`]: pane.props.disabled,
93+
className={classNames(`${prefixCls}-tab`, {
94+
[`${prefixCls}-tab-active`]: pane.key === activeKey,
95+
[`${prefixCls}-tab-disabled`]: pane.props.disabled,
9596
})}
9697
>
9798
{pane.props.title}
@@ -114,7 +115,7 @@ export const CapsuleTabs: FC<CapsuleTabsProps> = props => {
114115
destroyOnClose={pane.props.destroyOnClose}
115116
>
116117
<div
117-
className={`${classPrefix}-content`}
118+
className={`${prefixCls}-content`}
118119
style={{ display: active ? 'block' : 'none' }}
119120
>
120121
{pane.props.children}

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`CapsuleTabs should apply prefixCls from ConfigProvider 1`] = `
4+
<div>
5+
<div
6+
class="config-prefix-capsule-tabs"
7+
>
8+
<div
9+
class="config-prefix-capsule-tabs-header"
10+
>
11+
<div
12+
class="adm-scroll-mask adm-scroll-mask-left"
13+
style="opacity: 0;"
14+
/>
15+
<div
16+
class="adm-scroll-mask adm-scroll-mask-right"
17+
style="opacity: 0;"
18+
/>
19+
<div
20+
class="config-prefix-capsule-tabs-tab-list"
21+
>
22+
<div
23+
class="config-prefix-capsule-tabs-tab-wrapper"
24+
>
25+
<div
26+
class="config-prefix-capsule-tabs-tab config-prefix-capsule-tabs-tab-active"
27+
>
28+
fruits
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
`;
36+
37+
exports[`CapsuleTabs should prioritize component prefixCls over ConfigProvider 1`] = `
38+
<div>
39+
<div
40+
class="component-prefix"
41+
>
42+
<div
43+
class="component-prefix-header"
44+
>
45+
<div
46+
class="adm-scroll-mask adm-scroll-mask-left"
47+
style="opacity: 0;"
48+
/>
49+
<div
50+
class="adm-scroll-mask adm-scroll-mask-right"
51+
style="opacity: 0;"
52+
/>
53+
<div
54+
class="component-prefix-tab-list"
55+
>
56+
<div
57+
class="component-prefix-tab-wrapper"
58+
>
59+
<div
60+
class="component-prefix-tab component-prefix-tab-active"
61+
>
62+
fruits
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
`;

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

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react'
2-
import { render, testA11y, fireEvent } from 'testing'
2+
import { fireEvent, render, testA11y } from 'testing'
33
import CapsuleTabs, { CapsuleTabsProps } from '..'
4+
import ConfigProvider from '../../config-provider'
45

56
const classPrefix = `adm-capsule-tabs`
67

@@ -95,4 +96,29 @@ describe('CapsuleTabs', () => {
9596
fireEvent.click(getByText('vegetables'))
9697
expect(queryByText('Apple')).not.toBeInTheDocument()
9798
})
99+
100+
test('should apply prefixCls from ConfigProvider', () => {
101+
const { container } = render(
102+
<ConfigProvider prefixCls='config-prefix'>
103+
<CapsuleTabs>
104+
<CapsuleTabs.Tab title='fruits' key='fruits' />
105+
</CapsuleTabs>
106+
</ConfigProvider>
107+
)
108+
expect(container.querySelector('.config-prefix-capsule-tabs')).toBeTruthy()
109+
expect(container).toMatchSnapshot()
110+
})
111+
112+
test('should prioritize component prefixCls over ConfigProvider', () => {
113+
const { container } = render(
114+
<ConfigProvider prefixCls='config-prefix'>
115+
<CapsuleTabs prefixCls='component-prefix'>
116+
<CapsuleTabs.Tab title='fruits' key='fruits' />
117+
</CapsuleTabs>
118+
</ConfigProvider>
119+
)
120+
expect(container.querySelector('.component-prefix')).toBeTruthy()
121+
expect(container.querySelector('.config-prefix-capsule-tabs')).toBeFalsy()
122+
expect(container).toMatchSnapshot()
123+
})
98124
})

0 commit comments

Comments
 (0)