Merge pull request #3165 from YOUNGHO8762/master

react wrapper grid stack provider API to accept widget objects directly

Author: adumesny

react/lib/grid-stack-context.ts

@@ -4,13 +4,15 @@ import { createContext, useContext } from "react";
 export const GridStackContext = createContext<{
   initialOptions: GridStackOptions;
   gridStack: GridStack | null;
-  addWidget: (fn: (id: string) => Omit<GridStackWidget, "id">) => void;
+  addWidget: (widget: GridStackWidget & { id: Required<GridStackWidget>["id"] }) => void;
   removeWidget: (id: string) => void;
   addSubGrid: (
-    fn: (
-      id: string,
-      withWidget: (w: Omit<GridStackWidget, "id">) => GridStackWidget
-    ) => Omit<GridStackWidget, "id">
+    subGrid: GridStackWidget & { 
+      id: Required<GridStackWidget>["id"]; 
+      subGridOpts: Required<GridStackWidget>["subGridOpts"] & { 
+        children: Array<GridStackWidget & { id: Required<GridStackWidget>["id"] }> 
+      } 
+    }
   ) => void;
   saveOptions: () => GridStackOptions | GridStackWidget[] | undefined;
   removeAll: () => void;

react/lib/grid-stack-provider.tsx

@@ -26,43 +26,30 @@ export function GridStackProvider({
   });
 
   const addWidget = useCallback(
-    (fn: (id: string) => Omit<GridStackWidget, "id">) => {
-      const newId = `widget-${Math.random().toString(36).substring(2, 15)}`;
-      const widget = fn(newId);
-      gridStack?.addWidget({ ...widget, id: newId });
+    (widget: GridStackWidget & { id: Required<GridStackWidget>["id"] })  => {
+      gridStack?.addWidget(widget);
       setRawWidgetMetaMap((prev) => {
         const newMap = new Map<string, GridStackWidget>(prev);
-        newMap.set(newId, widget);
+        newMap.set(widget.id, widget);
         return newMap;
       });
     },
     [gridStack]
   );
 
   const addSubGrid = useCallback(
-    (
-      fn: (
-        id: string,
-        withWidget: (w: Omit<GridStackWidget, "id">) => GridStackWidget
-      ) => Omit<GridStackWidget, "id">
-    ) => {
-      const newId = `sub-grid-${Math.random().toString(36).substring(2, 15)}`;
-      const subWidgetIdMap = new Map<string, GridStackWidget>();
-
-      const widget = fn(newId, (w) => {
-        const subWidgetId = `widget-${Math.random()
-          .toString(36)
-          .substring(2, 15)}`;
-        subWidgetIdMap.set(subWidgetId, w);
-        return { ...w, id: subWidgetId };
-      });
-
-      gridStack?.addWidget({ ...widget, id: newId });
+    (subGrid: GridStackWidget & { 
+      id: Required<GridStackWidget>["id"]; 
+      subGridOpts: Required<GridStackWidget>["subGridOpts"] & { 
+        children: Array<GridStackWidget & { id: Required<GridStackWidget>["id"] }> 
+      } 
+    }) => {
+      gridStack?.addWidget(subGrid);
 
       setRawWidgetMetaMap((prev) => {
         const newMap = new Map<string, GridStackWidget>(prev);
-        subWidgetIdMap.forEach((meta, id) => {
-          newMap.set(id, meta);
+        subGrid.subGridOpts?.children?.forEach((meta: GridStackWidget & { id: Required<GridStackWidget>["id"] }) => {
+          newMap.set(meta.id, meta);
         });
         return newMap;
       });

react/src/demo/demo.tsx

@@ -141,15 +141,15 @@ export function GridStackDemo() {
     <>
     <GridStackProvider initialOptions={initialOptions}>
       <Toolbar />
-       <GridStackRenderProvider>
+        <GridStackRenderProvider>
         <GridStackRender componentMap={COMPONENT_MAP} />
       </GridStackRenderProvider>
       <DebugInfo />
     </GridStackProvider>
 
     <GridStackProvider initialOptions={initialOptions2}>
       <Toolbar />
-       <GridStackRenderProvider>
+        <GridStackRenderProvider>
         <GridStackRender componentMap={COMPONENT_MAP} />
       </GridStackRenderProvider>
       <DebugInfo />
@@ -175,7 +175,10 @@ function Toolbar() {
     >
       <button
         onClick={() => {
-          addWidget((id) => ({
+          const id = `widget-${Math.random().toString(36).substring(2, 15)}`;
+          
+          addWidget({
+            id,
             w: 2,
             h: 2,
             x: 0,
@@ -184,15 +187,19 @@ function Toolbar() {
               name: "Text",
               props: { content: id },
             }),
-          }));
+          });
         }}
       >
         Add Text (2x2)
       </button>
 
       <button
         onClick={() => {
-          addSubGrid((id, withWidget) => ({
+          const subGridId = `sub-grid-${Math.random().toString(36).substring(2, 15)}`;
+          const widgetId = `widget-${Math.random().toString(36).substring(2, 15)}`;
+
+          addSubGrid({
+            id: subGridId,
             h: 5,
             noResize: false,
             sizeToContent: true,
@@ -203,7 +210,8 @@ function Toolbar() {
               minRow: 2,
               cellHeight: CELL_HEIGHT,
               children: [
-                withWidget({
+                {
+                  id: widgetId,
                   h: 1,
                   locked: true,
                   noMove: true,
@@ -213,15 +221,15 @@ function Toolbar() {
                   y: 0,
                   content: JSON.stringify({
                     name: "Text",
-                    props: { content: "Sub Grid 1 Title" + id },
+                    props: { content: "Sub Grid 1 Title" + widgetId },
                   }),
-                }),
+                },
               ],
             },
             w: 12,
             x: 0,
             y: 0,
-          }));
+          });
         }}
       >
         Add Sub Grid (12x1)