forked from github/plane
149 lines
4.3 KiB
TypeScript
149 lines
4.3 KiB
TypeScript
import Image from "next/image";
|
|
import { useRouter } from "next/router";
|
|
|
|
import useSWR from "swr";
|
|
// services
|
|
import { WorkspaceService } from "services/workspace.service";
|
|
// icons
|
|
import User from "public/user.png";
|
|
import { Plus } from "lucide-react";
|
|
// types
|
|
import { IUser, IUserLite } from "types";
|
|
// fetch-keys
|
|
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
|
|
|
type AvatarProps = {
|
|
user?: Partial<IUser> | Partial<IUserLite> | null;
|
|
index?: number;
|
|
height?: string;
|
|
width?: string;
|
|
fontSize?: string;
|
|
showName?: boolean;
|
|
};
|
|
|
|
// services
|
|
const workspaceService = new WorkspaceService();
|
|
|
|
export const Avatar: React.FC<AvatarProps> = ({
|
|
user,
|
|
index,
|
|
height = "24px",
|
|
width = "24px",
|
|
fontSize = "12px",
|
|
showName,
|
|
}) => (
|
|
<div
|
|
className={`relative rounded border-[0.5px] ${
|
|
index && index !== 0 ? "-ml-3.5 border-custom-border-200" : "border-transparent"
|
|
}`}
|
|
style={{
|
|
height: height,
|
|
width: width,
|
|
}}
|
|
>
|
|
{user && user.avatar && user.avatar !== "" ? (
|
|
<div
|
|
className={`rounded border-[0.5px] ${
|
|
index ? "border-custom-border-200 bg-custom-background-100" : "border-transparent"
|
|
}`}
|
|
style={{
|
|
height: height,
|
|
width: width,
|
|
}}
|
|
>
|
|
<img
|
|
src={user.avatar}
|
|
className="absolute top-0 left-0 h-full w-full object-cover rounded"
|
|
alt={user.display_name}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div
|
|
className="grid place-items-center text-xs capitalize text-white rounded bg-gray-700 border-[0.5px] border-custom-border-200"
|
|
style={{
|
|
height: height,
|
|
width: width,
|
|
fontSize: fontSize,
|
|
}}
|
|
>
|
|
{user?.display_name?.charAt(0)}
|
|
</div>
|
|
)}
|
|
{showName && <span>{user?.display_name ? user?.display_name : user?.first_name}</span>}
|
|
</div>
|
|
);
|
|
|
|
type AsigneesListProps = {
|
|
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
|
|
userIds?: string[];
|
|
height?: string;
|
|
width?: string;
|
|
length?: number;
|
|
showLength?: boolean;
|
|
};
|
|
|
|
export const AssigneesList: React.FC<AsigneesListProps> = ({
|
|
users,
|
|
userIds,
|
|
height = "24px",
|
|
width = "24px",
|
|
length = 3,
|
|
showLength = true,
|
|
}) => {
|
|
const router = useRouter();
|
|
const { workspaceSlug } = router.query;
|
|
|
|
const { data: people } = useSWR(
|
|
workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
|
|
workspaceSlug ? () => workspaceService.fetchWorkspaceMembers(workspaceSlug as string) : null
|
|
);
|
|
|
|
if ((users && users.length === 0) || (userIds && userIds.length === 0))
|
|
return (
|
|
<div className="h-5 w-5 rounded border-[0.5px] border-custom-border-200 bg-custom-background-80">
|
|
<Image src={User} height="100%" width="100%" className="rounded-full" alt="No user" />
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{users && (
|
|
<>
|
|
{users.slice(0, length).map((user, index) => (
|
|
<Avatar key={user?.id} user={user} index={index} height={height} width={width} />
|
|
))}
|
|
{users.length > length ? (
|
|
<div className="-ml-3.5 relative h-6 w-6 rounded">
|
|
<div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
|
|
<Plus className="h-3 w-3 -mr-0.5" />
|
|
{users.length - length}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
</>
|
|
)}
|
|
{userIds && (
|
|
<>
|
|
{userIds.slice(0, length).map((userId, index) => {
|
|
const user = people?.find((p) => p.member.id === userId)?.member;
|
|
|
|
return <Avatar key={userId} user={user} index={index} height={height} width={width} />;
|
|
})}
|
|
{showLength ? (
|
|
userIds.length > length ? (
|
|
<div className="-ml-3.5 relative h-6 w-6 rounded">
|
|
<div className="flex items-center rounded bg-custom-background-80 text-xs capitalize h-6 w-6 text-custom-text-200 border-[0.5px] border-custom-border-300">
|
|
<Plus className="h-3 w-3 -mr-0.5" />
|
|
{userIds.length - length}
|
|
</div>
|
|
</div>
|
|
) : null
|
|
) : (
|
|
""
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|