From e0ef3c82b52beb40caef775fe9a0f747da664397 Mon Sep 17 00:00:00 2001 From: DaiQiangReal Date: Tue, 11 Jun 2024 15:30:36 +0800 Subject: [PATCH 1/4] feat: avatar size support raw value --- content/show/avatar/index-en-US.md | 2 +- content/show/avatar/index.md | 2 +- packages/semi-ui/avatar/index.tsx | 11 ++++++++--- 3 files changed, 10 insertions(+), 5 deletions(-) diff --git a/content/show/avatar/index-en-US.md b/content/show/avatar/index-en-US.md index 54a814f8af..d3c21240d6 100644 --- a/content/show/avatar/index-en-US.md +++ b/content/show/avatar/index-en-US.md @@ -437,7 +437,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui'; | hoverMask | Avatar content overlay when hover | ReactNode | - | | imgAttr | Native html img attributes **>=1.5.0** | React.ImgHTMLAttributes | - | | shape | Shape of the avatar, one of `circle`, `square` | string | `circle` | -| size | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large` | string | `medium` | +| size | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large` and raw value | string | `medium` | | src | Resource address for imgage avatars | string | - | | srcSet | Set the image avatar responsive resource address | string | - | | style | Style name | CSSProperties | - | diff --git a/content/show/avatar/index.md b/content/show/avatar/index.md index f0b808fc27..7556f8fa4e 100644 --- a/content/show/avatar/index.md +++ b/content/show/avatar/index.md @@ -432,7 +432,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui'; | gap | 字符头像距离左右两侧的像素大小 | number | 3 | | imgAttr | 原生 img 属性 **>=1.5.0** | React.ImgHTMLAttributes | - | | shape | 指定头像的形状，支持 `circle`、`square` | string | `circle` | -| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large` | string | `medium` | +| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large` 和 字面量 | string | `medium` | | src | 图片类头像的资源地址 | string | - | | srcSet | 设置图片类头像响应式资源地址 | string | - | | style | 样式名 | CSSProperties | - | diff --git a/packages/semi-ui/avatar/index.tsx b/packages/semi-ui/avatar/index.tsx index 771361bb94..3ddbd695ed 100644 --- a/packages/semi-ui/avatar/index.tsx +++ b/packages/semi-ui/avatar/index.tsx @@ -336,6 +336,11 @@ export default class Avatar extends BaseComponent { ...others } = this.props; const { isImgExist, hoverContent, focusVisible } = this.state; + let customStyle :CSSProperties= {}; + if(!strings.SIZE.includes(size)){ + customStyle = {width:size,height:size} + } + customStyle = {...customStyle,...style} const shouldWrap = bottomSlot || topSlot || border; const mouseEvent = { onClick: onClick, @@ -361,7 +366,7 @@ export default class Avatar extends BaseComponent { let avatar = { if (typeof border ==='object' && border?.color) { borderStyle['borderColor'] = border?.color; } - avatar =
+ avatar =
{avatar} { if (shouldWrap) { - return + return {avatar} {topSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()} {bottomSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()} From b6d131845882ed5f03c778db64bec367160eb203 Mon Sep 17 00:00:00 2001 From: DaiQiangReal Date: Tue, 11 Jun 2024 15:32:00 +0800 Subject: [PATCH 2/4] chore: format cvode --- packages/semi-ui/avatar/index.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/semi-ui/avatar/index.tsx b/packages/semi-ui/avatar/index.tsx index 3ddbd695ed..3b1bdac70e 100644 --- a/packages/semi-ui/avatar/index.tsx +++ b/packages/semi-ui/avatar/index.tsx @@ -294,7 +294,7 @@ export default class Avatar extends BaseComponent { const textStyle: CSSProperties = {}; if (this.props.topSlot.textColor) { textStyle['color'] = this.props.topSlot.textColor; - } + } return
{ ...others } = this.props; const { isImgExist, hoverContent, focusVisible } = this.state; - let customStyle :CSSProperties= {}; - if(!strings.SIZE.includes(size)){ - customStyle = {width:size,height:size} + let customStyle: CSSProperties = {}; + if (!strings.SIZE.includes(size)) { + customStyle = { width: size, height: size }; } - customStyle = {...customStyle,...style} + customStyle = { ...customStyle, ...style }; const shouldWrap = bottomSlot || topSlot || border; const mouseEvent = { onClick: onClick, @@ -378,7 +378,7 @@ export default class Avatar extends BaseComponent { if (border) { const borderStyle: CSSProperties = {}; - if (typeof border ==='object' && border?.color) { + if (typeof border === 'object' && border?.color) { borderStyle['borderColor'] = border?.color; } avatar =
@@ -392,7 +392,8 @@ export default class Avatar extends BaseComponent { ])}> { - (typeof this.props.border === 'object' && this.props.border.motion) && { if (shouldWrap) { return {avatar} - {topSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()} - {bottomSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()} + {topSlot && ["extra-small", "small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()} + {bottomSlot && ["extra-small", "small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()} ; } else { return avatar; From 7134eb3fe69951958a09cd520df52ff7f28b1951 Mon Sep 17 00:00:00 2001 From: DaiQiangReal Date: Tue, 11 Jun 2024 15:37:14 +0800 Subject: [PATCH 3/4] chore: remove number of size --- content/show/avatar/index-en-US.md | 2 +- content/show/avatar/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/show/avatar/index-en-US.md b/content/show/avatar/index-en-US.md index d3c21240d6..186de6ddd7 100644 --- a/content/show/avatar/index-en-US.md +++ b/content/show/avatar/index-en-US.md @@ -18,7 +18,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui'; ``` ### Size -You can change the size of the avatars with `size` property. The following sizes are supported: `extra-extra-small`(20x20), `extra-small`(24x24),`small`(32x32), `default`(40x40), `medium`(48x48), `large`(72x72), `extra-large`(128 x 128). +You can change the size of the avatars with `size` property. The following sizes are supported: `extra-extra-small`, `extra-small`,`small`, `default`, `medium`, `large`, `extra-large`. ```jsx live=true import React from 'react'; diff --git a/content/show/avatar/index.md b/content/show/avatar/index.md index 7556f8fa4e..30d9bedbf5 100644 --- a/content/show/avatar/index.md +++ b/content/show/avatar/index.md @@ -17,7 +17,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui'; ### 尺寸 -可以通过 `size` 属性设置图标大小，支持``extra-extra-small`(20x20)，`extra-small`(24x24)，`small`(32x32)，`default`(40x40)，`medium`(48x48)，`large`(72x72)，`extra-large`(128x128)`。 +可以通过 `size` 属性设置图标大小，支持`extra-extra-small`，`extra-small`，`small`，`default`，`medium`，`large`，`extra-large`。 ```jsx live=true import React from 'react'; From 26d717a609ec0f632e5a96280725d4b625c592dd Mon Sep 17 00:00:00 2001 From: DaiQiangReal Date: Tue, 11 Jun 2024 17:00:42 +0800 Subject: [PATCH 4/4] chore: update doc --- content/show/avatar/index-en-US.md | 2 +- content/show/avatar/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/content/show/avatar/index-en-US.md b/content/show/avatar/index-en-US.md index 186de6ddd7..188f259105 100644 --- a/content/show/avatar/index-en-US.md +++ b/content/show/avatar/index-en-US.md @@ -437,7 +437,7 @@ import { Avatar, AvatarGroup } from '@douyinfe/semi-ui'; | hoverMask | Avatar content overlay when hover | ReactNode | - | | imgAttr | Native html img attributes **>=1.5.0** | React.ImgHTMLAttributes | - | | shape | Shape of the avatar, one of `circle`, `square` | string | `circle` | -| size | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large` and raw value | string | `medium` | +| size | Size of the avatar, one of `extra-extra-small`,`extra-small`, `small`, `default`, `medium`, `large`, `extra-large` and valid value like "10px" | string | `medium` | | src | Resource address for imgage avatars | string | - | | srcSet | Set the image avatar responsive resource address | string | - | | style | Style name | CSSProperties | - | diff --git a/content/show/avatar/index.md b/content/show/avatar/index.md index 30d9bedbf5..6c4417597e 100644 --- a/content/show/avatar/index.md +++ b/content/show/avatar/index.md @@ -432,7 +432,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui'; | gap | 字符头像距离左右两侧的像素大小 | number | 3 | | imgAttr | 原生 img 属性 **>=1.5.0** | React.ImgHTMLAttributes | - | | shape | 指定头像的形状，支持 `circle`、`square` | string | `circle` | -| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large` 和 字面量 | string | `medium` | +| size | 设置头像的大小，支持 `extra-extra-small`、`extra-small`、`small`、`default`、`medium`、`large`、`extra-large` 和 合法的 width 属性值例如 "10px" | string | `medium` | | src | 图片类头像的资源地址 | string | - | | srcSet | 设置图片类头像响应式资源地址 | string | - | | style | 样式名 | CSSProperties | - |