Merge pull request #1785 from warrickct/close-modals-easier

Close modals easier

ts/components/conversation/InviteContactsDialog.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 
-import { SessionModal } from '../session/SessionModal';
 import { SessionButton, SessionButtonColor } from '../session/SessionButton';
 import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
-import { DefaultTheme, useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 import { getConversationController } from '../../session/conversations';
 import { ToastUtils, UserUtils } from '../../session/utils';
 import { initiateGroupUpdate } from '../../session/group';

ts/components/conversation/ModeratorsAddDialog.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 import { PubKey } from '../../session/types';
 import { ToastUtils } from '../../session/utils';
-import { DefaultTheme, useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 import { SessionSpinner } from '../session/SessionSpinner';
 import { Flex } from '../basic/Flex';
 import { ApiV2 } from '../../opengroup/opengroupV2';
@@ -19,7 +19,6 @@ type Props = {
 export const AddModeratorsDialog = (props: Props) => {
   const { conversationId } = props;
 
-  const theme = useTheme();
   const dispatch = useDispatch();
   const convo = getConversationController().get(conversationId);
 

ts/components/conversation/ModeratorsRemoveDialog.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { DefaultTheme } from 'styled-components';
-import { ConversationModel } from '../../models/conversation';
 import { ApiV2 } from '../../opengroup/opengroupV2';
 import { getConversationController } from '../../session/conversations';
 import { PubKey } from '../../session/types';
@@ -8,7 +6,6 @@ import { ToastUtils } from '../../session/utils';
 import { Flex } from '../basic/Flex';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../session/SessionButton';
 import { ContactType, SessionMemberListItem } from '../session/SessionMemberListItem';
-import { SessionModal } from '../session/SessionModal';
 import { SessionSpinner } from '../session/SessionSpinner';
 import _ from 'lodash';
 import { SessionWrapperModal } from '../session/SessionWrapperModal';

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,34 +1,13 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import classNames from 'classnames';
 
 import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
-import { SessionButton, SessionButtonColor, SessionButtonType } from './SessionButton';
-import { DefaultTheme, useTheme } from 'styled-components';
+import { SessionButton } from './SessionButton';
+import { 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;
-};
-
 export type SessionWrapperModalType = {
   title?: string;
   showHeader?: boolean;
@@ -79,10 +58,28 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
     [props.onClose]
   );
 
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = (e: any) => {
+    if (!modalRef.current?.contains(e.target)) {
+      props.onClose?.();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, []);
+
   return (
-    <div className={`loki-dialog modal ${additionalClassName}`}>
+    <div
+      className={classNames('loki-dialog modal', additionalClassName ? additionalClassName : null)}
+    >
       <div className="session-confirm-wrapper">
-        <div className="session-modal">
+        <div ref={modalRef} className="session-modal">
           {showHeader ? (
             <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
               <div className="session-modal__header__close">