Merge pull request #2181 from joaopalopes24/nested-paths-in-form

[2.x]: Support for nested paths in forms

Author: joetannenbaum

package.json

@@ -11,7 +11,8 @@
     "test:svelte": "cd tests && PACKAGE=svelte npx playwright test",
     "test:svelte:watch": "cd packages/svelte/test-app && npm run watch",
     "test:vue": "cd tests && PACKAGE=vue3 npx playwright test",
-    "test:vue:watch": "cd packages/vue3/test-app && npm run watch"
+    "test:vue:watch": "cd packages/vue3/test-app && npm run watch",
+    "build:all": "cd packages/core && npm run build && cd ../react && npm run build && cd ../vue3 && npm run build && cd ../svelte && npm run build"
   },
   "dependencies": {
     "prettier": "^3.2.5",

packages/core/src/types.ts

@@ -21,6 +21,26 @@ export type FormDataConvertible =
   | null
   | undefined
 
+export type FormDataKeys<T extends Record<any, any>> = T extends T
+  ? keyof T extends infer Key extends Extract<keyof T, string>
+    ? Key extends Key
+      ? T[Key] extends Record<any, any>
+        ? `${Key}.${FormDataKeys<T[Key]>}` | Key
+        : Key
+      : never
+    : never
+  : never
+
+export type FormDataValues<T extends Record<any, any>, K extends FormDataKeys<T>> = K extends `${infer P}.${infer Rest}`
+  ? P extends keyof T
+    ? Rest extends FormDataKeys<T[P]>
+      ? FormDataValues<T[P], Rest>
+      : never
+    : never
+  : K extends keyof T
+    ? T[K]
+    : never
+
 export type Method = 'get' | 'post' | 'put' | 'patch' | 'delete'
 
 export type RequestPayload = Record<string, FormDataConvertible> | FormData

packages/react/src/useForm.ts

@@ -1,32 +1,41 @@
-import { FormDataConvertible, Method, Progress, router, VisitOptions } from '@inertiajs/core'
-import { isEqual, cloneDeep } from 'es-toolkit'
+import {
+  FormDataConvertible,
+  FormDataKeys,
+  FormDataValues,
+  Method,
+  Progress,
+  router,
+  VisitOptions,
+} from '@inertiajs/core'
+import { cloneDeep, isEqual } from 'es-toolkit'
+import { get, has, set } from 'es-toolkit/compat'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import useRemember from './useRemember'
 
-type setDataByObject<TForm> = (data: TForm) => void
-type setDataByMethod<TForm> = (data: (previousData: TForm) => TForm) => void
-type setDataByKeyValuePair<TForm> = <K extends keyof TForm>(key: K, value: TForm[K]) => void
+type SetDataByObject<TForm> = (data: TForm) => void
+type SetDataByMethod<TForm> = (data: (previousData: TForm) => TForm) => void
+type SetDataByKeyValuePair<TForm> = <K extends FormDataKeys<TForm>>(key: K, value: FormDataValues<TForm, K>) => void
 type FormDataType = Record<string, FormDataConvertible>
 type FormOptions = Omit<VisitOptions, 'data'>
 
 export interface InertiaFormProps<TForm extends FormDataType> {
   data: TForm
   isDirty: boolean
-  errors: Partial<Record<keyof TForm, string>>
+  errors: Partial<Record<FormDataKeys<TForm>, string>>
   hasErrors: boolean
   processing: boolean
   progress: Progress | null
   wasSuccessful: boolean
   recentlySuccessful: boolean
-  setData: setDataByObject<TForm> & setDataByMethod<TForm> & setDataByKeyValuePair<TForm>
+  setData: SetDataByObject<TForm> & SetDataByMethod<TForm> & SetDataByKeyValuePair<TForm>
   transform: (callback: (data: TForm) => object) => void
   setDefaults(): void
-  setDefaults(field: keyof TForm, value: FormDataConvertible): void
+  setDefaults(field: FormDataKeys<TForm>, value: FormDataConvertible): void
   setDefaults(fields: Partial<TForm>): void
-  reset: (...fields: (keyof TForm)[]) => void
-  clearErrors: (...fields: (keyof TForm)[]) => void
-  setError(field: keyof TForm, value: string): void
-  setError(errors: Record<keyof TForm, string>): void
+  reset: (...fields: FormDataKeys<TForm>[]) => void
+  clearErrors: (...fields: FormDataKeys<TForm>[]) => void
+  setError(field: FormDataKeys<TForm>, value: string): void
+  setError(errors: Record<FormDataKeys<TForm>, string>): void
   submit: (...args: [Method, string, FormOptions?] | [{ url: string; method: Method }, FormOptions?]) => void
   get: (url: string, options?: FormOptions) => void
   patch: (url: string, options?: FormOptions) => void
@@ -53,8 +62,8 @@ export default function useForm<TForm extends FormDataType>(
   const recentlySuccessfulTimeoutId = useRef(null)
   const [data, setData] = rememberKey ? useRemember(defaults, `${rememberKey}:data`) : useState(defaults)
   const [errors, setErrors] = rememberKey
-    ? useRemember({} as Partial<Record<keyof TForm, string>>, `${rememberKey}:errors`)
-    : useState({} as Partial<Record<keyof TForm, string>>)
+    ? useRemember({} as Partial<Record<FormDataKeys<TForm>, string>>, `${rememberKey}:errors`)
+    : useState({} as Partial<Record<FormDataKeys<TForm>, string>>)
   const [hasErrors, setHasErrors] = useState(false)
   const [processing, setProcessing] = useState(false)
   const [progress, setProgress] = useState(null)
@@ -175,9 +184,9 @@ export default function useForm<TForm extends FormDataType>(
   )
 
   const setDataFunction = useCallback(
-    (keyOrData: keyof TForm | Function | TForm, maybeValue?: TForm[keyof TForm]) => {
+    (keyOrData: FormDataKeys<TForm> | Function | TForm, maybeValue?: any) => {
       if (typeof keyOrData === 'string') {
-        setData((data) => ({ ...data, [keyOrData]: maybeValue }))
+        setData((data) => set(cloneDeep(data), keyOrData, maybeValue))
       } else if (typeof keyOrData === 'function') {
         setData((data) => keyOrData(data))
       } else {
@@ -188,14 +197,15 @@ export default function useForm<TForm extends FormDataType>(
   )
 
   const setDefaultsFunction = useCallback(
-    (fieldOrFields?: keyof TForm | Partial<TForm>, maybeValue?: FormDataConvertible) => {
+    (fieldOrFields?: FormDataKeys<TForm> | Partial<TForm>, maybeValue?: FormDataConvertible) => {
       if (typeof fieldOrFields === 'undefined') {
         setDefaults(() => data)
       } else {
-        setDefaults((defaults) => ({
-          ...defaults,
-          ...(typeof fieldOrFields === 'string' ? { [fieldOrFields]: maybeValue } : (fieldOrFields as TForm)),
-        }))
+        setDefaults((defaults) => {
+          return typeof fieldOrFields === 'string'
+            ? set(cloneDeep(defaults), fieldOrFields, maybeValue)
+            : Object.assign(cloneDeep(defaults), fieldOrFields)
+        })
       }
     },
     [data, setDefaults],
@@ -207,14 +217,13 @@ export default function useForm<TForm extends FormDataType>(
         setData(defaults)
       } else {
         setData((data) =>
-          (Object.keys(defaults) as Array<keyof TForm>)
-            .filter((key) => fields.includes(key))
+          (fields as Array<FormDataKeys<TForm>>)
+            .filter((key) => has(defaults, key))
             .reduce(
               (carry, key) => {
-                carry[key] = defaults[key]
-                return carry
+                return set(carry, key, get(defaults, key))
               },
-              { ...data },
+              { ...data } as TForm,
             ),
         )
       }
@@ -223,13 +232,13 @@ export default function useForm<TForm extends FormDataType>(
   )
 
   const setError = useCallback(
-    (fieldOrFields: keyof TForm | Record<keyof TForm, string>, maybeValue?: string) => {
+    (fieldOrFields: FormDataKeys<TForm> | Record<FormDataKeys<TForm>, string>, maybeValue?: string) => {
       setErrors((errors) => {
         const newErrors = {
           ...errors,
           ...(typeof fieldOrFields === 'string'
             ? { [fieldOrFields]: maybeValue }
-            : (fieldOrFields as Record<keyof TForm, string>)),
+            : (fieldOrFields as Record<FormDataKeys<TForm>, string>)),
         }
         setHasErrors(Object.keys(newErrors).length > 0)
         return newErrors
@@ -241,7 +250,7 @@ export default function useForm<TForm extends FormDataType>(
   const clearErrors = useCallback(
     (...fields) => {
       setErrors((errors) => {
-        const newErrors = (Object.keys(errors) as Array<keyof TForm>).reduce(
+        const newErrors = (Object.keys(errors) as Array<FormDataKeys<TForm>>).reduce(
           (carry, field) => ({
             ...carry,
             ...(fields.length > 0 && !fields.includes(field) ? { [field]: errors[field] } : {}),
@@ -258,7 +267,7 @@ export default function useForm<TForm extends FormDataType>(
   const createSubmitMethod = (method) => (url, options) => {
     submit(method, url, options)
   }
-  const get = useCallback(createSubmitMethod('get'), [submit])
+  const getMethod = useCallback(createSubmitMethod('get'), [submit])
   const post = useCallback(createSubmitMethod('post'), [submit])
   const put = useCallback(createSubmitMethod('put'), [submit])
   const patch = useCallback(createSubmitMethod('patch'), [submit])
@@ -290,7 +299,7 @@ export default function useForm<TForm extends FormDataType>(
     setError,
     clearErrors,
     submit,
-    get,
+    get: getMethod,
     post,
     put,
     patch,

packages/react/test-app/Pages/FormHelper/Nested.jsx

@@ -0,0 +1,190 @@
+import { useForm } from '@inertiajs/react'
+
+export default (props) => {
+  const form = useForm({
+    name: 'foo',
+    address: {
+      street: '123 Main St',
+      city: 'New York',
+    },
+    organization: {
+      name: 'Inertia',
+      repo: {
+        name: 'inertiajs/inertia',
+        tags: ['v0.1', 'v0.2'],
+      },
+    },
+    checked: ['foo', 'bar'],
+  })
+
+  const submit = () => {
+    form.submit('post', '/dump/post')
+  }
+
+  return (
+    <div>
+      <label>
+        Full Name
+        <input
+          type="text"
+          id="name"
+          name="name"
+          onChange={(e) => form.setData('name', e.target.value)}
+          value={form.data.name}
+        />
+      </label>
+      <label>
+        Street
+        <input
+          type="text"
+          id="street"
+          name="address.street"
+          onChange={(e) => form.setData('address.street', e.target.value)}
+          value={form.data.address.street}
+        />
+      </label>
+      <label>
+        City
+        <input
+          type="text"
+          id="city"
+          name="address.city"
+          onChange={(e) => form.setData('address.city', e.target.value)}
+          value={form.data.address.city}
+        />
+      </label>
+      <label>
+        Foo
+        <input
+          type="checkbox"
+          id="foo"
+          name="checked[]"
+          value="foo"
+          onChange={(e) =>
+            form.setData(
+              'checked',
+              e.target.checked
+                ? [...form.data.checked, e.target.value]
+                : form.data.checked.filter((item) => item !== e.target.value),
+            )
+          }
+          checked={form.data.checked.includes('foo')}
+        />
+      </label>
+      <label>
+        Bar
+        <input
+          type="checkbox"
+          id="bar"
+          name="checked[]"
+          value="bar"
+          onChange={(e) =>
+            form.setData(
+              'checked',
+              e.target.checked
+                ? [...form.data.checked, e.target.value]
+                : form.data.checked.filter((item) => item !== e.target.value),
+            )
+          }
+          checked={form.data.checked.includes('bar')}
+        />
+      </label>
+      <label>
+        Baz
+        <input
+          type="checkbox"
+          id="baz"
+          name="checked[]"
+          value="baz"
+          onChange={(e) =>
+            form.setData(
+              'checked',
+              e.target.checked
+                ? [...form.data.checked, e.target.value]
+                : form.data.checked.filter((item) => item !== e.target.value),
+            )
+          }
+          checked={form.data.checked.includes('baz')}
+        />
+      </label>
+      <label>
+        Organization Name
+        <input
+          type="text"
+          id="organization-name"
+          name="organization.name"
+          onChange={(e) => form.setData('organization.name', e.target.value)}
+          value={form.data.organization.name}
+        />
+      </label>
+      <label>
+        Repository Name
+        <input
+          type="text"
+          id="repo-name"
+          name="organization.repo.name"
+          onChange={(e) => form.setData('organization.repo.name', e.target.value)}
+          value={form.data.organization.repo.name}
+        />
+      </label>
+      Repository Tags
+      <label>
+        v0.1
+        <input
+          type="checkbox"
+          id="tag-0"
+          name="organization.repo.tags[]"
+          value="v0.1"
+          onChange={(e) =>
+            form.setData(
+              'organization.repo.tags',
+              e.target.checked
+                ? [...form.data.organization.repo.tags, e.target.value]
+                : form.data.organization.repo.tags.filter((item) => item !== e.target.value),
+            )
+          }
+          checked={form.data.organization.repo.tags.includes('v0.1')}
+        />
+      </label>
+      <label>
+        v0.2
+        <input
+          type="checkbox"
+          id="tag-1"
+          name="organization.repo.tags[]"
+          value="v0.2"
+          onChange={(e) =>
+            form.setData(
+              'organization.repo.tags',
+              e.target.checked
+                ? [...form.data.organization.repo.tags, e.target.value]
+                : form.data.organization.repo.tags.filter((item) => item !== e.target.value),
+            )
+          }
+          checked={form.data.organization.repo.tags.includes('v0.2')}
+        />
+      </label>
+      <label>
+        v0.3
+        <input
+          type="checkbox"
+          id="tag-2"
+          name="organization.repo.tags[]"
+          value="v0.3"
+          onChange={(e) =>
+            form.setData(
+              'organization.repo.tags',
+              e.target.checked
+                ? [...form.data.organization.repo.tags, e.target.value]
+                : form.data.organization.repo.tags.filter((item) => item !== e.target.value),
+            )
+          }
+          checked={form.data.organization.repo.tags.includes('v0.3')}
+        />
+      </label>
+      <button onClick={submit} className="submit">
+        Submit form
+      </button>
+    </div>
+  )
+}