Skip to content

Commit 9f8f74f

Browse files
PerfectPixelerikras
PerfectPixel
authored and
erikras
committed
Escape regex tokens within field names (final-form#38)
* Escape regex tokens within field names * Update utils.js * fixing smells one report at a time... * Updated regex with one from MDN * Fixed failing test
1 parent 7ee1ef8 commit 9f8f74f

File tree

9 files changed

+410
-4
lines changed

9 files changed

+410
-4
lines changed

‎src/insert.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22
import type { MutableState, Mutator, Tools } from 'final-form'
33
import moveFieldState from './moveFieldState'
4+
import { escapeRegexTokens } from './utils'
45

56
const insert: Mutator<any> = (
67
[name, index, value]: any[],
@@ -16,7 +17,7 @@ const insert: Mutator<any> = (
1617
const backup = { ...state.fields }
1718

1819
// now we have increment any higher indexes
19-
const pattern = new RegExp(`^${name}\\[(\\d+)\\](.*)`)
20+
const pattern = new RegExp(`^${escapeRegexTokens(name)}\\[(\\d+)\\](.*)`)
2021

2122
// we need to increment high indices first so
2223
// lower indices won't overlap

‎src/insert.test.js‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,4 +162,84 @@ describe('insert', () => {
162162
}
163163
})
164164
})
165+
166+
it('should increment other field data from the specified index (nested arrays)', () => {
167+
const array = ['a', 'b', 'c', 'd']
168+
// implementation of changeValue taken directly from Final Form
169+
const changeValue = (state, name, mutate) => {
170+
const before = getIn(state.formState.values, name)
171+
const after = mutate(before)
172+
state.formState.values = setIn(state.formState.values, name, after) || {}
173+
}
174+
const resetFieldState = name => {
175+
state.fields[name].touched = false
176+
}
177+
const state = {
178+
formState: {
179+
values: {
180+
foo: [array]
181+
}
182+
},
183+
fields: {
184+
'foo[0][0]': {
185+
name: 'foo[0][0]',
186+
touched: true,
187+
error: 'A Error'
188+
},
189+
'foo[0][1]': {
190+
name: 'foo[0][1]',
191+
touched: true,
192+
error: 'B Error'
193+
},
194+
'foo[0][2]': {
195+
name: 'foo[0][2]',
196+
touched: true,
197+
error: 'C Error'
198+
},
199+
'foo[0][3]': {
200+
name: 'foo[0][3]',
201+
touched: false,
202+
error: 'D Error'
203+
}
204+
}
205+
}
206+
const returnValue = insert(['foo[0]', 1, 'NEWVALUE'], state, {
207+
changeValue,
208+
resetFieldState
209+
})
210+
expect(returnValue).toBeUndefined()
211+
expect(state.formState.values.foo).not.toBe(array) // copied
212+
expect(state).toEqual({
213+
formState: {
214+
values: {
215+
foo: [['a', 'NEWVALUE', 'b', 'c', 'd']]
216+
}
217+
},
218+
fields: {
219+
'foo[0][0]': {
220+
name: 'foo[0][0]',
221+
touched: true,
222+
error: 'A Error'
223+
},
224+
'foo[0][2]': {
225+
name: 'foo[0][2]',
226+
touched: true,
227+
error: 'B Error',
228+
lastFieldState: undefined
229+
},
230+
'foo[0][3]': {
231+
name: 'foo[0][3]',
232+
touched: true,
233+
error: 'C Error',
234+
lastFieldState: undefined
235+
},
236+
'foo[0][4]': {
237+
name: 'foo[0][4]',
238+
touched: false,
239+
error: 'D Error',
240+
lastFieldState: undefined
241+
}
242+
}
243+
})
244+
})
165245
})

‎src/pop.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// @flow
22
import type { MutableState, Mutator, Tools } from 'final-form'
3+
import { escapeRegexTokens } from './utils'
34

