griditem drag drop

finos · Sep 7, 2024 · a7db2f0 · a7db2f0
1 parent d33d891
commit a7db2f0
Show file tree

Hide file tree

Showing 11 changed files with 320 additions and 288 deletions.
diff --git a/vuu-ui/packages/vuu-layout/src/grid-layout/GridLayout.css b/vuu-ui/packages/vuu-layout/src/grid-layout/GridLayout.css
@@ -36,6 +36,7 @@
 .vuuGridLayoutItemHeader {
   align-items: center;
   background-color: #ccc;
+  cursor: grab;
   display: flex;
   flex: 0 0 var(--vuu-header-height);
   inset: var(--vuu-grid-gap) var(--vuu-grid-gap) auto var(--vuu-grid-gap);

diff --git a/vuu-ui/packages/vuu-layout/src/grid-layout/GridLayoutItem.tsx b/vuu-ui/packages/vuu-layout/src/grid-layout/GridLayoutItem.tsx
@@ -2,7 +2,7 @@ import {
   useDraggable,
   useGridLayoutDragStartHandler,
   useGridLayoutProps,
-  useGridLayoutProviderDispatch
+  useGridLayoutProviderDispatch,
 } from "@finos/vuu-layout";
 import { IconButton } from "@finos/vuu-ui-controls";
 import { useComponentCssInjection } from "@salt-ds/styles";
@@ -13,7 +13,7 @@ import {
   DragEvent,
   HTMLAttributes,
   MouseEventHandler,
-  useCallback
+  useCallback,
 } from "react";
 import { GridResizeable } from "./GridLayout";
 import { useAsDropTarget } from "./useAsDropTarget";
@@ -58,12 +58,12 @@ export const GridLayoutItem = ({
   useComponentCssInjection({
     testId: "vuu-grid-layout",
     css: gridLayoutCss,
-    window: targetWindow
+    window: targetWindow,
   });
   useComponentCssInjection({
     testId: "vuu-grid-splitter",
     css: gridSplitterCss,
-    window: targetWindow
+    window: targetWindow,
   });
 
   const dispatch = useGridLayoutProviderDispatch();
@@ -75,7 +75,7 @@ export const GridLayoutItem = ({
       evt.stopPropagation();
       dispatch({ type: "close", id });
     },
-    [dispatch, id]
+    [dispatch, id],
   );
 
   const getPayload = useCallback(
@@ -86,27 +86,29 @@ export const GridLayoutItem = ({
       }
       throw Error("GridLayoutItem no found");
     },
-    []
+    [],
   );
 
+  const getDragImg = useCallback(() => {}, []);
+
   const useDropTargetHook = isDropTarget ? useAsDropTarget : useNotDropTarget;
   const { dropTargetClassName, ...droppableProps } = useDropTargetHook();
   const draggableProps = useDraggable({
     draggableClassName: classBaseItem,
     getPayload,
-    onDragStart
+    onDragStart,
   });
 
   const className = cx(classBaseItem, {
     [`${classBaseItem}-resizeable-h`]: resizeable === "h",
     [`${classBaseItem}-resizeable-v`]: resizeable === "v",
-    [`${classBaseItem}-resizeable-vh`]: resizeable === "hv"
+    [`${classBaseItem}-resizeable-vh`]: resizeable === "hv",
   });
 
   const style = {
     ...styleProp,
     ...layoutProps,
-    "--header-height": header ? "25px" : "0px"
+    "--header-height": header ? "25px" : "0px",
   };
 
   return (