Added getFormProps() to useForm()

jalik · Apr 15, 2024 · 35d46fb · 35d46fb
1 parent 4d78ccc
commit 35d46fb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 17 deletions.
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
@@ -22,19 +22,11 @@ function Form<V extends Values = Values, E = Error, R = any> (props: FormProps<V
     ...others
   } = props
 
-  const {
-    handleReset,
-    handleSubmit
-  } = context
+  const { getFormProps } = context
 
   return (
     <FormContext.Provider value={context}>
-      <form
-        method="post"
-        {...others}
-        onReset={handleReset}
-        onSubmit={handleSubmit}
-      >
+      <form {...getFormProps(others)}>
         {children}
       </form>
     </FormContext.Provider>

diff --git a/src/useForm.ts b/src/useForm.ts
@@ -78,6 +78,11 @@ export interface UseFormHook<V extends Values, E, R> extends FormState<V, E, R>
     name: string,
     props?: React.ComponentProps<Component>
   ): React.ComponentProps<Component>;
+  /**
+   * Returns form props.
+   * @param props
+   */
+  getFormProps (props?: React.ComponentProps<'form'>): React.ComponentProps<'form'>;
   /**
    * Returns field's initial value.
    * @param name
@@ -981,6 +986,17 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
     return finalProps
   }, [formDisabled, getValue, handleBlur, handleChange, state])
 
+  /**
+   * Returns form props.
+   */
+  const getFormProps = useCallback((props: React.ComponentProps<'form'>): React.ComponentProps<'form'> => {
+    return {
+      ...props,
+      onReset: handleReset,
+      onSubmit: handleSubmit
+    }
+  }, [handleReset, handleSubmit])
+
   // Keep track of mount state.
   useEffect(() => {
     mountedRef.current = true
@@ -1040,32 +1056,33 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
     clearTouchedFields,
     getButtonProps,
     getFieldProps,
+    getFormProps,
     getInitialValue,
     getValue,
     handleBlur,
     handleChange,
     handleReset,
     handleSetValue,
     handleSubmit,
-    setInitialValues,
     load,
     removeFields,
     reset,
     setError,
     setErrors,
+    setInitialValues,
+    setTouchedField,
+    setTouchedFields,
     setValue,
     setValues,
     submit: debouncedValidateAndSubmit,
-    setTouchedField,
-    setTouchedFields,
     validate: debouncedValidate,
     validateField: debouncedValidateField,
     validateFields: debouncedValidateFields
   }), [state, formDisabled, clear, clearErrors, clearTouchedFields, getButtonProps,
-    getFieldProps, getInitialValue, getValue, handleBlur, handleChange, handleReset, handleSetValue,
-    handleSubmit, setInitialValues, load, removeFields, reset, setError, setErrors, setValue,
-    setValues, debouncedValidateAndSubmit, setTouchedField, setTouchedFields, debouncedValidate,
-    debouncedValidateField, debouncedValidateFields])
+    getFieldProps, getFormProps, getInitialValue, getValue, handleBlur, handleChange, handleReset,
+    handleSetValue, handleSubmit, setInitialValues, load, removeFields, reset, setError, setErrors,
+    setValue, setValues, debouncedValidateAndSubmit, setTouchedField, setTouchedFields,
+    debouncedValidate, debouncedValidateField, debouncedValidateFields])
 }
 
 export default useForm
diff --git a/test/useForm.test.ts b/test/useForm.test.ts
@@ -387,6 +387,26 @@ describe('useForm()', () => {
     })
   })
 
+  describe('getFormProps()', () => {
+    const initialValues = { username: '' }
+    const { result } = renderHook(() => {
+      return useForm({
+        initialValues,
+        onSubmit: () => Promise.resolve(true)
+      })
+    })
+
+    describe('without custom props', () => {
+      it('should return default props', () => {
+        const props = result.current.getFormProps()
+        expect(props).toBeDefined()
+        expect(props.method).toBe('post')
+        expect(typeof props.onSubmit).toBe('function')
+        expect(typeof props.onReset).toBe('function')
+      })
+    })
+  })
+
   describe('getInitialValue(name)', () => {
     it('should return initial value', () => {
       const initialValues = { username: 'jalik' }