45 lines
920 B
TypeScript
Executable File
45 lines
920 B
TypeScript
Executable File
import {
|
|
FieldValues,
|
|
FormProvider,
|
|
SubmitHandler,
|
|
UseFormReturn,
|
|
} from 'react-hook-form';
|
|
import {FocusEventHandler, ReactNode} from 'react';
|
|
|
|
interface Props<T extends FieldValues> {
|
|
children: ReactNode;
|
|
form: UseFormReturn<T>;
|
|
className?: string;
|
|
onSubmit: SubmitHandler<T>;
|
|
onBeforeSubmit?: () => void;
|
|
onBlur?: FocusEventHandler<HTMLFormElement>;
|
|
id?: string;
|
|
}
|
|
export function Form<T extends FieldValues>({
|
|
children,
|
|
onBeforeSubmit,
|
|
onSubmit,
|
|
form,
|
|
className,
|
|
id,
|
|
onBlur,
|
|
}: Props<T>) {
|
|
return (
|
|
<FormProvider {...form}>
|
|
<form
|
|
id={id}
|
|
onBlur={onBlur}
|
|
className={className}
|
|
onSubmit={e => {
|
|
// prevent parent forms from submitting, if nested
|
|
e.stopPropagation();
|
|
onBeforeSubmit?.();
|
|
form.handleSubmit(onSubmit)(e);
|
|
}}
|
|
>
|
|
{children}
|
|
</form>
|
|
</FormProvider>
|
|
);
|
|
}
|