Merge pull request #345 from eccenca/fix/hotkeysDuringDialog-CMEM-6851

Support tracking of Modal open/close states

Author: haschek

CHANGELOG.md

@@ -60,9 +60,9 @@ This is a major release, and it might be not compatible with your current usage
     -   `toggler-micon`
     -   `toggler-micoff`
 -   `<Modal />`:
-    -   `preventReactFlowEvents`: Adds 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to prevent react-flow to react to drag and pan actions in modals.
-        This is enabled by default for <SimpleDialog />.
-
+    -   Add `ModalContext` to track open/close state of all used application modals.
+    -   Add `modalId` property to give a modal a unique ID for tracking purposes.
+    -   `preventReactFlowEvents`: adds 'nopan', 'nowheel' and 'nodrag' classes to overlay classes in order to prevent react-flow to react to drag and pan actions in modals.
 
 ### Removed
 

src/components/Dialog/Modal.tsx

@@ -11,6 +11,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
+import { ModalContext } from "./ModalContext";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -43,7 +44,13 @@ export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
      * If this option is used inflationary then this could harm the visibility of other overlays.
      */
     forceTopPosition?: boolean;
-    /** Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open. */
+    /**
+     * Modal ID that should be globally unique. If a ModalContext is provided this can be used to track opening/closing of this modal.
+     */
+    modalId?: string;
+    /**
+     * Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open.
+     */
     preventReactFlowEvents?: boolean;
 }
 
