fix: array-field mode and utilities

tannerlinsley · tannerlinsley · commit 62a82fe48fb0 · 2023-05-03T15:16:56.000-07:00
diff --git a/docs/reference/formApi.md b/docs/reference/formApi.md
@@ -138,7 +138,7 @@ A class representing the Form API. It handles the logic and interactions with th
   ```
   - Inserts a value into an array field at the specified index.
 - ```tsx
-    spliceFieldValue<TField extends DeepKeys<TFormData>>(field: TField, index: number, opts?: { touch?: boolean })
+    removeFieldValue<TField extends DeepKeys<TFormData>>(field: TField, index: number, opts?: { touch?: boolean })
   ```
   - Removes a value from an array field at the specified index.
 - ```tsx
diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx
@@ -11,6 +11,7 @@ type Person = {
 type Hobby = {
   name: string;
   description: string;
+  yearsOfExperience: number;
 };
 
 const formFactory = createFormFactory<Person>({
@@ -61,8 +62,7 @@ export default function App() {
             children={(field) => (
               // Avoid hasty abstractions. Render props are great!
               <>
-                <label htmlFor={field.name}>First Name:</label>
-                <input name={field.name} {...field.getInputProps()} />
+                <input {...field.getInputProps()} />
                 <FieldInfo field={field} />
               </>
             )}
@@ -73,8 +73,7 @@ export default function App() {
             name="lastName"
             children={(field) => (
               <>
-                <label htmlFor={field.name}>Last Name:</label>
-                <input name={field.name} {...field.getInputProps()} />
+                <input {...field.getInputProps()} />
                 <FieldInfo field={field} />
               </>
             )}
@@ -83,12 +82,84 @@ export default function App() {
         <div>
           <form.Field
             name="hobbies"
-            children={(field) => (
-              <>
-                <label htmlFor={field.name}>Last Name:</label>
-                <input name={field.name} {...field.getInputProps()} />
-                <FieldInfo field={field} />
-              </>
+            mode="array"
+            children={(hobbiesField) => (
+              <div>
+                Hobbies
+                <div
+                  style={{
+                    paddingLeft: "1rem",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "1rem",
+                  }}
+                >
+                  {!hobbiesField.state.value.length
+                    ? "No hobbies found."
+                    : hobbiesField.state.value.map((value, i) => (
+                        <div
+                          key={i}
+                          style={{
+                            borderLeft: "2px solid gray",
+                            paddingLeft: ".5rem",
+                          }}
+                        >
+                          <hobbiesField.Field
+                            index={i}
+                            name="name"
+                            children={(field) => {
+                              return (
+                                <div>
+                                  <label htmlFor={field.name}>Name:</label>
+                                  <input
+                                    name={field.name}
+                                    {...field.getInputProps()}
+                                  />
+                                  <button
+                                    type="button"
+                                    onClick={() => hobbiesField.removeValue(i)}
+                                  >
+                                    X
+                                  </button>
+                                  <FieldInfo field={field} />
+                                </div>
+                              );
+                            }}
+                          />
+                          <hobbiesField.Field
+                            index={i}
+                            name="description"
+                            children={(field) => {
+                              return (
+                                <div>
+                                  <label htmlFor={field.name}>
+                                    Description:
+                                  </label>
+                                  <input
+                                    name={field.name}
+                                    {...field.getInputProps()}
+                                  />
+                                  <FieldInfo field={field} />
+                                </div>
+                              );
+                            }}
+                          />
+                        </div>
+                      ))}
+                </div>
+                <button
+                  type="button"
+                  onClick={() =>
+                    hobbiesField.pushValue({
+                      name: "",
+                      description: "",
+                      yearsOfExperience: 0,
+                    })
+                  }
+                >
+                  Add hobby
+                </button>
+              </div>
             )}
           />
         </div>
diff --git a/packages/form-core/src/FieldApi.ts b/packages/form-core/src/FieldApi.ts
@@ -7,6 +7,7 @@ export type ValidationCause = 'change' | 'blur' | 'submit'
 
 export interface FieldOptions<TData, TFormData> {
   name: unknown extends TFormData ? string : DeepKeys<TFormData>
+  index?: TData extends any[] ? number : never
   defaultValue?: TData
   validate?: (
     value: TData,
@@ -84,12 +85,12 @@ export class FieldApi<TData, TFormData> {
     this.form = opts.form
     this.uid = uid++
     // Support field prefixing from FieldScope
-    let fieldPrefix = ''
-    if (this.form.fieldName) {
-      fieldPrefix = `${this.form.fieldName}.`
-    }
+    // let fieldPrefix = ''
+    // if (this.form.fieldName) {
+    //   fieldPrefix = `${this.form.fieldName}.`
+    // }
 
-    this.name = (fieldPrefix + opts.name) as any
+    this.name = opts.name as any
 
     this.store = new Store<FieldState<TData>>(
       {
@@ -113,6 +114,7 @@ export class FieldApi<TData, TFormData> {
           if (next.value !== prevState.value) {
             this.validate('change', next.value)
           }
+          console.log(this)
         },
       },
     )
@@ -178,7 +180,9 @@ export class FieldApi<TData, TFormData> {
     }
   }
 
-  getValue = (): TData => this.form.getFieldValue(this.name)
+  getValue = (): TData => {
+    return this.form.getFieldValue(this.name)
+  }
   setValue = (
     updater: Updater<TData>,
     options?: { touch?: boolean; notify?: boolean },
@@ -190,11 +194,11 @@ export class FieldApi<TData, TFormData> {
 
   getInfo = () => this.form.getFieldInfo(this.name)
 
-  pushValue = (value: TData) =>
+  pushValue = (value: TData extends any[] ? TData[number] : never) =>
     this.form.pushFieldValue(this.name, value as any)
   insertValue = (index: number, value: TData) =>
     this.form.insertFieldValue(this.name, index, value as any)
-  removeValue = (index: number) => this.form.spliceFieldValue(this.name, index)
+  removeValue = (index: number) => this.form.removeFieldValue(this.name, index)
   swapValues = (aIndex: number, bIndex: number) =>
     this.form.swapFieldValues(this.name, aIndex, bIndex)
 
diff --git a/packages/form-core/src/FormApi.ts b/packages/form-core/src/FormApi.ts
@@ -138,6 +138,7 @@ export class FormApi<TFormData> {
           // Write it back to the store
           this.store.state = next
           this.state = next
+          console.log(this.state)
         },
       },
     )
@@ -402,7 +403,7 @@ export class FormApi<TFormData> {
     )
   }
 
-  spliceFieldValue = <TField extends DeepKeys<TFormData>>(
+  removeFieldValue = <TField extends DeepKeys<TFormData>>(
     field: TField,
     index: number,
     opts?: { touch?: boolean },
diff --git a/packages/form-core/src/utils.ts b/packages/form-core/src/utils.ts
@@ -130,7 +130,7 @@ export type DeepKeys<T> = unknown extends T
   : T extends readonly any[] & IsTuple<T>
   ? AllowedIndexes<T> | DeepKeysPrefix<T, AllowedIndexes<T>>
   : T extends any[]
-  ? never & 'Dynamic length array indexing is not supported'
+  ? DeepKeys<T[number]>
   : T extends Date
   ? never
   : T extends object
@@ -146,3 +146,18 @@ export type DeepValue<T, TProp> = T extends Record<string | number, any>
     ? DeepValue<T[TBranch], TDeepProp>
     : T[TProp & string]
   : never
+
+type Narrowable = string | number | bigint | boolean
+
+type NarrowRaw<A> =
+  | (A extends [] ? [] : never)
+  | (A extends Narrowable ? A : never)
+  | {
+      [K in keyof A]: A[K] extends Function ? A[K] : NarrowRaw<A[K]>
+    }
+
+export type Narrow<A extends any> = Try<A, [], NarrowRaw<A>>
+
+type Try<A1 extends any, A2 extends any, Catch = never> = A1 extends A2
+  ? A1
+  : Catch
diff --git a/packages/react-form/src/Field.tsx b/packages/react-form/src/Field.tsx
diff --git a/packages/react-form/src/createFormFactory.ts b/packages/react-form/src/createFormFactory.ts
@@ -1,12 +1,11 @@
 import type { FormApi, FormOptions } from '@tanstack/form-core'
-import { createUseField, type UseField } from './useField'
+import { type UseField, type FieldComponent, Field, useField } from './useField'
 import { useForm } from './useForm'
-import { createFieldComponent, type FieldComponent } from './Field'
 
 export type FormFactory<TFormData> = {
   useForm: (opts?: FormOptions<TFormData>) => FormApi<TFormData>
   useField: UseField<TFormData>
-  Field: FieldComponent<TFormData>
+  Field: FieldComponent<TFormData, TFormData>
 }
 
 export function createFormFactory<TFormData>(
@@ -16,7 +15,7 @@ export function createFormFactory<TFormData>(
     useForm: (opts) => {
       return useForm<TFormData>({ ...defaultOpts, ...opts } as any) as any
     },
-    useField: createUseField<TFormData>(),
-    Field: createFieldComponent<TFormData>(),
+    useField: useField as any,
+    Field: Field as any,
   }
 }
diff --git a/packages/react-form/src/formContext.ts b/packages/react-form/src/formContext.ts
@@ -1,7 +1,10 @@
 import type { FormApi } from '@tanstack/form-core'
 import * as React from 'react'
 
-export const formContext = React.createContext<FormApi<any> | null>(null)
+export const formContext = React.createContext<{
+  formApi: FormApi<any>
+  parentFieldName?: string
+} | null>(null!)
 
 export function useFormContext() {
   const formApi = React.useContext(formContext)
diff --git a/packages/react-form/src/index.ts b/packages/react-form/src/index.ts
@@ -25,11 +25,8 @@ export { FormApi, FieldApi, functionalUpdate } from '@tanstack/form-core'
 export type { FormComponent, FormProps } from './useForm'
 export { useForm } from './useForm'
 
-export type { FieldComponent } from './Field'
-export { Field } from './Field'
-
-export type { UseField } from './useField'
-export { useField } from './useField'
+export type { UseField, FieldComponent } from './useField'
+export { useField, Field } from './useField'
 
 export type { FormFactory } from './createFormFactory'
 export { createFormFactory } from './createFormFactory'
diff --git a/packages/react-form/src/useField.ts b/packages/react-form/src/useField.ts
diff --git a/packages/react-form/src/useField.tsx b/packages/react-form/src/useField.tsx
diff --git a/packages/react-form/src/useForm.tsx b/packages/react-form/src/useForm.tsx

Original file line number	Diff line number	Diff line change
`@@ -138,6 +138,7 @@ export class FormApi<TFormData> {`
`138`	`138`	`// Write it back to the store`
`139`	`139`	`this.store.state = next`
`140`	`140`	`this.state = next`
	`141`	`+ console.log(this.state)`
`141`	`142`	`},`
`142`	`143`	`},`
`143`	`144`	`)`
`@@ -402,7 +403,7 @@ export class FormApi<TFormData> {`
`402`	`403`	`)`
`403`	`404`	`}`
`404`	`405`
`405`		`- spliceFieldValue = <TField extends DeepKeys<TFormData>>(`
	`406`	`+ removeFieldValue = <TField extends DeepKeys<TFormData>>(`
`406`	`407`	`field: TField,`
`407`	`408`	`index: number,`
`408`	`409`	`opts?: { touch?: boolean },`