danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Setting design
deploy to danak / build_and_deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
hamid zarghami
2026-06-17 16:14:18 +03:30
parent 92033fb94c
commit 9c6aa47cf7
12 changed files with 384 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
+53 -34
View File
@@ -1,6 +1,7 @@
import { Calendar, Paperclip2, Profile2User, Tag, TickSquare, type Icon } from "iconsax-react";
import { type FC, type ReactNode } from "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 = {
@@ -24,49 +25,67 @@ type Props = {
usersPopover?: ReactNode;
checklistPopover?: ReactNode;
attachmentPopover?: ReactNode;
datePopover?: ReactNode;
};
const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover, usersPopover, checklistPopover, attachmentPopover }) => {
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;
<>
<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);
const button = (
<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>{t(labelKey)}</span>
</button>
);
if (id === "labels" || id === "users" || id === "checklist" || id === "attachment") {
return (
<div key={id} className="relative">
{button}
{id === "labels"
? labelsPopover
: id === "users"
? usersPopover
: id === "checklist"
? checklistPopover
: attachmentPopover}
<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>{t(labelKey)}</span>
</button>
</div>
);
}
})}
</div>
return (
<div key={id}>
{button}
</div>
);
})}
</div>
{(Object.keys(popoverByTab) as PopoverTab[]).map((tab) =>
popoverByTab[tab] ? (
<TaskDetailPopoverPanel key={tab} anchorRef={anchorRefs.current[tab]}>
{popoverByTab[tab]}
</TaskDetailPopoverPanel>
) : null,
)}
</>
);
};