diff --git a/babel.config.js b/babel.config.js index 62487bf..f5bfaf0 100644 --- a/babel.config.js +++ b/babel.config.js @@ -30,10 +30,15 @@ module.exports = { ].replace(/^[^0-9]*/, ''), }, ], + ['@babel/plugin-proposal-class-properties', { loose: false }], ].filter(Boolean), overrides: [ { - exclude: ['./packages/solid-form/**', './packages/svelte-form/**', './packages/vue-form/**'], + exclude: [ + './packages/solid-form/**', + './packages/svelte-form/**', + './packages/vue-form/**', + ], presets: ['@babel/react'], }, { diff --git a/docs/reference/fieldApi.md b/docs/reference/fieldApi.md index 3863692..69c7342 100644 --- a/docs/reference/fieldApi.md +++ b/docs/reference/fieldApi.md @@ -205,7 +205,7 @@ An object type representing the state of a field. An object type representing the change and blur event handlers for a field. - ```tsx - onChange?: (updater: Updater) => void + onChange?: (value: TData) => void ``` - An optional function to further handle the change event. - ```tsx @@ -235,7 +235,7 @@ An object type representing the change and blur event handlers for a field. ``` - The current value of the field. - ```tsx - onChange: (updater: Updater) => void + onChange: (value: TData) => void ``` - A function to handle the change event. - ```tsx diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx index 423be70..a055229 100644 --- a/examples/react/simple/src/index.tsx +++ b/examples/react/simple/src/index.tsx @@ -181,12 +181,16 @@ export default function App() { /> */} [state.canSubmit, state.isSubmitting]} - children={([canSubmit, isSubmitting]) => ( - - )} + {...{ + // TS bug - inference isn't working with props, so use object + selector: (state) => + [state.canSubmit, state.isSubmitting] as const, + children: ([canSubmit, isSubmitting]) => ( + + ), + }} /> diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts index 281eb69..e933aed 100644 --- a/packages/form-core/src/FieldApi.ts +++ b/packages/form-core/src/FieldApi.ts @@ -58,7 +58,7 @@ export type UserInputProps = { export type ChangeProps = { value: TData - onChange: (updater: Updater) => void + onChange: (value: TData) => void onBlur: (event: any) => void } diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts index 1dd3905..242ac25 100644 --- a/packages/form-core/src/FormApi.ts +++ b/packages/form-core/src/FormApi.ts @@ -209,7 +209,7 @@ export class FormApi { return Promise.all(fieldValidationPromises) } - validateForm = async () => {} + // validateForm = async () => {} handleSubmit = async (e: FormSubmitEvent) => { e.preventDefault() @@ -248,7 +248,7 @@ export class FormApi { } // Run validation for the form - await this.validateForm() + // await this.validateForm() if (!this.state.isValid) { done() diff --git a/packages/react-form/src/useField.tsx b/packages/react-form/src/useField.tsx index 7d7372d..8405f7f 100644 --- a/packages/react-form/src/useField.tsx +++ b/packages/react-form/src/useField.tsx @@ -57,7 +57,7 @@ export function useField( fieldApi.update({ ...opts, form: formApi }) useStore( - fieldApi.store, + fieldApi.store as any, opts.mode === 'array' ? (state: any) => { return [state.meta, Object.keys(state.value || []).length] diff --git a/packages/react-form/src/useForm.tsx b/packages/react-form/src/useForm.tsx index ee146a4..aae7bfd 100644 --- a/packages/react-form/src/useForm.tsx +++ b/packages/react-form/src/useForm.tsx @@ -57,7 +57,7 @@ export function useForm(opts?: FormOptions): FormApi { selector, ) => { // eslint-disable-next-line react-hooks/rules-of-hooks - return useStore(api.store, selector) as any + return useStore(api.store as any, selector as any) as any } api.Subscribe = ( // @ts-ignore @@ -66,7 +66,7 @@ export function useForm(opts?: FormOptions): FormApi { return functionalUpdate( props.children, // eslint-disable-next-line react-hooks/rules-of-hooks - useStore(api.store, props.selector), + useStore(api.store as any, props.selector as any), ) as any }