clicking outside of confirmation modal body closes confirmation modal.

ts/components/session/SessionConfirm.tsx

@@ -1,13 +1,10 @@
 import React, { useState } from 'react';
-import { SessionModal } from './SessionModal';
 import { SessionButton, SessionButtonColor } from './SessionButton';
 import { SessionHtmlRenderer } from './SessionHTMLRenderer';
 import { SessionIcon, SessionIconSize, SessionIconType } from './icon';
 import { DefaultTheme, useTheme, withTheme } from 'styled-components';
 import { SessionWrapperModal } from './SessionWrapperModal';
-import { useDispatch } from 'react-redux';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
-import { update } from 'lodash';
 import { SpacerLG } from '../basic/Text';
 import { SessionSpinner } from './SessionSpinner';
 

ts/components/session/SessionWrapperModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
@@ -7,27 +7,7 @@ import { DefaultTheme, useTheme } from 'styled-components';
 
 // tslint:disable-next-line: no-submodule-imports
 import useKey from 'react-use/lib/useKey';
-
-type Props = {
-  title: string;
-  onClose: any;
-  showExitIcon?: boolean;
-  showHeader?: boolean;
-  headerReverse?: boolean;
-  //Maximum of two icons or buttons in header
-  headerIconButtons?: Array<{
-    iconType: SessionIconType;
-    iconRotation: number;
-    onClick?: any;
-  }>;
-  headerButtons?: Array<{
-    buttonType: SessionButtonType;
-    buttonColor: SessionButtonColor;
-    text: string;
-    onClick?: any;
-  }>;
-  theme: DefaultTheme;
-};
+import { nodeName } from 'jquery';
 
 export type SessionWrapperModalType = {
   title?: string;
@@ -79,10 +59,36 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     [props.onClose]
   );
 
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (e: any) => {
+    if (!modalRef.current?.contains(e.target)) {
+      console.log('clicked outside of modal');
+      props.onClose?.();
+    }
+  }
+
+  useEffect(() => {
+    // on mount
+    document.addEventListener("mousedown", handleClick);
+
+    // unmount
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+    }
+  }, [])
+
   return (
-    <div className={`loki-dialog modal ${additionalClassName}`}>
-      <div className="session-confirm-wrapper">
-        <div className="session-modal">
+    <div
+      className={classNames(
+        `loki-dialog modal`,
+        additionalClassName ? additionalClassName : null
+      )}>
+      <div
+        className="session-confirm-wrapper">
+        <div
+          ref={modalRef}
+          className="session-modal">
           {showHeader ? (
             <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
               <div className="session-modal__header__close">
@@ -99,17 +105,17 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
               <div className="session-modal__header__icons">
                 {headerIconButtons
                   ? headerIconButtons.map((iconItem: any) => {
-                      return (
-                        <SessionIconButton
-                          key={iconItem.iconType}
-                          iconType={iconItem.iconType}
-                          iconSize={SessionIconSize.Large}
-                          iconRotation={iconItem.iconRotation}
-                          onClick={iconItem.onClick}
-                          theme={theme}
-                        />
-                      );
-                    })
+                    return (
+                      <SessionIconButton
+                        key={iconItem.iconType}
+                        iconType={iconItem.iconType}
+                        iconSize={SessionIconSize.Large}
+                        iconRotation={iconItem.iconRotation}
+                        onClick={iconItem.onClick}
+                        theme={theme}
+                      />
+                    );
+                  })
                   : null}
               </div>
             </div>