Installed reactjs-popup

Alvearie · Jul 26, 2021 · 452a430 · 452a430
1 parent 104640a
commit 452a430
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 33 deletions.
diff --git a/build/index.html b/build/index.html
@@ -4,16 +4,16 @@
         <meta charset="UTF-8"/>
         <title>SMART Patient Browser</title>
         <meta name="viewport" content="width=device-width, initial-scale=1"/>
-        <link rel="shortcut icon" href="img/icon.png" type="image/png?_=7ee15b3cef63d503725d" />
+        <link rel="shortcut icon" href="img/icon.png" type="image/png?_=5a21bc45447364edba43" />
         <link rel="stylesheet" href="vendor/font-awesome-4.7.0/css/font-awesome.min.css">
         <link rel="stylesheet" href="vendor/bootstrap-3.3.7-dist/css/bootstrap.min.css">
     </head>
     <body>
         <div id="overlay"></div>
         <div id="main"></div>
         <script src="vendor/babel-polyfill.min.js"></script>
-        <script src="js/commons.js?_=7ee15b3cef63d503725d"></script>
-        <script src="js/index.js?_=7ee15b3cef63d503725d"></script>
+        <script src="js/commons.js?_=5a21bc45447364edba43"></script>
+        <script src="js/index.js?_=5a21bc45447364edba43"></script>
         <script src="vendor/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
         <script src="vendor/jdenticon-1.4.0.min.js"></script>
     </body>

diff --git a/build/js/commons.js b/build/js/commons.js
diff --git a/build/js/commons.js.5a21bc45447364edba43.map b/build/js/commons.js.5a21bc45447364edba43.map
diff --git a/build/js/index.js b/build/js/index.js
diff --git a/build/js/index.js.5a21bc45447364edba43.map b/build/js/index.js.5a21bc45447364edba43.map
diff --git a/build/js/report.html b/build/js/report.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "react-router": "^4.0.0",
     "react-router-dom": "^4.0.0",
     "react-with-addons": "0.0.1",
+    "reactjs-popup": "^2.0.5",
     "redux": "^3.6.0",
     "redux-actions": "^2.0.1",
     "redux-thunk": "^2.2.0",

diff --git a/src/components/Fhir/ResourceList.js b/src/components/Fhir/ResourceList.js
@@ -12,6 +12,7 @@ import Period      from "./Period"
 import Date        from "./Date"
 import moment      from "moment"
 import InsightsPopup from "../InsightsPopup"
+import Popup       from "reactjs-popup"
 
 function renderCell(record, doHighlight, allOf, oneOf) {
 
@@ -123,7 +124,7 @@ export default class ResourceList extends React.Component
         super(props);
         this.state = {
             doHighlight: false,
-            showPopup: false
+            showPopup: null
         }
         this.toggleHighlight = this.toggleHighlight.bind(this);
         this.closePopup = this.closePopup.bind(this);
@@ -468,14 +469,9 @@ export default class ResourceList extends React.Component
                         return dB - dA;
                     }}
                 />
-                <p>Please can I get Something to display</p>
-                <div style={{display: 'none', position: 'fixed', zIndex: 1}}>
-                    <div style={{backgroundColor: 'white', position: 'absolute'}}>
-                        <p>I'm A Pop Up!!!</p>
-                    </div>
-                </div>
-                <InsightsPopup resource={this.state.showPopup} closeWindow={this.closePopup} />
-                {this.state.showPopup ? <InsightsPopup resource={this.state.showPopup} closeWindow={this.closePopup} /> : null}
+                <Popup open={this.state.showPopup != null} onClose={this.closePopup} modal>
+                    <InsightsPopup resource={this.state.showPopup} closeWindow={this.closePopup} />
+                </Popup>
             </div>
         )
     }

diff --git a/src/components/InsightsPopup/index.js b/src/components/InsightsPopup/index.js
@@ -23,10 +23,8 @@ export default class InsightsPopup extends React.Component
     {
         let rec = this.props.resource
         return (
-            <div style={{display: 'none', position: 'fixed', zIndex: '99'}}>
-                <div style={{backgroundColor: 'white', position: 'absolute'}}>
-                    <p>I'm A Pop Up!!!</p>
-                </div>
+            <div style={{backgroundColor: 'white', position: 'absolute'}}>
+                <p>I'm A Pop Up!!!</p>
             </div>
         )
     }