vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 1.1k Packages Projects Releases Wiki Activity

Fix: avatar group buggy with +0 (#7044)

Browse Source 
* fix AvatarGroup, refactor a bit

* handle cases where truncated avatars are 2 digits

* use slice, and add comment

* update comment

* Update packages/ui/components/avatar/AvatarGroup.tsx

* fix classname order issue

---------

Co-authored-by: Peer Richelsen <peer@cal.com>
This commit is contained in:
Amir Fakhrullah
2023-02-11 16:25:36 +00:00
committed by GitHub
co-authored by Peer Richelsen
parent 1f74837189
commit f87254cdc3
1 changed files with 34 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/avatar/AvatarGroup.tsx
+34 -37
View File
@@ -16,48 +16,45 @@ export type AvatarGroupProps = {
};
export const AvatarGroup = function AvatarGroup(props: AvatarGroupProps) {
const avatars = props.items.slice(0, 4);
const LENGTH = props.items.length;
const truncateAfter = props.truncateAfter || 4;
/**
* First, filter all the avatars object that have image
* Then, slice it until before `truncateAfter` index
*/
const displayedAvatars = props.items.filter((avatar) => avatar.image).slice(0, truncateAfter);
const numTruncatedAvatars = LENGTH - displayedAvatars.length;
return (
<ul className={classNames("flex items-center", props.className)}>
{avatars.map((item, enumerator) => {
if (item.image != null) {
if (LENGTH > truncateAfter && enumerator === truncateAfter - 1) {
return (
<li key={enumerator} className="relative -mr-[4px] inline-block ">
<div className="relative">
<div className="h-90 relative min-w-full scale-105 transform border-gray-200 ">
<Avatar className="" imageSrc={item.image} alt={item.alt || ""} size={props.size} />
</div>
</div>
<div
className={classNames(
"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white",
props.size === "sm" ? "text-base" : "text-2xl"
)}>
<span>+{LENGTH - truncateAfter - 1}</span>
</div>
</li>
);
}
// Always display the first Four items items
return (
<li key={enumerator} className="-mr-[4px] inline-block">
<Avatar
className="border-gray-200"
imageSrc={item.image}
title={item.title}
alt={item.alt || ""}
accepted={props.accepted}
size={props.size}
href={item.href}
/>
</li>
);
}
})}
{displayedAvatars.map((item, idx) => (
<li key={idx} className="-mr-[4px] inline-block">
<Avatar
className="border-gray-200"
imageSrc={item.image}
title={item.title}
alt={item.alt || ""}
accepted={props.accepted}
size={props.size}
href={item.href}
/>
</li>
))}
{numTruncatedAvatars > 0 && (
<li
className={classNames(
"bg-darkgray-300 relative -mr-[4px] mb-1 inline-flex justify-center overflow-hidden rounded-full",
props.size === "sm" ? "min-w-6 h-6" : "min-w-16 h-16"
)}>
<span
className={classNames(
"m-auto px-1 text-center text-white",
props.size === "sm" ? "text-[12px]" : "text-2xl"
)}>
+{numTruncatedAvatars}
</span>
</li>
)}
</ul>
);
};