scm-ui: new repository layout

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

@@ -0,0 +1,69 @@
+// @flow
+import * as React from "react";
+import ReactDOM from "react-dom";
+import Modal from "./Modal";
+
+type Button = {
+  label: string,
+  onClick: () => void | null
+};
+
+type Props = {
+  title: string,
+  message: string,
+  buttons: Button[]
+};
+
+class ConfirmAlert extends React.Component<Props> {
+  handleClickButton = (button: Button) => {
+    if (button.onClick) {
+      button.onClick();
+    }
+    this.close();
+  };
+
+  close = () => {
+    ReactDOM.unmountComponentAtNode(document.getElementById("modalRoot"));
+  };
+
+  render() {
+    const { title, message, buttons } = this.props;
+
+    const body = <>{message}</>;
+
+    const footer = (
+      <div className="field is-grouped">
+        {buttons.map((button, i) => (
+          <p className="control">
+            <a
+              className="button is-info"
+              key={i}
+              onClick={() => this.handleClickButton(button)}
+            >
+              {button.label}
+            </a>
+          </p>
+        ))}
+      </div>
+    );
+
+    return (
+      <Modal
+        title={title}
+        closeFunction={() => this.close()}
+        body={body}
+        active={true}
+        footer={footer}
+      />
+    );
+  }
+}
+
+export function confirmAlert(properties: Props) {
+  const root = document.getElementById("modalRoot");
+  if (root) {
+    ReactDOM.render(<ConfirmAlert {...properties} />, root);
+  }
+}
+
+export default ConfirmAlert;

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

@@ -0,0 +1,63 @@
+// @flow
+import * as React from "react";
+import classNames from "classnames";
+
+type Props = {
+  title: string,
+  closeFunction: () => void,
+  body: any,
+  footer?: any,
+  active: boolean,
+  className?: string,
+  headColor: string
+};
+
+class Modal extends React.Component<Props> {
+  static defaultProps = {
+    headColor: "light"
+  };
+
+  render() {
+    const {
+      title,
+      closeFunction,
+      body,
+      footer,
+      active,
+      className,
+      headColor
+    } = this.props;
+
+    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>
+    );
+  }
+}
+
+export default Modal;

scm-ui/ui-components/src/modals/index.js

@@ -0,0 +1,5 @@
+// @create-index
+
+export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert.js";
+export { default as Modal } from "./Modal.js";
+