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() {
-
+