Adding draggableId to DraggableLocation

src/state/calculate-drag-impact/calculate-reorder-impact.js

@@ -130,6 +130,7 @@ export default function calculateReorderImpact({
       destination: {
         droppableId: destination.descriptor.id,
         index,
+        draggableId: match.descriptor.id,
       },
     },
   };

src/types.js

@@ -152,6 +152,7 @@ export type DroppableDimension = {|
 export type DraggableLocation = {|
   droppableId: DroppableId,
   index: number,
+  draggableId?: DraggableId,
 |};
 
 export type DraggableIdMap = {

test/unit/state/get-drag-impact/combine/started-before-critical.spec.js

@@ -56,6 +56,7 @@ import {
         destination: {
           index: preset.inForeign3.descriptor.index,
           droppableId: preset.inForeign3.descriptor.droppableId,
+          draggableId: preset.inForeign3.descriptor.id,
         },
       },
     };
@@ -187,6 +188,7 @@ import {
                 destination: {
                   index: preset.inForeign4.descriptor.index,
                   droppableId: preset.inForeign4.descriptor.droppableId,
+                  draggableId: preset.inForeign4.descriptor.id,
                 },
               },
             };
@@ -308,6 +310,7 @@ import {
               destination: {
                 index: preset.inForeign2.descriptor.index,
                 droppableId: preset.inForeign2.descriptor.droppableId,
+                draggableId: preset.inForeign2.descriptor.id,
               },
             },
           };

test/unit/state/get-drag-impact/reorder/over-foreign-list/did-not-start-displaced.spec.js

@@ -80,6 +80,7 @@ import {
               // is now in position of inForeign3
               droppableId: preset.foreign.descriptor.id,
               index: preset.inForeign3.descriptor.index,
+              draggableId: preset.inForeign3.descriptor.id,
             },
           },
         };
@@ -103,6 +104,7 @@ import {
             // is now in position of inForeign2
             droppableId: preset.inForeign2.descriptor.droppableId,
             index: preset.inForeign2.descriptor.index,
+            draggableId: preset.inForeign2.descriptor.id,
           },
         },
       };
@@ -160,6 +162,7 @@ import {
               // is now in position of inForeign3
               droppableId: preset.inForeign3.descriptor.droppableId,
               index: preset.inForeign3.descriptor.index,
+              draggableId: preset.inForeign3.descriptor.id,
             },
           },
         };

test/unit/state/get-drag-impact/reorder/over-foreign-list/move-backward-from-last-item.spec.js

@@ -72,6 +72,7 @@ import { getOffsetForStartEdge } from '../../util/get-offset-for-edge';
           destination: {
             index: preset.inForeign4.descriptor.index,
             droppableId: preset.inForeign4.descriptor.droppableId,
+            draggableId: preset.inForeign4.descriptor.id,
           },
         },
       };

test/unit/state/get-drag-impact/reorder/over-home-list/displacement-visibility.spec.js

@@ -157,6 +157,7 @@ const viewport: Viewport = getViewport();
           destination: {
             droppableId: droppable.descriptor.id,
             index: 0,
+            draggableId: visible.descriptor.id,
           },
         },
       };
@@ -296,6 +297,7 @@ const viewport: Viewport = getViewport();
           destination: {
             droppableId: droppable.descriptor.id,
             index: 0,
+            draggableId: visible.descriptor.id,
           },
         },
       };

test/unit/state/get-drag-impact/reorder/over-home-list/started-after-critical.spec.js

@@ -106,6 +106,7 @@ import {
             // is now in position of inHome3
             droppableId: preset.home.descriptor.id,
             index: preset.inHome3.descriptor.index,
+            draggableId: preset.inHome3.descriptor.id,
           },
         },
       };
@@ -176,6 +177,7 @@ import {
             destination: {
               droppableId: preset.home.descriptor.id,
               index: preset.inHome2.descriptor.index,
+              draggableId: preset.inHome2.descriptor.id,
             },
           },
         };

test/unit/state/get-drag-impact/reorder/over-home-list/started-before-critical.spec.js

@@ -82,6 +82,7 @@ import {
               // is now in position of inHome2
               droppableId: preset.home.descriptor.id,
               index: preset.inHome2.descriptor.index,
+              draggableId: preset.inHome2.descriptor.id,
             },
           },
         };
@@ -107,6 +108,7 @@ import {
               // is now in position of inHome1
               droppableId: preset.home.descriptor.id,
               index: preset.inHome1.descriptor.index,
+              draggableId: preset.inHome1.descriptor.id,
             },
           },
         };
