Skip to content

Commit 237ad43

Browse files
author
刘欢
committed
feat(ActionSheet): unified provision of custom prefixCls
1 parent 856bea4 commit 237ad43

File tree

4 files changed

+47
-52
lines changed

4 files changed

+47
-52
lines changed

‎src/components/action-sheet/action-sheet.tsx‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1+
import classNames from 'classnames'
2+
import type { CSSProperties, FC, ReactNode } from 'react'
13
import React from 'react'
2-
import type { FC, ReactNode, CSSProperties } from 'react'
34
import { NativeProps, withNativeProps } from '../../utils/native-props'
5+
import { renderImperatively } from '../../utils/render-imperatively'
46
import { mergeProps } from '../../utils/with-default-props'
5-
import classNames from 'classnames'
7+
import { useConfig } from '../config-provider'
68
import Popup, { PopupProps } from '../popup'
79
import SafeArea from '../safe-area'
8-
import { renderImperatively } from '../../utils/render-imperatively'
9-
10-
const classPrefix = `adm-action-sheet`
1110

1211
export type Action = {
1312
key: string | number
@@ -34,6 +33,7 @@ export type ActionSheetProps = {
3433
/** @deprecated use `styles` instead */
3534
popupStyle?: CSSProperties
3635
styles?: Partial<Record<'body' | 'mask', CSSProperties>>
36+
prefixCls?: string
3737
} & Pick<
3838
PopupProps,
3939
'afterClose' | 'getContainer' | 'destroyOnClose' | 'forceRender'
@@ -53,8 +53,9 @@ const defaultProps = {
5353

5454
export const ActionSheet: FC<ActionSheetProps> = p => {
5555
const props = mergeProps(defaultProps, p)
56+
const { getPrefixCls } = useConfig()
5657
const { styles } = props
57-
58+
const prefixCls = getPrefixCls('action-sheet', props.prefixCls)
5859
return (
5960
<Popup
6061
visible={props.visible}
@@ -65,7 +66,7 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
6566
}
6667
}}
6768
afterClose={props.afterClose}
68-
className={classNames(`${classPrefix}-popup`, props.popupClassName)}
69+
className={classNames(`${prefixCls}-popup`, props.popupClassName)}
6970
style={props.popupStyle}
7071
getContainer={props.getContainer}
7172
destroyOnClose={props.destroyOnClose}
@@ -75,24 +76,24 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
7576
>
7677
{withNativeProps(
7778
props,
78-
<div className={classPrefix}>
79+
<div className={prefixCls}>
7980
{props.extra && (
80-
<div className={`${classPrefix}-extra`}>{props.extra}</div>
81+
<div className={`${prefixCls}-extra`}>{props.extra}</div>
8182
)}
82-
<div className={`${classPrefix}-button-list`}>
83+
<div className={`${prefixCls}-button-list`}>
8384
{props.actions.map((action, index) => (
8485
<div
8586
key={action.key}
86-
className={`${classPrefix}-button-item-wrapper`}
87+
className={`${prefixCls}-button-item-wrapper`}
8788
>
8889
<a
8990
className={classNames(
9091
'adm-plain-anchor',
91-
`${classPrefix}-button-item`,
92+
`${prefixCls}-button-item`,
9293
{
93-
[`${classPrefix}-button-item-danger`]: action.danger,
94-
[`${classPrefix}-button-item-disabled`]: action.disabled,
95-
[`${classPrefix}-button-item-bold`]: action.bold,
94+
[`${prefixCls}-button-item-danger`]: action.danger,
95+
[`${prefixCls}-button-item-disabled`]: action.disabled,
96+
[`${prefixCls}-button-item-bold`]: action.bold,
9697
}
9798
)}
9899
onClick={() => {
@@ -105,11 +106,11 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
105106
role='option'
106107
aria-disabled={action.disabled}
107108
>
108-
<div className={`${classPrefix}-button-item-name`}>
109+
<div className={`${prefixCls}-button-item-name`}>
109110
{action.text}
110111
</div>
111112
{action.description && (
112-
<div className={`${classPrefix}-button-item-description`}>
113+
<div className={`${prefixCls}-button-item-description`}>
113114
{action.description}
114115
</div>
115116
)}
@@ -120,19 +121,19 @@ export const ActionSheet: FC<ActionSheetProps> = p => {
120121

121122
{props.cancelText && (
122123
<div
123-
className={`${classPrefix}-cancel`}
124+
className={`${prefixCls}-cancel`}
124125
role='option'
125126
aria-label={props.cancelText}
126127
>
127-
<div className={`${classPrefix}-button-item-wrapper`}>
128+
<div className={`${prefixCls}-button-item-wrapper`}>
128129
<a
129130
className={classNames(
130131
'adm-plain-anchor',
131-
`${classPrefix}-button-item`
132+
`${prefixCls}-button-item`
132133
)}
133134
onClick={props.onClose}
134135
>
135-
<div className={`${classPrefix}-button-item-name`}>
136+
<div className={`${prefixCls}-button-item-name`}>
136137
{props.cancelText}
137138
</div>
138139
</a>

‎src/components/action-sheet/tests/action-sheet.test.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import * as React from 'react'
2-
import { render, testA11y, fireEvent, waitFor, cleanup, sleep } from 'testing'
3-
import ActionSheet, { Action } from '../'
4-
import Button from '../../button'
2+
import { cleanup, fireEvent, render, testA11y, waitFor } from 'testing'
53
import type { ActionSheetProps, ActionSheetShowHandler } from '..'
4+
import ActionSheet, { Action } from '../'
65
import {
76
reduceMotion,
87
restoreMotion,
98
} from '../../../utils/reduce-and-restore-motion'
9+
import Button from '../../button'
10+
import ConfigProvider from '../../config-provider'
1011

1112
const classPrefix = `adm-action-sheet`
1213

@@ -249,4 +250,14 @@ describe('ActionSheet', () => {
249250
'fontSize: 18'
250251
)
251252
})
253+
254+
test('should apply custom prefixCls(component) ', () => {
255+
const { container } = render(
256+
<ConfigProvider prefixCls='custom-prefix'>
257+
<ActionSheet visible prefixCls='another-prefix' actions={[]} />
258+
</ConfigProvider>
259+
)
260+
expect(container.querySelector('.custom-prefix-action-sheet')).toBeFalsy()
261+
expect(container.querySelector('.another-prefix')).toBeTruthy()
262+
})
252263
})

‎src/components/collapse/collapse.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import { mergeProp, mergeProps } from '../../utils/with-default-props'
1414
import { useConfig } from '../config-provider'
1515
import List from '../list'
1616

17+
const classPrefix = `adm-collapse`
18+
1719
export type CollapsePanelProps = {
1820
key: string
1921
title: ReactNode
@@ -38,9 +40,8 @@ const CollapsePanelContent: FC<{
3840
forceRender: boolean
3941
destroyOnClose: boolean
4042
children?: ReactNode
41-
prefixCls?: string
4243
}> = props => {
43-
const { visible, prefixCls } = props
44+
const { visible } = props
4445
const innerRef = useRef<HTMLDivElement>(null)
4546
const shouldRender = useShouldRender(
4647
visible,
@@ -102,8 +103,8 @@ const CollapsePanelContent: FC<{
102103

103104
return (
104105
<animated.div
105-
className={classNames(`${prefixCls}-panel-content`, {
106-
[`${prefixCls}-panel-content-active`]: visible,
106+
className={classNames(`${classPrefix}-panel-content`, {
107+
[`${classPrefix}-panel-content-active`]: visible,
107108
})}
108109
style={{
109110
height: height.to(v => {
@@ -115,7 +116,7 @@ const CollapsePanelContent: FC<{
115116
}),
116117
}}
117118
>
118-
<div className={`${prefixCls}-panel-content-inner`} ref={innerRef}>
119+
<div className={`${classPrefix}-panel-content-inner`} ref={innerRef}>
119120
<List.Item>{shouldRender && props.children}</List.Item>
120121
</div>
121122
</animated.div>
@@ -142,14 +143,11 @@ export type CollapseProps = (
142143
} & ValueProps<string | null>)
143144
) & {
144145
children?: ReactNode
145-
prefixCls?: string
146146
} & NativeProps
147147

148148
export const Collapse: FC<CollapseProps> = props => {
149-
const { collapse: componentConfig = {}, getPrefixCls } = useConfig()
149+
const { collapse: componentConfig = {} } = useConfig()
150150
const mergedProps = mergeProps(componentConfig, props)
151-
const prefixCls = getPrefixCls('collapse', props.prefixCls)
152-
153151
const panels: ReactElement<CollapsePanelProps>[] = []
154152
traverseReactNode(mergedProps.children, child => {
155153
if (!isValidElement<CollapsePanelProps>(child)) return
@@ -204,7 +202,7 @@ export const Collapse: FC<CollapseProps> = props => {
204202

205203
return withNativeProps(
206204
mergedProps,
207-
<div className={prefixCls}>
205+
<div className={classPrefix}>
208206
<List>
209207
{panels.map(panel => {
210208
const key = panel.key as string
@@ -240,8 +238,8 @@ export const Collapse: FC<CollapseProps> = props => {
240238
arrow(active)
241239
) : (
242240
<div
243-
className={classNames(`${prefixCls}-arrow`, {
244-
[`${prefixCls}-arrow-active`]: active,
241+
className={classNames(`${classPrefix}-arrow`, {
242+
[`${classPrefix}-arrow-active`]: active,
245243
})}
246244
>
247245
{arrow}
@@ -253,7 +251,7 @@ export const Collapse: FC<CollapseProps> = props => {
253251
{withNativeProps(
254252
panel.props,
255253
<List.Item
256-
className={`${prefixCls}-panel-header`}
254+
className={`${classPrefix}-panel-header`}
257255
onClick={handleClick}
258256
disabled={panel.props.disabled}
259257
arrowIcon={arrowIcon}
@@ -265,7 +263,6 @@ export const Collapse: FC<CollapseProps> = props => {
265263
visible={active}
266264
forceRender={!!panel.props.forceRender}
267265
destroyOnClose={!!panel.props.destroyOnClose}
268-
prefixCls={prefixCls}
269266
>
270267
{panel.props.children}
271268
</CollapsePanelContent>

‎src/components/config-provider/tests/config-provider.test.tsx‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -156,18 +156,4 @@ describe('ConfigProvider', () => {
156156
)
157157
expect(container.querySelector('.custom-prefix-collapse')).toBeTruthy()
158158
})
159-
160-
test('should apply custom prefixCls(component) ', () => {
161-
const { container } = render(
162-
<ConfigProvider prefixCls='custom-prefix'>
163-
<Collapse defaultActiveKey={['1']} prefixCls='another-prefix'>
164-
<Collapse.Panel key='1' title='第一项'>
165-
第一项
166-
</Collapse.Panel>
167-
</Collapse>
168-
</ConfigProvider>
169-
)
170-
expect(container.querySelector('.custom-prefix-collapse')).toBeFalsy()
171-
expect(container.querySelector('.another-prefix')).toBeTruthy()
172-
})
173159
})

0 commit comments

Comments
 (0)