import React, { useState, useRef } from "react"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; import { IIssueLabel } from "@plane/types"; // hooks import { Button, Loader } from "@plane/ui"; import { EmptyState } from "@/components/empty-state"; import { CreateUpdateLabelInline, DeleteLabelModal, ProjectSettingLabelGroup, ProjectSettingLabelItem, } from "@/components/labels"; import { EmptyStateType } from "@/constants/empty-state"; import { useLabel } from "@/hooks/store"; // components // ui // types // constants export const ProjectSettingsLabelList: React.FC = observer(() => { // states const [showLabelForm, setLabelForm] = useState(false); const [isUpdating, setIsUpdating] = useState(false); const [selectDeleteLabel, setSelectDeleteLabel] = useState(null); // refs const scrollToRef = useRef(null); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { projectLabels, updateLabelPosition, projectLabelsTree } = useLabel(); const newLabel = () => { setIsUpdating(false); setLabelForm(true); }; const onDrop = ( draggingLabelId: string, droppedParentId: string | null, droppedLabelId: string | undefined, dropAtEndOfList: boolean ) => { if (workspaceSlug && projectId) { updateLabelPosition( workspaceSlug?.toString(), projectId?.toString(), draggingLabelId, droppedParentId, droppedLabelId, dropAtEndOfList ); return; } }; return ( <> setSelectDeleteLabel(null)} />

Labels

{showLabelForm && (
{ setLabelForm(false); setIsUpdating(false); }} />
)} {projectLabels ? ( projectLabels.length === 0 && !showLabelForm ? (
) : ( projectLabelsTree && (
{projectLabelsTree.map((label, index) => { if (label.children && label.children.length) { return ( setSelectDeleteLabel(label)} isUpdating={isUpdating} setIsUpdating={setIsUpdating} isLastChild={index === projectLabelsTree.length - 1} onDrop={onDrop} /> ); } return ( setSelectDeleteLabel(label)} isChild={false} isLastChild={index === projectLabelsTree.length - 1} onDrop={onDrop} /> ); })}
) ) ) : ( !showLabelForm && ( ) )}
); });