Skip to content

Commit 8cd355b

Browse files
author
刘欢
committed
feat(Avatar): unified provision of custom prefixCls
1 parent bfde19d commit 8cd355b

File tree

3 files changed

+170
-3
lines changed

3 files changed

+170
-3
lines changed

‎src/components/avatar/avatar.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,18 @@ import type { FC, ReactNode } from 'react'
22
import React from 'react'
33
import { NativeProps, withNativeProps } from '../../utils/native-props'
44
import { mergeProps } from '../../utils/with-default-props'
5+
import { useConfig } from '../config-provider'
56
import Image, { ImageProps } from '../image'
67
import { Fallback } from './fallback'
78

8-
const classPrefix = 'adm-avatar'
9-
109
export type AvatarProps = {
1110
src: string
1211
fallback?: ReactNode
1312
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
1413
onClick?: (
1514
event: React.MouseEvent<HTMLDivElement | HTMLImageElement, Event>
1615
) => void
16+
prefixCls?: string
1717
} & Pick<ImageProps, 'alt' | 'lazy' | 'onError' | 'onLoad'> &
1818
NativeProps<'--size' | '--border-radius'>
1919

@@ -24,12 +24,14 @@ const defaultProps = {
2424

2525
export const Avatar: FC<AvatarProps> = p => {
2626
const props = mergeProps(defaultProps, p)
27+
const { getPrefixCls } = useConfig()
28+
const prefixCls = getPrefixCls('avatar', props.prefixCls)
2729
const mergedSrc = props.src?.trim() || undefined
2830

2931
return withNativeProps(
3032
props,
3133
<Image
32-
className={classPrefix}
34+
className={prefixCls}
3335
src={mergedSrc}
3436
fallback={props.fallback}
3537
placeholder={props.fallback}

‎src/components/avatar/tests/__snapshots__/avatar.test.tsx.snap‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Avatar should apply custom prefixCls 1`] = `
4+
<div>
5+
<div
6+
class="adm-image component-prefix"
7+
>
8+
<svg
9+
class="adm-avatar-fallback"
10+
height="88px"
11+
version="1.1"
12+
viewBox="0 0 88 88"
13+
width="88px"
14+
>
15+
<title>
16+
编组 3
17+
</title>
18+
<defs>
19+
<polygon
20+
id="path-1"
21+
points="0 0 88 0 88 88 0 88"
22+
/>
23+
</defs>
24+
<g
25+
fill="none"
26+
fill-rule="evenodd"
27+
id="页面-1"
28+
stroke="none"
29+
stroke-width="1"
30+
>
31+
<g
32+
id="语雀"
33+
transform="translate(-495.000000, -71.000000)"
34+
>
35+
<g
36+
id="编组-3"
37+
transform="translate(495.000000, 71.000000)"
38+
>
39+
<mask
40+
fill="white"
41+
id="mask-2"
42+
>
43+
<use
44+
xlink:href="#path-1"
45+
/>
46+
</mask>
47+
<use
48+
fill="#EEEEEE"
49+
fill-rule="nonzero"
50+
id="Mask"
51+
xlink:href="#path-1"
52+
/>
53+
<path
54+
d="M44.5707528,16 L43.4292117,16 L42.9575197,16.0086403 L42.9575195,16.0086403 C36.5215787,16.2615464 31.4341803,21.5678078 31.4344832,28.0273864 L31.4344832,34.7776551 L31.4495601,35.3716788 L31.4495593,35.3716628 C31.599687,38.5368723 32.9422041,41.5269327 35.2058513,43.7376716 L38.2147759,46.6775505 L38.4086219,46.8913989 C38.7747759,47.3385365 38.9750835,47.9001589 38.9750835,48.4833848 L38.9750835,48.8938006 L38.9556989,49.1897326 L38.9556989,49.1897325 C38.8577746,49.9812662 38.3754713,50.67284 37.667703,51.036605 L18.7375269,60.7440265 L18.4101421,60.9276334 L18.4101423,60.9276333 C16.9141658,61.8418636 16.0009389,63.4714674 16,65.2283758 L16,66.070809 L16.0129231,66.3948217 C16.1766149,68.4123376 17.860922,70 19.91569,70 L68.0843101,70 L68.08431,70 C70.2460467,70 71.9988087,68.243122 72,66.0751224 L72,65.2326893 C72,63.3382982 70.9446194,61.6037466 69.2624598,60.7440295 L50.3322837,51.036608 L50.3322835,51.0366079 C49.5291218,50.6249082 49.0240448,49.7962466 49.024903,48.8916436 L49.024903,48.4812278 C49.024903,47.8029608 49.3005955,47.1527756 49.7852106,46.6775603 L52.7941352,43.7376813 L52.7941354,43.7376811 C55.204308,41.3832325 56.5636029,38.151975 56.5633606,34.7776456 L56.5633606,28.0273769 L56.5633606,28.0273774 C56.5633606,21.3848531 51.1940878,16 44.5707524,16 L44.5707528,16 Z"
55+
fill="#CCCCCC"
56+
fill-rule="nonzero"
57+
id="形状"
58+
mask="url(#mask-2)"
59+
/>
60+
</g>
61+
</g>
62+
</g>
63+
</svg>
64+
<img
65+
class="adm-image-img"
66+
draggable="false"
67+
src="https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80"
68+
style="object-fit: cover; display: none;"
69+
/>
70+
</div>
71+
</div>
72+
`;
73+
74+
exports[`Avatar should apply custom prefixCls 2`] = `
75+
<div>
76+
<div
77+
class="adm-image config-prefix-avatar"
78+
>
79+
<svg
80+
class="adm-avatar-fallback"
81+
height="88px"
82+
version="1.1"
83+
viewBox="0 0 88 88"
84+
width="88px"
85+
>
86+
<title>
87+
编组 3
88+
</title>
89+
<defs>
90+
<polygon
91+
id="path-1"
92+
points="0 0 88 0 88 88 0 88"
93+
/>
94+
</defs>
95+
<g
96+
fill="none"
97+
fill-rule="evenodd"
98+
id="页面-1"
99+
stroke="none"
100+
stroke-width="1"
101+
>
102+
<g
103+
id="语雀"
104+
transform="translate(-495.000000, -71.000000)"
105+
>
106+
<g
107+
id="编组-3"
108+
transform="translate(495.000000, 71.000000)"
109+
>
110+
<mask
111+
fill="white"
112+
id="mask-2"
113+
>
114+
<use
115+
xlink:href="#path-1"
116+
/>
117+
</mask>
118+
<use
119+
fill="#EEEEEE"
120+
fill-rule="nonzero"
121+
id="Mask"
122+
xlink:href="#path-1"
123+
/>
124+
<path
125+
d="M44.5707528,16 L43.4292117,16 L42.9575197,16.0086403 L42.9575195,16.0086403 C36.5215787,16.2615464 31.4341803,21.5678078 31.4344832,28.0273864 L31.4344832,34.7776551 L31.4495601,35.3716788 L31.4495593,35.3716628 C31.599687,38.5368723 32.9422041,41.5269327 35.2058513,43.7376716 L38.2147759,46.6775505 L38.4086219,46.8913989 C38.7747759,47.3385365 38.9750835,47.9001589 38.9750835,48.4833848 L38.9750835,48.8938006 L38.9556989,49.1897326 L38.9556989,49.1897325 C38.8577746,49.9812662 38.3754713,50.67284 37.667703,51.036605 L18.7375269,60.7440265 L18.4101421,60.9276334 L18.4101423,60.9276333 C16.9141658,61.8418636 16.0009389,63.4714674 16,65.2283758 L16,66.070809 L16.0129231,66.3948217 C16.1766149,68.4123376 17.860922,70 19.91569,70 L68.0843101,70 L68.08431,70 C70.2460467,70 71.9988087,68.243122 72,66.0751224 L72,65.2326893 C72,63.3382982 70.9446194,61.6037466 69.2624598,60.7440295 L50.3322837,51.036608 L50.3322835,51.0366079 C49.5291218,50.6249082 49.0240448,49.7962466 49.024903,48.8916436 L49.024903,48.4812278 C49.024903,47.8029608 49.3005955,47.1527756 49.7852106,46.6775603 L52.7941352,43.7376813 L52.7941354,43.7376811 C55.204308,41.3832325 56.5636029,38.151975 56.5633606,34.7776456 L56.5633606,28.0273769 L56.5633606,28.0273774 C56.5633606,21.3848531 51.1940878,16 44.5707524,16 L44.5707528,16 Z"
126+
fill="#CCCCCC"
127+
fill-rule="nonzero"
128+
id="形状"
129+
mask="url(#mask-2)"
130+
/>
131+
</g>
132+
</g>
133+
</g>
134+
</svg>
135+
<img
136+
class="adm-image-img"
137+
draggable="false"
138+
src="https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80"
139+
style="object-fit: cover; display: none;"
140+
/>
141+
</div>
142+
</div>
143+
`;

‎src/components/avatar/tests/avatar.test.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react'
22
import { render, testA11y } from 'testing'
33
import Avatar from '..'
4+
import ConfigProvider from '../../config-provider'
45

56
const demoImage =
67
'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80'
@@ -28,4 +29,25 @@ describe('Avatar', () => {
2829
render(<Avatar src={' '} />)
2930
expect(document.querySelectorAll('.adm-avatar-fallback')[0]).toBeVisible()
3031
})
32+
33+
test('should apply custom prefixCls', () => {
34+
const { container } = render(
35+
<ConfigProvider prefixCls='config-prefix'>
36+
<Avatar src={demoImage} prefixCls='component-prefix' />
37+
</ConfigProvider>
38+
)
39+
expect(container.querySelector('.component-prefix')).toBeTruthy()
40+
expect(container.querySelector('.config-prefix-avatar')).toBeFalsy()
41+
expect(container).toMatchSnapshot()
42+
})
43+
44+
test('should apply custom prefixCls', () => {
45+
const { container } = render(
46+
<ConfigProvider prefixCls='config-prefix'>
47+
<Avatar src={demoImage} />
48+
</ConfigProvider>
49+
)
50+
expect(container.querySelector('.config-prefix-avatar')).toBeTruthy()
51+
expect(container).toMatchSnapshot()
52+
})
3153
})

0 commit comments

Comments
 (0)