add pre submit hook for forms

aboutbits · Dec 3, 2024 · 8e4248c · 8e4248c
1 parent 8587927
commit 8e4248c
Showing 1 changed file with 22 additions and 10 deletions.
diff --git a/src/components/react-hook-form/Form.tsx b/src/components/react-hook-form/Form.tsx
@@ -1,4 +1,9 @@
-import { ForwardedRef, forwardRef } from 'react'
+import {
+  ComponentPropsWithRef,
+  FormEvent,
+  ForwardedRef,
+  forwardRef,
+} from 'react'
 import {
   FieldValues,
   FormProvider,
@@ -8,22 +13,18 @@ import {
 
 type NoInfer<T> = [T][T extends unknown ? 0 : never]
 
-type HTMLFormProps = React.DetailedHTMLProps<
-  React.FormHTMLAttributes<HTMLFormElement>,
-  HTMLFormElement
->
-
 export type FormProps<
   TFieldValues extends FieldValues = FieldValues,
   TContext = unknown,
   TTransformedValues extends FieldValues | undefined = undefined,
-> = Omit<HTMLFormProps, 'onSubmit'> & {
+> = Omit<ComponentPropsWithRef<'form'>, 'onSubmit'> & {
   form: UseFormReturn<TFieldValues, TContext, TTransformedValues>
   onSubmit?: TTransformedValues extends undefined
     ? SubmitHandler<NoInfer<TFieldValues>>
     : TTransformedValues extends FieldValues
       ? SubmitHandler<NoInfer<TTransformedValues>>
       : never
+  onPreSubmit?: (e: FormEvent<HTMLFormElement>) => void | Promise<void>
 }
 
 export const Form = forwardRef(function Form<
@@ -34,19 +35,30 @@ export const Form = forwardRef(function Form<
   {
     form,
     onSubmit,
+    onPreSubmit,
     children,
     ...props
   }: FormProps<TFieldValues, TContext, TTransformedValues>,
   ref: ForwardedRef<HTMLFormElement>,
 ) {
+  const handleFormSubmit = onSubmit
+    ? async (e: FormEvent<HTMLFormElement>) => {
+        if (onPreSubmit) {
+          await onPreSubmit(e)
+        }
+
+        return form.handleSubmit(onSubmit)
+      }
+    : undefined
+
   return (
     <FormProvider<TFieldValues, TContext, TTransformedValues> {...form}>
       <form
         {...props}
         ref={ref}
-        onSubmit={(event) => {
-          onSubmit ? void form.handleSubmit(onSubmit)(event) : undefined
-        }}
+        onSubmit={
+          handleFormSubmit ? (e) => void handleFormSubmit(e) : undefined
+        }
       >
         {children}
       </form>