feat(modal): add ability to press escape or click outside to close modal

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 = () => {

src/renderer/shared/components/Alert/Alert.js

@@ -13,26 +13,28 @@ export default class Alert extends React.PureComponent {
     children: node,
     title: string,
     confirmLabel: string,
-    onConfirm: func
+    onConfirm: func,
+    onCancel: func
   };
 
   static defaultProps = {
     className: null,
     children: null,
     title: null,
     confirmLabel: 'OK',
-    onConfirm: noop
+    onConfirm: noop,
+    onCancel: noop
   };
 
   componentDidMount() {
     this.confirm.focus();
   }
 
   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}>

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>

src/renderer/shared/components/Modal/Modal.js

@@ -4,33 +4,52 @@ 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 {
   static propTypes = {
     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();
+    }
+  };
 }

src/renderer/shared/components/Modal/OnClickOutside.js

@@ -0,0 +1,40 @@
+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) &&
+      !event.target.outerHTML.toLowerCase().includes('toast')
+    ) {
+      this.props.onClickOutside();
+    }
+  };
+
+  setWrapperRef = (el) => {
+    this.wrapperRef = el;
+  };
+}

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}>