import React, { useState, useRef } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, DropResult, Droppable, } from "@hello-pangea/dnd"; // hooks import { useLabel } from "hooks/store"; import useDraggableInPortal from "hooks/use-draggable-portal"; // components import { CreateUpdateLabelInline, DeleteLabelModal, ProjectSettingLabelGroup, ProjectSettingLabelItem, } from "components/labels"; // ui import { Button, Loader } from "@plane/ui"; import { EmptyState } from "components/common"; // images import emptyLabel from "public/empty-state/label.svg"; // types import { IIssueLabel } from "@plane/types"; const LABELS_ROOT = "labels.root"; export const ProjectSettingsLabelList: React.FC = observer(() => { // states const [showLabelForm, setLabelForm] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [selectDeleteLabel, setSelectDeleteLabel] = useState(null); const [isDraggingGroup, setIsDraggingGroup] = useState(false); // refs const scrollToRef = useRef(null); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel(); // portal const renderDraggable = useDraggableInPortal(); const newLabel = () => { setIsUpdating(false); setLabelForm(true); }; const onDragEnd = (result: DropResult) => { const { combine, draggableId, destination, source } = result; // return if dropped outside the DragDropContext if (!combine && !destination) return; const childLabel = draggableId.split(".")[2]; let parentLabel: string | undefined | null = destination?.droppableId?.split(".")[3]; const index = destination?.index || 0; const prevParentLabel: string | undefined | null = source?.droppableId?.split(".")[3]; const prevIndex = source?.index; if (combine && combine.draggableId) parentLabel = combine?.draggableId?.split(".")[2]; if (destination?.droppableId === LABELS_ROOT) parentLabel = null; if (result.reason == "DROP" && childLabel != parentLabel) { updateLabelPosition( workspaceSlug?.toString()!, projectId?.toString()!, childLabel, parentLabel, index, prevParentLabel == parentLabel, prevIndex ); return; } }; return ( <> setSelectDeleteLabel(null)} />

Labels

{showLabelForm && (
{ setLabelForm(false); setIsUpdating(false); }} />
)} {projectLabels ? ( projectLabels.length === 0 && !showLabelForm ? ( newLabel(), }} /> ) : ( projectLabelsTree && ( {(droppableProvided, droppableSnapshot) => (
{projectLabelsTree.map((label, index) => { if (label.children && label.children.length) { return ( {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => { const isGroup = droppableSnapshot.draggingFromThisWith?.split(".")[3] === "group"; setIsDraggingGroup(isGroup); return (
setSelectDeleteLabel(label)} draggableSnapshot={snapshot} isUpdating={isUpdating} setIsUpdating={setIsUpdating} />
); }}
); } return ( {renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
setSelectDeleteLabel(label)} isChild={false} />
))}
); })} {droppableProvided.placeholder}
)}
) ) ) : ( !showLabelForm && ( ) )}
); });