@playfast/reform-forms 1.2.1 → 1.4.0

package/src/formState.ts

@@ -1,12 +1,7 @@
 import { Function as Fn, Option, Record } from 'effect'
-import {
-  getNestedValue,
-  moveAt,
-  recalculateDirtyPaths,
-  replaceAt,
-  setNestedValue,
-} from './path'
+import { getNestedValue, moveAt, recalculateDirtyPaths, replaceAt, setNestedValue } from './path'
 import type { FormState } from './formTypes'
+import { movedIndexMap, reindexMetadata, removedIndexMap, swappedIndexMap } from './formReindex'
 
 const arrayKeyCounter = { current: 0 }
 const makeArrayKey = (): string => `form-item-${arrayKeyCounter.current++}`
@@ -103,18 +98,39 @@ const updateKeys = (
   return { ...state.arrayKeys, [path]: transform(existing) }
 }
 
-export const setAtPath = <Values>(input: SetPathInput<Values>): FormState<Values> =>
-  withValues(input.state, setNestedValue(input.state.values, input.path, input.value))
+// The subtree at `path` is being replaced, so every key describing a row inside it
+// is about to describe nothing. Left behind, the next append folds over the stale
+// array and hands a new row the identity of one the user discarded.
+const withoutSubtree = (
+  keys: Readonly<Record<string, ReadonlyArray<string>>>,
+  path: string,
+): Record<string, ReadonlyArray<string>> =>
+  Record.fromEntries(
+    Record.toEntries(keys).filter(
+      ([key]) => key !== path && !key.startsWith(`${path}[`) && !key.startsWith(`${path}.`),
+    ),
+  )
+
+export const setAtPath = <Values>(input: SetPathInput<Values>): FormState<Values> => ({
+  ...withValues(input.state, setNestedValue(input.state.values, input.path, input.value)),
+  arrayKeys: {
+    ...withoutSubtree(input.state.arrayKeys, input.path),
+    ...arrayKeysFor(input.value, input.path),
+  },
+})
 
 export const appendAtPath = <Values>(input: SetPathInput<Values>): FormState<Values> => {
   const elements = currentArray({ source: input.state.values, path: input.path })
   const nextValues = setNestedValue(input.state.values, input.path, [...elements, input.value])
   return {
     ...withValues(input.state, nextValues),
-    arrayKeys: updateKeys(Fn.unsafeCoerce(input.state), input.path, (keys) => [
-      ...keys,
-      makeArrayKey(),
-    ]),
+    arrayKeys: {
+      ...updateKeys(Fn.unsafeCoerce(input.state), input.path, (keys) => [...keys, makeArrayKey()]),
+      // Arrays nested inside the appended item need keys of their own — `initialState`
+      // seeds every array in the tree, and a nested list without them falls back to a
+      // positional key, so its rows change identity the first time one is touched.
+      ...arrayKeysFor(input.value, `${input.path}[${elements.length}]`),
+    },
   }
 }
 
@@ -128,10 +144,19 @@ export const removeAtPath = <Values>(input: RemovePathInput<Values>): FormState<
     input.path,
     elements.filter((_, position) => position !== input.index),
   )
+  const moved = reindexMetadata({
+    state: input.state,
+    path: input.path,
+    moveIndex: removedIndexMap(input.index),
+  })
   return {
     ...withValues(input.state, nextValues),
-    arrayKeys: updateKeys(Fn.unsafeCoerce(input.state), input.path, (keys) =>
-      keys.filter((_, position) => position !== input.index),
+    touched: moved.touched,
+    errors: moved.errors,
+    arrayKeys: updateKeys(
+      Fn.unsafeCoerce({ ...input.state, arrayKeys: moved.nestedKeys }),
+      input.path,
+      (keys) => keys.filter((_, position) => position !== input.index),
     ),
   }
 }
@@ -143,10 +168,25 @@ export const moveAtPath = <Values>(input: MovePathInput<Values>): FormState<Valu
     return input.state
   }
   const nextValues = setNestedValue(input.state.values, input.path, next)
+  const moved = reindexMetadata({
+    state: input.state,
+    path: input.path,
+    // `moveAt` accepts `to === elements.length` as "move it to the end", but a move
+    // keeps the length, so the item lands one slot short of that. The metadata has to
+    // follow the value, not the argument.
+    moveIndex: movedIndexMap({
+      from: input.from,
+      to: Math.min(input.to, elements.length - 1),
+    }),
+  })
   return {
     ...withValues(input.state, nextValues),
-    arrayKeys: updateKeys(Fn.unsafeCoerce(input.state), input.path, (keys) =>
-      moveAt(keys, input.from, input.to),
+    touched: moved.touched,
+    errors: moved.errors,
+    arrayKeys: updateKeys(
+      Fn.unsafeCoerce({ ...input.state, arrayKeys: moved.nestedKeys }),
+      input.path,
+      (keys) => moveAt(keys, input.from, input.to),
     ),
   }
 }
@@ -168,14 +208,24 @@ export const swapAtPath = <Values>(input: SwapPathInput<Values>): FormState<Valu
     elements[input.first],
   )
   const nextValues = setNestedValue(input.state.values, input.path, swapped)
+  const moved = reindexMetadata({
+    state: input.state,
+    path: input.path,
+    moveIndex: swappedIndexMap({ first: input.first, second: input.second }),
+  })
   return {
     ...withValues(input.state, nextValues),
-    arrayKeys: updateKeys(Fn.unsafeCoerce(input.state), input.path, (keys) =>
-      replaceAt(
-        replaceAt(keys, input.first, keys[input.second] ?? makeArrayKey()),
-        input.second,
-        keys[input.first] ?? makeArrayKey(),
-      ),
+    touched: moved.touched,
+    errors: moved.errors,
+    arrayKeys: updateKeys(
+      Fn.unsafeCoerce({ ...input.state, arrayKeys: moved.nestedKeys }),
+      input.path,
+      (keys) =>
+        replaceAt(
+          replaceAt(keys, input.first, keys[input.second] ?? makeArrayKey()),
+          input.second,
+          keys[input.first] ?? makeArrayKey(),
+        ),
     ),
   }
 }