From 8553cedc26af8da792a21ac3b66c04d2c7d6948d Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 3 Nov 2022 14:21:51 +0100
Subject: [PATCH] Demo - multiple react grids example

---
 demo/index.html                           |   6 +-
 demo/react-hooks-controlled-multiple.html | 173 ++++++++++++++++++++++
 2 files changed, 178 insertions(+), 1 deletion(-)
 create mode 100644 demo/react-hooks-controlled-multiple.html
diff --git a/demo/index.html b/demo/index.html
index 19663ea0a..95ec0c339 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,9 +1,11 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <meta charset="utf-8">
   <title>Demo</title>
 </head>
+
 <body>
   <h1>Demos</h1>
   <ul>
@@ -19,6 +21,7 @@ <h1>Demos</h1>
     <li><a href="nested_constraint.html">Nested Constraint grids</a></li>
     <li><a href="nested_advanced.html">Nested Advanced grids</a></li>
     <li><a href="react-hooks.html">ReactJS (Hooks)</a></li>
+    <li><a href="react-hooks-controlled-multiple.html">ReactJS (Hooks), mulitple, controlled</a></li>
     <li><a href="react.html">ReactJS</a></li>
     <li><a href="responsive.html">Responsive</a></li>
     <li><a href="right-to-left(rtl).html">Right-To-Left (RTL)</a></li>
@@ -39,4 +42,5 @@ <h1>Old v5.1.1 Jquery Demos</h1>
     <li><a href="nested-jq.html">Nested grids</a></li>
   </ul>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/demo/react-hooks-controlled-multiple.html b/demo/react-hooks-controlled-multiple.html
new file mode 100644
index 000000000..67758fe73
--- /dev/null
+++ b/demo/react-hooks-controlled-multiple.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gridstack.js React integration example</title>
+    <link rel="stylesheet" href="demo.css" />
+    <script src="../dist/gridstack-all.js"></script>
+
+    <!-- Scripts to use react inside html -->
+    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
+    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
+</head>
+
+<body>
+
+    <div>
+        <h2>Controlled stack</h2>
+        <div id="controlled-stack"></div>
+    </div>
+
+</body>
+
+<script type="text/babel">
+    const { useState, useEffect, useLayoutEffect, createRef, useRef } = React
+
+    const Item = ({ id }) => <div>I am item: {id}</div>
+
+    //
+    // Controlled example
+    //
+    const ControlledStack = ({ items, addItem, removeItem, id }) => {
+        const refs = useRef({})
+        const gridRef = useRef()
+        refs.current = {}
+
+        if (Object.keys(refs.current).length !== items.length) {
+            items.forEach(({ id }) => {
+                refs.current[id] = refs.current[id] || createRef()
+            })
+        }
+
+
+        useLayoutEffect(() => {
+
+            gridRef.current =
+                // gridRef.current ||
+                GridStack.init(
+                    {
+                        float: true,
+                        acceptWidgets: true,
+                    },
+                    `.controlled-${id}`
+                )
+
+            const grid = gridRef.current
+
+            grid.on('removed', (e, el) => {
+                const elId = Array.isArray(el) ? el[el.length - 1].id : el.id;
+                removeItem(elId.split(':')[1])
+            })
+
+            grid.on('dropped', (e, p, n) => {
+                console.log('dropped', p, n)
+
+                // Remove "placeholder" item
+                // Gridstack creates a DOM element for dropped items, those need to be removed
+                // as they are rendered by React
+                grid.getGridItems().forEach((item) => {
+                    const ids = item.getAttribute('gs-id').split(':')
+                    if (ids[0] !== id) {
+                        grid.removeWidget(item, true, false);
+                    }
+                });
+                addItem({ id: n.id.split(':')[1], x: n.x, y: n.y, w: n.w, h: n.h })
+            })
+
+            grid.batchUpdate()
+
+
+            items.forEach((a) => {
+                // remove existing widgets
+                if (refs.current[a.id] && refs.current[a.id].current) {
+                    grid.removeWidget(refs.current[a.id].current, false, false)
+                }
+
+                grid.makeWidget(refs.current[a.id].current)
+            })
+            grid.batchUpdate(false)
+
+
+
+        }, [items])
+
+        useEffect(() => {
+            return () => {
+                // console.log('cleanup', id)
+                // gridRef.current.destroy(false, false)
+                // gridRef.current = null
+            }
+        })
+
+
+
+
+        return (
+            <div style={{ width: '100%' }}>
+                <div className={`grid-stack controlled-${id}`}>
+                    {items.map((item, i) => {
+                        // console.log('render', id, item.id)
+                        return (
+                            <div ref={refs.current[item.id]} key={`${id}-${item.id}`} className={'grid-stack-item'} gs-id={`${id}:${item.id}`} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
+                                <div className="grid-stack-item-content">
+                                    <Item {...item} />
+                                </div>
+                            </div>
+                        )
+                    })}
+                </div>
+                <code>
+                    <pre>{JSON.stringify(items, null, 2)}</pre>
+                </code>
+            </div>
+        )
+    }
+
+    const ControlledExample = () => {
+        const [items1, setItems1] = useState([{ id: 'item-1-1', x: 0, y: 0, w: 2, h: 2 }, { id: 'item-1-2', x: 2, y: 0, w: 2, h: 2 }])
+        const [items2, setItems2] = useState([{ id: 'item-2-1', x: 0, y: 0, w: 1, h: 1 }, { id: 'item-2-2', x: 0, y: 1, w: 1, h: 1 }, { id: 'item-2-3', x: 1, y: 0, w: 1, h: 1 }])
+
+        return (
+            <div style={{
+                display: 'flex'
+            }}>
+                <div style={{ display: 'flex', width: '50%' }}>
+                    <ControlledStack
+                        id='gs1'
+                        items={items1}
+                        addItem={(item) => {
+                            setItems1([...items1, item])
+                        }}
+                        removeItem={(id) => {
+                            setItems1(items1.filter(i => i.id !== id))
+                        }}
+                    />
+                </div >
+                <div style={{ display: 'flex', width: '50%' }}>
+                    <ControlledStack
+                        id='gs2'
+                        items={items2}
+                        addItem={(item) => {
+                            setItems2([...items2, item])
+                        }}
+                        removeItem={(id) => {
+                            setItems2(items2.filter(i => i.id !== id))
+                        }}
+                    />
+
+                </div>
+
+            </div >
+        )
+    }
+
+
+
+    ReactDOM.render(<ControlledExample />, document.getElementById('controlled-stack'))
+
+</script>
+
+</html>
\ No newline at end of file
