thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: update avatar group logic (#2672)

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-11-06 20:43:54 +05:30 committed by GitHub
parent 1dce72cb3c
commit 46f307fed5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/avatar/avatar-group.tsx
View File

@ -35,8 +35,11 @@ export const AvatarGroup: React.FC<Props> = (props) => {
// calculate total length of avatars inside the group // calculate total length of avatars inside the group
const totalAvatars = React.Children.toArray(children).length; const totalAvatars = React.Children.toArray(children).length;
// if avatars are equal to max + 1, then we need to show the last avatar as well, if avatars are more than max + 1, then we need to show the count of the remaining avatars
const maxAvatarsToRender = totalAvatars <= max + 1 ? max + 1 : max;
// slice the children to the maximum number of avatars // slice the children to the maximum number of avatars
const avatars = React.Children.toArray(children).slice(0, max); const avatars = React.Children.toArray(children).slice(0, maxAvatarsToRender);
// assign the necessary props from the AvatarGroup component to the Avatar components // assign the necessary props from the AvatarGroup component to the Avatar components
const avatarsWithUpdatedProps = avatars.map((avatar) => { const avatarsWithUpdatedProps = avatars.map((avatar) => {
@ -58,7 +61,7 @@ export const AvatarGroup: React.FC<Props> = (props) => {
{avatar} {avatar}
</div> </div>
))} ))}
{max < totalAvatars && ( {maxAvatarsToRender < totalAvatars && (
<Tooltip <Tooltip
tooltipContent={`${totalAvatars} total`} tooltipContent={`${totalAvatars} total`}
disabled={!showTooltip} disabled={!showTooltip}