import React, { forwardRef, useEffect } from "react"; import { useRouter } from "next/router"; import { observer } from "mobx-react-lite"; import { TwitterPicker } from "react-color"; import { Controller, SubmitHandler, useForm } from "react-hook-form"; import { Popover, Transition } from "@headlessui/react"; // hooks import { useLabel } from "hooks/store"; import useToast from "hooks/use-toast"; // ui import { Button, Input } from "@plane/ui"; // types import { IIssueLabel } from "@plane/types"; // fetch-keys import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label"; type Props = { labelForm: boolean; setLabelForm: React.Dispatch>; isUpdating: boolean; labelToUpdate?: IIssueLabel; onClose?: () => void; }; const defaultValues: Partial = { name: "", color: "rgb(var(--color-text-200))", }; export const CreateUpdateLabelInline = observer( forwardRef(function CreateUpdateLabelInline(props, ref) { const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props; // router const router = useRouter(); const { workspaceSlug, projectId } = router.query; // store hooks const { createLabel, updateLabel } = useLabel(); // toast alert const { setToastAlert } = useToast(); // form info const { handleSubmit, control, reset, formState: { errors, isSubmitting }, watch, setValue, setFocus, } = useForm({ defaultValues, }); const handleClose = () => { setLabelForm(false); reset(defaultValues); if (onClose) onClose(); }; const handleLabelCreate: SubmitHandler = async (formData) => { if (!workspaceSlug || !projectId || isSubmitting) return; await createLabel(workspaceSlug.toString(), projectId.toString(), formData) .then(() => { handleClose(); reset(defaultValues); }) .catch((error) => { setToastAlert({ title: "Oops!", type: "error", message: error?.error ?? "Error while adding the label", }); reset(formData); }); }; const handleLabelUpdate: SubmitHandler = async (formData) => { if (!workspaceSlug || !projectId || isSubmitting) return; await updateLabel(workspaceSlug.toString(), projectId.toString(), labelToUpdate?.id!, formData) .then(() => { reset(defaultValues); handleClose(); }) .catch((error) => { setToastAlert({ title: "Oops!", type: "error", message: error?.error ?? "Error while updating the label", }); reset(formData); }); }; /** * For settings focus on name input */ useEffect(() => { setFocus("name"); }, [setFocus, labelForm]); useEffect(() => { if (!labelToUpdate) return; setValue("name", labelToUpdate.name); setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"); }, [labelToUpdate, setValue]); useEffect(() => { if (labelToUpdate) { setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"); return; } setValue("color", getRandomLabelColor()); }, [labelToUpdate, setValue]); return (
{ e.preventDefault(); handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)(); }} className={`flex w-full scroll-m-8 items-center gap-2 bg-custom-background-100 ${labelForm ? "" : "hidden"}`} >
{({ open }) => ( <> ( onChange(value.hex)} /> )} /> )}
( )} />
); }) );