Rename and Restructure

+ took out extra 'layout' directory. + 'Canvas' postfix removed from all files in the views directory. + "WidgetCanvas" renamed to "MyDashboard"
2025-08-05 12:57:18 -07:00
parent 03a335710f
commit ff95f2cbc0
27 changed files with 20 additions and 20 deletions
@@ -0,0 +1,50 @@
+import GridLayout, { WidthProvider } from 'react-grid-layout';
+import { useSlotRecipe, chakra, Flex } from '@chakra-ui/react';
+
+export default function WidgetCanvas({layout, onLayoutChange, isEditable, isDelete, DeleteWidget, widgetArray}) {
+  console.log("rendering MyDashboard");
+  const recipe = useSlotRecipe({ key: "widget" });
+  const styles = recipe(); // using root recipe for widget below
+  const ResponsiveGridLayout = WidthProvider(GridLayout); // canvas width now adjusts to window size
+  const handleDragStart = () => { document.body.style.userSelect = "none"; }; // don't allow text highlighting when dragging
+  const handleDragStop = () => { document.body.style.userSelect = ""; }; // allow text highlighting all other times
+  let merged = [];
+
+  console.log("widgetArray: ", widgetArray);
+  console.log("layout: ", layout);
+  if (widgetArray.length && layout.length) {
+    const widgetMap = new Map(widgetArray.map(item => [item.i, item]));
+    merged = layout.map(item => {
+      return {
+        ...item,
+        ...widgetMap.get(item.i)
+      };
+    });
+  };
+
+  return (
+    <chakra.div width="100%">
+      <ResponsiveGridLayout
+        className="layout"
+        layout={layout}
+        cols={12} // Total columns in grid
+        rowHeight={30} //Height of a single row in px
+        isBounded={true} // Total width of the grid
+        margin={[10, 10]} // [horizontal, vertical] gap
+        onLayoutChange={onLayoutChange}
+        draggableHandle=".widget-handle" // Make only the header draggable
+        onDragStart={handleDragStart}
+        onDragStop={handleDragStop}
+      >
+        {merged.map((item) => {
+          const Widget = item.widget;
+          return (
+            <Flex key={item.i} css={styles.root} height="100%" >
+              <Widget id={item.i} isEditable={isEditable} isDelete={isDelete} DeleteWidget={DeleteWidget}/>
+            </Flex>
+          )
+        })}
+      </ResponsiveGridLayout>
+    </chakra.div>
+  );
+}