@@ -168,6 +170,7 @@ import {
               droppableId: preset.home.descriptor.id,
               // is now in position of inHome2
               index: preset.inHome2.descriptor.index,
+              draggableId: preset.inHome2.descriptor.id,
             },
           },
         };

test/unit/state/get-drag-impact/reorder/over-home-list/with-droppable-scroll.spec.js

@@ -86,6 +86,7 @@ const viewport: Viewport = getViewport();
               // now in position of inHome2 as it has moved backwards (it started displaced)
               droppableId: preset.home.descriptor.id,
               index: preset.inHome2.descriptor.index,
+              draggableId: preset.inHome2.descriptor.id,
             },
           },
         };
@@ -151,6 +152,7 @@ const viewport: Viewport = getViewport();
               // is now in place of inHome2
               droppableId: preset.home.descriptor.id,
               index: preset.inHome2.descriptor.index,
+              draggableId: preset.inHome2.descriptor.id,
             },
           },
         };

test/unit/state/middleware/responders/repeated-use.spec.js

@@ -36,11 +36,15 @@ it('should behave correctly across multiple drags', () => {
     expect(responders.onDragStart).toHaveBeenCalledTimes(1);
 
     // update
+    const newIndex = initialPublishArgs.critical.draggable.index + 1;
+    const state: State = store.getState();
+    const newDraggableId = Object.keys(state.dimensions.draggables)[newIndex];
     const update: DragUpdate = {
       ...getDragStart(),
       destination: {
         droppableId: initialPublishArgs.critical.droppable.id,
-        index: initialPublishArgs.critical.draggable.index + 1,
+        index: newIndex,
+        draggableId: newDraggableId,
       },
       combine: null,
     };

test/unit/state/middleware/responders/update.spec.js

@@ -39,12 +39,16 @@ it('should call onDragUpdate if the position has changed on move', () => {
   expect(responders.onDragUpdate).not.toHaveBeenCalled();
 
   jest.runOnlyPendingTimers();
+  const newIndex = initialPublishArgs.critical.draggable.index + 1;
+  const state: State = store.getState();
+  const newDraggableId = Object.keys(state.dimensions.draggables)[newIndex];
   const update: DragUpdate = {
     ...getDragStart(),
     combine: null,
     destination: {
       droppableId: initialPublishArgs.critical.droppable.id,
-      index: initialPublishArgs.critical.draggable.index + 1,
+      index: newIndex,
+      draggableId: newDraggableId,
     },
   };
   expect(responders.onDragUpdate).toHaveBeenCalledWith(

test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-foreign-list.spec.js

@@ -322,6 +322,7 @@ import {
             destination: {
               droppableId: preset.foreign.descriptor.id,
               index: preset.inForeign2.descriptor.index,
+              draggableId: preset.inForeign2.descriptor.id,
             },
           },
         };
@@ -372,6 +373,7 @@ import {
             destination: {
               droppableId: preset.foreign.descriptor.id,
               index: preset.inForeign2.descriptor.index,
+              draggableId: preset.inForeign2.descriptor.id,
             },
           },
         };

test/unit/state/move-in-direction/move-cross-axis/move-to-new-droppable/to-home-list.spec.js

@@ -84,6 +84,7 @@ const dontCare: Position = { x: 0, y: 0 };
             destination: {
               droppableId: preset.home.descriptor.id,
               index: preset.inHome2.descriptor.index,
+              draggableId: preset.inHome2.descriptor.id,
             },
           },
         };
@@ -131,6 +132,7 @@ const dontCare: Position = { x: 0, y: 0 };
             destination: {
               droppableId: preset.home.descriptor.id,
               index: preset.inHome2.descriptor.index,
+              draggableId: preset.inHome2.descriptor.id,
             },
           },
         };
@@ -171,6 +173,7 @@ const dontCare: Position = { x: 0, y: 0 };
             destination: {
               droppableId: preset.home.descriptor.id,
               index: preset.inHome4.descriptor.index,
+              draggableId: preset.inHome4.descriptor.id,
             },
           },
         };

test/unit/state/move-in-direction/move-in-direction.spec.js

