ui-layout-manager-dev 0.0.27-dev → 0.0.29-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.27-dev",
+  "version": "0.0.29-dev",
   "description": "A react component to manage layout and themes in single page applications.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/LayoutManager/Components/RootContainer/RootContainer.jsx

@@ -29,10 +29,16 @@ export const RootContainer = () => {
     const rootRef = useRef(null);
     const timerRef = useRef(null);
     const resizingRef = useRef(false);
+    const loadingOverlayRef = useRef(null);
+    const [showOverlay, setShowOverlay] = useState(true);
 
     // Create the container API that will be used by the controller.
     const rootContainerAPI = useRef({});
-    rootContainerAPI.current = {};
+    rootContainerAPI.current = {
+        hideOverlay: () => {
+            setShowOverlay(false);
+        }
+    };
 
     const [childElements, setChildElements] = useState(null);
 
@@ -118,7 +124,7 @@ export const RootContainer = () => {
                 observer.disconnect();
             }
         }
-    }, [layoutController]);
+    }, [layoutController, setShowOverlay, showOverlay]);
 
     const sensors = useSensors(
         useSensor(PointerSensor, {
@@ -147,6 +153,7 @@ export const RootContainer = () => {
             onDragEnd={dragController.onDragEnd}
             onDragCancel={dragController.onDragCancel}>
             
+                {showOverlay && <div className="loading-overlay" ref={loadingOverlayRef}></div>}
             <div className="root-container">
                 <div ref={rootRef} className="relative-container">
                     {childElements}

package/src/components/LayoutManager/Components/RootContainer/RootContainer.scss

@@ -13,6 +13,19 @@
     overflow: hidden;
 }
 
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1a1a1a;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+
 .drag-overlay {
     position: fixed;
     pointer-events: none;

package/src/components/LayoutManager/Controller/LayoutController.js

@@ -185,6 +185,9 @@ export class LayoutController {
             case LAYOUT_WORKER_PROTOCOL.INITIALIZE_FLEXBOX:
                 transformations = event.data.data;
                 this.applyTransformations(transformations, true);
+                // TODO: Only make containers visible after the layout
+                // is applied to avoid glitchy rendering.
+                this.containers["root"].current.hideOverlay();
                 break;
             case LAYOUT_WORKER_PROTOCOL.TRANSFORMATIONS:
                 transformations = event.data.data;

package/src/components/LayoutManager/Providers/ModalProvider.js

@@ -5,6 +5,7 @@ import React, {
     useContext,
     useMemo,
     useState,
+    useRef
 } from "react";
 
 import { createPortal } from "react-dom";
@@ -19,6 +20,7 @@ const ModalContext = createContext(null);
  */
 export function ModalProvider({ children }) {
     const [modal, setModal] = useState(null);
+    const downOnContentRef = useRef(false);
 
     // Open a modal with the given content and title. Returns a function to close the modal.
     const openModal = useCallback(( args ) => {
@@ -43,6 +45,22 @@ export function ModalProvider({ children }) {
         setModal(null);
     }, []);
 
+
+    // Prevent close when mouse down first happens on content
+    // and then dragged onto backdrop
+    const clickedBackdrop = (e) => {
+        e.stopPropagation()
+        if (!downOnContentRef.current) {
+            closeModal();
+        }
+        downOnContentRef.current = false;
+    }
+
+    const downOnContent = (e) => {
+        e.stopPropagation()
+        downOnContentRef.current = true;
+    }
+
     // Render the modal portal
     // TODO: Add support for different sizes
     const getPortal = () => {
@@ -50,8 +68,8 @@ export function ModalProvider({ children }) {
             <>
                 {modal && (
                     <React.Fragment key={modal.id}>
-                        <div className="modal-backdrop" onClick={modal.close}>
-                            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                        <div className="modal-backdrop" onClick={clickedBackdrop}>
+                            <div className="modal-content"  onMouseDown={downOnContent}>
                                 <div className="modal-header">
                                     <span className="title">{modal.title}</span>
                                     <XLg className="close-button" onClick={modal.close} />