ui-layout-manager-dev 0.0.21 → 0.0.23-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-layout-manager-dev",
-  "version": "0.0.21",
+  "version": "0.0.23-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/HandleBar/HandleBar.jsx

@@ -134,9 +134,23 @@ export const HandleBar = ({orientation, parent, sibling1, sibling2}) => {
         if (newSibling1Size < MIN_PANEL_SIZE || newSibling2Size < MIN_PANEL_SIZE) {
             return;
         }
+
+        // If both siblings are type fill, then set sizes.
+        const sibling1Type = startInfo.sibling1LayoutConfig.initial.type;
+        const sibling2Type = startInfo.sibling2LayoutConfig.initial.type;
+        if (sibling1Type === "fill" && sibling2Type === "fill") {
+            controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
+            controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
+            return;
+        }
         
-        controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
-        controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
+        // Don't update fill type siblings, if one of the siblings isn't fill type.
+        if (!(sibling1Type === "fill")) {
+            controller.containerRefs[sibling1].style[startInfo.propKey] = newSibling1Size + "px";
+        }
+        if (!(sibling2Type === "fill")) {
+            controller.containerRefs[sibling2].style[startInfo.propKey] = newSibling2Size + "px";
+        }
     }
 
     /**

package/src/components/LayoutManager/Components/LazyLoader/Tabs/Tabs.js

@@ -46,6 +46,6 @@ export const Tabs = ({node, onTabClick}) => {
 }
 
 Tabs.propTypes = {
-    node: PropTypes.array,
-    onTabsClick: PropTypes.func
+    node: PropTypes.object,
+    onTabClick: PropTypes.func
 }

package/src/components/LayoutManager/LayoutManager.jsx

@@ -4,6 +4,7 @@ import { RootContainer } from "./Components/RootContainer/RootContainer";
 import ComponentRegistryContext from "./Providers/ComponentRegistryContext";
 import { LayoutControllerProvider } from "./Providers/LayoutProvider";
 import { LayoutEventProvider } from "./Providers/LayoutEventProvider";
+import { ModalProvider } from "./Providers/ModalProvider";
 
 import "./LayoutManager.scss";
 
@@ -19,13 +20,15 @@ export const LayoutManager = ({ldf, registry}) => {
     
 
     return (
-        <LayoutControllerProvider layout={ldf}>
-            <LayoutEventProvider>
-                <ComponentRegistryContext.Provider value={registry}>
-                    <RootContainer/>
-                </ComponentRegistryContext.Provider>
-            </LayoutEventProvider>
-        </LayoutControllerProvider> 
+        <ModalProvider>
+            <LayoutControllerProvider layout={ldf}>
+                <LayoutEventProvider>
+                    <ComponentRegistryContext.Provider value={registry}>
+                        <RootContainer/>
+                    </ComponentRegistryContext.Provider>
+                </LayoutEventProvider>
+            </LayoutControllerProvider> 
+        </ModalProvider>
     );
 }
 

package/src/components/LayoutManager/LayoutManager.scss

@@ -0,0 +1,53 @@
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.modal-content {
+    background-color: #333333;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    max-width: 500px;
+    max-height: 500px;
+    scrollbar-gutter: stable;
+    scrollbar-color: #47474766 #252526;
+    scrollbar-width: thin;
+}
+
+.modal-header {
+    display:flex;
+    justify-content: space-between;
+    height:25px;
+    border-bottom: solid 1px rgb(85, 85, 85);
+    padding: 10px 20px;
+    align-items: center;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+}
+
+.modal-header > .title {
+    color:rgb(180, 180, 180);
+}
+
+.modal-header > .close-button {
+    cursor: pointer;
+    color:rgb(180, 180, 180);
+}
+
+.modal-header > .close-button:hover {
+    color:white;
+}
+
+.modal-body {
+    flex: 1;
+    overflow: auto;
+    padding:10px;
+}

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

@@ -0,0 +1,96 @@
+// @ts-nocheck
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useMemo,
+    useState,
+} from "react";
+
+import { createPortal } from "react-dom";
+
+import {XLg} from "react-bootstrap-icons";
+
+const ModalContext = createContext(null);
+
+/**
+ * Modal provider component to manage modals in the application
+ * @returns {JSX} The modal provider component
+ */
+export function ModalProvider({ children }) {
+    const [modal, setModal] = useState(null);
+
+    // Open a modal with the given content and title. Returns a function to close the modal.
+    const openModal = useCallback(( args ) => {
+        const close = () => {
+            setModal(null);
+        };
+
+        const id = `modal-${Date.now()}`;
+        setModal({
+            id: id,
+            title: args.title,
+            render: args.render,
+            close: close,
+        });
+
+        return { id, close };
+    }, []);
+
+    // Close the currently open modal
+    const closeModal = useCallback(() => {
+        setModal(null);
+    }, []);
+
+    // Render the modal portal
+    // TODO: Add support for different sizes
+    const getPortal = () => {
+        return createPortal(
+            <>
+                {modal && (
+                    <React.Fragment key={modal.id}>
+                        <div className="modal-backdrop" onClick={modal.close}>
+                            <div className="modal-content" onClick={(e) => e.stopPropagation()}>
+                                <div className="modal-header">
+                                    <span className="title">{modal.title}</span>
+                                    <XLg className="close-button" onClick={modal.close} />
+                                </div>
+                                <div className="modal-body">
+                                    {modal.render({ close: modal.close })}
+                                </div>
+                            </div>
+                        </div>
+                    </React.Fragment>
+                )}
+            </>,
+            document.body,
+        );
+    };
+
+    const api = useMemo(
+        () => ({
+            openModal,
+            closeModal,
+        }),
+        [openModal, closeModal],
+    );
+
+    return (
+        <ModalContext.Provider value={api}>
+            {children}
+            {getPortal()}
+        </ModalContext.Provider>
+    );
+}
+
+/**
+ * Modal manager hook to access the modal API
+ * @return {Object} The modal manager API
+ */
+export function useModalManager() {
+    const value = useContext(ModalContext);
+    if (!value) {
+        throw new Error("useModalManager must be used inside ModalProvider");
+    }
+    return value;
+}

