62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { Avatar, Tooltip } from 'antd';
|
|
import React, { useCallback, useMemo } from 'react';
|
|
import { InlineMember } from '@/types/teamMembers/inlineMember.types';
|
|
|
|
interface AvatarsProps {
|
|
members: InlineMember[];
|
|
maxCount?: number;
|
|
}
|
|
|
|
const Avatars: React.FC<AvatarsProps> = React.memo(({ members, maxCount }) => {
|
|
const stopPropagation = useCallback((e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
}, []);
|
|
|
|
const renderAvatar = useCallback(
|
|
(member: InlineMember, index: number) => (
|
|
<Tooltip
|
|
key={member.team_member_id || index}
|
|
title={member.end && member.names ? member.names.join(', ') : member.name}
|
|
>
|
|
{member.avatar_url ? (
|
|
<span onClick={stopPropagation}>
|
|
<Avatar src={member.avatar_url} size={28} key={member.team_member_id || index} />
|
|
</span>
|
|
) : (
|
|
<span onClick={stopPropagation}>
|
|
<Avatar
|
|
size={28}
|
|
key={member.team_member_id || index}
|
|
style={{
|
|
backgroundColor: member.color_code || '#ececec',
|
|
fontSize: '14px',
|
|
}}
|
|
>
|
|
{member.end && member.names ? member.name : member.name?.charAt(0).toUpperCase()}
|
|
</Avatar>
|
|
</span>
|
|
)}
|
|
</Tooltip>
|
|
),
|
|
[stopPropagation]
|
|
);
|
|
|
|
const visibleMembers = useMemo(() => {
|
|
return maxCount ? members.slice(0, maxCount) : members;
|
|
}, [members, maxCount]);
|
|
|
|
const avatarElements = useMemo(() => {
|
|
return visibleMembers.map((member, index) => renderAvatar(member, index));
|
|
}, [visibleMembers, renderAvatar]);
|
|
|
|
return (
|
|
<div onClick={stopPropagation}>
|
|
<Avatar.Group>{avatarElements}</Avatar.Group>
|
|
</div>
|
|
);
|
|
});
|
|
|
|
Avatars.displayName = 'Avatars';
|
|
|
|
export default Avatars;
|