From 67d1410dc0cdc88f0a67ca75dddcdc2149b49556 Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Sat, 19 Oct 2019 16:01:00 +0200
Subject: [PATCH 1/2] feat(modal): add ability to press escape or click outside
 to close modal

---
 src/renderer/auth/components/Auth/Auth.js     |  8 +++--
 src/renderer/shared/components/Alert/Alert.js | 10 +++---
 .../shared/components/Confirm/Confirm.js      |  1 +
 src/renderer/shared/components/Modal/Modal.js | 33 +++++++++++++----
 .../shared/components/Modal/OnClickOutside.js | 36 +++++++++++++++++++
 .../NewWallet/NewWallet/NewWallet.js          |  1 +
 6 files changed, 76 insertions(+), 13 deletions(-)
 create mode 100644 src/renderer/shared/components/Modal/OnClickOutside.js

diff --git a/src/renderer/auth/components/Auth/Auth.js b/src/renderer/auth/components/Auth/Auth.js
index c402e62af..cbd385a53 100644
--- a/src/renderer/auth/components/Auth/Auth.js
+++ b/src/renderer/auth/components/Auth/Auth.js
@@ -34,14 +34,18 @@ export default class Auth extends React.PureComponent {
   };
 
   render() {
-    const { className, authenticated, onConfirm } = this.props;
+    const { className, authenticated, onConfirm, onCancel } = this.props;
 
     if (authenticated) {
       onConfirm();
     }
 
     // TODO use renderHeader & renderFooter instead of AuthPanel + add SidePanel option
-    return <Modal className={classNames(styles.auth, className)}>{this.renderComponent()}</Modal>;
+    return (
+      <Modal className={classNames(styles.auth, className)} handleClose={onCancel}>
+        {this.renderComponent()}
+      </Modal>
+    );
   }
 
   renderComponent = () => {
diff --git a/src/renderer/shared/components/Alert/Alert.js b/src/renderer/shared/components/Alert/Alert.js
index 7de5b49d0..d2b537c91 100644
--- a/src/renderer/shared/components/Alert/Alert.js
+++ b/src/renderer/shared/components/Alert/Alert.js
@@ -13,7 +13,8 @@ export default class Alert extends React.PureComponent {
     children: node,
     title: string,
     confirmLabel: string,
-    onConfirm: func
+    onConfirm: func,
+    onCancel: func
   };
 
   static defaultProps = {
@@ -21,7 +22,8 @@ export default class Alert extends React.PureComponent {
     children: null,
     title: null,
     confirmLabel: 'OK',
-    onConfirm: noop
+    onConfirm: noop,
+    onCancel: noop
   };
 
   componentDidMount() {
@@ -29,10 +31,10 @@ export default class Alert extends React.PureComponent {
   }
 
   render() {
-    const { className, confirmLabel, onConfirm, children } = this.props;
+    const { className, confirmLabel, onConfirm, children, onCancel } = this.props;
 
     return (
-      <Modal className={classNames(styles.alert, className)}>
+      <Modal className={classNames(styles.alert, className)} handleClose={onCancel}>
         {this.renderTitle()}
         <div className={styles.body}>{children}</div>
         <div className={styles.actions}>
diff --git a/src/renderer/shared/components/Confirm/Confirm.js b/src/renderer/shared/components/Confirm/Confirm.js
index b749cf14f..244045c77 100644
--- a/src/renderer/shared/components/Confirm/Confirm.js
+++ b/src/renderer/shared/components/Confirm/Confirm.js
@@ -47,6 +47,7 @@ export default class Confirm extends React.PureComponent {
         className={classNames(styles.confirm, className)}
         renderHeader={this.renderTitle}
         renderFooter={this.renderFooter}
+        handleClose={onCancel}
       >
         <div className={styles.content}>
           <div className={styles.body}>{children}</div>
diff --git a/src/renderer/shared/components/Modal/Modal.js b/src/renderer/shared/components/Modal/Modal.js
index 30eb24f05..74ff342aa 100644
--- a/src/renderer/shared/components/Modal/Modal.js
+++ b/src/renderer/shared/components/Modal/Modal.js
@@ -4,6 +4,7 @@ import { string, func, node } from 'prop-types';
 import { noop } from 'lodash';
 
 import Portal from '../Portal';
+import OutSideClick from './OnClickOutside';
 import styles from './Modal.scss';
 
 export default class Modal extends React.PureComponent {
@@ -11,26 +12,44 @@ export default class Modal extends React.PureComponent {
     className: string,
     children: node,
     renderHeader: func,
-    renderFooter: func
+    renderFooter: func,
+    handleClose: func
   };
 
   static defaultProps = {
     className: null,
     children: null,
     renderHeader: noop,
-    renderFooter: noop
+    renderFooter: noop,
+    handleClose: noop
   };
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.escFunction);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.escFunction);
+  }
+
   render() {
     return (
       <Portal className={styles.portal}>
         <div className={styles.backdrop} />
-        <div className={classNames(styles.modal, this.props.className)}>
-          {this.props.renderHeader()}
-          {this.props.children}
-          {this.props.renderFooter()}
-        </div>
+        <OutSideClick onClickOutside={this.props.handleClose}>
+          <div className={classNames(styles.modal, this.props.className)}>
+            {this.props.renderHeader()}
+            {this.props.children}
+            {this.props.renderFooter()}
+          </div>
+        </OutSideClick>
       </Portal>
     );
   }
+
+  escFunction = (event) => {
+    if (event.keyCode === 27) {
+      this.props.handleClose();
+    }
+  };
 }
diff --git a/src/renderer/shared/components/Modal/OnClickOutside.js b/src/renderer/shared/components/Modal/OnClickOutside.js
new file mode 100644
index 000000000..874051f38
--- /dev/null
+++ b/src/renderer/shared/components/Modal/OnClickOutside.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { func, node } from 'prop-types';
+
+export default class OnClickOutside extends React.PureComponent {
+  static propTypes = {
+    onClickOutside: func,
+    children: node
+  };
+
+  static defaultProps = {
+    onClickOutside: null,
+    children: null
+  };
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  render() {
+    return <div ref={this.setWrapperRef}>{this.props.children}</div>;
+  }
+
+  handleClickOutside = (event) => {
+    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
+      this.props.onClickOutside();
+    }
+  };
+
+  setWrapperRef = (el) => {
+    this.wrapperRef = el;
+  };
+}
diff --git a/src/renderer/shared/components/NewWallet/NewWallet/NewWallet.js b/src/renderer/shared/components/NewWallet/NewWallet/NewWallet.js
index bd43439a9..2f8f69688 100644
--- a/src/renderer/shared/components/NewWallet/NewWallet/NewWallet.js
+++ b/src/renderer/shared/components/NewWallet/NewWallet/NewWallet.js
@@ -38,6 +38,7 @@ export default class NewWallet extends React.PureComponent {
         className={classNames(styles.confirm, className)}
         renderHeader={this.renderTitle}
         renderFooter={this.renderFooter}
+        handleClose={onCancel}
       >
         <div className={styles.content}>
           <div className={styles.body}>

From b8bcb5e8c4b096d12560b57fb610705338d447e9 Mon Sep 17 00:00:00 2001
From: Maurice Dalderup <Maurice_Dalderup@hotmail.com>
Date: Sat, 19 Oct 2019 16:17:11 +0200
Subject: [PATCH 2/2] chore(modal): fix close when trying to click toast

---
 src/renderer/shared/components/Modal/OnClickOutside.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/shared/components/Modal/OnClickOutside.js b/src/renderer/shared/components/Modal/OnClickOutside.js
index 874051f38..d7b1b3037 100644
--- a/src/renderer/shared/components/Modal/OnClickOutside.js
+++ b/src/renderer/shared/components/Modal/OnClickOutside.js
@@ -25,7 +25,11 @@ export default class OnClickOutside extends React.PureComponent {
   }
 
   handleClickOutside = (event) => {
-    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
+    if (
+      this.wrapperRef &&
+      !this.wrapperRef.contains(event.target) &&
+      !event.target.outerHTML.toLowerCase().includes('toast')
+    ) {
       this.props.onClickOutside();
     }
   };