Skip to content

Commit

Permalink
Merge pull request #2290 from DouyinFE/feat_avatar_size_raw
Browse files Browse the repository at this point in the history 
feat: avatar size support raw value
  • Loading branch information
@DaiQiangReal
DaiQiangReal authored Jun 11, 2024
2 parents 8591552 + 26d717a commit c7805a3
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 12 deletions.
4 changes: 2 additions & 2 deletions content/show/avatar/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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<HTMLImageElement\> | - |
| 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 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 | - |
Expand Down
4 changes: 2 additions & 2 deletions content/show/avatar/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -432,7 +432,7 @@ import { AvatarGroup, Avatar } from '@douyinfe/semi-ui';
| gap | 字符头像距离左右两侧的像素大小 | number | 3 |
| imgAttr | 原生 img 属性 **>=1.5.0** | React.ImgHTMLAttributes<HTMLImageElement\> | - |
| 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 | - |
Expand Down
22 changes: 14 additions & 8 deletions packages/semi-ui/avatar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
const textStyle: CSSProperties = {};
if (this.props.topSlot.textColor) {
textStyle['color'] = this.props.topSlot.textColor;
}
}
return <div style={this.props.topSlot.style ?? {}}
className={cls([`${prefixCls}-top_slot-wrapper`, this.props.topSlot.className ?? "", {
[`${prefixCls}-animated`]: this.props.contentMotion,
Expand Down Expand Up @@ -336,6 +336,11 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
...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,
Expand All @@ -361,7 +366,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {

let avatar = <span
{...(others as any)}
style={shouldWrap ? {} : style}
style={shouldWrap ? {} : customStyle}
className={avatarCls}
{...(shouldWrap ? {} : mouseEvent)}
role='listitem'
Expand All @@ -373,10 +378,10 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {

if (border) {
const borderStyle: CSSProperties = {};
if (typeof border ==='object' && border?.color) {
if (typeof border === 'object' && border?.color) {
borderStyle['borderColor'] = border?.color;
}
avatar = <div style={{ position: "relative", ...style }}>
avatar = <div style={{ position: "relative", ...customStyle }}>
{avatar}
<span style={borderStyle} className={cls([
`${prefixCls}-additionalBorder`,
Expand All @@ -387,7 +392,8 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
])}>
</span>
{
(typeof this.props.border === 'object' && this.props.border.motion) && <span style={borderStyle} className={cls([
(typeof this.props.border === 'object' && this.props.border.motion) &&
<span style={borderStyle} className={cls([
`${prefixCls}-additionalBorder`,
`${prefixCls}-additionalBorder-${size}`,
{
Expand All @@ -402,10 +408,10 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {


if (shouldWrap) {
return <span className={cls([`${prefixCls}-wrapper`])} style={style} {...mouseEvent}>
return <span className={cls([`${prefixCls}-wrapper`])} style={customStyle} {...mouseEvent}>
{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()}
</span>;
} else {
return avatar;
Expand Down

0 comments on commit c7805a3

Please sign in to comment.