fix: don't flash nested dropzones on first drag

measuredco · Mar 22, 2024 · 38c3dc4 · 38c3dc4
1 parent 15a3cdb
commit 38c3dc4
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/packages/core/components/DropZone/context.tsx b/packages/core/components/DropZone/context.tsx
@@ -41,6 +41,8 @@ export type DropZoneContext<
   pathData?: PathData;
   registerPath?: (selector: ItemSelector) => void;
   mode?: "edit" | "render";
+  zoneWillDrag?: string;
+  setZoneWillDrag?: (zone: string) => void;
 } | null;
 
 export const dropZoneContext = createContext<DropZoneContext>(null);
@@ -146,6 +148,8 @@ export const DropZoneProvider = ({
     [value, setPathData]
   );
 
+  const [zoneWillDrag, setZoneWillDrag] = useState("");
+
   return (
     <>
       {value && (
@@ -164,6 +168,8 @@ export const DropZoneProvider = ({
             activeZones,
             registerPath,
             pathData,
+            zoneWillDrag,
+            setZoneWillDrag,
             ...value,
           }}
         >

diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, useContext, useEffect, useState } from "react";
+import { CSSProperties, useContext, useEffect } from "react";
 import { DraggableComponent } from "../DraggableComponent";
 import { Droppable } from "@measured/dnd";
 import { getItem } from "../../lib/get-item";
@@ -38,6 +38,8 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
     registerZoneArea,
     areasWithZones,
     hoveringComponent,
+    zoneWillDrag,
+    setZoneWillDrag = () => null,
   } = ctx! || {};
 
   let content = data.content || [];
@@ -82,7 +84,7 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
   // we use the index rather than spread to prevent down-level iteration warnings: https://stackoverflow.com/questions/53441292/why-downleveliteration-is-not-on-by-default
   const [draggedSourceArea] = getZoneId(draggedSourceId);
 
-  const [userWillDrag, setUserWillDrag] = useState(false);
+  const userWillDrag = zoneWillDrag === zone;
 
   const userIsDragging = !!draggedItem;
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
@@ -172,6 +174,9 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
         isAreaSelected,
         hasChildren: content.length > 0,
       })}
+      onMouseUp={() => {
+        setZoneWillDrag("");
+      }}
     >
       <Droppable
         droppableId={zoneCompound}
@@ -269,11 +274,7 @@ function DropZoneEdit({ zone, allow, disallow, style }: DropZoneProps) {
                         }}
                         onMouseDown={(e) => {
                           e.stopPropagation();
-                          setUserWillDrag(true);
-                        }}
-                        onMouseUp={(e) => {
-                          e.stopPropagation();
-                          setUserWillDrag(false);
+                          setZoneWillDrag(zone);
                         }}
                         onMouseOver={(e) => {
                           e.stopPropagation();