Skip to content

Commit

Permalink
feat(Avatar): support imgProps, close #3476 (#4799)
Browse files Browse the repository at this point in the history 
Co-authored-by: lancely <[email protected]>
  • Loading branch information
@seven-lh @eternalsky
2 people authored and eternalsky committed Jul 16, 2024
1 parent 98079d1 commit 900d500
Show file tree
Hide file tree
Showing 5 changed files with 47 additions and 24 deletions.
21 changes: 11 additions & 10 deletions components/avatar/__docs__/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@ Avatars can be used to represent people or objects. It supports images, Icons, o

### Avatar

| Param | Description | Type | Default Value | Required |
| -------- | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------- | -------- |
| children | Children node list | React.ReactNode | - | |
| size | The size of the avatar | 'small' \| 'medium' \| 'large' \| number | 'medium' | |
| shape | The shape of the avatar | 'circle' \| 'square' | 'circle' | |
| icon | The icon type of the icon avatar, can be set to the `type` or `ReactElement` of Icon | React.ReactElement \| string | - | |
| src | The resource address of the image avatar | string | - | |
| onError | The event of the image loading failure, returning false will close the component's default fallback behavior | () => boolean | - | |
| alt | The alt replacement text when the image cannot be displayed | string | - | |
| srcSet | The responsive resource address of the image avatar | string | - | |
| Param | Description | Type | Default Value | Required |
| -------- | ------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------- | -------- |
| children | Children node list | React.ReactNode | - | |
| size | The size of the avatar | 'small' \| 'medium' \| 'large' \| number | 'medium' | |
| shape | The shape of the avatar | 'circle' \| 'square' | 'circle' | |
| icon | The icon type of the icon avatar, can be set to the `type` or `ReactElement` of Icon | React.ReactElement \| string | - | |
| src | The resource address of the image avatar | string | - | |
| onError | The event of the image loading failure, returning false will close the component's default fallback behavior | () => boolean | - | |
| imgProps | The other properties of the image | Omit\<<br/> React.ImgHTMLAttributes\<HTMLImageElement>,<br/> 'src' \| 'srcSet' \| 'onError' \| 'alt'<br/> > | - | |
| alt | The alt replacement text when the image cannot be displayed | string | - | |
| srcSet | The responsive resource address of the image avatar | string | - | |
21 changes: 11 additions & 10 deletions components/avatar/__docs__/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,14 @@

### Avatar

| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------- | -------------------------------------------------------------- | ---------------------------------------- | -------- | -------- |
| children | 孩子节点列表 | React.ReactNode | - | |
| size | 头像的大小 | 'small' \| 'medium' \| 'large' \| number | 'medium' | |
| shape | 头像的形状 | 'circle' \| 'square' | 'circle' | |
| icon | icon 类头像的图标类型，可设为 Icon 的 `type` 或 `ReactElement` | React.ReactElement \| string | - | |
| src | 图片类头像的资源地址 | string | - | |
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
| alt | 图像无法显示时的 alt 替代文本 | string | - | |
| srcSet | 图片类头像响应式资源地址 | string | - | |
| 参数 | 说明 | 类型 | 默认值 | 是否必填 |
| -------- | -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------- | -------- |
| children | 孩子节点列表 | React.ReactNode | - | |
| size | 头像的大小 | 'small' \| 'medium' \| 'large' \| number | 'medium' | |
| shape | 头像的形状 | 'circle' \| 'square' | 'circle' | |
| icon | icon 类头像的图标类型，可设为 Icon 的 `type` 或 `ReactElement` | React.ReactElement \| string | - | |
| src | 图片类头像的资源地址 | string | - | |
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
| imgProps | 图片的其他属性 | Omit\<<br/> React.ImgHTMLAttributes\<HTMLImageElement>,<br/> 'src' \| 'srcSet' \| 'onError' \| 'alt'<br/> > | - | |
| alt | 图像无法显示时的 alt 替代文本 | string | - | |
| srcSet | 图片类头像响应式资源地址 | string | - | |
6 changes: 6 additions & 0 deletions components/avatar/__tests__/index-spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,10 @@ describe('Avatar', () => {
cy.get('.next-avatar').should('have.css', 'width', '24px');
cy.get('.next-avatar').should('have.css', 'height', '24px');
});
// feature: imgProps referrerPolicy
it('should set src referrerPolicy', () => {
const link = 'https://img.alicdn.com/tfs/TB1EHhicAH0gK0jSZPiXXavapXa-904-826.png';
cy.mount(<Avatar src={link} imgProps={{ referrerPolicy: 'no-referrer' }} />);
cy.get('img').should('have.attr', 'referrerPolicy', 'no-referrer');
});
});
11 changes: 9 additions & 2 deletions components/avatar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ class Avatar extends Component<AvatarProps> {
};

render() {
const { prefix, className, style, size, icon, alt, srcSet, shape, src } = this.props;
const { prefix, className, style, size, icon, alt, srcSet, shape, src, imgProps } =
this.props;
const { isImgExist } = this.state;
let { children } = this.props;

Expand Down Expand Up @@ -85,7 +86,13 @@ class Avatar extends Component<AvatarProps> {
if (src) {
if (isImgExist) {
children = (
<img src={src} srcSet={srcSet} onError={this.handleImgLoadError} alt={alt} />
<img
{...imgProps}
src={src}
srcSet={srcSet}
onError={this.handleImgLoadError}
alt={alt}
/>
);
} else {
children = <Icon type={'picture'} size={iconSize} />;
Expand Down
12 changes: 10 additions & 2 deletions components/avatar/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { CommonProps } from '../util';
import type React from 'react';
import type { CommonProps } from '../util';

/**
* @api Avatar
Expand Down Expand Up @@ -38,6 +38,14 @@ export interface AvatarProps extends React.HTMLAttributes<HTMLElement>, CommonPr
* @en The event of the image loading failure, returning false will close the component's default fallback behavior
*/
onError?: () => boolean;
/**
* 图片的其他属性
* @en The other properties of the image
*/
imgProps?: Omit<
React.ImgHTMLAttributes<HTMLImageElement>,
'src' | 'srcSet' | 'onError' | 'alt'
>;
/**
* 图像无法显示时的 alt 替代文本
* @en The alt replacement text when the image cannot be displayed
Expand Down

0 comments on commit 900d500

Please sign in to comment.