package/src/index.js

@@ -1,3 +1,4 @@
 export * from "./components/LayoutManager";
 export { useLayoutEventPublisher } from "./components/LayoutManager/Providers/LayoutEventProvider";
-export { useLayoutEventSubscription } from "./components/LayoutManager/Providers/LayoutEventProvider";
+export { useLayoutEventSubscription } from "./components/LayoutManager/Providers/LayoutEventProvider";
+export { useModalManager } from "./components/LayoutManager/Providers/ModalProvider";

package/src/stories/sample_components/filetree/FileTree.jsx

@@ -4,10 +4,13 @@ import { FileBrowser } from 'sample-ui-component-library';
 import tree from "./workspace_sample.json"
 
 import { useLayoutEventPublisher } from "../../../components/LayoutManager/Providers/LayoutEventProvider";
+import { useModalManager } from "../../../components/LayoutManager/Providers/ModalProvider";
+import Stack from "../stack/Stack";
 
 const FileTree = () => {
     const fileBrowserRef = useRef(null);
     const publish = useLayoutEventPublisher();
+    const { openModal } = useModalManager();
 
     useLayoutEffect(() => {
         fileBrowserRef.current.addFileTree(tree.tree);
@@ -21,7 +24,26 @@ const FileTree = () => {
           type: "file:selected",
           payload: node,
           source: "file-tree",
-        })
+        });
+
+
+        // For demo purposes, if the readme file is selected, open a modal.
+        if (node.name === "readme") {
+            const {id, close} = openModal({
+                title:"Readme",
+                render: ({ close }) => {
+                    return <>
+                        <Stack />
+                        <Stack />
+                    </>;
+                }
+            });
+
+            // For demo purposes, automatically close the modal after 10 seconds.
+            // setTimeout(() => {
+            //     close();
+            // }, 10000);
+        }
     }
 
     return (