From 2b38f95383a2974d8b3f18062dd894133497bd8d Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:06:25 -0400 Subject: [PATCH 1/7] updating the mui/material version, adding react-draggable and proptypes dependancies --- package-lock.json | 25 ++++++++++++++++++++++++- package.json | 4 +++- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index ae68edf9..beb1795b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,15 +11,17 @@ "@fontsource/inter": "^5.0.16", "@mui/icons-material": "^5.15.11", "@mui/joy": "^5.0.0-beta.32", - "@mui/material": "^5.15.11", + "@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", @@ -15670,6 +15672,27 @@ "react": "^18.3.1" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, + "node_modules/react-draggable/node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", diff --git a/package.json b/package.json index ec59f33c..7fb830b7 100644 --- a/package.json +++ b/package.json @@ -49,15 +49,17 @@ "@fontsource/inter": "^5.0.16", "@mui/icons-material": "^5.15.11", "@mui/joy": "^5.0.0-beta.32", - "@mui/material": "^5.15.11", + "@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", From 241bb8b6c0b0260e2d01ad510c0697bdb1d9f958 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:10:05 -0400 Subject: [PATCH 2/7] adding a floating dialog and using the App component to test it. --- src/app.js | 7 +++- src/utils/dialog-utils.js | 87 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 src/utils/dialog-utils.js diff --git a/src/app.js b/src/app.js index 798abe11..5496ff3e 100644 --- a/src/app.js +++ b/src/app.js @@ -1,10 +1,13 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; +import FloatingDialog from '@utils/dialog-utils'; +// import SubObj from "@utils/subObj"; export const App = () => { return ( - - + + + ); }; diff --git a/src/utils/dialog-utils.js b/src/utils/dialog-utils.js new file mode 100644 index 00000000..021bba9e --- /dev/null +++ b/src/utils/dialog-utils.js @@ -0,0 +1,87 @@ +import React, { Fragment } from 'react'; +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; +import Paper from '@mui/material/Paper'; +import Draggable from 'react-draggable'; +import PropTypes from 'prop-types'; +import Slide from '@mui/material/Slide'; + +/** + * This creates a 3D dialog. + * + * @param props + * @returns {JSX.Element} + * @constructor + */ +function PaperComponent(props) { + return ( + + + + ); +} + +/** + * This creates an animated transition for the dialog that pops up + * @type {React.ForwardRefExoticComponent & React.RefAttributes>} + */ +const Transition = React.forwardRef(function Transition(props, ref) { + return ; +}); + +/** + * This is the floating component that displays a floating dialog + * + * @param title + * @param dialogText + * @param openDialog + * @returns {JSX.Element} + * @constructor + */ +export default function FloatingDialog({ title, dialogText, openDialog}) { //, dialogObject + const [open, setOpen] = React.useState(openDialog); + + // closes the dialog + const handleClose = () => { + setOpen(false); + }; + + // return the component that is rendered + return ( + + + + { title } + + + + { dialogText } + + + + + + + + ); +}; + +// define the properties of this component +FloatingDialog.propTypes = { + title: PropTypes.string, + dialogText: PropTypes.string, + openDialog: PropTypes.bool + // dialogObject: PropTypes.any +}; From cb59c6b0ed10a2aadf0341df09f4ab552a13e717 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 14:18:29 -0400 Subject: [PATCH 3/7] making the component name/params more understandable. --- src/app.js | 4 ++-- src/utils/dialog-utils.js | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app.js b/src/app.js index 5496ff3e..ce89b211 100644 --- a/src/app.js +++ b/src/app.js @@ -1,12 +1,12 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; -import FloatingDialog from '@utils/dialog-utils'; +import BaseFloatingDialog from "@utils/dialog-utils"; // import SubObj from "@utils/subObj"; export const App = () => { return ( - + ); diff --git a/src/utils/dialog-utils.js b/src/utils/dialog-utils.js index 021bba9e..bbdba192 100644 --- a/src/utils/dialog-utils.js +++ b/src/utils/dialog-utils.js @@ -42,8 +42,8 @@ const Transition = React.forwardRef(function Transition(props, ref) { * @returns {JSX.Element} * @constructor */ -export default function FloatingDialog({ title, dialogText, openDialog}) { //, dialogObject - const [open, setOpen] = React.useState(openDialog); +export default function BaseFloatingDialog({ title, dialogText, openDialogImmediately} ) { //, dialogObject + const [open, setOpen] = React.useState(openDialogImmediately); // closes the dialog const handleClose = () => { @@ -79,9 +79,9 @@ export default function FloatingDialog({ title, dialogText, openDialog}) { //, d }; // define the properties of this component -FloatingDialog.propTypes = { +BaseFloatingDialog.propTypes = { title: PropTypes.string, dialogText: PropTypes.string, - openDialog: PropTypes.bool + openDialogImmediately: PropTypes.bool // dialogObject: PropTypes.any }; From f0da3b435dec13e25d320f91e2ab44d699fe9121 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Tue, 30 Apr 2024 17:43:51 -0400 Subject: [PATCH 4/7] upgrading the mui versions --- package-lock.json | 4 ++-- package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index beb1795b..eebaf534 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,8 +9,8 @@ "@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/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", diff --git a/package.json b/package.json index 7fb830b7..5abcda2f 100644 --- a/package.json +++ b/package.json @@ -47,8 +47,8 @@ "@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/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", From 3f0f758ceddaba4f4547e88abcfb5e25536559b8 Mon Sep 17 00:00:00 2001 From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com> Date: Wed, 1 May 2024 08:52:02 -0400 Subject: [PATCH 5/7] working version of the floating dialog component. --- src/app.js | 21 +++++++++++++++++---- src/utils/dialog-utils.js | 19 ++++++++++++++----- 2 files changed, 31 insertions(+), 9 deletions(-) diff --git a/src/app.js b/src/app.js index ce89b211..190d398b 100644 --- a/src/app.js +++ b/src/app.js @@ -1,13 +1,26 @@ import React, { Fragment } from 'react'; import { Map } from '@components/map'; import BaseFloatingDialog from "@utils/dialog-utils"; -// import SubObj from "@utils/subObj"; export const App = () => { - return ( + const subObj = () => { + return ( + +
+
+ This is a dialog sub-component. +
+
+ + ); + }; + + const floaterArgs = {title: "The dialog title.", description: "The dialog description.", openDialogImmediately:true, "dialogObject": {...subObj()}}; + + return ( - + - ); + ); }; diff --git a/src/utils/dialog-utils.js b/src/utils/dialog-utils.js index bbdba192..9e71cfdd 100644 --- a/src/utils/dialog-utils.js +++ b/src/utils/dialog-utils.js @@ -42,7 +42,7 @@ const Transition = React.forwardRef(function Transition(props, ref) { * @returns {JSX.Element} * @constructor */ -export default function BaseFloatingDialog({ title, dialogText, openDialogImmediately} ) { //, dialogObject +export default function BaseFloatingDialog({ title, description, openDialogImmediately, dialogObject} ) { const [open, setOpen] = React.useState(openDialogImmediately); // closes the dialog @@ -59,14 +59,23 @@ export default function BaseFloatingDialog({ title, dialogText, openDialogImmedi PaperComponent={PaperComponent} TransitionComponent={Transition} aria-labelledby="draggable-dialog-title" + disableEnforceFocus + style={{ pointerEvents: 'none', opacity: '100%' }} + PaperProps={{ style: { pointerEvents: 'auto'} }} + sx={{ + '.MuiBackdrop-root': { + backgroundColor: 'transparent', + } + }} > { title } - { dialogText } + { description } + { dialogObject } - + { title } + + { description } + + { dialogObject } + + );