@@ -16,6 +16,7 @@ import { tryGetDestination } from '../../../../src/state/get-impact-location';
 describe('on the vertical axis', () => {
   const preset = getPreset(vertical);
   const state = getStatePreset(vertical);
+  const draggables = Object.keys(state.preset.dimensions.draggables);
 
   it('should move forward on a MOVE_DOWN', () => {
     const result: ?PublicResult = moveInDirection({
@@ -24,9 +25,12 @@ describe('on the vertical axis', () => {
     });
 
     invariant(result, 'expected a result');
+    const idx = 1;
+    const newDraggableId = draggables[idx];
     const expected: DraggableLocation = {
       droppableId: preset.home.descriptor.id,
-      index: 1,
+      index: idx,
+      draggableId: newDraggableId,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -38,9 +42,12 @@ describe('on the vertical axis', () => {
     });
 
     invariant(result, 'expected a result');
+    const idx = 0;
+    const newDraggableId = draggables[idx];
     const expected: DraggableLocation = {
       droppableId: preset.home.descriptor.id,
-      index: 0,
+      index: idx,
+      draggableId: newDraggableId,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -55,6 +62,7 @@ describe('on the vertical axis', () => {
     const expected: DraggableLocation = {
       droppableId: preset.foreign.descriptor.id,
       index: 1,
+      draggableId: preset.inForeign2.descriptor.id,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -69,6 +77,7 @@ describe('on the vertical axis', () => {
     const expected: DraggableLocation = {
       droppableId: preset.home.descriptor.id,
       index: 0,
+      draggableId: preset.inHome1.descriptor.id,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -77,6 +86,7 @@ describe('on the vertical axis', () => {
 describe('on the horizontal axis', () => {
   const preset = getPreset(horizontal);
   const state = getStatePreset(horizontal);
+  const draggables = Object.keys(state.preset.dimensions.draggables);
 
   it('should move forward on a MOVE_RIGHT', () => {
     const result: ?PublicResult = moveInDirection({
@@ -85,9 +95,12 @@ describe('on the horizontal axis', () => {
     });
 
     invariant(result, 'expected a result');
+    const idx = 1;
+    const newDraggableId = draggables[idx];
     const expected: DraggableLocation = {
       droppableId: preset.home.descriptor.id,
-      index: 1,
+      index: idx,
+      draggableId: newDraggableId,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -99,9 +112,12 @@ describe('on the horizontal axis', () => {
     });
 
     invariant(result, 'expected a result');
+    const idx = 0;
+    const newDraggableId = draggables[idx];
     const expected: DraggableLocation = {
       droppableId: preset.home.descriptor.id,
-      index: 0,
+      index: idx,
+      draggableId: newDraggableId,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -116,6 +132,7 @@ describe('on the horizontal axis', () => {
     const expected: DraggableLocation = {
       droppableId: preset.foreign.descriptor.id,
       index: 1,
+      draggableId: preset.inForeign2.descriptor.id,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -127,9 +144,12 @@ describe('on the horizontal axis', () => {
     });
 
     invariant(result, 'expected a result');
+    const idx = 0;
+    const newDraggableId = draggables[idx];
     const expected: DraggableLocation = {
       droppableId: preset.home.descriptor.id,
-      index: 0,
+      index: idx,
+      draggableId: newDraggableId,
     };
     expect(tryGetDestination(result.impact)).toEqual(expected);
   });
@@ -181,6 +201,7 @@ describe('on the horizontal axis', () => {
       const expected: DraggableLocation = {
         droppableId: preset.foreign.descriptor.id,
         index: 1,
+        draggableId: preset.inForeign2.descriptor.id,
       };
       expect(tryGetDestination(result.impact)).toEqual(expected);
     });

test/unit/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine/did-not-start-after-critical.spec.js

@@ -74,6 +74,7 @@ const enableCombine = (droppable: DroppableDimension): DroppableDimension => ({
           destination: {
             index: preset.inForeign2.descriptor.index,
             droppableId: preset.foreign.descriptor.id,
+            draggableId: preset.inForeign2.descriptor.id,
           },
         },
       };
@@ -127,6 +128,7 @@ const enableCombine = (droppable: DroppableDimension): DroppableDimension => ({
           destination: {
             index: preset.inForeign1.descriptor.index,
             droppableId: preset.foreign.descriptor.id,
+            draggableId: preset.inForeign1.descriptor.id,
           },
         },
       };
@@ -194,6 +196,7 @@ const enableCombine = (droppable: DroppableDimension): DroppableDimension => ({
           destination: {
             index: preset.inForeign2.descriptor.index,
             droppableId: preset.foreign.descriptor.id,
+            draggableId: preset.inForeign2.descriptor.id,
           },
         },
       };
@@ -263,6 +266,7 @@ const enableCombine = (droppable: DroppableDimension): DroppableDimension => ({
           destination: {
             index: preset.inForeign1.descriptor.index,
             droppableId: preset.foreign.descriptor.id,
+            draggableId: preset.inForeign1.descriptor.id,
           },
         },
       };