Added backdrop prop to Dialog (#210)

* Added `backdrop` prop to `Dialog`.
equinor · Feb 25, 2022 · 8db7ed2 · 8db7ed2
1 parent 20a0694
commit 8db7ed2
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - [#202](https://github.com/equinor/webviz-core-components/pull/202) - Adjusted `z-index` of suggestions of `SmartNodeSelector` to a hard-coded value of `1500`.
 - [#201](https://github.com/equinor/webviz-core-components/pull/201) - Implemented wrapper around `MaterialUI's` draggable dialog. Makes a new `Dialog` component available in `Dash`.
+- [#210](https://github.com/equinor/webviz-core-components/pull/210) - Added `backdrop` property to `Dialog`. This allows to disable the backdrop behind a dialog and makes all other elements remain clickable.
 
 ## [0.5.5] - 2022-02-09
 

diff --git a/react/src/demo/App.tsx b/react/src/demo/App.tsx
@@ -38,14 +38,12 @@ type MenuProps = {
 };
 
 const App: React.FC = () => {
-    const [
-        nodeSelectorState,
-        setNodeSelectorState,
-    ] = React.useState<SmartNodeSelectorProps>({
-        selectedNodes: [],
-        selectedIds: [],
-        selectedTags: [],
-    });
+    const [nodeSelectorState, setNodeSelectorState] =
+        React.useState<SmartNodeSelectorProps>({
+            selectedNodes: [],
+            selectedIds: [],
+            selectedTags: [],
+        });
 
     const [currentPage, setCurrentPage] = React.useState<MenuProps>({
         url: "",
@@ -111,6 +109,7 @@ const App: React.FC = () => {
                         id="dialog"
                         max_width="xl"
                         open={dialogOpen}
+                        backdrop={false}
                         draggable={true}
                         setProps={(newProps) => {
                             console.log(newProps);
@@ -140,13 +139,11 @@ const App: React.FC = () => {
                         deprecation_warnings={[
                             {
                                 message: "Deprecated 1",
-                                url:
-                                    "https://github.com/equinor/webviz-core-components",
+                                url: "https://github.com/equinor/webviz-core-components",
                             },
                             {
                                 message: "Deprecated 2",
-                                url:
-                                    "https://github.com/equinor/webviz-core-components",
+                                url: "https://github.com/equinor/webviz-core-components",
                             },
                         ]}
                     />

diff --git a/react/src/lib/components/Dialog/Dialog.tsx b/react/src/lib/components/Dialog/Dialog.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import PropTypes, { InferProps } from "prop-types";
 
 import {
+    withStyles,
     Button,
     Dialog as MuiDialog,
     DialogActions,
@@ -54,6 +55,10 @@ const propTypes = {
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node,
     ]),
+    /**
+     * Set to false if you do not want to have a backdrop behind the dialog.
+     */
+    backdrop: PropTypes.bool,
     /**
      * A list of actions to be displayed as buttons in the lower right corner of the dialog.
      */
@@ -79,6 +84,7 @@ const defaultProps: Optionals<InferProps<typeof propTypes>> = {
     draggable: false,
     full_screen: false,
     children: null,
+    backdrop: true,
     actions: [],
     last_action_called: null,
     actions_called: 0,
@@ -87,6 +93,12 @@ const defaultProps: Optionals<InferProps<typeof propTypes>> = {
     },
 };
 
+const StyledMuiDialog = withStyles({
+    root: {
+        pointerEvents: "none",
+    },
+})(MuiDialog);
+
 /**
  * A modal dialog component with optional buttons. Can be set to be draggable.
  */
@@ -106,7 +118,10 @@ export const Dialog: React.FC<InferProps<typeof propTypes>> = (props) => {
         setOpen(adjustedProps.open || false);
     }, [adjustedProps.open]);
 
-    const handleClose = () => {
+    const handleClose = (reason: string) => {
+        if (reason === "backdropClick" && !adjustedProps.backdrop) {
+            return;
+        }
         setOpen(false);
         adjustedProps.setProps({ open: false });
     };
@@ -120,27 +135,8 @@ export const Dialog: React.FC<InferProps<typeof propTypes>> = (props) => {
         setActionsCalled(actionsCalled + 1);
     };
 
-    return (
-        <MuiDialog
-            id={props.id}
-            open={open}
-            onClose={() => handleClose()}
-            PaperComponent={
-                adjustedProps.draggable ? DraggablePaperComponent : Paper
-            }
-            aria-labelledby="dialog-title"
-            maxWidth={
-                (adjustedProps.max_width as
-                    | "xs"
-                    | "sm"
-                    | "md"
-                    | "lg"
-                    | "xl"
-                    | null) || false
-            }
-            fullScreen={adjustedProps.full_screen}
-            scroll="body"
-        >
+    const content = (
+        <>
             <DialogTitle
                 style={{
                     cursor: adjustedProps.draggable ? "move" : "default",
@@ -151,7 +147,7 @@ export const Dialog: React.FC<InferProps<typeof propTypes>> = (props) => {
                 {adjustedProps.title}
                 <IconButton
                     aria-label="close"
-                    onClick={() => handleClose()}
+                    onClick={() => handleClose("buttonClick")}
                     style={{
                         position: "absolute",
                         right: 8,
@@ -174,8 +170,61 @@ export const Dialog: React.FC<InferProps<typeof propTypes>> = (props) => {
                     </Button>
                 ))}
             </DialogActions>
-        </MuiDialog>
+        </>
     );
+
+    if (adjustedProps.backdrop) {
+        return (
+            <MuiDialog
+                id={props.id}
+                open={open}
+                onClose={(_, reason) => handleClose(reason)}
+                PaperComponent={
+                    adjustedProps.draggable ? DraggablePaperComponent : Paper
+                }
+                aria-labelledby="dialog-title"
+                maxWidth={
+                    (adjustedProps.max_width as
+                        | "xs"
+                        | "sm"
+                        | "md"
+                        | "lg"
+                        | "xl"
+                        | null) || false
+                }
+                fullScreen={adjustedProps.full_screen}
+                scroll="body"
+            >
+                {content}
+            </MuiDialog>
+        );
+    } else {
+        return (
+            <StyledMuiDialog
+                id={props.id}
+                open={open}
+                onClose={(_, reason) => handleClose(reason)}
+                hideBackdrop={true}
+                PaperComponent={
+                    adjustedProps.draggable ? DraggablePaperComponent : Paper
+                }
+                aria-labelledby="dialog-title"
+                maxWidth={
+                    (adjustedProps.max_width as
+                        | "xs"
+                        | "sm"
+                        | "md"
+                        | "lg"
+                        | "xl"
+                        | null) || false
+                }
+                fullScreen={adjustedProps.full_screen}
+                scroll="paper"
+            >
+                {content}
+            </StyledMuiDialog>
+        );
+    }
 };
 
 Dialog.propTypes = propTypes;
diff --git a/react/src/lib/components/Dialog/components/DraggablePaperComponent.tsx b/react/src/lib/components/Dialog/components/DraggablePaperComponent.tsx
@@ -5,11 +5,13 @@ import Draggable from "react-draggable";
 
 export const DraggablePaperComponent: React.FC<PaperProps> = (props) => {
     return (
-        <Draggable
-            handle="#draggable-dialog-title"
-            cancel={'[class*="MuiDialogContent-root"]'}
-        >
-            <Paper {...props} />
-        </Draggable>
+        <div style={{ pointerEvents: "all" }}>
+            <Draggable
+                handle="#draggable-dialog-title"
+                cancel={'[class*="MuiDialogContent-root"]'}
+            >
+                <Paper {...props} />
+            </Draggable>
+        </div>
     );
 };