Merge branch 'main' of https://github.com/aviemet/useInertiaForm

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)
 
 

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",

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<TForm> extends PartialHTMLForm {
 	method?: HTTPVerb
 	to?: string
 	async?: boolean
+	resetAfterSubmit?: boolean
 	remember?: boolean
 	railsAttributes?: boolean
 	onSubmit?: (form: UseFormProps<TForm>) => boolean|void
@@ -28,25 +29,25 @@ const Form = <TForm extends NestedObject>({
 	method = 'post',
 	to,
 	async = false,
+	resetAfterSubmit,
 	remember = true,
 	onSubmit,
 	onChange,
 	onSuccess,
 	onError,
 	...props
 }: Omit<FormProps<TForm>, 'railsAttributes'>) => {
-
 	const form = remember && (model || to) ? useInertiaForm<TForm>(`${method}/${model || to}`, data) : useInertiaForm<TForm>(data)
 
 	const contextValueObject = useCallback((): UseFormProps<TForm> => (
 		{ ...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<Visit>) => {
+	const submit = async (options?: Partial<VisitOptions>) => {
 		let shouldSubmit = to && onSubmit && onSubmit(contextValueObject()) === false ? false : true
 
 		if(shouldSubmit) {
@@ -62,7 +63,14 @@ const Form = <TForm extends NestedObject>({
 		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 = <TForm extends NestedObject>({
 		if(onError) onError(contextValueObject())
 	}, [form.errors])
 
-	useEffect(() => {
-		if(!form.wasSuccessful) return
-
-		form.reset()
-		if(onSuccess) onSuccess(contextValueObject())
-	}, [form.wasSuccessful])
-
 	return (
 		<FormProvider value={ contextValueObject() }>
 			<form onSubmit={ handleSubmit } { ...props }>

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<HTMLButtonElement> {
 	component?: string | React.ComponentType
@@ -9,7 +9,7 @@ const Submit = React.forwardRef<HTMLButtonElement, ButtonProps>((
 	{ children, type = 'submit', disabled, component = 'button', ...props },
 	ref,
 ) => {
-	const { processing } = useForm()
+	const { processing } = useInertiaForm()
 
 	const Element = component
 

src/useInertiaForm.ts

@@ -57,15 +57,20 @@ export default function useInertiaForm<TForm>(
 	const isMounted = useRef<boolean>()
 
 	// 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<TForm>(defaults, `${rememberKey}:data`) : useState<TForm>(defaults)
+	const [defaults, setDefaults] = useState(transformedData || {} as TForm)
+	const [data, setData] = rememberKey ? useRemember<TForm>(transformedData, `${rememberKey}:data`) : useState<TForm>(transformedData)
 
 	// Errors
 	const [errors, setErrors] = rememberKey