Merge pull request #348 from eccenca/fix/reactFlowModal-MT-30

Make react-flow prevent-event classes configurable in Modal

Author: haschek

CHANGELOG.md

@@ -59,6 +59,10 @@ This is a major release, and it might be not compatible with your current usage
     -   `toggler-caretleft`
     -   `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 />.
+
 
 ### Removed
 
@@ -86,8 +90,6 @@ This is a major release, and it might be not compatible with your current usage
 
 ### Fixed
 
--   `<Modal />`:
-    -   Add 'nopan', 'nowheel' and 'nodrag' classes to Modal's overlay classes in order to always prevent react-flow to react to drag and pan actions in modals.
 -   `<CodeAutocompleteField />`:
     -   In multiline mode, validation errors might be highlighted incorrectly (relative line offset added).
 

src/components/Dialog/Modal.tsx

@@ -5,12 +5,12 @@ import {
     Overlay2Props as BlueprintOverlayProps,
 } from "@blueprintjs/core";
 
+import { preventReactFlowActionsClasses } from "../../cmem";
 import { utils } from "../../common";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
 
 import { Card } from "./../Card";
-import {preventReactFlowActionsClasses} from "../../cmem";
 
 export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
     children: React.ReactNode | React.ReactNode[];
@@ -43,9 +43,11 @@ 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. */
+    preventReactFlowEvents?: boolean;
 }
 
-export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen"
+export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
 
 /**
  * Displays contents on top of other elements, used to create dialogs.
@@ -68,6 +70,7 @@ export const Modal = ({
     onOpening,
     "data-test-id": dataTestId,
     "data-testid": dataTestid,
+    preventReactFlowEvents = true,
     ...otherProps
 }: ModalProps) => {
     const backdropProps: React.HTMLProps<HTMLDivElement> | undefined =
@@ -117,7 +120,7 @@ export const Modal = ({
         <BlueprintOverlay
             {...otherProps}
             backdropProps={backdropProps}
-            className={`${overlayClassName} ${preventReactFlowActionsClasses}`}
+            className={`${overlayClassName} ${preventReactFlowEvents ? preventReactFlowActionsClasses : ""}`}
             backdropClassName={`${eccgui}-dialog__backdrop`}
             canOutsideClickClose={canOutsideClickClose}
             canEscapeKeyClose={canEscapeKeyClose}