Skip to content

feat(Avatar): unified provision of custom prefixCls #6964

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
EmilyyyLiu wants to merge 1 commit into
base: feature
Choose a base branch
from
+170 −3
Open

feat(Avatar): unified provision of custom prefixCls #6964

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/components/avatar/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,18 @@ import type { FC, ReactNode } from 'react'
import React from 'react'
import { NativeProps, withNativeProps } from '../../utils/native-props'
import { mergeProps } from '../../utils/with-default-props'
import { useConfig } from '../config-provider'
import Image, { ImageProps } from '../image'
import { Fallback } from './fallback'

const classPrefix = 'adm-avatar'
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Oct 21, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The classPrefix constant is no longer used. It should be removed to avoid confusion and reduce unnecessary code.


export type AvatarProps = {
src: string
fallback?: ReactNode
fit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
onClick?: (
event: React.MouseEvent<HTMLDivElement | HTMLImageElement, Event>
) => void
prefixCls?: string
} & Pick<ImageProps, 'alt' | 'lazy' | 'onError' | 'onLoad'> &
NativeProps<'--size' | '--border-radius'>

Expand All @@ -24,12 +24,14 @@ const defaultProps = {

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

return withNativeProps(
props,
<Image
className={classPrefix}
className={prefixCls}
src={mergedSrc}
fallback={props.fallback}
placeholder={props.fallback}
Expand Down
143 changes: 143 additions & 0 deletions src/components/avatar/tests/__snapshots__/avatar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Avatar should apply custom prefixCls 1`] = `
<div>
<div
class="adm-image component-prefix"
>
<svg
class="adm-avatar-fallback"
height="88px"
version="1.1"
viewBox="0 0 88 88"
width="88px"
>
<title>
编组 3
</title>
<defs>
<polygon
id="path-1"
points="0 0 88 0 88 88 0 88"
/>
</defs>
<g
fill="none"
fill-rule="evenodd"
id="页面-1"
stroke="none"
stroke-width="1"
>
<g
id="语雀"
transform="translate(-495.000000, -71.000000)"
>
<g
id="编组-3"
transform="translate(495.000000, 71.000000)"
>
<mask
fill="white"
id="mask-2"
>
<use
xlink:href="#path-1"
/>
</mask>
<use
fill="#EEEEEE"
fill-rule="nonzero"
id="Mask"
xlink:href="#path-1"
/>
<path
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"
fill="#CCCCCC"
fill-rule="nonzero"
id="形状"
mask="url(#mask-2)"
/>
</g>
</g>
</g>
</svg>
<img
class="adm-image-img"
draggable="false"
src="https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80"
style="object-fit: cover; display: none;"
/>
</div>
</div>
`;

exports[`Avatar should apply custom prefixCls 2`] = `
<div>
<div
class="adm-image config-prefix-avatar"
>
<svg
class="adm-avatar-fallback"
height="88px"
version="1.1"
viewBox="0 0 88 88"
width="88px"
>
<title>
编组 3
</title>
<defs>
<polygon
id="path-1"
points="0 0 88 0 88 88 0 88"
/>
</defs>
<g
fill="none"
fill-rule="evenodd"
id="页面-1"
stroke="none"
stroke-width="1"
>
<g
id="语雀"
transform="translate(-495.000000, -71.000000)"
>
<g
id="编组-3"
transform="translate(495.000000, 71.000000)"
>
<mask
fill="white"
id="mask-2"
>
<use
xlink:href="#path-1"
/>
</mask>
<use
fill="#EEEEEE"
fill-rule="nonzero"
id="Mask"
xlink:href="#path-1"
/>
<path
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"
fill="#CCCCCC"
fill-rule="nonzero"
id="形状"
mask="url(#mask-2)"
/>
</g>
</g>
</g>
</svg>
<img
class="adm-image-img"
draggable="false"
src="https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80"
style="object-fit: cover; display: none;"
/>
</div>
</div>
`;
22 changes: 22 additions & 0 deletions src/components/avatar/tests/avatar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import { render, testA11y } from 'testing'
import Avatar from '..'
import ConfigProvider from '../../config-provider'

const demoImage =
'https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=3150&q=80'
Expand Down Expand Up @@ -28,4 +29,25 @@ describe('Avatar', () => {
render(<Avatar src={' '} />)
expect(document.querySelectorAll('.adm-avatar-fallback')[0]).toBeVisible()
})

test('should apply custom prefixCls', () => {
const { container } = render(
<ConfigProvider prefixCls='config-prefix'>
<Avatar src={demoImage} prefixCls='component-prefix' />
</ConfigProvider>
)
expect(container.querySelector('.component-prefix')).toBeTruthy()
expect(container.querySelector('.config-prefix-avatar')).toBeFalsy()
expect(container).toMatchSnapshot()
})

test('should apply custom prefixCls', () => {
const { container } = render(
<ConfigProvider prefixCls='config-prefix'>
<Avatar src={demoImage} />
</ConfigProvider>
)
expect(container.querySelector('.config-prefix-avatar')).toBeTruthy()
expect(container).toMatchSnapshot()
})
})
Loading