refactor modal and confirm alert

scm-ui/ui-components/src/modals/ConfirmAlert.stories.tsx

@@ -25,7 +25,7 @@
 import { storiesOf } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";
 import * as React from "react";
-import ConfirmAlert from "./ConfirmAlert";
+import ConfirmAlert, { confirmAlert } from "./ConfirmAlert";
 
 const body =
   "Mind-paralyzing change needed improbability vortex machine sorts sought same theory upending job just allows\n " +
@@ -40,11 +40,21 @@ const buttons = [
     onClick: () => null
   },
   {
-    label: "Submit",
+    label: "Submit"
-    onClick: () => {}
   }
 ];
 
 storiesOf("Modal|ConfirmAlert", module)
   .addDecorator(story => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />);
+  .add("Default", () => <ConfirmAlert message={body} title={"Are you sure about that?"} buttons={buttons} />)
+  .add("WithButton", () => {
+    const buttonClick = () => {
+      confirmAlert({ message: body, title: "Are you sure about that?", buttons });
+    };
+    return (
+      <>
+        <button onClick={buttonClick}>Open ConfirmAlert</button>
+        <div id="modalRoot" />
+      </>
+    );
+  });

scm-ui/ui-components/src/modals/ConfirmAlert.tsx

@@ -22,6 +22,7 @@
  * SOFTWARE.
  */
 import * as React from "react";
+import { FC, useState } from "react";
 import ReactDOM from "react-dom";
 import Modal from "./Modal";
 import classNames from "classnames";
@@ -29,59 +30,71 @@ import classNames from "classnames";
 type Button = {
   className?: string;
   label: string;
-  onClick: () => void | null;
+  onClick?: () => void | null;
 };
 
 type Props = {
   title: string;
   message: string;
   buttons: Button[];
+  close?: () => void;
 };
 
-class ConfirmAlert extends React.Component<Props> {
+export const ConfirmAlert: FC<Props> = ({ title, message, buttons, close }) => {
-  handleClickButton = (button: Button) => {
+  const [showModal, setShowModal] = useState(true);
+
+  const onClose = () => {
+    if (typeof close === "function") {
+      close();
+    } else {
+      setShowModal(false);
+    }
+  };
+
+  const handleClickButton = (button: Button) => {
     if (button.onClick) {
       button.onClick();
     }
-    this.close();
+    onClose();
   };
 
-  close = () => {
+  const body = <>{message}</>;
-    const container = document.getElementById("modalRoot");
-    if (container) {
-      ReactDOM.unmountComponentAtNode(container);
-    }
-  };
 
-  render() {
+  const footer = (
-    const { title, message, buttons } = this.props;
+    <div className="field is-grouped">
+      {buttons.map((button, i) => (
+        <p className="control">
+          <a
+            className={classNames("button", "is-info", button.className)}
+            key={i}
+            onClick={() => handleClickButton(button)}
+          >
+            {button.label}
+          </a>
+        </p>
+      ))}
+    </div>
+  );
 
-    const body = <>{message}</>;
+  return (
-
+    (showModal && <Modal title={title} closeFunction={onClose} body={body} active={true} footer={footer} />) || null
-    const footer = (
+  );
-      <div className="field is-grouped">
+};
-        {buttons.map((button, i) => (
-          <p className="control">
-            <a
-              className={classNames("button", "is-info", button.className)}
-              key={i}
-              onClick={() => this.handleClickButton(button)}
-            >
-              {button.label}
-            </a>
-          </p>
-        ))}
-      </div>
-    );
-
-    return <Modal title={title} closeFunction={() => this.close()} body={body} active={true} footer={footer} />;
-  }
-}
 
+/**
+ * @deprecated Use the {@link ConfirmAlert} component directly instead.
+ */
 export function confirmAlert(properties: Props) {
   const root = document.getElementById("modalRoot");
   if (root) {
-    ReactDOM.render(<ConfirmAlert {...properties} />, root);
+    const close = () => {
+      const container = document.getElementById("modalRoot");
+      if (container) {
+        ReactDOM.unmountComponentAtNode(container);
+      }
+    };
+    const props = { ...properties, close };
+    ReactDOM.render(<ConfirmAlert {...props} />, root);
   }
 }
 

scm-ui/ui-components/src/modals/Modal.tsx

@@ -22,7 +22,10 @@
  * SOFTWARE.
  */
 import * as React from "react";
+import {FC} from "react";
 import classNames from "classnames";
+import usePortalRootElement from "../usePortalRootElement";
+import ReactDOM from "react-dom";
 
 type Props = {
   title: string;
@@ -31,38 +34,38 @@ type Props = {
   footer?: any;
   active: boolean;
   className?: string;
-  headColor: string;
+  headColor?: string;
 };
 
-class Modal extends React.Component<Props> {
+export const Modal: FC<Props> = ({ title, closeFunction, body, footer, active, className, headColor = "light" }) => {
-  static defaultProps = {
+  const portalRootElement = usePortalRootElement("modalsRoot");
-    headColor: "light"
-  };
 
-  render() {
+  if (!portalRootElement) {
-    const { title, closeFunction, body, footer, active, className, headColor } = this.props;
+    return null;
-
-    const isActive = active ? "is-active" : null;
-
-    let showFooter = null;
-    if (footer) {
-      showFooter = <footer className="modal-card-foot">{footer}</footer>;
-    }
-
-    return (
-      <div className={classNames("modal", className, isActive)}>
-        <div className="modal-background" />
-        <div className="modal-card">
-          <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
-            <p className="modal-card-title is-marginless">{title}</p>
-            <button className="delete" aria-label="close" onClick={closeFunction} />
-          </header>
-          <section className="modal-card-body">{body}</section>
-          {showFooter}
-        </div>
-      </div>
-    );
   }
-}
+
+  const isActive = active ? "is-active" : null;
+
+  let showFooter = null;
+  if (footer) {
+    showFooter = <footer className="modal-card-foot">{footer}</footer>;
+  }
+
+  const modalElement = (
+    <div className={classNames("modal", className, isActive)}>
+      <div className="modal-background" />
+      <div className="modal-card">
+        <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
+          <p className="modal-card-title is-marginless">{title}</p>
+          <button className="delete" aria-label="close" onClick={closeFunction} />
+        </header>
+        <section className="modal-card-body">{body}</section>
+        {showFooter}
+      </div>
+    </div>
+  );
+
+  return ReactDOM.createPortal(modalElement, portalRootElement);
+};
 
 export default Modal;