feat: remove in Form.list support array (#165)

* feat: remove in Form.LIst support array

* feat: remove in Form.list support array

* mod: add test case

* update logical

* add more test case

* update typo

* fix: test case

* update test case

* add test case

Author: fireairforce

src/List.tsx

@@ -13,7 +13,7 @@ interface ListField {
 
 interface ListOperations {
   add: (defaultValue?: StoreValue) => void;
-  remove: (index: number) => void;
+  remove: (index: number | number[]) => void;
   move: (from: number, to: number) => void;
 }
 
@@ -67,25 +67,17 @@ const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
               const newValue = getNewValue();
               onChange([...newValue, defaultValue]);
             },
-            remove: (index: number) => {
+            remove: (index: number | number[]) => {
               const newValue = getNewValue();
+              const indexSet = new Set(Array.isArray(index) ? index : [index]);
 
-              // Do not handle out of range
-              if (index < 0 || index >= newValue.length) {
+              if (indexSet.size <= 0) {
                 return;
               }
-
-              // Update key mapping
-              const newKeys = keyManager.keys.map((key, id) => {
-                if (id < index) {
-                  return key;
-                }
-                return keyManager.keys[id + 1];
-              });
-              keyManager.keys = newKeys.slice(0, -1);
+              keyManager.keys = keyManager.keys.filter((_, keysIndex) => !indexSet.has(keysIndex));
 
               // Trigger store change
-              onChange(newValue.filter((_, id) => id !== index));
+              onChange(newValue.filter((_, valueIndex) => !indexSet.has(valueIndex)));
             },
             move(from: number, to: number) {
               if (from === to) {

tests/list.test.js

@@ -217,6 +217,89 @@ describe('Form.List', () => {
     matchKey(1, '2');
   });
 
+  it('remove when the param is Array', () => {
+    let operation;
+    const [wrapper, getList] = generateForm((fields, opt) => {
+      operation = opt;
+      return (
+        <div>
+          {fields.map(field => (
+            <Field {...field}>
+              <Input />
+            </Field>
+          ))}
+        </div>
+      );
+    });
+
+    function matchKey(index, key) {
+      expect(
+        getList()
+          .find(Field)
+          .at(index)
+          .key(),
+      ).toEqual(key);
+    }
+
+    act(() => {
+      operation.add();
+    });
+
+    act(() => {
+      operation.add();
+    });
+
+    wrapper.update();
+    expect(getList().find(Field).length).toEqual(2);
+
+    // remove empty array
+    act(() => {
+      operation.remove([]);
+    });
+
+    wrapper.update();
+
+    matchKey(0, '0');
+    matchKey(1, '1');
+
+    // remove not esist element in array
+    act(() => {
+      operation.remove([-1, 99]);
+    });
+    wrapper.update();
+
+    matchKey(0, '0');
+    matchKey(1, '1');
+
+    act(() => {
+      operation.remove([0]);
+    });
+
+    wrapper.update();
+    expect(getList().find(Field).length).toEqual(1);
+    matchKey(0, '1');
+
+    act(() => {
+      operation.add();
+    });
+
+    act(() => {
+      operation.add();
+    });
+
+    wrapper.update();
+    matchKey(0, '1');
+    matchKey(1, '2');
+    matchKey(2, '3');
+
+    act(() => {
+      operation.remove([0, 1]);
+    });
+
+    wrapper.update();
+    matchKey(0, '3');
+  });
+
   describe('validate', () => {
     it('basic', async () => {
       const [, getList] = generateForm(
@@ -272,6 +355,47 @@ describe('Form.List', () => {
       expect(wrapper.find(Input)).toHaveLength(1);
       expect(form.getFieldError(['list', 0])).toEqual(["'list.1' is required"]);
     });
+
+    it('when param of remove is array', async () => {
+      const [wrapper, getList] = generateForm(
+        (fields, { remove }) => (
+          <div>
+            {fields.map(field => (
+              <Field {...field} rules={[{ required: true }, { min: 5 }]}>
+                <Input />
+              </Field>
+            ))}
+
+            <button
+              type="button"
+              onClick={() => {
+                remove([0, 2]);
+              }}
+            />
+          </div>
+        ),
+        {
+          initialValues: { list: ['', '', ''] },
+        },
+      );
+
+      expect(wrapper.find(Input)).toHaveLength(3);
+      await changeValue(getField(getList(), 0), '');
+      expect(form.getFieldError(['list', 0])).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"]);
+
+      await changeValue(getField(getList(), 2), '');
+      expect(form.getFieldError(['list', 2])).toEqual(["'list.2' is required"]);
+
+      wrapper.find('button').simulate('click');
+      wrapper.update();
+
+      expect(wrapper.find(Input)).toHaveLength(1);
+      expect(form.getFieldError(['list', 0])).toEqual(["'list.1' must be at least 5 characters"]);
+      expect(wrapper.find('input').props().value).toEqual('test');
+    });
   });
 
   it('warning if children is not function', () => {