add on click event

Simon-U · Aug 17, 2024 · b5ed36e · b5ed36e
1 parent 4f2ffa5
commit b5ed36e
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 13 deletions.
diff --git a/dash_drag_grid/dash_drag_grid.min.js b/dash_drag_grid/dash_drag_grid.min.js
diff --git a/dash_drag_grid/dash_drag_grid.min.js.map b/dash_drag_grid/dash_drag_grid.min.js.map
diff --git a/deps/dash_drag_grid.min.js b/deps/dash_drag_grid.min.js
diff --git a/deps/dash_drag_grid.min.js.map b/deps/dash_drag_grid.min.js.map
diff --git a/inst/deps/dash_drag_grid.min.js b/inst/deps/dash_drag_grid.min.js
diff --git a/inst/deps/dash_drag_grid.min.js.map b/inst/deps/dash_drag_grid.min.js.map
diff --git a/src/lib/components/GridItem.react.js b/src/lib/components/GridItem.react.js
@@ -4,7 +4,6 @@ class GridItem extends Component {
 
     constructor(props) {
         super(props)
-        console.log(props.isRemoveable)
         this.state = {
             active: false
         }

diff --git a/src/lib/components/ToolBox2.react.js b/src/lib/components/ToolBox2.react.js
@@ -138,24 +138,26 @@ function ToolBox(props) {
         return renderDashComponent(child.element);
     }
 
+    const handleItemClick = (id) => () => {
+        // Use the existing sentMessage function to remove item from the toolbox
+        sentMessage({ type: 'remove', id });
+    };
+
     const renderToolboxItem = (child, index) => {
         try {
             const key = child.id || `toolbox-item-${index}`;
             const _data_grid = { x: 0, y: 0, w: 1, h: 2 };
             const content = renderContent(child);
-            const handleItemClick = () => {
-                addItemToLayout(key);
-            };
 
             return (
                 <div
                     key={key}
                     className="item toolbox"
                     data-grid={_data_grid}
-                    draggable="true"
+
                     unselectable="on"
                     onDragStart={handleDragStart(key)}
-                    onClick={handleItemClick}
+                    onClick={handleItemClick(key)}
                 >
                     <div className="toolbox-item-content">
                         {props.component(content)}

diff --git a/src/lib/components/ToolBoxGrid2.react.js b/src/lib/components/ToolBoxGrid2.react.js
@@ -151,7 +151,32 @@ const ToolBoxGrid2 = (props) => {
 
     }, [gridLayouts]);
 
-    let sendMessage = useComms('toolbox', (msg) => { }, 'json');
+    let sendMessage = useComms('toolbox', (msg) => {
+        if (msg.type === 'remove') {
+            const id = msg.id;
+
+            // Find the item in the toolboxLayouts
+            setToolboxLayouts(prev => {
+                let newState = { ...prev };
+                const itemToAdd = newState[breakpoint].find(item => item.i === id);
+
+                if (itemToAdd) {
+                    // Remove the item from the toolbox layout
+                    newState[breakpoint] = newState[breakpoint].filter(item => item.i !== id);
+
+                    // Update the state
+                    setGridLayouts(gridLayouts => {
+                        let newGridState = { ...gridLayouts };
+                        itemToAdd.inToolbox = false;
+                        newGridState[breakpoint].push(itemToAdd);
+                        return newGridState;
+                    });
+                }
+
+                return newState;
+            });
+        }
+    }, 'json');
 
     const handleResizeItemStart = (layout, oldItem, newItem, placeholder, e, element) => {
         setActiveWindows(prev => {