Smarter field state management during insert and remove

src/insert.js

@@ -15,6 +15,26 @@ const insert: Mutator = (
       return copy
     }
   )
+
+  // now we have increment any higher indexes
+  const pattern = new RegExp(`^${name}\\[(\\d+)\\](.*)`)
+  const changes = {}
+  Object.keys(state.fields).forEach(key => {
+    const tokens = pattern.exec(key)
+    if (tokens) {
+      const fieldIndex = Number(tokens[1])
+      if (fieldIndex >= index) {
+        // inc index one higher
+        const incrementedKey = `${name}[${fieldIndex + 1}]${tokens[2]}`
+        changes[incrementedKey] = state.fields[key]
+        changes[incrementedKey].name = incrementedKey
+      }
+      if (fieldIndex === index) {
+        delete state.fields[key]
+      }
+    }
+  })
+  state.fields = { ...state.fields, ...changes }
 }
 
 export default insert

src/insert.test.js

@@ -1,15 +1,53 @@
 import insert from './insert'
+import { getIn, setIn } from 'final-form'
 
 describe('insert', () => {
   const getOp = (index, value) => {
     const changeValue = jest.fn()
-    insert(['foo', index, value], {}, { changeValue })
+    const state = {
+      formState: {
+        values: {
+          foo: ['one', 'two']
+        }
+      },
+      fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: true,
+          error: 'First Error'
+        },
+        'foo[1]': {
+          name: 'foo[1]',
+          touched: false,
+          error: 'Second Error'
+        }
+      }
+    }
+    insert(['foo', index, value], state, { changeValue })
     return changeValue.mock.calls[0][2]
   }
 
   it('should call changeValue once', () => {
     const changeValue = jest.fn()
-    const state = {}
+    const state = {
+      formState: {
+        values: {
+          foo: ['one', 'two']
+        }
+      },
+      fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: true,
+          error: 'First Error'
+        },
+        'foo[1]': {
+          name: 'foo[1]',
+          touched: false,
+          error: 'Second Error'
+        }
+      }
+    }
     const result = insert(['foo', 0, 'bar'], state, { changeValue })
     expect(result).toBeUndefined()
     expect(changeValue).toHaveBeenCalled()
@@ -35,4 +73,75 @@ describe('insert', () => {
     expect(Array.isArray(result)).toBe(true)
     expect(result).toEqual(['a', 'd', 'b', 'c'])
   })
+
+  it('should increment other field data from the specified index', () => {
+    const array = ['a', 'b', 'c', 'd']
+    // implementation of changeValue taken directly from Final Form
+    const changeValue = (state, name, mutate) => {
+      const before = getIn(state.formState.values, name)
+      const after = mutate(before)
+      state.formState.values = setIn(state.formState.values, name, after) || {}
+    }
+    const state = {
+      formState: {
+        values: {
+          foo: array
+        }
+      },
+      fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: true,
+          error: 'A Error'
+        },
+        'foo[1]': {
+          name: 'foo[1]',
+          touched: false,
+          error: 'B Error'
+        },
+        'foo[2]': {
+          name: 'foo[2]',
+          touched: true,
+          error: 'C Error'
+        },
+        'foo[3]': {
+          name: 'foo[3]',
+          touched: false,
+          error: 'D Error'
+        }
+      }
+    }
+    const returnValue = insert(['foo', 1, 'NEWVALUE'], state, { changeValue })
+    expect(returnValue).toBeUndefined()
+    expect(state.formState.values.foo).not.toBe(array) // copied
+    expect(state).toEqual({
+      formState: {
+        values: {
+          foo: ['a', 'NEWVALUE', 'b', 'c', 'd']
+        }
+      },
+      fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: true,
+          error: 'A Error'
+        },
+        'foo[2]': {
+          name: 'foo[2]',
+          touched: false,
+          error: 'B Error'
+        },
+        'foo[3]': {
+          name: 'foo[3]',
+          touched: true,
+          error: 'C Error'
+        },
+        'foo[4]': {
+          name: 'foo[4]',
+          touched: false,
+          error: 'D Error'
+        }
+      }
+    })
+  })
 })

src/remove.js

@@ -17,6 +17,27 @@ const remove: Mutator = (
       return copy
     }
   )
