Disable all inputs with disabled form prop

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-02-19 14:40:39 +04:00
parent c74e7e23f6
commit c36156c18a
2 changed files with 7 additions and 3 deletions

View File

@@ -4,6 +4,7 @@ import type { ArrayPath, Control, FieldValue, FieldValues, Path, UseFormRegister
import { useFieldArray } from "react-hook-form";
type Props<TFieldValues extends FieldValues = FieldValues> = {
disabled: boolean;
control: Control<TFieldValues>;
register: UseFormRegister<TFieldValues>;
};
@@ -13,7 +14,7 @@ type Props<TFieldValues extends FieldValues = FieldValues> = {
*/
export function EmailsField<
TFieldValues extends FieldValues = FieldValues,
>({ control, register }: Props<TFieldValues>) {
>({ control, register, disabled }: Props<TFieldValues>) {
const { __ } = useTranslate();
const { fields, append, remove } = useFieldArray({
name: "additionalEmailAddresses" as ArrayPath<TFieldValues>,
@@ -29,11 +30,13 @@ export function EmailsField<
className="w-full"
{...register(`additionalEmailAddresses.${index}` as Path<TFieldValues>)}
type="email"
disabled={disabled}
/>
<Button
icon={IconTrashCan}
variant="tertiary"
onClick={() => remove(index)}
disabled={disabled}
/>
</div>
))}
@@ -42,6 +45,7 @@ export function EmailsField<
type="button"
icon={IconPlusLarge}
onClick={() => append("" as FieldValue<TFieldValues>)}
disabled={disabled}
>
{__("Add email")}
</Button>

View File

@@ -159,7 +159,7 @@ export function PersonForm(props: {
return (
<form onSubmit={e => void handleSubmit(e)} className="space-y-4">
<Field label={__("Full name *")} {...register("fullName")} type="text" />
<Field label={__("Full name *")} {...register("fullName")} type="text" disabled={disabled} />
{id
? (
<>
@@ -235,7 +235,7 @@ export function PersonForm(props: {
placeholder={__("e.g. CEO, CFO, etc.")}
disabled={disabled}
/>
<EmailsField control={control} register={register} />
<EmailsField control={control} register={register} disabled={disabled} />
<Field label={__("Contract start date")}>
<Input
{...register("contractStartDate")}