Merge pull request #51 from prymitive/main-modal-portal

refactor(ui): render main modal window under document.body via a portal

ui/src/Components/MainModal/MainModalContent.js

@@ -0,0 +1,96 @@
+import React, { Component } from "react";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+import { observer } from "mobx-react";
+import { observable, action } from "mobx";
+
+import { AlertStore } from "Stores/AlertStore";
+import { Settings } from "Stores/Settings";
+import { Configuration } from "./Configuration";
+import { Help } from "./Help";
+
+const Tab = ({ title, active, onClick }) => (
+  <a
+    className={`nav-item nav-link cursor-pointer ${
+      active ? "active" : "text-primary"
+    }`}
+    onClick={onClick}
+  >
+    {title}
+  </a>
+);
+Tab.propTypes = {
+  title: PropTypes.string.isRequired,
+  active: PropTypes.bool,
+  onClick: PropTypes.func.isRequired
+};
+
+const TabNames = Object.freeze({
+  Configuration: "configuration",
+  Help: "help"
+});
+
+const MainModalContent = observer(
+  class MainModalContent extends Component {
+    static propTypes = {
+      alertStore: PropTypes.instanceOf(AlertStore).isRequired,
+      settingsStore: PropTypes.instanceOf(Settings).isRequired,
+      onHide: PropTypes.func.isRequired
+    };
+
+    tab = observable(
+      {
+        current: TabNames.Configuration,
+        setTab(newTab) {
+          this.current = newTab;
+        }
+      },
+      { setTab: action.bound }
+    );
+
+    render() {
+      const { alertStore, settingsStore, onHide } = this.props;
+
+      return ReactDOM.createPortal(
+        <div className="modal d-block bg-primary-transparent-80" role="dialog">
+          <div className="modal-dialog modal-lg" role="document">
+            <div className="modal-content">
+              <div className="modal-header py-2">
+                <nav className="nav nav-pills nav-justified w-100">
+                  <Tab
+                    title="Configuration"
+                    active={this.tab.current === TabNames.Configuration}
+                    onClick={() => this.tab.setTab(TabNames.Configuration)}
+                  />
+                  <Tab
+                    title="Help"
+                    active={this.tab.current === TabNames.Help}
+                    onClick={() => this.tab.setTab(TabNames.Help)}
+                  />
+                  <button type="button" className="close" onClick={onHide}>
+                    <span>&times;</span>
+                  </button>
+                </nav>
+              </div>
+              <div className="modal-body">
+                {this.tab.current === TabNames.Help ? <Help /> : null}
+                {this.tab.current === TabNames.Configuration ? (
+                  <Configuration settingsStore={settingsStore} />
+                ) : null}
+              </div>
+              <div className="modal-footer">
+                <span className="text-muted">
+                  Version: {alertStore.info.version}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>,
+        document.body
+      );
+    }
+  }
+);
+
+export { MainModalContent };

ui/src/Components/MainModal/index.js

@@ -9,29 +9,7 @@ import { faCog } from "@fortawesome/free-solid-svg-icons/faCog";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import { Configuration } from "./Configuration";
-import { Help } from "./Help";
-
-const Tab = ({ title, active, onClick }) => (
-  <a
-    className={`nav-item nav-link cursor-pointer ${
-      active ? "active" : "text-primary"
-    }`}
-    onClick={onClick}
-  >
-    {title}
-  </a>
-);
-Tab.propTypes = {
-  title: PropTypes.string.isRequired,
-  active: PropTypes.bool,
-  onClick: PropTypes.func.isRequired
-};
-
-const TabNames = Object.freeze({
-  Configuration: "configuration",
-  Help: "help"
-});
+import { MainModalContent } from "./MainModalContent";
 
 const MainModal = observer(
   class MainModal extends Component {
@@ -53,16 +31,6 @@ const MainModal = observer(
       { toggle: action.bound, hide: action.bound }
     );
 
-    tab = observable(
-      {
-        current: TabNames.Configuration,
-        setTab(newTab) {
-          this.current = newTab;
-        }
-      },
-      { setTab: action.bound }
-    );
-
     componentDidUpdate() {
       document.body.classList.toggle("modal-open", this.toggle.show);
     }
@@ -82,47 +50,11 @@ const MainModal = observer(
             </a>
           </li>
           {this.toggle.show ? (
-            <div
-              className="modal d-block bg-primary-transparent-80"
-              role="dialog"
-            >
-              <div className="modal-dialog modal-lg" role="document">
-                <div className="modal-content">
-                  <div className="modal-header py-2">
-                    <nav className="nav nav-pills nav-justified w-100">
-                      <Tab
-                        title="Configuration"
-                        active={this.tab.current === TabNames.Configuration}
-                        onClick={() => this.tab.setTab(TabNames.Configuration)}
-                      />
-                      <Tab
-                        title="Help"
-                        active={this.tab.current === TabNames.Help}
-                        onClick={() => this.tab.setTab(TabNames.Help)}
-                      />
-                      <button
-                        type="button"
-                        className="close"
-                        onClick={this.toggle.hide}
-                      >
-                        <span>&times;</span>
-                      </button>
-                    </nav>
-                  </div>
-                  <div className="modal-body">
-                    {this.tab.current === TabNames.Help ? <Help /> : null}
-                    {this.tab.current === TabNames.Configuration ? (
-                      <Configuration settingsStore={settingsStore} />
-                    ) : null}
-                  </div>
-                  <div className="modal-footer">
-                    <span className="text-muted">
-                      Version: {alertStore.info.version}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <MainModalContent
+              alertStore={alertStore}
+              settingsStore={settingsStore}
+              onHide={this.toggle.hide}
+            />
           ) : null}
         </React.Fragment>
       );