import React, { Dispatch, SetStateAction, useState } from "react"; import { Disclosure, Transition } from "@headlessui/react"; // store import { observer } from "mobx-react-lite"; // icons import { ChevronDown, Pencil, Trash2 } from "lucide-react"; // types import { IIssueLabel } from "types"; import { Draggable, DraggableProvided, DraggableProvidedDragHandleProps, DraggableStateSnapshot, Droppable, } from "@hello-pangea/dnd"; import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block"; import { CreateUpdateLabelInline } from "./create-update-label-inline"; import { ProjectSettingLabelItem } from "./project-setting-label-item"; import useDraggableInPortal from "hooks/use-draggable-portal"; type Props = { label: IIssueLabel; labelChildren: IIssueLabel[]; handleLabelDelete: (label: IIssueLabel) => void; dragHandleProps: DraggableProvidedDragHandleProps; draggableSnapshot: DraggableStateSnapshot; isUpdating: boolean; setIsUpdating: Dispatch>; isDropDisabled: boolean; }; export const ProjectSettingLabelGroup: React.FC = observer((props) => { const { label, labelChildren, handleLabelDelete, draggableSnapshot: groupDragSnapshot, dragHandleProps, isUpdating, setIsUpdating, isDropDisabled, } = props; const [isEditLabelForm, setEditLabelForm] = useState(false); const renderDraggable = useDraggableInPortal(); const customMenuItems: ICustomMenuItem[] = [ { CustomIcon: Pencil, onClick: () => { setEditLabelForm(true); setIsUpdating(true); }, isVisible: true, text: "Edit label", }, { CustomIcon: Trash2, onClick: handleLabelDelete, isVisible: true, text: "Delete label", }, ]; return ( {({ open }) => ( <> {(droppableProvided) => (
<>
{isEditLabelForm ? ( { setEditLabelForm(false); setIsUpdating(false); }} /> ) : ( )}
{labelChildren.map((child, index) => (
{renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
handleLabelDelete(child)} draggableSnapshot={snapshot} dragHandleProps={provided.dragHandleProps!} setIsUpdating={setIsUpdating} isChild />
))}
))}
{droppableProvided.placeholder}
)}
)}
); });