Update move utility to accept event

clauderic · Sep 23, 2024 · 1998c20 · 1998c20
1 parent cf80a52
commit 1998c20
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 111 deletions.
diff --git a/.changeset/move-helper.md b/.changeset/move-helper.md
@@ -0,0 +1,5 @@
+---
+'@dnd-kit/helpers': patch
+---
+
+Updated the `move` helper to accept an `event` instead of `source` and `target`.
diff --git a/apps/docs/react/guides/multiple-sortable-lists.mdx b/apps/docs/react/guides/multiple-sortable-lists.mdx
@@ -191,9 +191,7 @@ export function App() {
   return (
     <DragDropProvider
       onDragOver={(event) => {
-        const {source, target} = event.operation;
-
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, eventt));
       }}
     >
       <div className="Root">
@@ -267,14 +265,14 @@ export function App({style = styles}) {
 
         if (source?.type === 'column') return;
 
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
       onDragEnd={(event) => {
         const {source, target} = event.operation;
 
         if (event.canceled || source.type !== 'column') return;
 
-        setColumnOrder((columns) => move(columns, source, target));
+        setColumnOrder((columns) => move(columns, sevent));
       }}
     >
       <div className="Root">
@@ -330,7 +328,7 @@ export function App({style = styles}) {
 
         if (source?.type === 'column') return;
 
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
       onDragEnd={(event) => {
         const {source, target} = event.operation;
@@ -344,7 +342,7 @@ export function App({style = styles}) {
         }
 
         if (source.type === 'column') {
-          setColumnOrder((columns) => move(columns, source, target));
+          setColumnOrder((columns) => move(columns, event));
         }
       }}
     >

diff --git a/apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.tsx b/apps/stories/stories/react/Sortable/MultipleLists/MultipleLists.tsx
@@ -56,34 +56,25 @@ export function MultipleLists({
         snapshot.current = cloneDeep(items);
       }}
       onDragOver={(event) => {
-        const {source, target} = event.operation;
+        const {source} = event.operation;
 
-        if (!source || !target || source.id === target.id) {
-          return;
-        }
-
-        if (source.type === 'column') {
+        if (source?.type === 'column') {
           // We can rely on optimistic sorting for columns
           return;
         }
 
-        if (target.id === source.data.group) {
-          event.preventDefault();
-          return;
-        }
-
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
       onDragEnd={(event) => {
         if (event.canceled) {
           setItems(snapshot.current);
           return;
         }
 
-        const {source, target} = event.operation;
+        const {source} = event.operation;
 
         if (source?.type === 'column') {
-          setColumns((columns) => move(columns, source, target));
+          setColumns((columns) => move(columns, event));
         }
       }}
     >

diff --git a/apps/stories/stories/react/Sortable/MultipleLists/docs/examples/Guide.jsx b/apps/stories/stories/react/Sortable/MultipleLists/docs/examples/Guide.jsx
@@ -27,11 +27,7 @@ export function Guide({
           return;
         }
 
-        const {source, target} = event.operation;
-
-        if (source && target) {
-          setItems((items) => move(items, source, target));
-        }
+        setItems((items) => move(items, event));
       }}
     >
       <div style={style}>

diff --git a/apps/stories/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx b/apps/stories/stories/react/Sortable/MultipleLists/docs/examples/QuickStart.jsx
@@ -17,11 +17,7 @@ export function Example({style = styles}) {
   return (
     <DragDropProvider
       onDragOver={(event) => {
-        const {source, target} = event.operation;
-
-        if (source && target) {
-          setItems((items) => move(items, source, target));
-        }
+        setItems((items) => move(items, event));
       }}
     >
       <div style={style}>

diff --git a/apps/stories/stories/react/Sortable/SortableExample.tsx b/apps/stories/stories/react/Sortable/SortableExample.tsx
@@ -50,20 +50,12 @@ export function SortableExample({
       plugins={debug ? [Debug, ...defaultPreset.plugins] : undefined}
       modifiers={modifiers}
       onDragOver={(event) => {
-        const {source, target} = event.operation;
-
         if (optimistic) return;
 
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
       onDragEnd={(event) => {
-        const {source, target} = event.operation;
-
-        if (event.canceled) {
-          return;
-        }
-
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
     >
       <Wrapper layout={layout}>

diff --git a/apps/stories/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx b/apps/stories/stories/react/Sortable/Virtualized/ReactTinyVirtualListExample.tsx
@@ -25,13 +25,7 @@ export function ReactTinyVirtualListExample({debug}: Props) {
         snapshot.current = cloneDeep(items);
       }}
       onDragOver={(event) => {
-        const {source, target} = event.operation;
-
-        if (!source || !target) {
-          return;
-        }
-
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
       onDragEnd={(event) => {
         if (event.canceled) {

diff --git a/apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx b/apps/stories/stories/react/Sortable/Virtualized/ReactVirtualExample.tsx
@@ -41,13 +41,7 @@ export function ReactVirtualExample({debug}: Props) {
         snapshot.current = cloneDeep(items);
       }}
       onDragOver={(event) => {
-        const {source, target} = event.operation;
-
-        if (!source || !target) {
-          return;
-        }
-
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
       onDragEnd={(event) => {
         if (event.canceled) {

diff --git a/apps/stories/stories/react/Sortable/Virtualized/ReactWindowExample.tsx b/apps/stories/stories/react/Sortable/Virtualized/ReactWindowExample.tsx
@@ -25,13 +25,7 @@ export function ReactWindowExample({debug}: Props) {
         snapshot.current = cloneDeep(items);
       }}
       onDragOver={(event) => {
-        const {source, target} = event.operation;
-
-        if (!source || !target) {
-          return;
-        }
-
-        setItems((items) => move(items, source, target));
+        setItems((items) => move(items, event));
       }}
       onDragEnd={(event) => {
         if (event.canceled) {
@@ -54,17 +48,15 @@ export function ReactWindowExample({debug}: Props) {
   );
 }
 
-function Row(
-  {
-    data,
-    index,
-    style,
-  }: {
-    data: UniqueIdentifier[];
-    index: number;
-    style: React.CSSProperties;
-  }
-) {
+function Row({
+  data,
+  index,
+  style,
+}: {
+  data: UniqueIdentifier[];
+  index: number;
+  style: React.CSSProperties;
+}) {
   return <Sortable id={data[index]} index={index} style={style} />;
 }
 

diff --git a/apps/stories/stories/react/Sortable/docs/examples/ControlledExample.jsx b/apps/stories/stories/react/Sortable/docs/examples/ControlledExample.jsx
@@ -11,11 +11,7 @@ export function ControlledExample() {
   return (
     <DragDropProvider
       onDragEnd={(event) => {
-        const {source, target} = event.operation;
-
-        if (source && target) {
-          setItems((items) => move(items, source, target));
-        }
+        setItems((items) => move(items, event));
       }}
     >
       <div style={styles}>

diff --git a/apps/stories/stories/react/Sortable/docs/examples/Example.jsx b/apps/stories/stories/react/Sortable/docs/examples/Example.jsx
@@ -11,11 +11,7 @@ export function Example({style = styles}) {
   return (
     <DragDropProvider
       onDragEnd={(event) => {
-        const {source, target} = event.operation;
-
-        if (source && target) {
-          setItems((items) => move(items, source, target));
-        }
+        setItems((items) => move(items, event));
       }}
     >
       <div style={style}>

diff --git a/packages/dom/src/sortable/OptimisticSortingPlugin.ts b/packages/dom/src/sortable/OptimisticSortingPlugin.ts
@@ -98,7 +98,10 @@ export class OptimisticSortingPlugin extends Plugin<DragDropManager> {
               [sourceGroup]: orderedSourceSortables,
               [targetGroup]: orderedTargetSortables,
             };
-            const newState = move(state, source, target);
+            const newState = move(state, event);
+
+            if (state === newState) return;
+
             const sourceIndex = newState[targetGroup].indexOf(source.sortable);
             const targetIndex = newState[targetGroup].indexOf(target.sortable);
 

diff --git a/packages/helpers/src/move.ts b/packages/helpers/src/move.ts
@@ -1,4 +1,10 @@
-import type {UniqueIdentifier, Draggable, Droppable} from '@dnd-kit/abstract';
+import type {
+  UniqueIdentifier,
+  Draggable,
+  Droppable,
+  DragDropManager,
+  DragDropEvents,
+} from '@dnd-kit/abstract';
 
 /**
  * Move an array item to a different position. Returns a new array with the item moved to the new position.
@@ -45,13 +51,18 @@ function mutate<
   T extends Items | Record<UniqueIdentifier, Items>,
   U extends Draggable,
   V extends Droppable,
+  W extends DragDropManager<U, V>,
 >(
   items: T,
-  source: U | null,
-  target: V | null,
+  event: Parameters<
+    DragDropEvents<U, V, W>['dragover'] | DragDropEvents<U, V, W>['dragend']
+  >[0],
   mutation: typeof arrayMove | typeof arraySwap
 ): T {
-  if (!source || !target) {
+  const {source, target, canceled} = event.operation;
+
+  if (!source || !target || canceled || source.id === target.id) {
+    if ('preventDefault' in event) event.preventDefault();
     return items;
   }
 
@@ -66,30 +77,18 @@ function mutate<
       return items;
     }
 
-    if (source.manager) {
-      const {dragOperation} = source.manager;
-
-      // Reconcile optimistic updates
-      if (
-        !dragOperation.canceled &&
-        'index' in source &&
-        typeof source.index === 'number'
-      ) {
-        const projectedSourceIndex = source.index;
+    // Reconcile optimistic updates
+    if (!canceled && 'index' in source && typeof source.index === 'number') {
+      const projectedSourceIndex = source.index;
 
-        if (projectedSourceIndex !== sourceIndex) {
-          return mutation(items, sourceIndex, projectedSourceIndex);
-        }
+      if (projectedSourceIndex !== sourceIndex) {
+        return mutation(items, sourceIndex, projectedSourceIndex);
       }
     }
 
     return mutation(items, sourceIndex, targetIndex);
   }
 
-  if (source.id === target.id) {
-    return items;
-  }
-
   const entries = Object.entries(items);
 
   let sourceIndex = -1;
@@ -122,7 +121,8 @@ function mutate<
   if (!source.manager) return items;
 
   const {dragOperation} = source.manager;
-  const position = dragOperation.position.current;
+  const position =
+    dragOperation.shape?.current.center ?? dragOperation.position.current;
 
   if (targetParent == null) {
     if (target.id in items) {
@@ -137,7 +137,13 @@ function mutate<
     }
   }
 
-  if (sourceParent == null || targetParent == null) {
+  if (
+    sourceParent == null ||
+    targetParent == null ||
+    (sourceParent === targetParent && sourceIndex === targetIndex)
+  ) {
+    if ('preventDefault' in event) event.preventDefault();
+
     return items;
   }
 
@@ -171,14 +177,26 @@ export function move<
   T extends Items | Record<UniqueIdentifier, Items>,
   U extends Draggable,
   V extends Droppable,
->(items: T, source: U | null, target: V | null) {
-  return mutate(items, source, target, arrayMove);
+  W extends DragDropManager<U, V>,
+>(
+  items: T,
+  event: Parameters<
+    DragDropEvents<U, V, W>['dragover'] | DragDropEvents<U, V, W>['dragend']
+  >[0]
+) {
+  return mutate(items, event, arrayMove);
 }
 
 export function swap<
   T extends Items | Record<UniqueIdentifier, Items>,
   U extends Draggable,
   V extends Droppable,
->(items: T, source: U | null, target: V | null) {
-  return mutate(items, source, target, arraySwap);
+  W extends DragDropManager<U, V>,
+>(
+  items: T,
+  event: Parameters<
+    DragDropEvents<U, V, W>['dragover'] | DragDropEvents<U, V, W>['dragend']
+  >[0]
+) {
+  return mutate(items, event, arraySwap);
 }