1.1.6 fix reordering

reearth · Sep 28, 2021 · a19a24a · a19a24a
1 parent b23e90c
commit a19a24a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-align",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "author": "KaWaite",
   "module": "dist/realign.esm.js",
   "license": "MIT",

diff --git a/src/Grid/GridItem/index.tsx b/src/Grid/GridItem/index.tsx
@@ -73,6 +73,7 @@ export default function GridItem<T = unknown>({
   const { enabled } = useEditorMode();
 
   const [isHovered, setHovered] = useState(false);
+  const dragIndexRef = useRef<number | undefined>();
 
   const handleExtend = () => {
     if (!extendable || !onExtend) return;
@@ -132,27 +133,36 @@ export default function GridItem<T = unknown>({
         }
       }
 
-      onReorder(item.id, location, dragIndex, hoverIndex);
+      dragIndexRef.current = dragIndex;
+    },
+    drop(item) {
+      if (dragIndexRef.current !== undefined) {
+        onReorder(item.id, location, dragIndexRef.current, index);
+        dragIndexRef.current = undefined;
+      }
     },
   });
 
-  const [{ isDragging }, drag, preview] = useDrag({
-    type: ItemType.ITEM,
-    item: { id, index },
-    canDrag: draggable ?? enabled,
-    end: (item, monitor) => {
-      const dropResults: {
-        location: T;
-      } | null = monitor.getDropResult();
+  const [{ isDragging }, drag, preview] = useDrag(
+    {
+      type: ItemType.ITEM,
+      item: { id, index },
+      canDrag: draggable ?? enabled,
+      end: (item, monitor) => {
+        const dropResults: {
+          location: T;
+        } | null = monitor.getDropResult();
 
-      if (dropResults && dropResults.location !== location) {
-        onMoveArea(item.id, dropResults.location, location);
-      }
+        if (dropResults && dropResults.location !== location) {
+          onMoveArea(item.id, dropResults.location, location);
+        }
+      },
+      collect: (monitor: DragSourceMonitor) => ({
+        isDragging: monitor.isDragging(),
+      }),
     },
-    collect: (monitor: DragSourceMonitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-  });
+    [dragIndexRef]
+  );
 
   preview(drop(ref));
   // ***************************************