Add Modal component

dist/index.html

@@ -33,6 +33,7 @@
       <script src="./js/component/form.js?i=0"></script>
       <script src="./js/component/link.js?i=0"></script>
       <script src="./js/component/menu.js?i=0"></script>
+      <script src="./js/component/modal.js?i=0"></script>
       <script src="./js/component/header.js?i=0"></script>
       <script src="./js/component/drawer.js?i=0"></script>
       <script src="./js/component/splash.js?i=0"></script>

js/component/modal.js

@@ -0,0 +1,57 @@
+var Modal = React.createClass({
+  propTypes: {
+    type: React.PropTypes.oneOf(['alert', 'confirm', 'custom']),
+    onConfirmed: React.PropTypes.func,
+    onAborted: React.PropTypes.func,
+    confirmButtonLabel: React.PropTypes.string,
+    abortButtonLabel: React.PropTypes.string,
+  },
+  getDefaultProps: function() {
+    return {
+      type: 'alert',
+      confirmButtonLabel: 'OK',
+      abortButtonLabel: 'Cancel',
+    };
+  },
+  render: function() {
+    var props = Object.assign({}, this.props);
+
+    if (typeof props.className == 'undefined') {
+      props.className = 'modal';
+    } else {
+      props.className += ' modal';
+    }
+
+    if (typeof props.overlayClassName == 'undefined') {
+      props.overlayClassName = 'modal-overlay';
+    } else {
+      props.overlayClassName += ' modal-overlay';
+    }
+
+    props.onCloseRequested = props.onAborted || props.onConfirmed;
+
+    if (this.props.type == 'alert') {
+      var buttons = (
+        <div className="modal__buttons">
+          <Link button="primary" label={props.confirmButtonLabel} className="modal__button" onClick={props.onConfirmed} />
+        </div>
+      );
+    } else if (this.props.type == 'confirm') {
+      var buttons = (
+        <div className="modal__buttons">
+          <Link button="alt" label={props.abortButtonLabel} className="modal__button" onClick={props.onAborted} />
+          <Link button="primary" label={props.confirmButtonLabel} className="modal__button" onClick={props.onConfirmed} />
+        </div>
+      );
+    } else {
+      var buttons = null;
+    }
+
+    return (
+      <ReactModal {...props}>
+         {this.props.children}
+         {buttons}
+      </ReactModal>
+    );
+  }
+});

scss/_gui.scss

@@ -225,3 +225,43 @@ input[type="text"], input[type="search"]
     margin-top: $spacing-vertical;
   }
 }
+
+.modal-overlay {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  background-color: rgba(255, 255, 255, 0.74902);
+  z-index: 9999;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid rgb(204, 204, 204);
+  background: rgb(255, 255, 255);
+  overflow: auto;
+  border-radius: 4px;
+  outline: none;
+  padding: 40px;
+  max-width: 250px;
+}
+
+.modal__buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 15px;
+}
+
+.modal__button {
+  margin: 0px 6px;
+}