import React, { forwardRef, useEffect } from "react"; import { useRouter } from "next/router"; import { TwitterPicker } from "react-color"; import { Controller, SubmitHandler, useForm } from "react-hook-form"; // stores import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; // headless ui import { Popover, Transition } from "@headlessui/react"; // ui import { Button, Input } from "@plane/ui"; // types import { IIssueLabels } from "types"; // fetch-keys import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label"; import useToast from "hooks/use-toast"; type Props = { labelForm: boolean; setLabelForm: React.Dispatch>; isUpdating: boolean; labelToUpdate: IIssueLabels | null; 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 const { projectLabel: projectLabelStore } = useMobxStore(); const { setToastAlert } = useToast(); 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 projectLabelStore .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 projectLabelStore .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 scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${ labelForm ? "" : "hidden" }`} >
{({ open }) => ( <> ( onChange(value.hex)} /> )} /> )}
( )} />
); }) );