@graphcommerce/react-hook-form 3.1.3 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 3.2.0
+
+### Minor Changes
+
+- [#1496](https://github.com/graphcommerce-org/graphcommerce/pull/1496) [`858a3b3a3`](https://github.com/graphcommerce-org/graphcommerce/commit/858a3b3a3601cd00491219daf45557c2f1cc804b) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Only submit dirty forms, allow passing false to onSubmit
+
 ## 3.1.3
 
 ### Patch Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/react-hook-form",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {

package/src/ComposedForm/ComposedSubmit.tsx

@@ -57,13 +57,26 @@ export function ComposedSubmit(props: ComposedSubmitProps) {
 
     let formsToProcess = formEntries
     if (invalidKeys.length === 0) {
+      const onlyDirty = formEntries.filter(([, { form }]) => Boolean(form?.formState.isDirty))
+
       if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.log(
-          '[ComposedForm] All forms are valid, submitting...',
-          formsToProcess.map(([, { key }]) => key),
-        )
+        const all = formsToProcess.map(([, { key }]) => key).join(',')
+        const dirtyForms = onlyDirty.map(([, { key }]) => key).join(',')
+
+        if (dirtyForms.length > 0) {
+          // eslint-disable-next-line no-console
+          console.log(
+            `[ComposedForm] All forms are valid (${all}), following forms are dirty (${dirtyForms}), submitting...`,
+          )
+        } else {
+          // eslint-disable-next-line no-console
+          console.log(
+            `[ComposedForm] All forms are valid (${all}), no forms to submit, continuing...`,
+          )
+        }
       }
+
+      formsToProcess = onlyDirty
     } else {
       formsToProcess = formEntries.filter(([, { key }]) => invalidKeys.includes(key))
       if (process.env.NODE_ENV !== 'production') {

package/src/useFormGql.tsx

@@ -17,7 +17,11 @@ export type OnCompleteFn<Q> = (
 ) => void | Promise<void>
 
 type UseFormGraphQLCallbacks<Q, V> = {
-  onBeforeSubmit?: (variables: V) => V | Promise<V>
+  /**
+   * Allows you to modify the variablels computed by the form to make it compatible with the GraphQL
+   * Mutation. Also allows you to send false to skip submission.
+   */
+  onBeforeSubmit?: (variables: V) => V | false | Promise<V | false>
   onComplete?: OnCompleteFn<Q>
 }
 
@@ -56,7 +60,12 @@ export function useFormGql<Q, V>(
       })
 
       // Wait for the onBeforeSubmit to complete
-      if (onBeforeSubmit) variables = await onBeforeSubmit(variables)
+      if (onBeforeSubmit) {
+        const res = await onBeforeSubmit(variables)
+        if (res === false) return
+        variables = res
+      }
+      // if (variables === false) onInvalid?.(formValues, event)
 
       const result = await execute({ variables })
       if (onComplete && result.data) await onComplete(result, client)

package/src/useFormPersist.tsx

@@ -34,6 +34,8 @@ export type UseFormPersistOptions<
 /**
  * Will persist any dirty fields and store it in the sessionStorage/localStorage Will restory any
  * dirty fields when the form is initialized
+ *
+ * Todo: Use wath callback so it won't trigger a rerender
  */
 export function useFormPersist<V>(options: UseFormPersistOptions<V>) {
   const { form, name, storage = 'sessionStorage', exclude = [], persist = [] } = options