restructure scm-ui and use ui-components and ui-types

scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.css

@@ -0,0 +1,102 @@
+/*modified from https://github.com/GA-MO/react-confirm-alert*/
+.react-confirm-alert-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background: rgba(255, 255, 255, 0.9);
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
+  justify-content: center;
+  -ms-align-items: center;
+  align-items: center;
+  opacity: 0;
+  -webkit-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
+  -moz-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
+  -o-animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
+  animation: react-confirm-alert-fadeIn 0.5s 0.2s forwards;
+}
+
+.react-confirm-alert-body {
+  font-family: Arial, Helvetica, sans-serif;
+  width: 400px;
+  padding: 30px;
+  text-align: left;
+  background: #fff;
+  border-radius: 10px;
+  box-shadow: 0 20px 75px rgba(0, 0, 0, 0.13);
+  color: #666;
+}
+
+.react-confirm-alert-body > h1 {
+  margin-top: 0;
+}
+
+.react-confirm-alert-body > h3 {
+  margin: 0;
+  font-size: 16px;
+}
+
+.react-confirm-alert-button-group {
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 20px;
+}
+
+.react-confirm-alert-button-group > button {
+  outline: none;
+  background: #333;
+  border: none;
+  display: inline-block;
+  padding: 6px 18px;
+  color: #eee;
+  margin-right: 10px;
+  border-radius: 5px;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+@-webkit-keyframes react-confirm-alert-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-moz-keyframes react-confirm-alert-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@-o-keyframes react-confirm-alert-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes react-confirm-alert-fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

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

@@ -0,0 +1,82 @@
+// @flow
+//modified from https://github.com/GA-MO/react-confirm-alert
+
+import * as React from "react";
+import { render, unmountComponentAtNode } from "react-dom";
+import "./ConfirmAlert.css";
+
+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 = () => {
+    removeElementReconfirm();
+  };
+
+  render() {
+    const { title, message, buttons } = this.props;
+
+    return (
+      <div className="react-confirm-alert-overlay">
+        <div className="react-confirm-alert">
+          {
+            <div className="react-confirm-alert-body">
+              {title && <h1>{title}</h1>}
+              {message}
+              <div className="react-confirm-alert-button-group">
+                {buttons.map((button, i) => (
+                  <button
+                    key={i}
+                    onClick={() => this.handleClickButton(button)}
+                  >
+                    {button.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          }
+        </div>
+      </div>
+    );
+  }
+}
+
+function createElementReconfirm(properties: Props) {
+  const divTarget = document.createElement("div");
+  divTarget.id = "react-confirm-alert";
+  if (document.body) {
+    document.body.appendChild(divTarget);
+    render(<ConfirmAlert {...properties} />, divTarget);
+  }
+}
+
+function removeElementReconfirm() {
+  const target = document.getElementById("react-confirm-alert");
+  if (target) {
+    unmountComponentAtNode(target);
+    if (target.parentNode) {
+      target.parentNode.removeChild(target);
+    }
+  }
+}
+
+export function confirmAlert(properties: Props) {
+  createElementReconfirm(properties);
+}
+
+export default ConfirmAlert;

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

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