Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b2561a5

Browse files
Daniil GrishkinDaniil Grishkin
Daniil Grishkin
and
Daniil Grishkin
authored
fix mutator definition. add missing dep. write test for fix (#172)
Co-authored-by: Daniil Grishkin <ddgrishkin@joom.com>
1 parent 303bdce commit b2561a5

File tree

3 files changed

+63
-9
lines changed

3 files changed

+63
-9
lines changed

‎package.json

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
3737
"@babel/plugin-syntax-import-meta": "^7.10.4",
3838
"@babel/plugin-transform-flow-strip-types": "^7.12.1",
39+
"@babel/plugin-transform-react-jsx-source": "^7.18.6",
3940
"@babel/plugin-transform-runtime": "^7.12.1",
4041
"@babel/preset-env": "^7.12.1",
4142
"@babel/preset-flow": "^7.12.1",
@@ -86,8 +87,8 @@
8687
"peerDependencies": {
8788
"final-form": "^4.15.0",
8889
"final-form-arrays": ">=1.0.4",
89-
"react-final-form": "^6.2.1",
90-
"react": "^16.8.0 || ^17.0.0"
90+
"react": "^16.8.0 || ^17.0.0",
91+
"react-final-form": "^6.2.1"
9192
},
9293
"jest": {
9394
"watchPlugins": [

‎src/FieldArray.test.js

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ErrorBoundary, Toggle, wrapWith } from './testUtils'
66
import { Form, Field } from 'react-final-form'
77
import { FieldArray, version } from '.'
88

9-
const onSubmitMock = values => {}
9+
const onSubmitMock = values => {}
1010
const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
1111
async function sleep(ms) {
1212
await act(async () => {
@@ -22,7 +22,7 @@ describe('FieldArray', () => {
2222
})
2323

2424
it('should warn if not used inside a form', () => {
25-
jest.spyOn(console, 'error').mockImplementation(() => {})
25+
jest.spyOn(console, 'error').mockImplementation(() => {})
2626
const errorSpy = jest.fn()
2727
render(
2828
<ErrorBoundary spy={errorSpy}>
@@ -38,7 +38,7 @@ describe('FieldArray', () => {
3838
})
3939

4040
it('should warn if no render strategy is provided', () => {
41-
jest.spyOn(console, 'error').mockImplementation(() => {})
41+
jest.spyOn(console, 'error').mockImplementation(() => {})
4242
const errorSpy = jest.fn()
4343
render(
4444
<ErrorBoundary spy={errorSpy}>
@@ -58,7 +58,7 @@ describe('FieldArray', () => {
5858
})
5959

6060
it('should warn if no array mutators provided', () => {
61-
jest.spyOn(console, 'error').mockImplementation(() => {})
61+
jest.spyOn(console, 'error').mockImplementation(() => {})
6262
const errorSpy = jest.fn()
6363
render(
6464
<ErrorBoundary spy={errorSpy}>
@@ -451,6 +451,58 @@ describe('FieldArray', () => {
451451
expect(queryByTestId('names[1]')).not.toBe(null)
452452
})
453453

454+
it('should push a new value to right place after changing name', () => {
455+
const { getByText, queryByTestId } = render(
456+
<Toggle>
457+
{isCats => (
458+
<Form onSubmit={onSubmitMock} mutators={arrayMutators} subscription={{}}>
459+
{() => (
460+
<form>
461+
<FieldArray name={isCats ? 'cats' : 'dogs'}>
462+
{({ fields }) => (
463+
<div>
464+
{fields.map(field => (
465+
<Field
466+
name={field}
467+
key={field}
468+
component="input"
469+
data-testid={field}
470+
/>
471+
))}
472+
<button type="button" onClick={() => fields.push({})}>
473+
Add
474+
</button>
475+
</div>
476+
)}
477+
</FieldArray>
478+
</form>
479+
)}
480+
</Form>
481+
)}
482+
</Toggle>
483+
)
484+
expect(queryByTestId('dogs[0]')).toBe(null)
485+
expect(queryByTestId('dogs[1]')).toBe(null)
486+
487+
// push
488+
fireEvent.click(getByText('Add'))
489+
490+
expect(queryByTestId('dogs[0]')).not.toBe(null)
491+
expect(queryByTestId('dogs[1]')).toBe(null)
492+
493+
// change name
494+
fireEvent.click(getByText('Toggle'))
495+
496+
expect(queryByTestId('cats[0]')).toBe(null)
497+
expect(queryByTestId('cats[1]')).toBe(null)
498+
499+
// push
500+
fireEvent.click(getByText('Add'))
501+
502+
expect(queryByTestId('cats[0]')).not.toBe(null)
503+
expect(queryByTestId('cats[1]')).toBe(null)
504+
})
505+
454506
it('should not re-render Field when subscription is empty object', () => {
455507
const nameFieldRender = jest.fn()
456508
const surnameFieldRender = jest.fn()

‎src/useFieldArray.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
// @flow
2+
import { useMemo } from 'react';
23
import { useForm, useField } from 'react-final-form'
34
import { fieldSubscriptionItems, ARRAY_ERROR } from 'final-form'
45
import type { Mutators } from 'final-form-arrays'
@@ -31,13 +32,13 @@ const useFieldArray = (
3132
'Array mutators not found. You need to provide the mutators from final-form-arrays to your form'
3233
)
3334
}
34-
const mutators = useConstant<Mutators>(() =>
35+
const mutators = useMemo<Mutators>(() =>
3536
// curry the field name onto all mutator calls
3637
Object.keys(formMutators).reduce((result, key) => {
3738
result[key] = (...args) => formMutators[key](name, ...args)
3839
return result
39-
}, {})
40-
)
40+
}, {}
41+
),[name,formMutators])
4142

4243
const validate: FieldValidator = useConstant(
4344
() => (value, allValues, meta) => {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /