From 1dc351e94f051b531edafe6dbff2725986c66ef8 Mon Sep 17 00:00:00 2001 From: Corbin Crutchley Date: Tue, 5 Dec 2023 07:58:20 -0800 Subject: [PATCH] refactor!: move submission function to take object instead of two arguments --- docs/framework/react/quick-start.md | 2 +- examples/react/simple/src/index.tsx | 4 +-- examples/react/valibot/src/index.tsx | 4 +-- examples/react/yup/src/index.tsx | 4 +-- examples/react/zod/src/index.tsx | 4 +-- examples/solid/simple/src/index.tsx | 4 +-- examples/solid/valibot/src/index.tsx | 4 +-- examples/solid/yup/src/index.tsx | 4 +-- examples/solid/zod/src/index.tsx | 4 +-- examples/vue/simple/src/App.vue | 4 +-- examples/vue/valibot/src/App.vue | 4 +-- examples/vue/yup/src/App.vue | 4 +-- examples/vue/zod/src/App.vue | 4 +-- packages/form-core/src/FieldApi.ts | 1 - packages/form-core/src/FormApi.ts | 28 +++++++++++-------- .../react-form/src/tests/useForm.test.tsx | 4 +-- .../solid-form/src/tests/createForm.test.tsx | 4 +-- packages/vue-form/src/tests/useForm.test.tsx | 4 +-- 18 files changed, 48 insertions(+), 43 deletions(-) diff --git a/docs/framework/react/quick-start.md b/docs/framework/react/quick-start.md index be6f8e45a..7cd65f173 100644 --- 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 index 3cbd8f371..d900e67bf 100644 --- 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 index 677921b6b..76b9ff7f1 100644 --- 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 index 5d52edfe1..14d7c364e 100644 --- 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 index 434c1b8b8..055fdc52d 100644 --- 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 index 153959f17..65017dfd3 100644 --- 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 index 70b1698f6..3ae489e04 100644 --- 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 index 1fa249087..cb68fa312 100644 --- 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 index e190c6eb5..bf21cd0ce 100644 --- 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 index f14f47f40..9628e73d1 100644 --- 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 index d207a266d..ef9bb1d00 100644 --- 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 index d4d160c17..437dcd653 100644 --- 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 index 5fef977d6..5eec18671 100644 --- 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 index 82045deb1..4450c4154 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -593,7 +593,6 @@ export class FieldApi< } handleChange = (updater: Updater) => { - debugger this.setValue(updater, { touch: true }) } diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 7c4f921b0..85784f79c 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -59,14 +59,14 @@ export type FormOptions = { asyncDebounceMs?: number validatorAdapter?: ValidatorType validators?: FormValidators - onSubmit?: ( - values: TData, - formApi: FormApi, - ) => any | Promise - onSubmitInvalid?: ( - values: TData, - formApi: FormApi, - ) => void + onSubmit?: (props: { + value: TData + formApi: FormApi + }) => any | Promise + onSubmitInvalid?: (props: { + value: TData + formApi: FormApi + }) => void } export type ValidationMeta = { @@ -525,7 +525,10 @@ export class FormApi { // 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 { 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 index 4ef6701b1..23398836e 100644 --- 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 index 30b90e785..7cac2aa67 100644 --- 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 index 4f49ae96f..577444226 100644 --- 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()