fix: maintain item order when dropping (#315)

Author: lukasbach

next-release-notes.md

@@ -1,9 +1,2 @@
-<!--
-### Breaking Changes
-
-### Features
-
 ### Bug Fixes and Improvements
-
-### Other Changes
--->
+- Maintain original item order when dropping items (#315)

package.json

@@ -11,6 +11,7 @@
   "private": true,
   "scripts": {
     "start": "lerna run start --parallel",
+    "start:core": "lerna run start --parallel --scope react-complex-tree",
     "build": "lerna run build",
     "build:core": "lerna run build --scope react-complex-tree",
     "test": "lerna run test --stream",

packages/core/src/controlledEnvironment/DragAndDropProvider.tsx

@@ -15,6 +15,7 @@ import { buildMapForTrees } from '../utils';
 import { useCallSoon } from '../useCallSoon';
 import { computeItemHeight } from './layoutUtils';
 import { useStableHandler } from '../use-stable-handler';
+import { useGetOriginalItemOrder } from '../use-get-original-item-order';
 
 const DragAndDropContext = React.createContext<DragAndDropContextProps>(
   null as any
@@ -38,6 +39,7 @@ export const DragAndDropProvider: React.FC<React.PropsWithChildren> = ({
   const [dragCode, setDragCode] = useState('_nodrag');
   const getViableDragPositions = useGetViableDragPositions();
   const callSoon = useCallSoon();
+  const getOriginalItemOrder = useGetOriginalItemOrder();
 
   const resetProgrammaticDragIndexForCurrentTree = useCallback(
     (
@@ -222,8 +224,9 @@ export const DragAndDropProvider: React.FC<React.PropsWithChildren> = ({
         return;
       }
 
-      const resolvedDraggingItems = draggingItems.map(
-        id => environment.items[id]
+      const resolvedDraggingItems = getOriginalItemOrder(
+        environment.activeTreeId,
+        draggingItems.map(id => environment.items[id])
       );
 
       if (environment.canDrag && !environment.canDrag(resolvedDraggingItems)) {
@@ -236,7 +239,7 @@ export const DragAndDropProvider: React.FC<React.PropsWithChildren> = ({
         // Needs to be done after onStartDraggingItems was called, so that viableDragPositions is populated
       });
     }
-  }, [onStartDraggingItems, environment]);
+  }, [environment, getOriginalItemOrder, onStartDraggingItems]);
 
   const abortProgrammaticDrag = useCallback(() => {
     resetState();

packages/core/src/treeItem/useTreeItemRenderContext.ts

@@ -6,6 +6,7 @@ import { useTreeEnvironment } from '../controlledEnvironment/ControlledTreeEnvir
 import { useInteractionManager } from '../controlledEnvironment/InteractionManagerProvider';
 import { useDragAndDrop } from '../controlledEnvironment/DragAndDropProvider';
 import { useSelectUpTo } from '../tree/useSelectUpTo';
+import { useGetOriginalItemOrder } from '../use-get-original-item-order';
 
 // TODO restructure file. Everything into one hook file without helper methods, let all props be generated outside (InteractionManager and AccessibilityPropsManager), ...
 
@@ -16,6 +17,7 @@ export const useTreeItemRenderContext = (item?: TreeItem) => {
   const dnd = useDragAndDrop();
   const selectUpTo = useSelectUpTo('last-focus');
   const itemTitle = item && environment.getItemTitle(item);
+  const getOriginalItemOrder = useGetOriginalItemOrder();
 
   const isSearchMatching = useMemo(
     () =>
@@ -129,10 +131,11 @@ export const useTreeItemRenderContext = (item?: TreeItem) => {
         }
 
         if (canDrag) {
-          dnd.onStartDraggingItems(
-            selectedItems.map(id => environment.items[id]),
-            treeId
+          const orderedItems = getOriginalItemOrder(
+            treeId,
+            selectedItems.map(id => environment.items[id])
           );
+          dnd.onStartDraggingItems(orderedItems, treeId);
         }
       },
     };
@@ -232,5 +235,6 @@ export const useTreeItemRenderContext = (item?: TreeItem) => {
     interactionManager,
     selectUpTo,
     setRenamingItem,
+    getOriginalItemOrder,
   ]);
 };

packages/core/src/use-get-original-item-order.ts

@@ -0,0 +1,22 @@
+import { useTreeEnvironment } from './controlledEnvironment/ControlledTreeEnvironment';
+import { TreeItem } from './types';
+import { useStableHandler } from './use-stable-handler';
+
+export const useGetOriginalItemOrder = () => {
+  const env = useTreeEnvironment();
+  return useStableHandler((treeId: string, items: TreeItem[]) =>
+    items
+      .map(
+        item =>
+          [
+            item,
+            env.linearItems[treeId].findIndex(
+              linearItem => linearItem.item === item.index
+            ),
+          ] as const
+      )
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      .sort(([_, aPos], [_2, bPos]) => bPos - aPos)
+      .map(([item]) => item)
+  );
+};