diff --git a/package-lock.json b/package-lock.json index 7e58d36..63d43a4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6363,6 +6363,11 @@ "strip-eof": "^1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -12824,6 +12829,22 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, + "react-modal": { + "version": "3.14.3", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.14.3.tgz", + "integrity": "sha512-+C2KODVKyu20zHXPJxfOOcf571L1u/EpFlH+oS/3YDn8rgVE51QZuxuuIwabJ8ZFnOEHaD+r6XNjqwtxZnXO0g==", + "requires": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + } + }, "react-refresh": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", @@ -15474,6 +15495,14 @@ "makeerror": "1.0.x" } }, + "warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "requires": { + "loose-envify": "^1.0.0" + } + }, "watchpack": { "version": "1.7.5", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", diff --git a/package.json b/package.json index db2fa4c..729676a 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "react": "^17.0.2", "react-bootstrap-icons": "^1.5.0", "react-dom": "^16.14.0", + "react-modal": "^3.14.3", "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-router-hash-link": "^2.4.3", diff --git a/src/App.js b/src/App.js index 45b26fa..92aa2e0 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import './reset.css'; // Generic reset import './style.css'; // The new new import React, {useState,useEffect,useRef,useReducer} from 'react'; -import ReactWindow from 'reactjs-windows' +import Modal from 'react-modal' import 'reactjs-windows/dist/index.css' import {XSquareFill} from 'react-bootstrap-icons' @@ -183,9 +183,6 @@ function ClassSelector(p){ return })} - /*return - This is a test window. - */ } function EditableClass(p){ @@ -368,9 +365,9 @@ function ListRow(p) { } function PopupWindow(p) { - return - This is a test window. - + return {p.setModalOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true}> + This is a test modal. + } @@ -633,6 +630,8 @@ function App() { const [midRange,setMidRange] = useState(126) const [critical,setCritical] = useState(152) const [effective,setEffective] = useState(127) + + const [modalOpen,setModalOpen] = useState(true) return ( <> @@ -663,7 +662,7 @@ function App() { - +