import React, { useEffect, useState } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { Controller, useForm } from "react-hook-form"; import { TwitterPicker } from "react-color"; import { Popover, Transition } from "@headlessui/react"; // mobx store import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // ui import { Input } from "@plane/ui"; import { IssueLabelSelect } from "../select"; // icons import { Plus, X } from "lucide-react"; // types import { IIssue, IIssueLabel } from "types"; type Props = { issueDetails: IIssue | undefined; labelList: string[]; submitChanges: (formData: any) => void; isNotAllowed: boolean; uneditable: boolean; }; const defaultValues: Partial = { name: "", color: "#ff0000", }; export const SidebarLabelSelect: React.FC = observer((props) => { const { issueDetails, labelList, submitChanges, isNotAllowed, uneditable } = props; // states const [createLabelForm, setCreateLabelForm] = useState(false); // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // toast const { setToastAlert } = useToast(); // mobx store const { projectLabel: { projectLabels, createLabel }, } = useMobxStore(); // form info const { handleSubmit, formState: { errors, isSubmitting }, reset, control, setFocus, } = useForm>({ defaultValues, }); const handleNewLabel = async (formData: Partial) => { if (!workspaceSlug || !projectId || isSubmitting) return; await createLabel(workspaceSlug.toString(), projectId.toString(), formData) .then((res) => { reset(defaultValues); submitChanges({ labels: [...(issueDetails?.labels ?? []), res.id] }); setCreateLabelForm(false); }) .catch((error) => { setToastAlert({ type: "error", title: "Error!", message: error?.error ?? "Something went wrong. Please try again.", }); reset(formData); }); }; useEffect(() => { if (!createLabelForm) return; setFocus("name"); reset(); }, [createLabelForm, reset, setFocus]); return (
{labelList?.map((labelId) => { const label = projectLabels?.find((l) => l.id === labelId); if (label) return ( ); })} submitChanges({ labels: val })} projectId={issueDetails?.project_detail.id ?? ""} label={ Select Label } disabled={uneditable} /> {!isNotAllowed && ( )}
{createLabelForm && (
( <> {value && value?.trim() !== "" && ( )} onChange(value.hex)} /> )} />
( )} /> )}
); });