Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(moveFieldState): get change/blur/focus callbacks from oldState #54

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(moveFieldState): get change/blur/focus callbacks from oldState #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1594ebc
fix(moveFieldState): get change/blur/focus callbacks from oldState
SeqviriouM May 22, 2020
d4fd76f
fix: tune insert function to fully save backup
SeqviriouM May 23, 2020
f098813
feat(insert): tune tests to check callbacks after inserting
SeqviriouM May 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/insert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const insert: Mutator<any> = (
return copy
})

const backup = { ...state.fields }
const backup = { ...state, fields: { ...state.fields } }

// now we have increment any higher indexes
const pattern = new RegExp(`^${escapeRegexTokens(name)}\\[(\\d+)\\](.*)`)
Expand All @@ -31,7 +31,7 @@ const insert: Mutator<any> = (
if (fieldIndex >= index) {
// inc index one higher
const incrementedKey = `${name}[${fieldIndex + 1}]${tokens[2]}`
moveFieldState(state, backup[key], incrementedKey)
moveFieldState(state, backup.fields[key], incrementedKey, backup)
Comment on lines 33 to +34
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SeqviriouM Found your PR while was trying to resolve issues with insert.
Tested this code in app, where I have issues with insert and it didn't work well. Deeply nested fields handlers are messed up, so changing value in one field changes value in another one(I think because of moving handlers). What helped me is just:

delete state.fields[key]

So all fields after inserted one get default state and handlers.

}
}
})
Expand Down
72 changes: 72 additions & 0 deletions src/insert.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,18 @@ describe('insert', () => {
const resetFieldState = name => {
state.fields[name].touched = false
}
function blur0() {}
function change0() {}
function focus0() {}
function blur1() {}
function change1() {}
function focus1() {}
function blur2() {}
function change2() {}
function focus2() {}
function blur3() {}
function change3() {}
function focus3() {}
const state = {
formState: {
values: {
Expand All @@ -103,21 +115,33 @@ describe('insert', () => {
fields: {
'foo[0]': {
name: 'foo[0]',
blur: blur0,
change: change0,
focus: focus0,
touched: true,
error: 'A Error'
},
'foo[1]': {
name: 'foo[1]',
blur: blur1,
change: change1,
focus: focus1,
touched: true,
error: 'B Error'
},
'foo[2]': {
name: 'foo[2]',
blur: blur2,
change: change2,
focus: focus2,
touched: true,
error: 'C Error'
},
'foo[3]': {
name: 'foo[3]',
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error'
}
Expand All @@ -138,23 +162,35 @@ describe('insert', () => {
fields: {
'foo[0]': {
name: 'foo[0]',
blur: blur0,
change: change0,
focus: focus0,
touched: true,
error: 'A Error'
},
'foo[2]': {
name: 'foo[2]',
blur: blur1,
change: change1,
focus: focus1,
touched: true,
error: 'B Error',
lastFieldState: undefined
},
'foo[3]': {
name: 'foo[3]',
blur: blur2,
change: change2,
focus: focus2,
touched: true,
error: 'C Error',
lastFieldState: undefined
},
'foo[4]': {
name: 'foo[4]',
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error',
lastFieldState: undefined
Expand All @@ -174,6 +210,18 @@ describe('insert', () => {
const resetFieldState = name => {
state.fields[name].touched = false
}
function blur0() {}
function change0() {}
function focus0() {}
function blur1() {}
function change1() {}
function focus1() {}
function blur2() {}
function change2() {}
function focus2() {}
function blur3() {}
function change3() {}
function focus3() {}
const state = {
formState: {
values: {
Expand All @@ -183,21 +231,33 @@ describe('insert', () => {
fields: {
'foo[0][0]': {
name: 'foo[0][0]',
blur: blur0,
change: change0,
focus: focus0,
touched: true,
error: 'A Error'
},
'foo[0][1]': {
name: 'foo[0][1]',
blur: blur1,
change: change1,
focus: focus1,
touched: true,
error: 'B Error'
},
'foo[0][2]': {
name: 'foo[0][2]',
blur: blur2,
change: change2,
focus: focus2,
touched: true,
error: 'C Error'
},
'foo[0][3]': {
name: 'foo[0][3]',
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error'
}
Expand All @@ -218,23 +278,35 @@ describe('insert', () => {
fields: {
'foo[0][0]': {
name: 'foo[0][0]',
blur: blur0,
change: change0,
focus: focus0,
touched: true,
error: 'A Error'
},
'foo[0][2]': {
name: 'foo[0][2]',
blur: blur1,
change: change1,
focus: focus1,
touched: true,
error: 'B Error',
lastFieldState: undefined
},
'foo[0][3]': {
name: 'foo[0][3]',
blur: blur2,
change: change2,
focus: focus2,
touched: true,
error: 'C Error',
lastFieldState: undefined
},
'foo[0][4]': {
name: 'foo[0][4]',
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error',
lastFieldState: undefined
Expand Down
12 changes: 6 additions & 6 deletions src/moveFieldState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,19 @@ function moveFieldState(
// prevent functions from being overwritten
// if the state.fields[destKey] does not exist, it will be created
// when that field gets registered, with its own change/blur/focus callbacks
change: oldState.fields[destKey] && oldState.fields[destKey].change,
blur: oldState.fields[destKey] && oldState.fields[destKey].blur,
focus: oldState.fields[destKey] && oldState.fields[destKey].focus,
change: oldState.fields[source.name] && oldState.fields[source.name].change,
blur: oldState.fields[source.name] && oldState.fields[source.name].blur,
focus: oldState.fields[source.name] && oldState.fields[source.name].focus,
lastFieldState: undefined // clearing lastFieldState forces renotification
}
if (!state.fields[destKey].change) {
delete state.fields[destKey].change;
delete state.fields[destKey].change
}
if (!state.fields[destKey].blur) {
delete state.fields[destKey].blur;
delete state.fields[destKey].blur
}
if (!state.fields[destKey].focus) {
delete state.fields[destKey].focus;
delete state.fields[destKey].focus
}
}

Expand Down
27 changes: 13 additions & 14 deletions src/remove.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,18 +137,18 @@ describe('remove', () => {
},
'foo[1]': {
name: 'foo[1]',
blur: blur1,
change: change1,
focus: focus1,
blur: blur2,
change: change2,
focus: focus2,
touched: true,
error: 'C Error',
lastFieldState: undefined
},
'foo[2]': {
name: 'foo[2]',
blur: blur2,
change: change2,
focus: focus2,
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error',
lastFieldState: undefined
Expand All @@ -160,7 +160,6 @@ describe('remove', () => {
}
})
})


it('should remove value from the specified index, and return it (nested arrays)', () => {
const array = ['a', 'b', 'c', 'd']
Expand Down Expand Up @@ -249,18 +248,18 @@ describe('remove', () => {
},
'foo[0][1]': {
name: 'foo[0][1]',
blur: blur1,
change: change1,
focus: focus1,
blur: blur2,
change: change2,
focus: focus2,
touched: true,
error: 'C Error',
lastFieldState: undefined
},
'foo[0][2]': {
name: 'foo[0][2]',
blur: blur2,
change: change2,
focus: focus2,
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error',
lastFieldState: undefined
Expand All @@ -271,7 +270,7 @@ describe('remove', () => {
}
}
})
})
})

it('should remove value from the specified index, and handle new fields', () => {
const array = ['a', { key: 'val' }]
Expand Down
30 changes: 15 additions & 15 deletions src/removeBatch.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,9 @@ describe('removeBatch', () => {
fields: {
'foo[0]': {
name: 'foo[0]',
blur: blur0,
change: change0,
focus: focus0,
blur: blur1,
change: change1,
focus: focus1,
touched: false,
error: 'Second Error',
lastFieldState: undefined
Expand Down Expand Up @@ -307,18 +307,18 @@ describe('removeBatch', () => {
},
'foo[1]': {
name: 'foo[1]',
blur: blur1,
change: change1,
focus: focus1,
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error',
lastFieldState: undefined
},
'foo[2]': {
name: 'foo[2]',
blur: blur2,
change: change2,
focus: focus2,
blur: blur4,
change: change4,
focus: focus4,
touched: true,
error: 'E Error',
lastFieldState: undefined
Expand Down Expand Up @@ -432,18 +432,18 @@ describe('removeBatch', () => {
},
'foo[0][1]': {
name: 'foo[0][1]',
blur: blur1,
change: change1,
focus: focus1,
blur: blur3,
change: change3,
focus: focus3,
touched: false,
error: 'D Error',
lastFieldState: undefined
},
'foo[0][2]': {
name: 'foo[0][2]',
blur: blur2,
change: change2,
focus: focus2,
blur: blur4,
change: change4,
focus: focus4,
touched: true,
error: 'E Error',
lastFieldState: undefined
Expand Down
5 changes: 2 additions & 3 deletions src/swap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
// @flow
import type { MutableState, Mutator, Tools } from 'final-form'
import moveFieldState from './moveFieldState'
import moveFields from './moveFields';
import restoreFunctions from './restoreFunctions';
import moveFields from './moveFields'
import restoreFunctions from './restoreFunctions'

const TMP: string = 'tmp'

Expand Down
Loading