feat: add move operation for List (#20)

hvsy · zombieJ · commit 0f4838074445 · 2019-07-16T17:05:30.000+08:00
* add move operation for List

* Fixed format error

* Fixed format error

* Fixed input can not be selectable
Add list-draggable example

* Fixed format for eslint

* add noneffective move test

* remove unnecessary action of draggable list example
remove console log for performance

* remove lodash-move

* add test for array move function

* move "arrayMove" function to valueUtil.ts file.
rename "arrayMove" to "move".
add checking for out of range.
add test cases for out of range.

* add more test cases for move function.
merge edge case check into one if.

* upgrade father to latest
format draggable example

* add missing match key tests.
diff --git a/examples/StateForm-list-draggable.tsx b/examples/StateForm-list-draggable.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable react/prop-types */
+import React from 'react';
+
+/* eslint-enable react/prop-types */
+import HTML5Backend from 'react-dnd-html5-backend';
+import { DndProvider } from 'react-dnd';
+import Form, { List, useForm } from '../src';
+import Input from './components/Input';
+import LabelField from './components/LabelField';
+import useDraggable from './components/useDraggable';
+
+type LabelFieldProps = Parameters<typeof LabelField>[0];
+interface DraggableProps extends LabelFieldProps {
+  id: string | number;
+  index: number;
+  move: (from: number, to: number) => void;
+}
+const DisableDraggable = {
+  onDragStart(event) {
+    event.stopPropagation();
+    event.preventDefault();
+  },
+  draggable: true,
+};
+const Draggable: React.FunctionComponent<DraggableProps> = ({ id, index, move, children }) => {
+  const { ref, isDragging } = useDraggable('list-draggable', id, index, move);
+  return (
+    <div
+      ref={ref}
+      style={{
+        opacity: isDragging ? 0.5 : 1,
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+const Demo = () => {
+  const [form] = useForm();
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <div>
+        <h3>Draggable List of Form</h3>
+        <p>You can set Field as List and sortable by drag and drop</p>
+
+        <Form
+          form={form}
+          onValuesChange={(_, values) => {
+            console.log('values:', values);
+          }}
+          style={{ border: '1px solid red', padding: 15 }}
+        >
+          <List name="users">
+            {(fields, { add, remove, move }) => (
+              <div>
+                <h4>List of `users`</h4>
+                {fields.map((field, index) => (
+                  <Draggable
+                    move={move}
+                    index={index}
+                    id={field.key}
+                    {...field}
+                    rules={[{ required: true }]}
+                  >
+                    <LabelField {...field} rules={[{ required: true }]}>
+                      {control => (
+                        <div style={{ position: 'relative' }}>
+                          <Input {...DisableDraggable} {...control} />
+                          <a
+                            style={{ position: 'absolute', top: 12, right: -300 }}
+                            onClick={() => {
+                              remove(index);
+                            }}
+                          >
+                            Remove
+                          </a>
+                        </div>
+                      )}
+                    </LabelField>
+                  </Draggable>
+                ))}
+
+                <button
+                  type="button"
+                  onClick={() => {
+                    add();
+                  }}
+                >
+                  + New User
+                </button>
+              </div>
+            )}
+          </List>
+        </Form>
+      </div>
+    </DndProvider>
+  );
+};
+
+export default Demo;
diff --git a/examples/components/useDraggable.ts b/examples/components/useDraggable.ts
@@ -0,0 +1,81 @@
+import { useRef } from 'react';
+import { DragObjectWithType, useDrag, useDrop } from 'react-dnd';
+
+type DragWithIndex = DragObjectWithType & {
+    index : number,
+};
+export default function useDraggable(type : string,
+                                     id : string|number,
+                                     index : number, move : (from : number, to : number)=>void) {
+      const ref = useRef(null);
+      const [, drop] = useDrop({
+        accept: type,
+        hover(item : DragWithIndex, monitor) {
+            if (!ref.current) {
+                return;
+            }
+            const dragIndex = item.index;
+            if (dragIndex === undefined || dragIndex === null) return;
+            const hoverIndex = index;
+
+            // Don't replace items with themselves
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+
+            // Determine rectangle on screen
+            const hoverBoundingRect = ref.current.getBoundingClientRect();
+
+            // Get vertical middle
+            const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            const hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
+
+            // Determine mouse position
+            const clientOffset = monitor.getClientOffset();
+
+            // Get pixels to the top
+            const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            const hoverClientX = clientOffset.x - hoverBoundingRect.left;
+
+            // console.log(hoverBoundingRect,hoverMiddleY,clientOffset,hoverClientY,
+            // dragIndex,hoverIndex
+            // );
+            // Only perform the move when the mouse has crossed half of the items height
+            // When dragging downwards, only move when the cursor is below 50%
+            // When dragging upwards, only move when the cursor is above 50%
+
+            // Dragging downwards
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY
+                    && hoverClientX < hoverMiddleX
+            ) {
+                return;
+            }
+
+            // Dragging upwards
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY
+                    && hoverClientX > hoverMiddleX
+            ) {
+                return;
+            }
+
+            // Time to actually perform the action
+            move(dragIndex, hoverIndex);
+
+            // Note: we're mutating the monitor item here!
+            // Generally it's better to avoid mutations,
+            // but it's good here for the sake of performance
+            // to avoid expensive index searches.
+            item.index = hoverIndex;
+        },
+      });
+      const [{ isDragging }, drag] = useDrag({
+        item: { type, id, index },
+        collect: monitor => ({
+          isDragging: monitor.isDragging(),
+        }),
+      });
+      drag(drop(ref));
+      return {
+            ref, isDragging,
+      };
+}
diff --git a/package.json b/package.json
@@ -46,9 +46,11 @@
     "enzyme": "^3.1.0",
     "enzyme-adapter-react-16": "^1.0.2",
     "enzyme-to-json": "^3.1.4",
-    "father": "^2.13.2",
+    "father": "^2.13.6",
     "np": "^5.0.3",
     "react": "^v16.9.0-alpha.0",
+    "react-dnd": "^8.0.3",
+    "react-dnd-html5-backend": "^8.0.3",
     "react-dom": "^v16.9.0-alpha.0",
     "react-redux": "^4.4.10",
     "react-router": "^3.0.0",
diff --git a/src/List.tsx b/src/List.tsx
@@ -3,7 +3,7 @@ import warning from 'warning';
 import { InternalNamePath, NamePath, StoreValue } from './interface';
 import FieldContext from './FieldContext';
 import Field from './Field';
-import { getNamePath } from './utils/valueUtil';
+import { move, getNamePath } from './utils/valueUtil';
 
 interface ListField {
   name: number;
@@ -13,6 +13,7 @@ interface ListField {
 interface ListOperations {
   add: () => void;
   remove: (index: number) => void;
+  move: (from: number, to: number) => void;
 }
 
 interface ListProps {
@@ -49,7 +50,10 @@ const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
       <Field name={[]} shouldUpdate={shouldUpdate}>
         {({ value = [], onChange }) => {
           const { getFieldValue } = context;
-
+          const getNewValue = () => {
+            const values = getFieldValue(prefixName || []) as StoreValue[];
+            return values || [];
+          };
           /**
            * Always get latest value in case user update fields by `form` api.
            */
@@ -59,11 +63,11 @@ const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
               keyManager.keys = [...keyManager.keys, keyManager.id];
               keyManager.id += 1;
 
-              const newValue = (getFieldValue(prefixName) || []) as StoreValue[];
+              const newValue = getNewValue();
               onChange([...newValue, undefined]);
             },
             remove: (index: number) => {
-              const newValue = (getFieldValue(prefixName) || []) as StoreValue[];
+              const newValue = getNewValue();
 
               // Do not handle out of range
               if (index < 0 || index >= newValue.length) {
@@ -82,6 +86,22 @@ const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
               // Trigger store change
               onChange(newValue.filter((_, id) => id !== index));
             },
+            move(from: number, to: number) {
+              if (from === to) {
+                return;
+              }
+              const newValue = getNewValue();
+
+              // Do not handle out of range
+              if (from < 0 || from >= newValue.length || to < 0 || to >= newValue.length) {
+                return;
+              }
+
+              keyManager.keys = move(keyManager.keys, from, to);
+
+              // Trigger store change
+              onChange(move(newValue, from, to));
+            },
           };
 
           return children(
diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
@@ -120,3 +120,42 @@ export function defaultGetValueFromEvent(valuePropName: string, ...args: EventAr
 
   return event;
 }
+
+/**
+ * Moves an array item from one position in an array to another.
+ *
+ * Note: This is a pure function so a new array will be returned, instead
+ * of altering the array argument.
+ *
+ * @param array         Array in which to move an item.         (required)
+ * @param moveIndex     The index of the item to move.          (required)
+ * @param toIndex       The index to move item at moveIndex to. (required)
+ */
+export function move<T>(array: T[], moveIndex: number, toIndex: number) {
+  const { length } = array;
+  if (moveIndex < 0 || moveIndex >= length || toIndex < 0 || toIndex >= length) {
+    return array;
+  }
+  const item = array[moveIndex];
+  const diff = moveIndex - toIndex;
+
+  if (diff > 0) {
+    // move left
+    return [
+      ...array.slice(0, toIndex),
+      item,
+      ...array.slice(toIndex, moveIndex),
+      ...array.slice(moveIndex + 1, length),
+    ];
+  }
+  if (diff < 0) {
+    // move right
+    return [
+      ...array.slice(0, moveIndex),
+      ...array.slice(moveIndex + 1, toIndex + 1),
+      item,
+      ...array.slice(toIndex + 1, length),
+    ];
+  }
+  return array;
+}
diff --git a/tests/list.test.js b/tests/list.test.js
@@ -109,6 +109,62 @@ describe('Form.List', () => {
     matchKey(1, '1');
     matchKey(2, '2');
 
+    // Move
+    act(() => {
+        operation.move(2, 0);
+    });
+    wrapper.update();
+    matchKey(0, '2');
+    matchKey(1, '0');
+    matchKey(2, '1');
+
+    // noneffective move
+    act(() => {
+      operation.move(-1, 0);
+    });
+    wrapper.update();
+    matchKey(0, '2');
+    matchKey(1, '0');
+    matchKey(2, '1');
+
+    // noneffective move
+    act(() => {
+      operation.move(0, 10);
+    });
+
+    wrapper.update();
+    matchKey(0, '2');
+    matchKey(1, '0');
+    matchKey(2, '1');
+
+    // noneffective move
+    act(() => {
+      operation.move(-1, 10);
+    });
+
+    wrapper.update();
+    matchKey(0, '2');
+    matchKey(1, '0');
+    matchKey(2, '1');
+
+    // noneffective move
+    act(() => {
+      operation.move(0, 0);
+    });
+    wrapper.update();
+    matchKey(0, '2');
+    matchKey(1, '0');
+    matchKey(2, '1');
+
+    // Revert Move
+    act(() => {
+      operation.move(0, 2);
+    });
+    wrapper.update();
+    matchKey(0, '0');
+    matchKey(1, '1');
+    matchKey(2, '2');
+
     // Modify
     await changeValue(getField(getList(), 1), '222');
     expect(form.getFieldsValue()).toEqual({
diff --git a/tests/utils.test.js b/tests/utils.test.js
@@ -1,7 +1,23 @@
-import { isSimilar, setValues } from '../src/utils/valueUtil';
+import { move, isSimilar, setValues } from '../src/utils/valueUtil';
 import NameMap from '../src/utils/NameMap';
 
 describe('utils', () => {
+  describe('arrayMove', () => {
+    it('move', () => {
+      expect(move([0, 1, 2, 3], 0, 2)).toEqual([1, 2, 0, 3]);
+      expect(move([0, 1, 2, 3], 3, 1)).toEqual([0, 3, 1, 2]);
+      expect(move([0, 1, 2, 3], 1, 1)).toEqual([0, 1, 2, 3]);
+      expect(move([0, 1, 2, 3], -1, 3)).toEqual([0, 1, 2, 3]);
+      expect(move([0, 1, 2, 3], -1, 5)).toEqual([0, 1, 2, 3]);
+      expect(move([0, 1, 2, 3], 1, 5)).toEqual([0, 1, 2, 3]);
+      expect(move([0, 1, 2, 3], 0, 0)).toEqual([0, 1, 2, 3]);
+      expect(move([0, 1, 2, 3], 0, 1)).toEqual([1, 0, 2, 3]);
+      expect(move([0, 1, 2, 3], 1, 0)).toEqual([1, 0, 2, 3]);
+      expect(move([0, 1, 2, 3], 2, 3)).toEqual([0, 1, 3, 2]);
+      expect(move([0, 1, 2, 3], 3, 3)).toEqual([0, 1, 2, 3]);
+      expect(move([0, 1, 2, 3], 3, 2)).toEqual([0, 1, 3, 2]);
+    });
+  });
   describe('valueUtil', () => {
     it('isSimilar', () => {
       expect(isSimilar(1, 1)).toBeTruthy();
