forked from github/plane
92 lines
2.4 KiB
TypeScript
92 lines
2.4 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { Controller, useForm } from "react-hook-form";
|
|
|
|
// hooks
|
|
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
|
// types
|
|
import { ICustomAttribute } from "types";
|
|
|
|
type Props = {
|
|
attributeDetails: ICustomAttribute;
|
|
value: string | undefined;
|
|
onChange: (val: string) => void;
|
|
};
|
|
|
|
export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChange, value }) => {
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
|
|
const formRef = useRef(null);
|
|
|
|
const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { email: "" } });
|
|
|
|
const handleFormSubmit = (data: { email: string }) => {
|
|
setIsEditing(false);
|
|
|
|
onChange(data.email);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (isEditing) setFocus("email");
|
|
}, [isEditing, setFocus]);
|
|
|
|
useEffect(() => {
|
|
reset({ email: value?.toString() });
|
|
}, [reset, value]);
|
|
|
|
useEffect(() => {
|
|
const handleEscKeyPress = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") setIsEditing(false);
|
|
};
|
|
|
|
document.addEventListener("keydown", handleEscKeyPress);
|
|
|
|
return () => {
|
|
document.removeEventListener("keydown", handleEscKeyPress);
|
|
};
|
|
}, []);
|
|
|
|
useOutsideClickDetector(formRef, () => {
|
|
setIsEditing(false);
|
|
});
|
|
|
|
return (
|
|
<div className="flex-shrink-0 flex">
|
|
{!isEditing && (
|
|
<div
|
|
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
|
|
onClick={() => setIsEditing(true)}
|
|
>
|
|
{value && value !== "" ? (
|
|
<a href={`mailto:${value}`} target="_blank" rel="noopener noreferrer">
|
|
{value}
|
|
</a>
|
|
) : (
|
|
"Empty"
|
|
)}
|
|
</div>
|
|
)}
|
|
{isEditing && (
|
|
<form
|
|
onSubmit={handleSubmit(handleFormSubmit)}
|
|
className="flex items-center flex-grow"
|
|
ref={formRef}
|
|
>
|
|
<Controller
|
|
control={control}
|
|
name="email"
|
|
render={({ field }) => (
|
|
<input
|
|
type="email"
|
|
className="text-xs px-2 py-0.5 bg-custom-background-80 rounded w-full outline-none"
|
|
required={attributeDetails.is_required}
|
|
placeholder={attributeDetails.display_name}
|
|
{...field}
|
|
/>
|
|
)}
|
|
/>
|
|
</form>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|