From f5ba2795f875031415e26af6f234624b4eaf26bd Mon Sep 17 00:00:00 2001 From: zoomdong Date: Wed, 5 Aug 2020 18:12:12 +0800 Subject: [PATCH 1/5] feat: add support add random index formItem --- src/List.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index 0315fe21..269dd78d 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -12,7 +12,7 @@ interface ListField { } interface ListOperations { - add: (defaultValue?: StoreValue) => void; + add: (defaultValue?: StoreValue, index?: number) => void; remove: (index: number | number[]) => void; move: (from: number, to: number) => void; } @@ -59,8 +59,10 @@ const List: React.FunctionComponent = ({ name, children }) => { * Always get latest value in case user update fields by `form` api. */ const operations: ListOperations = { - add: defaultValue => { + add: (defaultValue, index: number) => { // Mapping keys + // 支持把动态的 formItem 插入到指定到位置 + console.log(index); keyManager.keys = [...keyManager.keys, keyManager.id]; keyManager.id += 1; From 7d89f907f0516b411e7d8f82b146dd0edda2f15e Mon Sep 17 00:00:00 2001 From: zoomdong <1344492820@qq.com> Date: Thu, 6 Aug 2020 23:56:41 +0800 Subject: [PATCH 2/5] adjust case --- src/List.tsx | 21 +++++++---- tests/list.test.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 105 insertions(+), 7 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index 269dd78d..f72ac6f2 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -59,15 +59,22 @@ const List: React.FunctionComponent = ({ name, children }) => { * Always get latest value in case user update fields by `form` api. */ const operations: ListOperations = { - add: (defaultValue, index: number) => { + add: (defaultValue, index?: number) => { // Mapping keys - // 支持把动态的 formItem 插入到指定到位置 - console.log(index); - keyManager.keys = [...keyManager.keys, keyManager.id]; - keyManager.id += 1; - const newValue = getNewValue(); - onChange([...newValue, defaultValue]); + + if (index >= 0 && index <= newValue.length) { + keyManager.keys = [ + ...keyManager.keys.slice(0, index), + keyManager.id, + ...keyManager.keys.slice(index), + ]; + onChange([...newValue.slice(0, index), defaultValue, ...newValue.slice(index)]); + } else { + keyManager.keys = [...keyManager.keys, keyManager.id]; + onChange([...newValue, defaultValue]); + } + keyManager.id += 1; }, remove: (index: number | number[]) => { const newValue = getNewValue(); diff --git a/tests/list.test.js b/tests/list.test.js index b0d6d14b..e3418ea2 100644 --- a/tests/list.test.js +++ b/tests/list.test.js @@ -321,6 +321,51 @@ describe('Form.List', () => { matchKey(0, '3'); }); + it('add when the second param is number', () => { + let operation; + const [wrapper, getList] = generateForm((fields, opt) => { + operation = opt; + return ( +
+ {fields.map(field => ( + + + + ))} +
+ ); + }); + + act(() => { + operation.add(); + }); + act(() => { + operation.add('1', 2); + }); + act(() => { + operation.add('2', -1); + }); + + wrapper.update(); + expect(getList().find(Field).length).toEqual(3); + expect(form.getFieldsValue()).toEqual({ + list: [undefined, '1', '2'], + }); + + act(() => { + operation.add('0', 0); + }); + act(() => { + operation.add('4', 3); + }); + + wrapper.update(); + expect(getList().find(Field).length).toEqual(5); + expect(form.getFieldsValue()).toEqual({ + list: ['0', undefined, '1', '4', '2'], + }); + }); + describe('validate', () => { it('basic', async () => { const [, getList] = generateForm( @@ -417,6 +462,52 @@ describe('Form.List', () => { expect(form.getFieldError(['list', 0])).toEqual(["'list.1' must be at least 5 characters"]); expect(wrapper.find('input').props().value).toEqual('test'); }); + + it('when add() second param is number', async () => { + const [wrapper, getList] = generateForm( + (fields, { add }) => ( +
+ {fields.map(field => ( + + + + ))} + +
+ ), + { + initialValues: { list: ['test1', 'test2', 'test3'] }, + }, + ); + + expect(wrapper.find(Input)).toHaveLength(3); + await changeValue(getField(getList(), 0), ''); + expect(form.getFieldError(['list', 0])).toEqual(["'list.0' is required"]); + + wrapper.find('.button').simulate('click'); + wrapper.find('.button1').simulate('click'); + + expect(wrapper.find(Input)).toHaveLength(5); + expect(form.getFieldError(['list', 1])).toEqual(["'list.0' is required"]); + + await changeValue(getField(getList(), 1), 'test'); + expect(form.getFieldError(['list', 1])).toEqual(["'list.1' must be at least 5 characters"]); + }); }); it('warning if children is not function', () => { From dc245d6375bae0bf93b24391ecd56048575778ba Mon Sep 17 00:00:00 2001 From: zoomdong <1344492820@qq.com> Date: Fri, 7 Aug 2020 10:17:51 +0800 Subject: [PATCH 3/5] feat: add warning --- src/List.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/List.tsx b/src/List.tsx index f72ac6f2..0be0b6b1 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -71,6 +71,10 @@ const List: React.FunctionComponent = ({ name, children }) => { ]; onChange([...newValue.slice(0, index), defaultValue, ...newValue.slice(index)]); } else { + warning( + false, + 'The second parameter of the add function should be a valid positive number', + ); keyManager.keys = [...keyManager.keys, keyManager.id]; onChange([...newValue, defaultValue]); } From 8202afeaaccded5778b96baba3f5e059ff9128ba Mon Sep 17 00:00:00 2001 From: zoomdong <1344492820@qq.com> Date: Fri, 7 Aug 2020 10:34:53 +0800 Subject: [PATCH 4/5] warning set --- src/List.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/List.tsx b/src/List.tsx index 0be0b6b1..cc2af5ce 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -71,10 +71,15 @@ const List: React.FunctionComponent = ({ name, children }) => { ]; onChange([...newValue.slice(0, index), defaultValue, ...newValue.slice(index)]); } else { - warning( - false, - 'The second parameter of the add function should be a valid positive number', - ); + if ( + process.env.NODE_ENV !== 'production' && + (index < 0 || index > newValue.length) + ) { + warning( + false, + 'The second parameter of the add function should be a valid positive number', + ); + } keyManager.keys = [...keyManager.keys, keyManager.id]; onChange([...newValue, defaultValue]); } From 54c3693116ebe429ae18208bec1af921b4306b20 Mon Sep 17 00:00:00 2001 From: zoomdong <1344492820@qq.com> Date: Fri, 7 Aug 2020 14:26:16 +0800 Subject: [PATCH 5/5] add devWarning test case --- src/List.tsx | 2 +- tests/list.test.js | 7 +++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/List.tsx b/src/List.tsx index cc2af5ce..743c012a 100644 --- a/src/List.tsx +++ b/src/List.tsx @@ -77,7 +77,7 @@ const List: React.FunctionComponent = ({ name, children }) => { ) { warning( false, - 'The second parameter of the add function should be a valid positive number', + 'The second parameter of the add function should be a valid positive number.', ); } keyManager.keys = [...keyManager.keys, keyManager.id]; diff --git a/tests/list.test.js b/tests/list.test.js index e3418ea2..e5798acb 100644 --- a/tests/list.test.js +++ b/tests/list.test.js @@ -323,6 +323,7 @@ describe('Form.List', () => { it('add when the second param is number', () => { let operation; + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); const [wrapper, getList] = generateForm((fields, opt) => { operation = opt; return ( @@ -342,10 +343,16 @@ describe('Form.List', () => { act(() => { operation.add('1', 2); }); + act(() => { operation.add('2', -1); }); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: The second parameter of the add function should be a valid positive number.', + ); + errorSpy.mockRestore(); + wrapper.update(); expect(getList().find(Field).length).toEqual(3); expect(form.getFieldsValue()).toEqual({