Feature/dialog - A floating, non-modal, base dialog component

package.json

@@ -47,17 +47,19 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/inter": "^5.0.16",
-    "@mui/icons-material": "^5.15.11",
-    "@mui/joy": "^5.0.0-beta.32",
-    "@mui/material": "^5.15.11",
+    "@mui/icons-material": "^5.15.15",
+    "@mui/joy": "^5.0.0-beta.36",
+    "@mui/material": "^5.15.15",
     "axios": "^1.6.7",
     "core-js": "^3.36.0",
     "d3": "^7.8.5",
     "dotenv": "^16.4.5",
     "leaflet": "^1.9.4",
     "mapbox-gl": "^3.1.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
     "react-leaflet": "^4.2.1",
     "react-map-gl": "^7.1.7",
     "react-query": "^3.39.3",

src/utils/dialog-utils.js

@@ -0,0 +1,95 @@
+import React, {Fragment} from 'react';
+import Draggable from 'react-draggable';
+import PropTypes from 'prop-types';
+
+import Button from '@mui/material/Button';
+import CssBaseline from '@mui/material/CssBaseline';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogActions';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Paper from '@mui/material/Paper';
+import Slide from '@mui/material/Slide';
+
+/**
+ * This creates a 3D dialog.
+ *
+ * @param props
+ * @returns {JSX.Element}
+ * @constructor
+ */
+function PaperComponent(props) {
+  return (
+    <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
+      <Paper {...props} />
+    </Draggable>
+  );
+}
+
+/**
+ * This creates an animated transition for the dialog that pops up
+ * @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{}> & React.RefAttributes<any>>}
+ */
+const Transition = React.forwardRef(function Transition(props, ref) {
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+/**
+ * This is a component that displays a floating dialog with the content passed
+ *
+ * @param title: string
+ * @param description: string
+ * @param openDialogImmediately: boolean
+ * @param dialogObject: {JSX.Element}
+ * @returns {JSX.Element}
+ * @constructor
+ */
+export default function BaseFloatingDialog({ title, description, openDialogImmediately, dialogObject} ) {
+
+  // define the dialog open/close session state
+  const [open, setOpen] = React.useState(openDialogImmediately);
+
+  /**
+   * the close dialog handler
+   */
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  /**
+   * configure and render the floating dialog
+   */
+  return (
+    <Fragment>
+      <CssBaseline />
+      <Dialog
+        aria-labelledby="draggable-dialog-title"
+        open={open}
+        onClose={handleClose}
+        PaperComponent={PaperComponent}
+        TransitionComponent={Transition}
+        disableEnforceFocus
+        style={{ pointerEvents: 'none'}}
+        PaperProps={{ style: { pointerEvents: 'auto'} }}
+        sx={{ '.MuiBackdrop-root': { backgroundColor: 'transparent' }}}
+      >
+        <DialogTitle sx={{cursor: 'move', backgroundColor: 'lightgray', textAlign: 'center'}} id="draggable-dialog-title"> { title } </DialogTitle>
+
+        <DialogContent sx={{backgroundColor: 'lightblue'}}><DialogContentText> { description } </DialogContentText></DialogContent>
+
+        <DialogContent sx={{backgroundColor: 'lightgreen'}}>{ dialogObject }</DialogContent>
+
+        <DialogActions sx={{backgroundColor: 'lightgray'}}><Button autoFocus onClick={handleClose}> Close </Button></DialogActions>
+      </Dialog>
+    </Fragment>
+  );
+};
+
+// define the properties of this component
+BaseFloatingDialog.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  openDialogImmediately: PropTypes.bool,
+  dialogObject: PropTypes.any
+};