45
const pop: Mutator<any> = (
56
[name]: any[],
@@ -21,7 +22,9 @@ const pop: Mutator<any> = (
2122

2223
// now we have to remove any subfields for our index,
2324
if (removedIndex !== undefined) {
24-
const pattern = new RegExp(`^${name}\\[${removedIndex}].*`)
25+
const pattern = new RegExp(
26+
`^${escapeRegexTokens(name)}\\[${removedIndex}].*`
27+
)
2528
Object.keys(state.fields).forEach(key => {
2629
if (pattern.test(key)) {
2730
delete state.fields[key]

‎src/pop.test.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,4 +195,81 @@ describe('pop', () => {
195195
}
196196
})
197197
})
198+
199+
it('should pop value off the end of array and return it (nested arrays)', () => {
200+
const array = ['a', 'b', 'c', 'd']
201+
// implementation of changeValue taken directly from Final Form
202+
const changeValue = (state, name, mutate) => {
203+
const before = getIn(state.formState.values, name)
204+
const after = mutate(before)
205+
state.formState.values = setIn(state.formState.values, name, after) || {}
206+
}
207+
const state = {
208+
formState: {
209+
values: {
210+
foo: [array],
211+
anotherField: 42
212+
}
213+
},
214+
fields: {
215+
'foo[0][0]': {
216+
name: 'foo[0][0]',
217+
touched: true,
218+
error: 'A Error'
219+
},
220+
'foo[0][1]': {
221+
name: 'foo[0][1]',
222+
touched: false,
223+
error: 'B Error'
224+
},
225+
'foo[0][2]': {
226+
name: 'foo[0][2]',
227+
touched: true,
228+
error: 'C Error'
229+
},
230+
'foo[0][3]': {
231+
name: 'foo[0][3]',
232+
touched: false,
233+
error: 'D Error'
234+
},
235+
anotherField: {
236+
name: 'anotherField',
237+
touched: false
238+
}
239+
}
240+
}
241+
const returnValue = pop(['foo[0]'], state, { changeValue })
242+
expect(returnValue).toBe('d')
243+
expect(Array.isArray(state.formState.values.foo)).toBe(true)
244+
expect(state.formState.values.foo).not.toBe(array) // copied
245+
expect(state).toEqual({
246+
formState: {
247+
values: {
248+
foo: [['a', 'b', 'c']],
249+
anotherField: 42
250+
}
251+
},
252+
fields: {
253+
'foo[0][0]': {
254+
name: 'foo[0][0]',
255+
touched: true,
256+
error: 'A Error'
257+
},
258+
'foo[0][1]': {
259+
name: 'foo[0][1]',
260+
touched: false,
261+
error: 'B Error'
262+
},
263+
'foo[0][2]': {
264+
name: 'foo[0][2]',
265+
touched: true,
266+
error: 'C Error'
267+
},
268+
anotherField: {
269+
name: 'anotherField',
270+
touched: false
271+
}
272+
}
273+
})
274+
})
198275
})

‎src/remove.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22
import type { MutableState, Mutator, Tools } from 'final-form'
33
import moveFieldState from './moveFieldState'
4+
import { escapeRegexTokens } from './utils'
45

56
const remove: Mutator<any> = (
67
[name, index]: any[],
@@ -17,7 +18,7 @@ const remove: Mutator<any> = (
1718

1819
// now we have to remove any subfields for our index,
1920
// and decrement all higher indexes.
20-
const pattern = new RegExp(`^${name}\\[(\\d+)\\](.*)`)
21+
const pattern = new RegExp(`^${escapeRegexTokens(name)}\\[(\\d+)\\](.*)`)
2122
const backup = { ...state, fields: { ...state.fields } }
2223
Object.keys(state.fields).forEach(key => {
2324
const tokens = pattern.exec(key)

‎src/remove.test.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,118 @@ describe('remove', () => {
160160
}
161161
})
162162
})
163+
164+
165+
it('should remove value from the specified index, and return it (nested arrays)', () => {
166+
const array = ['a', 'b', 'c', 'd']
167+
// implementation of changeValue taken directly from Final Form
168+
const changeValue = (state, name, mutate) => {
169+
const before = getIn(state.formState.values, name)
170+
const after = mutate(before)
171+
state.formState.values = setIn(state.formState.values, name, after) || {}
172+
}
173+
function blur0() {}
174+
function change0() {}
175+
function focus0() {}
176+
function blur1() {}
177+
function change1() {}
178+
function focus1() {}
179+
function blur2() {}
180+
function change2() {}
181+
function focus2() {}
182+
function blur3() {}
183+
function change3() {}
184+
function focus3() {}
185+
const state = {
186+
formState: {
187+
values: {
188+
foo: [array],
189+
anotherField: 42
190+
}
191+
},
192+
fields: {
193+
'foo[0][0]': {
194+
name: 'foo[0][0]',
195+
blur: blur0,
196+
change: change0,
197+
focus: focus0,
198+
touched: true,
199+
error: 'A Error'
200+
},
201+
'foo[0][1]': {
202+
name: 'foo[0][1]',
203+
blur: blur1,
204+
change: change1,
205+
focus: focus1,
206+
touched: false,
207+
error: 'B Error'
208+
},
209+
'foo[0][2]': {
210+
name: 'foo[0][2]',
211+
blur: blur2,
212+
change: change2,
213+
focus: focus2,
214+
touched: true,
215+
error: 'C Error'
216+
},
217+
'foo[0][3]': {
218+
name: 'foo[0][3]',
219+
blur: blur3,
220+
change: change3,
221+
focus: focus3,
222+
touched: false,
223+
error: 'D Error'
224+
},
225+
anotherField: {
226+
name: 'anotherField',
227+
touched: false
228+
}
229+
}
230+
}
231+
const returnValue = remove(['foo[0]', 1], state, { changeValue })
232+
expect(returnValue).toBe('b')
233+
expect(state.formState.values.foo).not.toBe(array) // copied
234+
expect(state).toEqual({
235+
formState: {
236+
values: {
237+
foo: [['a', 'c', 'd']],
238+
anotherField: 42
239+
}
240+
},
241+
fields: {
242+
'foo[0][0]': {
243+
name: 'foo[0][0]',
244+
blur: blur0,
245+
change: change0,
246+
focus: focus0,
247+
touched: true,
248+
error: 'A Error'
249+
},
250+
'foo[0][1]': {
251+
name: 'foo[0][1]',
252+
blur: blur1,
253+
change: change1,
254+
focus: focus1,
255+
touched: true,
256+
error: 'C Error',
257+
lastFieldState: undefined
258+
},
259+
'foo[0][2]': {
260+
name: 'foo[0][2]',
261+
blur: blur2,
262+
change: change2,
263+
focus: focus2,
264+
touched: false,
265+
error: 'D Error',
266+
lastFieldState: undefined
267+
},
268+
anotherField: {
269+
name: 'anotherField',
270+
touched: false
271+
}
272+
}
273+
})
274+
})
163275

164276
it('should remove value from the specified index, and handle new fields', () => {
165277
const array = ['a', { key: 'val' }]

‎src/removeBatch.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// @flow
22
import type { MutableState, Mutator, Tools } from 'final-form'
33
import moveFieldState from './moveFieldState'
4+
import { escapeRegexTokens } from './utils'
45

56
const countBelow = (array, value) =>
67
array.reduce((count, item) => (item < value ? count + 1 : count), 0)
@@ -38,7 +39,7 @@ const removeBatch: Mutator<any> = (
3839

3940
// now we have to remove any subfields for our indexes,
4041
// and decrement all higher indexes.
41-
const pattern = new RegExp(`^${name}\\[(\\d+)\\](.*)`)
42+
const pattern = new RegExp(`^${escapeRegexTokens(name)}\\[(\\d+)\\](.*)`)
4243
const newState = { ...state, fields: {} }
4344
Object.keys(state.fields).forEach(key => {
4445
const tokens = pattern.exec(key)

0 commit comments

Comments
 (0)