refactor!: move submission function to take object instead of two arg…

…uments
TanStack · Dec 5, 2023 · 1dc351e · 1dc351e
1 parent ccb1891
commit 1dc351e
Show file tree

Hide file tree

Showing 18 changed files with 48 additions and 43 deletions.
diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md
@@ -15,7 +15,7 @@ export default function App() {
     defaultValues: {
       fullName: '',
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ values }) => {
       // Do something with form data
       console.log(values)
     },

diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx
@@ -20,9 +20,9 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values);
+      console.log(value);
     },
   });
 

diff --git a/examples/react/valibot/src/index.tsx b/examples/react/valibot/src/index.tsx
@@ -22,9 +22,9 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values);
+      console.log(value);
     },
     // Add a validator to support Valibot usage in Form and Field
     validatorAdapter: valibotValidator,

diff --git a/examples/react/yup/src/index.tsx b/examples/react/yup/src/index.tsx
@@ -22,9 +22,9 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values);
+      console.log(value);
     },
     // Add a validator to support Yup usage in Form and Field
     validatorAdapter: yupValidator,

diff --git a/examples/react/zod/src/index.tsx b/examples/react/zod/src/index.tsx
@@ -22,9 +22,9 @@ export default function App() {
       firstName: "",
       lastName: "",
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values);
+      console.log(value);
     },
     // Add a validator to support Zod usage in Form and Field
     validatorAdapter: zodValidator,

diff --git a/examples/solid/simple/src/index.tsx b/examples/solid/simple/src/index.tsx
@@ -24,9 +24,9 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values)
+      console.log(value)
     },
   }))
 

diff --git a/examples/solid/valibot/src/index.tsx b/examples/solid/valibot/src/index.tsx
@@ -26,9 +26,9 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values)
+      console.log(value)
     },
     // Add a validator to support Valibot usage in Form and Field
     validatorAdapter: valibotValidator,

diff --git a/examples/solid/yup/src/index.tsx b/examples/solid/yup/src/index.tsx
@@ -26,9 +26,9 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values)
+      console.log(value)
     },
     // Add a validator to support Yup usage in Form and Field
     validatorAdapter: yupValidator,

diff --git a/examples/solid/zod/src/index.tsx b/examples/solid/zod/src/index.tsx
@@ -26,9 +26,9 @@ function App() {
       firstName: '',
       lastName: '',
     },
-    onSubmit: async (values) => {
+    onSubmit: async ({ value }) => {
       // Do something with form data
-      console.log(values)
+      console.log(value)
     },
     // Add a validator to support Zod usage in Form and Field
     validatorAdapter: zodValidator,

diff --git a/examples/vue/simple/src/App.vue b/examples/vue/simple/src/App.vue
@@ -7,9 +7,9 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
+  onSubmit: async ({ value }) => {
     // Do something with form data
-    alert(JSON.stringify(values))
+    alert(JSON.stringify(value))
   },
 })
 

diff --git a/examples/vue/valibot/src/App.vue b/examples/vue/valibot/src/App.vue
@@ -9,9 +9,9 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
+  onSubmit: async ({ value }) => {
     // Do something with form data
-    alert(JSON.stringify(values))
+    alert(JSON.stringify(value))
   },
   // Add a validator to support Valibot usage in Form and Field
   validatorAdapter: valibotValidator,

diff --git a/examples/vue/yup/src/App.vue b/examples/vue/yup/src/App.vue
@@ -9,9 +9,9 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
+  onSubmit: async ({ value }) => {
     // Do something with form data
-    alert(JSON.stringify(values))
+    alert(JSON.stringify(value))
   },
   // Add a validator to support Yup usage in Form and Field
   validatorAdapter: yupValidator,

diff --git a/examples/vue/zod/src/App.vue b/examples/vue/zod/src/App.vue
@@ -9,9 +9,9 @@ const form = useForm({
     firstName: '',
     lastName: '',
   },
-  onSubmit: async (values) => {
+  onSubmit: async ({ value }) => {
     // Do something with form data
-    alert(JSON.stringify(values))
+    alert(JSON.stringify(value))
   },
   // Add a validator to support Zod usage in Form and Field
   validatorAdapter: zodValidator,

diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts
@@ -593,7 +593,6 @@ export class FieldApi<
   }
 
   handleChange = (updater: Updater<TData>) => {
-    debugger
     this.setValue(updater, { touch: true })
   }
 

diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts
@@ -59,14 +59,14 @@ export type FormOptions<TData, ValidatorType> = {
   asyncDebounceMs?: number
   validatorAdapter?: ValidatorType
   validators?: FormValidators<TData, ValidatorType>
-  onSubmit?: (
-    values: TData,
-    formApi: FormApi<TData, ValidatorType>,
-  ) => any | Promise<any>
-  onSubmitInvalid?: (
-    values: TData,
-    formApi: FormApi<TData, ValidatorType>,
-  ) => void
+  onSubmit?: (props: {
+    value: TData
+    formApi: FormApi<TData, ValidatorType>
+  }) => any | Promise<any>
+  onSubmitInvalid?: (props: {
+    value: TData
+    formApi: FormApi<TData, ValidatorType>
+  }) => void
 }
 
 export type ValidationMeta = {
@@ -525,7 +525,10 @@ export class FormApi<TFormData, ValidatorType> {
     // Fields are invalid, do not submit
     if (!this.state.isFieldsValid) {
       done()
-      this.options.onSubmitInvalid?.(this.state.values, this)
+      this.options.onSubmitInvalid?.({
+        value: this.state.values,
+        formApi: this,
+      })
       return
     }
 
@@ -534,13 +537,16 @@ export class FormApi<TFormData, ValidatorType> {
 
     if (!this.state.isValid) {
       done()
-      this.options.onSubmitInvalid?.(this.state.values, this)
+      this.options.onSubmitInvalid?.({
+        value: this.state.values,
+        formApi: this,
+      })
       return
     }
 
     try {
       // Run the submit code
-      await this.options.onSubmit?.(this.state.values, this)
+      await this.options.onSubmit?.({ value: this.state.values, formApi: this })
 
       this.store.batch(() => {
         this.store.setState((prev) => ({ ...prev, isSubmitted: true }))

diff --git a/packages/react-form/src/tests/useForm.test.tsx b/packages/react-form/src/tests/useForm.test.tsx
@@ -90,8 +90,8 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onSubmit: (data) => {
-          setSubmittedData(data)
+        onSubmit: ({ value }) => {
+          setSubmittedData(value)
         },
       })
 

diff --git a/packages/solid-form/src/tests/createForm.test.tsx b/packages/solid-form/src/tests/createForm.test.tsx
@@ -84,8 +84,8 @@ describe('createForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onSubmit: (data) => {
-          submittedData = data
+        onSubmit: ({ value }) => {
+          submittedData = value
         },
       }))
 

diff --git a/packages/vue-form/src/tests/useForm.test.tsx b/packages/vue-form/src/tests/useForm.test.tsx
@@ -92,8 +92,8 @@ describe('useForm', () => {
         defaultValues: {
           firstName: 'FirstName',
         },
-        onSubmit: (data) => {
-          submittedData.value = data
+        onSubmit: ({ value }) => {
+          submittedData.value = value
         },
       })
       form.provideFormContext()
-Original file line number
+Diff line change
@@ Expand Up / @@ -593,7 +593,6 @@ export class FieldApi< @@
       }
       handleChange = (updater: Updater<TData>) => {
-        debugger
         this.setValue(updater, { touch: true })
       }
@@ Expand Down @@