hamid zarghami
93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { Calendar, Paperclip2, Profile2User, Tag, TickSquare, type Icon } from "iconsax-react";
|
|
import { type FC, type ReactNode, useRef } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import TaskDetailPopoverPanel from "./TaskDetailPopoverPanel";
|
|
import type { TaskDetailTab } from "./types";
|
|
|
|
type TabItem = {
|
|
id: TaskDetailTab;
|
|
icon: Icon;
|
|
labelKey: string;
|
|
};
|
|
|
|
const TABS: TabItem[] = [
|
|
{ id: "labels", icon: Tag, labelKey: "taskmanager.task_detail.labels" },
|
|
{ id: "users", icon: Profile2User, labelKey: "taskmanager.task_detail.user_management" },
|
|
{ id: "checklist", icon: TickSquare, labelKey: "taskmanager.task_detail.checklist" },
|
|
{ id: "attachment", icon: Paperclip2, labelKey: "taskmanager.task_detail.attachment" },
|
|
{ id: "date", icon: Calendar, labelKey: "taskmanager.task_detail.date_settings" },
|
|
];
|
|
|
|
type Props = {
|
|
activeTab: TaskDetailTab | null;
|
|
onTabChange: (tab: TaskDetailTab) => void;
|
|
labelsPopover?: ReactNode;
|
|
usersPopover?: ReactNode;
|
|
checklistPopover?: ReactNode;
|
|
attachmentPopover?: ReactNode;
|
|
datePopover?: ReactNode;
|
|
};
|
|
|
|
const POPOVER_TABS = new Set<TaskDetailTab>(["labels", "users", "checklist", "attachment", "date"]);
|
|
|
|
type PopoverTab = "labels" | "users" | "checklist" | "attachment" | "date";
|
|
|
|
const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover, usersPopover, checklistPopover, attachmentPopover, datePopover }) => {
|
|
const { t } = useTranslation("global");
|
|
const anchorRefs = useRef<Record<PopoverTab, { current: HTMLElement | null }>>({
|
|
labels: { current: null },
|
|
users: { current: null },
|
|
checklist: { current: null },
|
|
attachment: { current: null },
|
|
date: { current: null },
|
|
});
|
|
|
|
const popoverByTab: Record<PopoverTab, ReactNode> = {
|
|
labels: labelsPopover,
|
|
users: usersPopover,
|
|
checklist: checklistPopover,
|
|
attachment: attachmentPopover,
|
|
date: datePopover,
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
{TABS.map(({ id, icon: Icon, labelKey }) => {
|
|
const isActive = activeTab === id;
|
|
const hasPopover = POPOVER_TABS.has(id);
|
|
|
|
return (
|
|
<div
|
|
key={id}
|
|
ref={(element) => {
|
|
if (!hasPopover) return;
|
|
anchorRefs.current[id as PopoverTab].current = element;
|
|
}}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => onTabChange(id)}
|
|
className={`flex items-center gap-1.5 border rounded-lg px-3 py-2 text-[11px] cursor-pointer transition-colors ${isActive ? "bg-[#4A4A4A] text-white border-transparent" : "bg-white/50 text-[#292D32] border-white"}`}
|
|
>
|
|
<Icon size={16} color={isActive ? "#FFFFFF" : "#292D32"} />
|
|
<span className="hidden sm:inline">{t(labelKey)}</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{(Object.keys(popoverByTab) as PopoverTab[]).map((tab) =>
|
|
popoverByTab[tab] ? (
|
|
<TaskDetailPopoverPanel key={tab} anchorRef={anchorRefs.current[tab]}>
|
|
{popoverByTab[tab]}
|
|
</TaskDetailPopoverPanel>
|
|
) : null,
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TaskDetailActionBar;
|