diff --git a/CHANGELOG.md b/CHANGELOG.md index 5792ed7..fbd848e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,24 @@ +## [2.0.13](https://github.com/aviemet/useInertiaForm/compare/v2.0.12...v2.0.13) (2023-03-24) + + +### Bug Fixes + +* 🐛 Removes disabled conditions from Submit button ([403270a](https://github.com/aviemet/useInertiaForm/commit/403270a3e6ee48e74c9703722df2d396762b5bb8)) + +## [2.0.12](https://github.com/aviemet/useInertiaForm/compare/v2.0.11...v2.0.12) (2023-03-24) + + +### Bug Fixes + +* 🐛 Only resets form data after success if async ([3f970c7](https://github.com/aviemet/useInertiaForm/commit/3f970c704d4e0b438e5836b4a550c551e4ffd85a)) + +## [2.0.11](https://github.com/aviemet/useInertiaForm/compare/v2.0.10...v2.0.11) (2023-03-24) + + +### Bug Fixes + +* 🐛 Adds errors to dependency array in Form component ([f342147](https://github.com/aviemet/useInertiaForm/commit/f342147b10a29ab1ee1e0e7067d5ed0c33d21b02)) + ## [2.0.10](https://github.com/aviemet/useInertiaForm/compare/v2.0.9...v2.0.10) (2023-03-24) diff --git a/package.json b/package.json index 19051de..9641dd9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "use-inertia-form", - "version": "2.0.10", + "version": "2.0.13", "description": "Extra functionality for Inertia.js useForm hook", "main": "dist/useInertiaForm.js", "module": "dist/useInertiaForm.esm.js", diff --git a/src/Form/index.tsx b/src/Form/index.tsx index 1dcfb6d..a18a33d 100644 --- a/src/Form/index.tsx +++ b/src/Form/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect } from 'react' import axios from 'axios' -import { type Visit } from '@inertiajs/core' +import { type VisitOptions } from '@inertiajs/core' import useInertiaForm, { NestedObject } from '../useInertiaForm' import { useForm, type UseFormProps, type HTTPVerb, FormProvider } from './FormProvider' import FormMetaWrapper, { useFormMeta, type FormMetaValue } from './FormMetaWrapper' @@ -13,6 +13,7 @@ export interface FormProps extends PartialHTMLForm { method?: HTTPVerb to?: string async?: boolean + resetAfterSubmit?: boolean remember?: boolean railsAttributes?: boolean onSubmit?: (form: UseFormProps) => boolean|void @@ -28,6 +29,7 @@ const Form = ({ method = 'post', to, async = false, + resetAfterSubmit, remember = true, onSubmit, onChange, @@ -35,18 +37,17 @@ const Form = ({ onError, ...props }: Omit, 'railsAttributes'>) => { - const form = remember && (model || to) ? useInertiaForm(`${method}/${model || to}`, data) : useInertiaForm(data) const contextValueObject = useCallback((): UseFormProps => ( { ...form, model, method, to, submit } - ), [form.data, form.errors]) + ), [data, form.data, form.errors]) /** * Submits the form. If async prop is true, submits using axios, * otherwise submits using Inertia's `useForm.submit` method */ - const submit = async (options?: Partial) => { + const submit = async (options?: Partial) => { let shouldSubmit = to && onSubmit && onSubmit(contextValueObject()) === false ? false : true if(shouldSubmit) { @@ -62,7 +63,14 @@ const Form = ({ e.preventDefault() e.stopPropagation() - submit() + submit({ + onSuccess: () => { + if(resetAfterSubmit || (resetAfterSubmit !== false && async === true)) { + form.reset() + } + if(onSuccess) onSuccess(contextValueObject()) + }, + }) } // Set values from url search params. Allows for prefilling form data from a link @@ -82,13 +90,6 @@ const Form = ({ if(onError) onError(contextValueObject()) }, [form.errors]) - useEffect(() => { - if(!form.wasSuccessful) return - - form.reset() - if(onSuccess) onSuccess(contextValueObject()) - }, [form.wasSuccessful]) - return (
diff --git a/src/Inputs/Submit.tsx b/src/Inputs/Submit.tsx index eb3237f..40fb208 100644 --- a/src/Inputs/Submit.tsx +++ b/src/Inputs/Submit.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { useForm } from '../Form' +import useInertiaForm from '../useInertiaForm' interface ButtonProps extends React.ButtonHTMLAttributes { component?: string | React.ComponentType @@ -9,7 +9,7 @@ const Submit = React.forwardRef(( { children, type = 'submit', disabled, component = 'button', ...props }, ref, ) => { - const { processing } = useForm() + const { processing } = useInertiaForm() const Element = component diff --git a/src/useInertiaForm.ts b/src/useInertiaForm.ts index 8dfc022..aa3e003 100644 --- a/src/useInertiaForm.ts +++ b/src/useInertiaForm.ts @@ -57,15 +57,20 @@ export default function useInertiaForm( const isMounted = useRef() // Data - let rememberKey = null - let transformedData = rememberKeyOrInitialValues - if(typeof rememberKeyOrInitialValues === 'string') { - rememberKey = rememberKeyOrInitialValues - transformedData = maybeInitialValues - } + const getFormArguments = useCallback((): [string, TForm] => { + let rememberKey: string = null + let transformedData = rememberKeyOrInitialValues + if(typeof rememberKeyOrInitialValues === 'string') { + rememberKey = rememberKeyOrInitialValues + transformedData = maybeInitialValues + } + return [rememberKey, fillEmptyValues(transformedData as TForm)] + }, [rememberKeyOrInitialValues, maybeInitialValues]) + + const [rememberKey, transformedData] = getFormArguments() - const [defaults, setDefaults] = useState((fillEmptyValues(transformedData) || {}) as TForm) - const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`) : useState(defaults) + const [defaults, setDefaults] = useState(transformedData || {} as TForm) + const [data, setData] = rememberKey ? useRemember(transformedData, `${rememberKey}:data`) : useState(transformedData) // Errors const [errors, setErrors] = rememberKey