thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: added outside click detector for custom attribute forms

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-10-03 14:57:17 +05:30
parent 4d158a6d8f
commit 2d3c1f93c1
5 changed files with 51 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
web/components/custom-attributes/attribute-display/email.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
// react-hook-form
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";
@ -14,6 +15,8 @@ type Props = {
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 }) => {
@ -42,6 +45,10 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
};
}, []);
useOutsideClickDetector(formRef, () => {
setIsEditing(false);
});
return (
<div className="flex-shrink-0">
{!isEditing && (
@ -59,7 +66,7 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
</div>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<Controller
control={control}
name="email"
@ -68,6 +75,7 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
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}
/>
)}

16
web/components/custom-attributes/attribute-display/number.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
// react-hook-form
import { useEffect, useRef, useState } from "react";
import { Controller, useForm } from "react-hook-form";
// hooks
import useOutsideClickDetector from "hooks/use-outside-click-detector";
// ui
import { ProgressBar } from "components/ui";
// types
@ -16,6 +17,8 @@ type Props = {
export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onChange, value }) => {
const [isEditing, setIsEditing] = useState(false);
const formRef = useRef(null);
const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { number: "" } });
const handleFormSubmit = (data: { number: string }) => {
@ -49,6 +52,10 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
};
}, []);
useOutsideClickDetector(formRef, () => {
setIsEditing(false);
});
const extraSettings = attributeDetails.extra_settings;
return (
@ -100,7 +107,7 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
</div>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<Controller
control={control}
name="number"
@ -112,6 +119,7 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
min={extraSettings.divided_by ? 0 : undefined}
max={extraSettings.divided_by ?? undefined}
required={attributeDetails.is_required}
placeholder={attributeDetails.display_name}
{...field}
/>
)}

18
web/components/custom-attributes/attribute-display/text.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
// react-hook-form
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";
@ -18,6 +19,8 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
}) => {
const [isEditing, setIsEditing] = useState(false);
const formRef = useRef(null);
const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { text: "" } });
const handleFormSubmit = (data: { text: string }) => {
@ -48,6 +51,10 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
};
}, []);
useOutsideClickDetector(formRef, () => {
setIsEditing(false);
});
return (
<div className="flex-shrink-0">
{!isEditing && (
@ -55,11 +62,11 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
onClick={() => setIsEditing(true)}
>
{value && value !== "" ? value : `Enter ${attributeDetails.display_name}`}
{value && value !== "" ? value : "Empty"}
</div>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<Controller
control={control}
name="text"
@ -68,6 +75,7 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
type="text"
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}
/>
)}

16
web/components/custom-attributes/attribute-display/url.tsx
View File

@ -1,7 +1,8 @@
import { useEffect, useState } from "react";
// react-hook-form
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";
@ -18,6 +19,8 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
}) => {
const [isEditing, setIsEditing] = useState(false);
const formRef = useRef(null);
const { control, handleSubmit, reset, setFocus } = useForm({ defaultValues: { url: "" } });
const handleFormSubmit = (data: { url: string }) => {
@ -46,6 +49,10 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
};
}, []);
useOutsideClickDetector(formRef, () => {
setIsEditing(false);
});
return (
<div className="flex-shrink-0">
{!isEditing && (
@ -63,7 +70,7 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
</div>
)}
{isEditing && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center">
<form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
<Controller
control={control}
name="url"
@ -72,6 +79,7 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
type="url"
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}
/>
)}

4
web/components/custom-attributes/object-modal.tsx
View File

@ -221,7 +221,7 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
<SecondaryButton onClick={handleClose}>Close</SecondaryButton>
)}
<PrimaryButton type="submit" loading={isSubmitting}>
{data
{objectId
? isSubmitting
? "Saving..."
: "Save changes"
@ -234,7 +234,7 @@ export const ObjectModal: React.FC<Props> = observer((props) => {
</form>
{objectId && (
<>
<div className="px-6 pb-5">
<div className="px-6">
<h4 className="font-medium">Attributes</h4>
<div className="mt-2 space-y-2">
{customAttributes.fetchObjectDetailsLoader ? (