hamid zarghami
127 lines
3.8 KiB
TypeScript
127 lines
3.8 KiB
TypeScript
import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
|
||
import { More } from "iconsax-react";
|
||
import { type FC, useEffect, useState } from "react";
|
||
import { useTranslation } from "react-i18next";
|
||
import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox";
|
||
|
||
type Props = {
|
||
title: string;
|
||
checked: boolean;
|
||
onToggle: () => void;
|
||
onSave: (title: string) => void;
|
||
onDelete: () => void;
|
||
isSaving?: boolean;
|
||
};
|
||
|
||
const ChecklistItem: FC<Props> = ({ title, checked, onToggle, onSave, onDelete, isSaving = false }) => {
|
||
const { t } = useTranslation("global");
|
||
const [isEditing, setIsEditing] = useState(false);
|
||
const [editTitle, setEditTitle] = useState(title);
|
||
|
||
useEffect(() => {
|
||
if (!isEditing) {
|
||
setEditTitle(title);
|
||
}
|
||
}, [title, isEditing]);
|
||
|
||
const handleSave = () => {
|
||
const trimmed = editTitle.trim();
|
||
if (!trimmed || trimmed === title) {
|
||
setIsEditing(false);
|
||
setEditTitle(title);
|
||
return;
|
||
}
|
||
onSave(trimmed);
|
||
setIsEditing(false);
|
||
};
|
||
|
||
const handleCancel = () => {
|
||
setIsEditing(false);
|
||
setEditTitle(title);
|
||
};
|
||
|
||
if (isEditing) {
|
||
return (
|
||
<div className="flex gap-1 items-center">
|
||
<TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />
|
||
|
||
<div className="flex-1 flex gap-2 items-center">
|
||
<input
|
||
value={editTitle}
|
||
onChange={(e) => setEditTitle(e.target.value)}
|
||
onKeyDown={(e) => {
|
||
if (e.key === "Enter") handleSave();
|
||
if (e.key === "Escape") handleCancel();
|
||
}}
|
||
autoFocus
|
||
disabled={isSaving}
|
||
className="flex-1 h-[27px] px-2 text-xs bg-white/50 rounded outline-none"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={handleSave}
|
||
disabled={!editTitle.trim() || isSaving}
|
||
className="h-7 px-3 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
|
||
>
|
||
{t("save")}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleCancel}
|
||
disabled={isSaving}
|
||
className="h-7 px-3 rounded-lg bg-white/50 text-[#292D32] text-[11px] border border-white disabled:opacity-50"
|
||
>
|
||
{t("cancel")}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="flex gap-1 h-[27px] items-center">
|
||
<TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />
|
||
|
||
<div className="group flex justify-between flex-1 h-full hover:bg-white hover:bg-opacity-10 items-center px-2 relative">
|
||
<div className="text-xs">{title}</div>
|
||
|
||
<Popover className="relative">
|
||
<PopoverButton className="flex items-center opacity-0 group-hover:opacity-100 data-[open]:opacity-100 transition-opacity outline-none">
|
||
<More size={20} color="#000" />
|
||
</PopoverButton>
|
||
|
||
<PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
|
||
{({ close }) => (
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
close();
|
||
setIsEditing(true);
|
||
}}
|
||
className="w-full text-sm text-right"
|
||
>
|
||
ویرایش
|
||
</button>
|
||
|
||
<button
|
||
type="button"
|
||
onClick={() => {
|
||
close();
|
||
onDelete();
|
||
}}
|
||
className="w-full mt-3 text-sm text-right text-[#FF0000]"
|
||
>
|
||
پاک کردن
|
||
</button>
|
||
</>
|
||
)}
|
||
</PopoverPanel>
|
||
</Popover>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ChecklistItem;
|