import { Dispatch, FC, SetStateAction } from "react"; import { Control, Controller } from "react-hook-form"; // ui import { TextArea } from "@plane/ui"; // types import { IApiToken } from "types/api_token"; import type { APIFormFields } from "./index"; interface APITokenDescriptionProps { generatedToken: IApiToken | null | undefined; control: Control<APIFormFields, any>; focusDescription: boolean; setFocusTitle: Dispatch<SetStateAction<boolean>>; setFocusDescription: Dispatch<SetStateAction<boolean>>; } export const APITokenDescription: FC<APITokenDescriptionProps> = (props) => { const { generatedToken, control, focusDescription, setFocusTitle, setFocusDescription } = props; return ( <Controller control={control} name="description" render={({ field: { value, onChange } }) => focusDescription ? ( <TextArea id="description" name="description" autoFocus={true} onBlur={() => { setFocusDescription(false); }} value={value} defaultValue={value} onChange={onChange} placeholder="Description" className="mt-3" rows={3} /> ) : ( <p onClick={() => { if (generatedToken != null) return; setFocusTitle(false); setFocusDescription(true); }} role="button" className={`${value.length === 0 ? "text-custom-text-400/60" : "text-custom-text-300"} text-lg pt-3`} > {value.length != 0 ? value : "Description"} </p> ) } /> ); };