@@ -70,9 +77,24 @@ export const Modal = ({
     onOpening,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    modalId,
     preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
+    const modalContext = React.useContext(ModalContext)
+    const uniqueModalId = React.useRef<string>(modalId ?? Date.now().toString(36) + Math.random().toString(36).substring(2))
+
+    React.useEffect(() => {
+        return () => {
+            // Make sure to always remove flag when modal is removed
+            modalContext.setModalOpen(uniqueModalId.current, false)
+        }
+    }, [])
+
+    React.useEffect(() => {
+        modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen)
+    }, [otherProps.isOpen])
+
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
         !canOutsideClickClose && canEscapeKeyClose
             ? {

src/components/Dialog/ModalContext.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+export interface ModalContextProps {
+    /** Set that a specific modal is currently being open (or closed) */
+    setModalOpen: (modalId: string, isOpen: boolean) => void;
+
+    /** The currently opened modals ordered by when they have been opened. Oldest coming first. */
+    openModalStack: string[] | undefined;
+}
+
+/** Can be provided in the application to react to modal related changes. */
+export const ModalContext = React.createContext<ModalContextProps>({
+    setModalOpen: () => {},
+    openModalStack: [],
+});
+
+/** Default implementation for modal context props.
+ * Tracks open modals in a stack representation.
+ **/
+export const useModalContext = (): ModalContextProps => {
+    // A stack of modal IDs. These should reflect a stacked opening of modals on top of each other.
+    const [openModalStack, setOpenModalStack] = React.useState<string[]>([]);
+
+    const setModalOpen = React.useCallback((modalId: string, isOpen: boolean) => {
+        setOpenModalStack((old) => {
+            if (isOpen) {
+                return [...old, modalId];
+            } else {
+                const idx = old.findIndex((id) => modalId === id);
+                switch (idx) {
+                    case -1:
+                        // Trying to close modal that has not been registered as open!
+                        return old;
+                    case old.length - 1:
+                        return old.slice(0, idx);
+                    default:
+                        // Modal in between is closed. Consider all modals after it also as closed.
+                        return old.slice(0, idx);
+                }
+            }
+        });
+    }, []);
+
+    return {
+        openModalStack: openModalStack.length ? [...openModalStack] : undefined,
+        setModalOpen,
+    };
+};

src/components/Dialog/index.ts

@@ -1,3 +1,4 @@
 export * from "./Modal";
 export * from "./SimpleDialog";
 export * from "./AlertDialog";
+export * from "./ModalContext";

src/components/Dialog/stories/Modal.stories.tsx

@@ -1,11 +1,20 @@
 import React from "react";
-import { OverlaysProvider } from "@blueprintjs/core";
+import { Classes, OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
 import { fn } from "@storybook/test";
 
 import { SimpleCard } from "../../Card/stories/Card.stories";
 
-import { Card, Modal } from "./../../../../index";
+import {
+    Button,
+    Card,
+    CardContent,
+    Modal,
+    ModalContext,
+    ModalSize,
+    Spacing,
+    useModalContext,
+} from "./../../../../index";
 
 export default {
     title: "Components/Dialog/Modal",
@@ -33,3 +42,135 @@ Default.args = {
     onOpening: fn(),
     onClosing: fn(),
 };
+
+const ContextTemplate = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    const { setModalOpen, openModalStack } = useModalContext();
+
+    return (
+        <OverlaysProvider>
+            <div style={{ height: "70vh", position: "relative" }} id={"modalPortal"}>
+                <ModalContext.Provider value={{ setModalOpen, openModalStack }}>{children}</ModalContext.Provider>
+            </div>
+        </OverlaysProvider>
+    );
+};
+
+const ModalContent = ({ children }: React.HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <Card style={{ height: "100%" }}>
+            <CardContent>{children}</CardContent>
+        </Card>
+    );
+};
+
+/** Component for nested modals. */
+const ExampleModal = ({
+    id,
+    size,
+    children,
+}: {
+    id?: string;
+    size: ModalSize;
+    children?: React.HTMLAttributes<HTMLDivElement>["children"];
+}) => {
+    const [isOpen, setIsOpen] = React.useState(true);
+    const [portalElement, setPortalElement] = React.useState<HTMLElement | undefined>();
+
+    React.useEffect(() => {
+        setPortalElement(document.getElementById("modalPortal")!);
+    }, []);
+
+    return (
+        <Modal
+            modalId={id}
+            size={size}
+            isOpen={isOpen}
+            usePortal={true}
+            portalContainer={portalElement}
+            hasBackdrop={true}
+            onOpened={() => {
+                // workaround, Blueprint attach a class to body tht prevents scrolling, probably it is attached to the wrong portal
+                document.body.classList.remove(Classes.OVERLAY_OPEN);
+            }}
+        >
+            <ModalContent>
+                Modal with constant modal ID "{id}".
+                <Spacing />
+                <TrackingContent />
+                <Spacing />
+                {children}
+                <Spacing />
+                <Button key={"close"} onClick={() => setIsOpen(false)}>
+                    Close
+                </Button>
+            </ModalContent>
+        </Modal>
+    );
+};
+
+const InnerModal = () => {
+    return <ExampleModal id="innerModal" size="small" />;
+};
+
+const MiddleModal = () => {
+    return (
+        <ExampleModal id="middleModal" size="regular">
+            <InnerModal />
+        </ExampleModal>
+    );
+};
+
+/** Shows the current stack of open modals. */
+const TrackingContent = () => {
+    const modalContext = React.useContext(ModalContext);
+
+    return (
+        <ul>
+            {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+                <li key={modalId}>
+                    {idx + 1}. {modalId}
+                </li>
+            ))}
+        </ul>
+    );
+};
+
+/**
+ * `ModalContext` can be used as provider to track a stack of modals.
+ *
+ * ```(Javascript)
+ * const ContextTemplate = () => {
+ *     const { setModalOpen, openModalStack } = useModalContext();
+ *     return (
+ *         <ModalContext.Provider value={{ setModalOpen, openModalStack }}>
+ *             <SimpleDialog size="large" isOpen>
+ *                 <OtherModal />
+ *             </SimpleDialog>
+ *         </ModalContext.Provider>
+ *     );
+ * };
+ *
+ * const OtherModal = () => {
+ *     const modalContext = React.useContext(ModalContext);
+ *     return (
+ *         <SimpleDialog size="small">
+ *            <ul>
+ *                {(modalContext.openModalStack ?? []).map((modalId, idx) => (
+ *                    <li key={modalId}>
+ *                        {idx + 1}. {modalId}
+ *                    </li>
+ *                ))}
+ *            </ul>
+ *         </SimpleDialog>
+ *     );
+ * };
+ * ```
+ */
+export const NestedModalWithContext = ContextTemplate.bind({});
+NestedModalWithContext.args = {
+    children: [
+        <ExampleModal size="large">
+            <MiddleModal />
+        </ExampleModal>,
+    ],
+};