+
+  // now we have to remove any subfields for our index,
+  // and decrement all higher indexes.
+  const pattern = new RegExp(`^${name}\\[(\\d+)\\](.*)`)
+  const backup = { ...state.fields }
+  Object.keys(state.fields).forEach(key => {
+    const tokens = pattern.exec(key)
+    if (tokens) {
+      const fieldIndex = Number(tokens[1])
+      if (fieldIndex === index) {
+        // delete any subfields for this array item
+        delete state.fields[key]
+      } else if (fieldIndex > index) {
+        // shift all higher ones down
+        delete state.fields[key]
+        const decrementedKey = `${name}[${fieldIndex - 1}]${tokens[2]}`
+        state.fields[decrementedKey] = backup[key]
+        state.fields[decrementedKey].name = decrementedKey
+      }
+    }
+  })
   return returnValue
 }
 

src/remove.test.js

@@ -1,9 +1,28 @@
 import remove from './remove'
+import { getIn, setIn } from 'final-form'
 
 describe('remove', () => {
   it('should call changeValue once', () => {
     const changeValue = jest.fn()
-    const state = {}
+    const state = {
+      formState: {
+        values: {
+          foo: ['one', 'two']
+        }
+      },
+      fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: true,
+          error: 'First Error'
+        },
+        'foo[1]': {
+          name: 'foo[1]',
+          touched: false,
+          error: 'Second Error'
+        }
+      }
+    }
     const result = remove(['foo', 0], state, { changeValue })
     expect(result).toBeUndefined()
     expect(changeValue).toHaveBeenCalled()
@@ -15,7 +34,15 @@ describe('remove', () => {
 
   it('should treat undefined like an empty array', () => {
     const changeValue = jest.fn()
-    const returnValue = remove(['foo', 1], {}, { changeValue })
+    const state = {
+      formState: {
+        values: {
+          foo: undefined
+        }
+      },
+      fields: {}
+    }
+    const returnValue = remove(['foo', 1], state, { changeValue })
     expect(returnValue).toBeUndefined()
     const op = changeValue.mock.calls[0][2]
     const result = op(undefined)
@@ -25,14 +52,67 @@ describe('remove', () => {
 
   it('should remove value from the specified index, and return it', () => {
     const array = ['a', 'b', 'c', 'd']
-    let result
-    const changeValue = jest.fn((args, state, op) => {
-      result = op(array)
-    })
-    const returnValue = remove(['foo', 1], {}, { changeValue })
+    // implementation of changeValue taken directly from Final Form
+    const changeValue = (state, name, mutate) => {
+      const before = getIn(state.formState.values, name)
+      const after = mutate(before)
+      state.formState.values = setIn(state.formState.values, name, after) || {}
+    }
+    const state = {
+      formState: {
+        values: {
+          foo: array
+        }
+      },
+      fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: true,
+          error: 'A Error'
+        },
+        'foo[1]': {
+          name: 'foo[1]',
+          touched: false,
+          error: 'B Error'
+        },
+        'foo[2]': {
+          name: 'foo[2]',
+          touched: true,
+          error: 'C Error'
+        },
+        'foo[3]': {
+          name: 'foo[3]',
+          touched: false,
+          error: 'D Error'
+        }
+      }
+    }
+    const returnValue = remove(['foo', 1], state, { changeValue })
     expect(returnValue).toBe('b')
-    expect(result).not.toBe(array) // copied
-    expect(Array.isArray(result)).toBe(true)
-    expect(result).toEqual(['a', 'c', 'd'])
+    expect(state.formState.values.foo).not.toBe(array) // copied
+    expect(state).toEqual({
+      formState: {
+        values: {
+          foo: ['a', 'c', 'd']
+        }
+      },
+      fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: true,
+          error: 'A Error'
+        },
+        'foo[1]': {
+          name: 'foo[1]',
+          touched: true,
+          error: 'C Error'
+        },
+        'foo[2]': {
+          name: 'foo[2]',
+          touched: false,
+          error: 'D Error'
+        }
+      }
+    })
   })
 })

src/shift.js

@@ -1,26 +1,8 @@
 // @flow
 import type { MutableState, Mutator, Tools } from 'final-form'
+import remove from './remove'
 
-const shift: Mutator = (
-  [name]: any[],
-  state: MutableState,
-  { changeValue }: Tools
-) => {
-  let result
-  changeValue(
-    state,
-    name,
-    (array: ?(any[])): ?(any[]) => {
-      if (array) {
-        if (!array.length) {
-          return []
-        }
-        result = array[0]
-        return array.slice(1, array.length)
-      }
-    }
-  )
-  return result
-}
+const shift: Mutator = ([name]: any[], state: MutableState, tools: Tools) =>
+  remove([name, 0], state, tools)
 
 export default shift