From d0d0103bb52cbc032a3b3ea2a2ff5edbf67b0d19 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 17 Sep 2018 09:56:59 -0700
Subject: Add Modal component

---
 ui/app/components/modal/modal.component.js | 78 ++++++++++++++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 ui/app/components/modal/modal.component.js

(limited to 'ui/app/components/modal/modal.component.js')

diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
new file mode 100644
index 000000000..81bdd0010
--- /dev/null
+++ b/ui/app/components/modal/modal.component.js
@@ -0,0 +1,78 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../button'
+
+export default class Modal extends PureComponent {
+  static propTypes = {
+    children: PropTypes.node,
+    // Header text
+    headerText: PropTypes.string,
+    // Submit button (right button)
+    onSubmit: PropTypes.func,
+    submitType: PropTypes.string,
+    submitText: PropTypes.string,
+    // Cancel button (left button)
+    onCancel: PropTypes.func,
+    cancelType: PropTypes.string,
+    cancelText: PropTypes.string,
+  }
+
+  static defaultProps = {
+    submitType: 'primary',
+    cancelType: 'default',
+  }
+
+  render () {
+    const {
+      children,
+      headerText,
+      onSubmit,
+      submitType,
+      submitText,
+      onCancel,
+      cancelType,
+      cancelText,
+    } = this.props
+
+    return (
+      <div className="modal-container">
+        {
+          headerText && (
+            <div className="modal-container__header">
+              <div className="modal-container__header-text">
+                { headerText }
+              </div>
+              <div
+                className="modal-container__header-close"
+                onClick={() => onCancel()}
+              />
+            </div>
+          )
+        }
+        <div className="modal-container__content">
+          { children }
+        </div>
+        <div className="modal-container__footer">
+          {
+            onCancel && (
+              <Button
+                type={cancelType}
+                onClick={onCancel}
+                className="modal-container__footer-button"
+              >
+                { cancelText }
+              </Button>
+            )
+          }
+          <Button
+            type={submitType}
+            onClick={onSubmit}
+            className="modal-container__footer-button"
+          >
+            { submitText }
+          </Button>
+        </div>
+      </div>
+    )
+  }
+}
-- 
cgit 


From 95e1eff4ca3d784d6fcba21035a535f8f3398cdc Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Mon, 17 Sep 2018 18:32:35 -0700
Subject: Add TransactionDetails modal

---
 ui/app/components/modal/modal.component.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

(limited to 'ui/app/components/modal/modal.component.js')

diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
index 81bdd0010..f9d8c5867 100644
--- a/ui/app/components/modal/modal.component.js
+++ b/ui/app/components/modal/modal.component.js
@@ -22,6 +22,22 @@ export default class Modal extends PureComponent {
     cancelType: 'default',
   }
 
+  handleClose = () => {
+    const { onCancel, onSubmit } = this.props
+
+    /**
+     * The close button should be used to dismiss the modal, without performing any actions, which
+     * is typically what props.onCancel does. However, if props.onCancel is undefined, that should
+     * mean that the modal is a simple notification modal and props.onSubmit can be used to dismiss
+     * it.
+     */
+    if (onCancel && typeof onCancel === 'function') {
+      onCancel()
+    } else {
+      onSubmit()
+    }
+  }
+
   render () {
     const {
       children,
@@ -44,7 +60,7 @@ export default class Modal extends PureComponent {
               </div>
               <div
                 className="modal-container__header-close"
-                onClick={() => onCancel()}
+                onClick={this.handleClose}
               />
             </div>
           )
-- 
cgit 


From 431beb943675f2e9b7b5e5ce9c7f55d45f10905f Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Thu, 20 Sep 2018 19:35:45 -0700
Subject: Fix multiplyCurrencies. Add onClose prop for Modal component. Remove
 hideModal from modal components.

---
 ui/app/components/modal/modal.component.js | 20 +++-----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

(limited to 'ui/app/components/modal/modal.component.js')

diff --git a/ui/app/components/modal/modal.component.js b/ui/app/components/modal/modal.component.js
index f9d8c5867..2a75b559b 100644
--- a/ui/app/components/modal/modal.component.js
+++ b/ui/app/components/modal/modal.component.js
@@ -7,6 +7,7 @@ export default class Modal extends PureComponent {
     children: PropTypes.node,
     // Header text
     headerText: PropTypes.string,
+    onClose: PropTypes.func,
     // Submit button (right button)
     onSubmit: PropTypes.func,
     submitType: PropTypes.string,
@@ -22,26 +23,11 @@ export default class Modal extends PureComponent {
     cancelType: 'default',
   }
 
-  handleClose = () => {
-    const { onCancel, onSubmit } = this.props
-
-    /**
-     * The close button should be used to dismiss the modal, without performing any actions, which
-     * is typically what props.onCancel does. However, if props.onCancel is undefined, that should
-     * mean that the modal is a simple notification modal and props.onSubmit can be used to dismiss
-     * it.
-     */
-    if (onCancel && typeof onCancel === 'function') {
-      onCancel()
-    } else {
-      onSubmit()
-    }
-  }
-
   render () {
     const {
       children,
       headerText,
+      onClose,
       onSubmit,
       submitType,
       submitText,
@@ -60,7 +46,7 @@ export default class Modal extends PureComponent {
               </div>
               <div
                 className="modal-container__header-close"
-                onClick={this.handleClose}
+                onClick={onClose}
               />
             </div>
           )
-- 
cgit