import { FC, useState, Fragment, useEffect } from "react"; import { Plus, X } from "lucide-react"; import { Controller, useForm } from "react-hook-form"; import { TwitterPicker } from "react-color"; import { Popover, Transition } from "@headlessui/react"; // hooks import { useIssueDetail } from "hooks/store"; import useToast from "hooks/use-toast"; // ui import { Input } from "@plane/ui"; // types import { TLabelOperations } from "./root"; import { IIssueLabel } from "@plane/types"; type ILabelCreate = { workspaceSlug: string; projectId: string; issueId: string; labelOperations: TLabelOperations; disabled?: boolean; }; const defaultValues: Partial = { name: "", color: "#ff0000", }; export const LabelCreate: FC = (props) => { const { workspaceSlug, projectId, issueId, labelOperations, disabled = false } = props; // hooks const { setToastAlert } = useToast(); const { issue: { getIssueById }, } = useIssueDetail(); // state const [isCreateToggle, setIsCreateToggle] = useState(false); const handleIsCreateToggle = () => setIsCreateToggle(!isCreateToggle); // react hook form const { handleSubmit, formState: { errors, isSubmitting }, reset, control, setFocus, } = useForm>({ defaultValues, }); useEffect(() => { if (!isCreateToggle) return; setFocus("name"); reset(); }, [isCreateToggle, reset, setFocus]); const handleLabel = async (formData: Partial) => { if (!workspaceSlug || !projectId || isSubmitting) return; try { const issue = getIssueById(issueId); const labelResponse = await labelOperations.createLabel(workspaceSlug, projectId, formData); const currentLabels = [...(issue?.label_ids || []), labelResponse.id]; await labelOperations.updateIssue(workspaceSlug, projectId, issueId, { label_ids: currentLabels }); reset(defaultValues); } catch (error) { setToastAlert({ title: "Label creation failed", type: "error", message: "Label creation failed. Please try again sometime later.", }); } }; return ( <>
{isCreateToggle ? : }
{isCreateToggle ? "Cancel" : "New"}
{isCreateToggle && (
( <> {value && value?.trim() !== "" && ( )} onChange(value.hex)} /> )} />
( )} /> )} ); };