github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(Avatar): group add shape & synch demo (#6822)

pull/6871/head
selicens 2023-08-18 14:22:07 +08:00 committed by GitHub
parent 38dd977b4c
commit cfd4aadc29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 237 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/avatar/Avatar.tsx
View File

@ -11,7 +11,7 @@ import useConfigInject from '../config-provider/hooks/useConfigInject';
import ResizeObserver from '../vc-resize-observer'; import ResizeObserver from '../vc-resize-observer';
import eagerComputed from '../_util/eagerComputed'; import eagerComputed from '../_util/eagerComputed';
import useStyle from './style'; import useStyle from './style';
import { useInjectSize } from './SizeContext'; import { useAvatarInjectContext } from './AvatarContext';
export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap; export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
@ -56,9 +56,9 @@ const Avatar = defineComponent({
const { prefixCls } = useConfigInject('avatar', props); const { prefixCls } = useConfigInject('avatar', props);
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
const groupSize = useInjectSize(); const avatarCtx = useAvatarInjectContext();
const size = computed(() => { const size = computed(() => {
return props.size === 'default' ? groupSize.value : props.size; return props.size === 'default' ? avatarCtx.size : props.size;
}); });
const screens = useBreakpoint(); const screens = useBreakpoint();
const responsiveSize = eagerComputed(() => { const responsiveSize = eagerComputed(() => {
@ -135,6 +135,7 @@ const Avatar = defineComponent({
return () => { return () => {
const { shape, src, alt, srcset, draggable, crossOrigin } = props; const { shape, src, alt, srcset, draggable, crossOrigin } = props;
const mergeShape = avatarCtx.shape ?? shape;
const icon = getPropsSlot(slots, props, 'icon'); const icon = getPropsSlot(slots, props, 'icon');
const pre = prefixCls.value; const pre = prefixCls.value;
const classString = { const classString = {
@ -142,7 +143,7 @@ const Avatar = defineComponent({
[pre]: true, [pre]: true,
[`${pre}-lg`]: size.value === 'large', [`${pre}-lg`]: size.value === 'large',
[`${pre}-sm`]: size.value === 'small', [`${pre}-sm`]: size.value === 'small',
[`${pre}-${shape}`]: shape, [`${pre}-${mergeShape}`]: true,
[`${pre}-image`]: src && isImgExist.value, [`${pre}-image`]: src && isImgExist.value,
[`${pre}-icon`]: icon, [`${pre}-icon`]: icon,
[hashId.value]: true, [hashId.value]: true,

16
components/avatar/AvatarContext.ts Normal file
View File

@ -0,0 +1,16 @@
import type { InjectionKey } from 'vue';
import { inject, provide } from 'vue';
import type { ScreenSizeMap } from '../_util/responsiveObserve';
export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
export interface AvatarContextType {
size?: AvatarSize;
shape?: 'circle' | 'square';
}
const AvatarContextKey: InjectionKey<AvatarContextType> = Symbol('AvatarContextKey');
export const useAvatarInjectContext = () => {
return inject(AvatarContextKey, {});
};
export const useAvatarProviderContext = (context: AvatarContextType) => {
return provide(AvatarContextKey, context);
};

13
components/avatar/Group.tsx
View File

@ -3,11 +3,11 @@ import type { AvatarSize } from './Avatar';
import Avatar from './Avatar'; import Avatar from './Avatar';
import Popover from '../popover'; import Popover from '../popover';
import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'; import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
import { computed, defineComponent } from 'vue'; import { computed, defineComponent, watchEffect } from 'vue';
import { flattenChildren, getPropsSlot } from '../_util/props-util'; import { flattenChildren, getPropsSlot } from '../_util/props-util';
import useConfigInject from '../config-provider/hooks/useConfigInject'; import useConfigInject from '../config-provider/hooks/useConfigInject';
import useStyle from './style'; import useStyle from './style';
import { useProviderSize } from './SizeContext'; import { useAvatarProviderContext } from './AvatarContext';
export const groupProps = () => ({ export const groupProps = () => ({
prefixCls: String, prefixCls: String,
@ -23,6 +23,7 @@ export const groupProps = () => ({
type: [Number, String, Object] as PropType<AvatarSize>, type: [Number, String, Object] as PropType<AvatarSize>,
default: 'default' as AvatarSize, default: 'default' as AvatarSize,
}, },
shape: { type: String as PropType<'circle' | 'square'>, default: 'circle' },
}); });
export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>; export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>;
@ -36,13 +37,17 @@ const Group = defineComponent({
const { prefixCls, direction } = useConfigInject('avatar', props); const { prefixCls, direction } = useConfigInject('avatar', props);
const groupPrefixCls = computed(() => `${prefixCls.value}-group`); const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
const [wrapSSR, hashId] = useStyle(prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls);
useProviderSize(computed(() => props.size)); watchEffect(() => {
const context = { size: props.size, shape: props.shape };
useAvatarProviderContext(context);
});
return () => { return () => {
const { const {
maxPopoverPlacement = 'top', maxPopoverPlacement = 'top',
maxCount, maxCount,
maxStyle, maxStyle,
maxPopoverTrigger = 'hover', maxPopoverTrigger = 'hover',
shape,
} = props; } = props;
const cls = { const cls = {
@ -72,7 +77,7 @@ const Group = defineComponent({
placement={maxPopoverPlacement} placement={maxPopoverPlacement}
overlayClassName={`${groupPrefixCls.value}-popover`} overlayClassName={`${groupPrefixCls.value}-popover`}
> >
<Avatar style={maxStyle}>{`+${numOfChildren - maxCount}`}</Avatar> <Avatar style={maxStyle} shape={shape}>{`+${numOfChildren - maxCount}`}</Avatar>
</Popover>, </Popover>,
); );
return wrapSSR( return wrapSSR(

17
components/avatar/SizeContext.ts
View File

@ -1,17 +0,0 @@
import type { InjectionKey, Ref } from 'vue';
import { computed, inject, ref, provide } from 'vue';
import type { ScreenSizeMap } from '../_util/responsiveObserve';
export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
const SizeContextKey: InjectionKey<Ref<AvatarSize>> = Symbol('SizeContextKey');
export const useInjectSize = () => {
return inject(SizeContextKey, ref('default' as AvatarSize));
};
export const useProviderSize = (size: Ref<AvatarSize>) => {
const parentSize = useInjectSize();
provide(
SizeContextKey,
computed(() => size.value || parentSize.value),
);
return size;
};

13
components/avatar/demo/badge.vue
View File

@ -16,29 +16,20 @@ Usually used for reminders and notifications.
</docs> </docs>
<template> <template>
<span style="margin-right: 24px"> <a-space :size="24">
<a-badge :count="1"> <a-badge :count="1">
<a-avatar shape="square"> <a-avatar shape="square">
<template #icon><UserOutlined /></template> <template #icon><UserOutlined /></template>
</a-avatar> </a-avatar>
</a-badge> </a-badge>
</span>
<span>
<a-badge dot> <a-badge dot>
<a-avatar shape="square"> <a-avatar shape="square">
<template #icon><UserOutlined /></template> <template #icon><UserOutlined /></template>
</a-avatar> </a-avatar>
</a-badge> </a-badge>
</span> </a-space>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue'; import { UserOutlined } from '@ant-design/icons-vue';
</script> </script>
<style scoped>
#components-avatar-demo-badge .ant-avatar {
margin-top: 0;
margin-right: 0;
}
</style>

55
components/avatar/demo/basic.vue
View File

@ -16,31 +16,36 @@ Three sizes and two shapes are available.
</docs> </docs>
<template> <template>
<a-avatar :size="64"> <a-space direction="vertical" :size="32">
<template #icon><UserOutlined /></template> <a-space wrap :size="16">
</a-avatar> <a-avatar :size="64">
<a-avatar size="large"> <template #icon><UserOutlined /></template>
<template #icon><UserOutlined /></template> </a-avatar>
</a-avatar> <a-avatar size="large">
<a-avatar> <template #icon><UserOutlined /></template>
<template #icon><UserOutlined /></template> </a-avatar>
</a-avatar> <a-avatar>
<a-avatar size="small"> <template #icon><UserOutlined /></template>
<template #icon><UserOutlined /></template> </a-avatar>
</a-avatar> <a-avatar size="small">
<br /> <template #icon><UserOutlined /></template>
<a-avatar shape="square" :size="64"> </a-avatar>
<template #icon><UserOutlined /></template> </a-space>
</a-avatar> <a-space wrap :size="16">
<a-avatar shape="square" size="large"> <a-avatar shape="square" :size="64">
<template #icon><UserOutlined /></template> <template #icon><UserOutlined /></template>
</a-avatar> </a-avatar>
<a-avatar shape="square"> <a-avatar shape="square" size="large">
<template #icon><UserOutlined /></template> <template #icon><UserOutlined /></template>
</a-avatar> </a-avatar>
<a-avatar shape="square" size="small"> <a-avatar shape="square">
<template #icon><UserOutlined /></template> <template #icon><UserOutlined /></template>
</a-avatar> </a-avatar>
<a-avatar shape="square" size="small">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-space>
</a-space>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

30
components/avatar/demo/dynamic.vue
View File

@ -8,27 +8,22 @@ title:
## zh-CN ## zh-CN
对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。 对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。也可使用 `gap`` 来设置字符距离左右两侧边界单位像素。
## en-US ## en-US
For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. For letter type Avatar, when the letters are too long to display, the font size can be automatically adjusted according to the width of the Avatar. You can also use `gap` to set the unit distance between left and right sides.
</docs> </docs>
<template> <template>
<a-avatar <a-avatar size="large" :style="{ backgroundColor: color, verticalAlign: 'middle' }" :gap="gap">
shape="square"
size="large"
:style="{ backgroundColor: color, verticalAlign: 'middle' }"
>
{{ avatarValue }} {{ avatarValue }}
</a-avatar> </a-avatar>
<a-button <a-button size="small" :style="{ margin: '0 16px', verticalAlign: 'middle' }" @click="changeUser">
size="small" ChangeUser
:style="{ marginLeft: '16px', verticalAlign: 'middle' }" </a-button>
@click="changeValue" <a-button size="small" :style="{ verticalAlign: 'middle' }" @click="changeGap">
> ChangeGap
改变
</a-button> </a-button>
</template> </template>
@ -39,9 +34,16 @@ const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']; const colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];
const avatarValue = ref(UserList[0]); const avatarValue = ref(UserList[0]);
const color = ref(colorList[0]); const color = ref(colorList[0]);
const changeValue = () => { const changeUser = () => {
const index = UserList.indexOf(avatarValue.value); const index = UserList.indexOf(avatarValue.value);
avatarValue.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]; avatarValue.value = index < UserList.length - 1 ? UserList[index + 1] : UserList[0];
color.value = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]; color.value = index < colorList.length - 1 ? colorList[index + 1] : colorList[0];
}; };
const GapList = [4, 3, 2, 1];
const gap = ref(GapList[0]);
const changeGap = () => {
const index = GapList.indexOf(gap.value);
gap.value = index < GapList.length - 1 ? GapList[index + 1] : GapList[0];
};
</script> </script>

49
components/avatar/demo/group.vue
View File

@ -17,20 +17,22 @@ Avatar group display.
<template> <template>
<a-avatar-group> <a-avatar-group>
<a-avatar src="https://joeschmoe.io/api/v1/random" /> <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=1" />
<a-avatar style="background-color: #f56a00">K</a-avatar> <a href="https://www.antdv.com">
<a-avatar style="background-color: #f56a00">K</a-avatar>
</a>
<a-tooltip title="Ant User" placement="top"> <a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068"> <a-avatar style="background-color: #87d068">
<template #icon><UserOutlined /></template> <template #icon><UserOutlined /></template>
</a-avatar> </a-avatar>
</a-tooltip> </a-tooltip>
<a-avatar style="background-color: #1890ff"> <a-avatar style="background-color: #1890ff">
<template #icon><UserOutlined /></template> <template #icon><AntDesignOutlined /></template>
</a-avatar> </a-avatar>
</a-avatar-group> </a-avatar-group>
<a-divider /> <a-divider />
<a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }"> <a-avatar-group :max-count="2" :max-style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">
<a-avatar src="https://joeschmoe.io/api/v1/random" /> <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=2" />
<a-avatar style="background-color: #1890ff">K</a-avatar> <a-avatar style="background-color: #1890ff">K</a-avatar>
<a-tooltip title="Ant User" placement="top"> <a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068"> <a-avatar style="background-color: #87d068">
@ -38,7 +40,7 @@ Avatar group display.
</a-avatar> </a-avatar>
</a-tooltip> </a-tooltip>
<a-avatar style="background-color: #1890ff"> <a-avatar style="background-color: #1890ff">
<template #icon><UserOutlined /></template> <template #icon><AntDesignOutlined /></template>
</a-avatar> </a-avatar>
</a-avatar-group> </a-avatar-group>
<a-divider /> <a-divider />
@ -50,7 +52,7 @@ Avatar group display.
backgroundColor: '#fde3cf', backgroundColor: '#fde3cf',
}" }"
> >
<a-avatar src="https://joeschmoe.io/api/v1/random" /> <a-avatar src="https://xsgames.co/randomusers/avatar.php?g=pixel&key=3" />
<a-avatar style="background-color: #1890ff">K</a-avatar> <a-avatar style="background-color: #1890ff">K</a-avatar>
<a-tooltip title="Ant User" placement="top"> <a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068"> <a-avatar style="background-color: #87d068">
@ -58,11 +60,42 @@ Avatar group display.
</a-avatar> </a-avatar>
</a-tooltip> </a-tooltip>
<a-avatar style="background-color: #1890ff"> <a-avatar style="background-color: #1890ff">
<template #icon><UserOutlined /></template> <template #icon><AntDesignOutlined /></template>
</a-avatar>
</a-avatar-group>
<a-divider />
<a-avatar-group
:max-count="2"
max-popover-trigger="click"
size="large"
:max-style="{ color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' }"
>
<a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
<a-avatar style="background-color: #f56a00">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-tooltip>
<a-avatar style="background-color: #1890ff">
<template #icon><AntDesignOutlined /></template>
</a-avatar>
</a-avatar-group>
<a-divider />
<a-avatar-group shape="square">
<a-avatar style="background-color: #fde3cf">A</a-avatar>
<a-avatar style="background-color: #f56a00">K</a-avatar>
<a-tooltip title="Ant User" placement="top">
<a-avatar style="background-color: #87d068">
<template #icon><UserOutlined /></template>
</a-avatar>
</a-tooltip>
<a-avatar style="background-color: #1890ff">
<template #icon><AntDesignOutlined /></template>
</a-avatar> </a-avatar>
</a-avatar-group> </a-avatar-group>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { UserOutlined } from '@ant-design/icons-vue'; import { UserOutlined, AntDesignOutlined } from '@ant-design/icons-vue';
</script> </script>

7
components/avatar/demo/index.vue
View File

@ -36,10 +36,3 @@ export default defineComponent({
}, },
}); });
</script> </script>
<style>
[id^='components-avatar-demo-'] .ant-avatar {
margin-top: 16px;
margin-right: 16px;
}
</style>

30
components/avatar/demo/type.vue
View File

@ -16,20 +16,22 @@ Image, Icon and letter are supported, and the latter two kinds avatar can have c
</docs> </docs>
<template> <template>
<a-avatar> <a-space :size="16" wrap>
<template #icon> <a-avatar>
<UserOutlined /> <template #icon>
</template> <UserOutlined />
</a-avatar> </template>
<a-avatar>U</a-avatar> </a-avatar>
<a-avatar :size="40">USER</a-avatar> <a-avatar>U</a-avatar>
<a-avatar src="https://joeschmoe.io/api/v1/random" /> <a-avatar :size="40">USER</a-avatar>
<a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar> <a-avatar src="https://www.antdv.com/assets/logo.1ef800a8.svg" />
<a-avatar style="background-color: #87d068"> <a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar>
<template #icon> <a-avatar style="background-color: #87d068">
<UserOutlined /> <template #icon>
</template> <UserOutlined />
</a-avatar> </template>
</a-avatar>
</a-space>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

1
components/avatar/index.en-US.md
View File

@ -34,3 +34,4 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 3.0 | | maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 3.0 |
| maxStyle | The style of excess avatar style | CSSProperties | - | | | maxStyle | The style of excess avatar style | CSSProperties | - | |
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | | | size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | |
| shape | The shape of the avatar | `circle` \| `square` | `circle` | 4.0 |

1
components/avatar/index.zh-CN.md
View File

@ -39,3 +39,4 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YbgyQaRGz-UAAA
| maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 3.0 | | maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 3.0 |
| maxStyle | 多余头像样式 | CSSProperties | - | | | maxStyle | 多余头像样式 | CSSProperties | - | |
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | | | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | |
| shape | 设置头像的形状 | `circle` \| `square` | `circle` | 4.0 |

153
components/avatar/style/index.ts
View File

@ -3,20 +3,57 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent } from '../../style'; import { resetComponent } from '../../style';
export interface ComponentToken {} export interface ComponentToken {
/**
* @desc 头像背景色
* @descEN Background color of Avatar
*/
containerSize: number;
/**
* @desc 大号头像尺寸
* @descEN Size of large Avatar
*/
containerSizeLG: number;
/**
* @desc 小号头像尺寸
* @descEN Size of small Avatar
*/
containerSizeSM: number;
/**
* @desc 头像文字大小
* @descEN Font size of Avatar
*/
textFontSize: number;
/**
* @desc 大号头像文字大小
* @descEN Font size of large Avatar
*/
textFontSizeLG: number;
/**
* @desc 小号头像文字大小
* @descEN Font size of small Avatar
*/
textFontSizeSM: number;
/**
* @desc 头像组间距
* @descEN Spacing between avatars in a group
*/
groupSpace: number;
/**
* @desc 头像组重叠宽度
* @descEN Overlapping of avatars in a group
*/
groupOverlapping: number;
/**
* @desc 头像组边框颜色
* @descEN Border color of avatars in a group
*/
groupBorderColor: string;
}
type AvatarToken = FullToken<'Avatar'> & { type AvatarToken = FullToken<'Avatar'> & {
avatarBg: string; avatarBg: string;
avatarColor: string; avatarColor: string;
avatarSizeBase: number;
avatarSizeLG: number;
avatarSizeSM: number;
avatarFontSizeBase: number;
avatarFontSizeLG: number;
avatarFontSizeSM: number;
avatarGroupOverlapping: number;
avatarGroupSpace: number;
avatarGroupBorderColor: string;
avatarBgColor: string; avatarBgColor: string;
}; };
@ -27,12 +64,12 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
iconCls, iconCls,
avatarBg, avatarBg,
avatarColor, avatarColor,
avatarSizeBase, containerSize,
avatarSizeLG, containerSizeLG,
avatarSizeSM, containerSizeSM,
avatarFontSizeBase, textFontSize,
avatarFontSizeLG, textFontSizeLG,
avatarFontSizeSM, textFontSizeSM,
borderRadius, borderRadius,
borderRadiusLG, borderRadiusLG,
borderRadiusSM, borderRadiusSM,
@ -89,14 +126,14 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
display: 'block', display: 'block',
}, },
...avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, borderRadius), ...avatarSizeStyle(containerSize, textFontSize, borderRadius),
[`&-lg`]: { [`&-lg`]: {
...avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, borderRadiusLG), ...avatarSizeStyle(containerSizeLG, textFontSizeLG, borderRadiusLG),
}, },
[`&-sm`]: { [`&-sm`]: {
...avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, borderRadiusSM), ...avatarSizeStyle(containerSizeSM, textFontSizeSM, borderRadiusSM),
}, },
'> img': { '> img': {
@ -110,55 +147,65 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
}; };
const genGroupStyle: GenerateStyle<AvatarToken> = token => { const genGroupStyle: GenerateStyle<AvatarToken> = token => {
const { componentCls, avatarGroupBorderColor, avatarGroupSpace } = token; const { componentCls, groupBorderColor, groupOverlapping, groupSpace } = token;
return { return {
[`${componentCls}-group`]: { [`${componentCls}-group`]: {
display: 'inline-flex', display: 'inline-flex',
[`${componentCls}`]: { [`${componentCls}`]: {
borderColor: avatarGroupBorderColor, borderColor: groupBorderColor,
}, },
[`> *:not(:first-child)`]: { [`> *:not(:first-child)`]: {
marginInlineStart: avatarGroupSpace, marginInlineStart: groupOverlapping,
},
},
[`${componentCls}-group-popover`]: {
[`${componentCls} + ${componentCls}`]: {
marginInlineStart: groupSpace,
}, },
}, },
}; };
}; };
export default genComponentStyleHook('Avatar', token => { export default genComponentStyleHook(
const { 'Avatar',
colorTextLightSolid, token => {
const { colorTextLightSolid, colorTextPlaceholder } = token;
const avatarToken = mergeToken<AvatarToken>(token, {
avatarBg: colorTextPlaceholder,
avatarColor: colorTextLightSolid,
});
return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
},
token => {
const {
controlHeight,
controlHeightLG,
controlHeightSM,
controlHeight, fontSize,
controlHeightLG, fontSizeLG,
controlHeightSM, fontSizeXL,
fontSizeHeading3,
fontSize, marginXS,
fontSizeLG, marginXXS,
fontSizeXL, colorBorderBg,
fontSizeHeading3, } = token;
return {
containerSize: controlHeight,
containerSizeLG: controlHeightLG,
containerSizeSM: controlHeightSM,
marginXS, textFontSize: Math.round((fontSizeLG + fontSizeXL) / 2),
colorBorderBg, textFontSizeLG: fontSizeHeading3,
colorTextPlaceholder, textFontSizeSM: fontSize,
} = token;
const avatarToken = mergeToken<AvatarToken>(token, { groupSpace: marginXXS,
avatarBg: colorTextPlaceholder, groupOverlapping: -marginXS,
avatarColor: colorTextLightSolid, groupBorderColor: colorBorderBg,
};
avatarSizeBase: controlHeight, },
avatarSizeLG: controlHeightLG, );
avatarSizeSM: controlHeightSM,
avatarFontSizeBase: Math.round((fontSizeLG + fontSizeXL) / 2),
avatarFontSizeLG: fontSizeHeading3,
avatarFontSizeSM: fontSize,
avatarGroupSpace: -marginXS,
avatarGroupBorderColor: colorBorderBg,
});
return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
});