Renamed merge to concat and fixed removeBatch bugs (#30)

Author: erikras

README.md

@@ -49,8 +49,8 @@ const customer = form.mutators.pop('customers')
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
 - [Mutators](#mutators)
+  - [`form.mutators.concat(name: string, value: Array<any>) => void`](#formmutatorsconcatname-string-value-arrayany--void)
   - [`form.mutators.insert(name: string, index: number, value: any) => undefined`](#formmutatorsinsertname-string-index-number-value-any--undefined)
-  - [`form.mutators.merge(name: string, value: Array<any>) => void`](#formmutatorsmergename-string-value-arrayany--void)
   - [`form.mutators.move(name: string, from: number, to: number) => undefined`](#formmutatorsmovename-string-from-number-to-number--undefined)
   - [`form.mutators.pop(name: string) => any`](#formmutatorspopname-string--any)
   - [`form.mutators.push(name: string, value: any) => void`](#formmutatorspushname-string-value-any--void)
@@ -65,13 +65,13 @@ const customer = form.mutators.pop('customers')
 
 ## Mutators
 
-### `form.mutators.insert(name: string, index: number, value: any) => undefined`
+### `form.mutators.concat(name: string, value: Array<any>) => void`
 
-Inserts a value into the specified index of the array field.
+Concatenates an array at the end of the array field.
 
-### `form.mutators.merge(name: string, value: Array<any>) => void`
+### `form.mutators.insert(name: string, index: number, value: any) => undefined`
 
-Merges an array at the end of the array field.
+Inserts a value into the specified index of the array field.
 
 ### `form.mutators.move(name: string, from: number, to: number) => undefined`
 

src/merge.js renamed to src/concat.js

@@ -1,7 +1,7 @@
 // @flow
 import type { MutableState, Mutator, Tools } from 'final-form'
 
-const merge: Mutator = (
+const concat: Mutator = (
   [name, value]: any[],
   state: MutableState,
   { changeValue }: Tools
@@ -13,4 +13,4 @@ const merge: Mutator = (
   )
 }
 
-export default merge
+export default concat

src/merge.test.js renamed to src/concat.test.js

@@ -1,16 +1,16 @@
-import merge from './merge'
+import concat from './concat'
 
-describe('merge', () => {
+describe('concat', () => {
   const getOp = value => {
     const changeValue = jest.fn()
-    merge(['foo', value], {}, { changeValue })
+    concat(['foo', value], {}, { changeValue })
     return changeValue.mock.calls[0][2]
   }
 
   it('should call changeValue once', () => {
     const changeValue = jest.fn()
     const state = {}
-    const result = merge(['foo', ['bar', 'baz']], state, { changeValue })
+    const result = concat(['foo', ['bar', 'baz']], state, { changeValue })
     expect(result).toBeUndefined()
     expect(changeValue).toHaveBeenCalled()
     expect(changeValue).toHaveBeenCalledTimes(1)
@@ -26,7 +26,7 @@ describe('merge', () => {
     expect(result).toEqual(['bar', 'baz'])
   })
 
-  it('should merge the array at the end of the original array', () => {
+  it('should concat the array at the end of the original array', () => {
     const op = getOp(['d', 'e'])
     const result = op(['a', 'b', 'c'])
     expect(Array.isArray(result)).toBe(true)

src/index.d.test.ts

@@ -15,7 +15,10 @@ const form = createForm({
 const mutators: Mutators = (form.mutators as any) as Mutators
 
 mutators.insert('customers', 0, { firstName: '', lastName: '' })
-mutators.merge('customers', [{ firstName: '', lastName: '' }, { firstName: '', lastName: '' }])
+mutators.concat('customers', [
+  { firstName: '', lastName: '' },
+  { firstName: '', lastName: '' }
+])
 mutators.move('customers', 0, 1)
 const customer = mutators.pop('customers')
 mutators.push('customers', { firstName: '', lastName: '' })

src/index.d.ts

@@ -1,7 +1,7 @@
 import { Mutator } from 'final-form'
 
 export const insert: Mutator
-export const merge: Mutator
+export const concat: Mutator
 export const move: Mutator
 export const pop: Mutator
 export const push: Mutator
@@ -14,7 +14,7 @@ export const unshift: Mutator
 
 export interface DefaultType {
   insert: Mutator
-  merge: Mutator
+  concat: Mutator
   move: Mutator
   pop: Mutator
   push: Mutator
@@ -32,7 +32,7 @@ export default d
 /** The shape of the mutators once final-form has bound them to state */
 export interface Mutators {
   insert: (name: string, index: number, value: any) => void
-  merge: (name: string, value: Array<any>) => void,
+  concat: (name: string, value: Array<any>) => void
   move: (name: string, from: number, to: number) => void
   pop: (name: string) => any
   push: (name: string, value: any) => void

src/index.js

@@ -1,7 +1,7 @@
 // @flow
 import type { Mutator } from 'final-form'
 import insert from './insert'
-import merge from './merge'
+import concat from './concat'
 import move from './move'
 import pop from './pop'
 import push from './push'
@@ -14,7 +14,7 @@ import update from './update'
 
 const mutators: { [string]: Mutator } = {
   insert,
-  merge,
+  concat,
   move,
   pop,
   push,

src/index.js.flow

@@ -8,7 +8,7 @@ declare export default DefaultType
 /** The shape of the mutators once final-form has bound them to state */
 export type Mutators = {
   insert: (name: string, index: number, value: any) => void,
-  merge: (name: string, value: Array<any>) => void,
+  concat: (name: string, value: Array<any>) => void,
   move: (name: string, from: number, to: number) => void,
   pop: (name: string) => any,
   push: (name: string, value: any) => void,

src/insert.test.js

@@ -32,7 +32,8 @@ describe('insert', () => {
     const state = {
       formState: {
         values: {
-          foo: ['one', 'two']
+          foo: ['one', 'two'],
+          anotherField: 42
         }
       },
       fields: {
@@ -43,8 +44,11 @@ describe('insert', () => {
         },
         'foo[1]': {
           name: 'foo[1]',
-          touched: false,
-          error: 'Second Error'
+          touched: false
+        },
+        anotherField: {
+          name: 'anotherField',
+          touched: true
         }
       }
     }

src/remove.test.js

@@ -61,7 +61,8 @@ describe('remove', () => {
     const state = {
       formState: {
         values: {
-          foo: array
+          foo: array,
+          anotherField: 42
         }
       },
       fields: {
@@ -84,6 +85,10 @@ describe('remove', () => {
           name: 'foo[3]',
           touched: false,
           error: 'D Error'
+        },
+        anotherField: {
+          name: 'anotherField',
+          touched: false
         }
       }
     }
@@ -93,7 +98,8 @@ describe('remove', () => {
     expect(state).toEqual({
       formState: {
         values: {
-          foo: ['a', 'c', 'd']
+          foo: ['a', 'c', 'd'],
+          anotherField: 42
         }
       },
       fields: {
@@ -111,6 +117,10 @@ describe('remove', () => {
           name: 'foo[2]',
           touched: false,
           error: 'D Error'
+        },
+        anotherField: {
+          name: 'anotherField',
+          touched: false
         }
       }
     })

src/removeBatch.js

@@ -1,36 +1,66 @@
 // @flow
 import type { MutableState, Mutator, Tools } from 'final-form'
 
+const countBelow = (array, value) =>
+  array.reduce((count, item) => (item < value ? count + 1 : count), 0)
+
 const removeBatch: Mutator = (
   [name, indexes]: any[],
   state: MutableState,
   { changeValue }: Tools
 ) => {
+  const sortedIndexes: number[] = [...indexes]
+  sortedIndexes.sort()
+  // remove duplicates
+  for (let i = 0; i < sortedIndexes.length; i++) {
+    if (i > 0 && sortedIndexes[i] === sortedIndexes[i - 1]) {
+      sortedIndexes.splice(i--, 1)
+    }
+  }
+
+  let returnValue = []
   changeValue(
     state,
     name,
     (array: ?(any[])): ?(any[]) => {
-      if (!array || !indexes) {
+      // use original order of indexes for return value
+      returnValue = indexes.map(index => array && array[index])
+      if (!array || !sortedIndexes.length) {
         return array
       }
 
-      let mask = new Array(indexes.length)
-      for (let i = 0; i < indexes.length; i++) {
-        mask[indexes[i]] = true
-      }
+      const copy = [...array]
+      const removed = []
+      sortedIndexes.forEach((index: number) => {
+        copy.splice(index - removed.length, 1)
+        removed.push(array && array[index])
+      })
+      return copy
+    }
+  )
 
-      let offset = 0
-      for (let i = 0; i < array.length; i++) {
-        if (mask[i] === undefined) {
-          array[offset] = array[i]
-          offset++
-        }
+  // now we have to remove any subfields for our indexes,
+  // and decrement all higher indexes.
+  const pattern = new RegExp(`^${name}\\[(\\d+)\\](.*)`)
+  const newFields = {}
+  Object.keys(state.fields).forEach(key => {
+    const tokens = pattern.exec(key)
+    if (tokens) {
+      const fieldIndex = Number(tokens[1])
+      if (!~sortedIndexes.indexOf(fieldIndex)) {
+        // not one of the removed indexes
+        // shift all higher ones down
+        const decrementedKey = `${name}[${fieldIndex -
+          countBelow(sortedIndexes, fieldIndex)}]${tokens[2]}`
+        newFields[decrementedKey] = state.fields[key]
+        newFields[decrementedKey].name = decrementedKey
       }
-
-      array.length = offset
-      return array
+    } else {
+      newFields[key] = state.fields[key]
     }
-  )
+  })
+  state.fields = newFields
+  return returnValue
 }
 
 export default removeBatch