From 973df5d245afbc12d045d67e3205d8718ff5f284 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 14:46:19 +1000 Subject: [PATCH 1/4] clicking outside of confirmation modal body closes confirmation modal. --- ts/components/session/SessionConfirm.tsx | 3 - ts/components/session/SessionWrapperModal.tsx | 78 ++++++++++--------- 2 files changed, 42 insertions(+), 39 deletions(-) diff --git a/ts/components/session/SessionConfirm.tsx b/ts/components/session/SessionConfirm.tsx index 190c11632..3fc51d325 100644 --- a/ts/components/session/SessionConfirm.tsx +++ b/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'; diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index bc0abea83..8a706725b 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/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(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 ( -
-
-
+
+
+
{showHeader ? (
@@ -99,17 +105,17 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
{headerIconButtons ? headerIconButtons.map((iconItem: any) => { - return ( - - ); - }) + return ( + + ); + }) : null}
From 3fca7ef4de978cc0f1af783d8616328834c699ae Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 14:47:57 +1000 Subject: [PATCH 2/4] remove unused imports. --- ts/components/session/SessionWrapperModal.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 8a706725b..09bb4c60c 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -2,12 +2,11 @@ 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'; -import { nodeName } from 'jquery'; export type SessionWrapperModalType = { title?: string; @@ -69,10 +68,8 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { } useEffect(() => { - // on mount document.addEventListener("mousedown", handleClick); - // unmount return () => { document.removeEventListener("mousedown", handleClick); } From 28924a63bb64bcb4d482a05116bc156fbf081556 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 15:03:30 +1000 Subject: [PATCH 3/4] removing some unusued imports. --- ts/components/conversation/InviteContactsDialog.tsx | 3 +-- ts/components/conversation/ModeratorsAddDialog.tsx | 3 +-- ts/components/conversation/ModeratorsRemoveDialog.tsx | 3 --- ts/components/session/SessionWrapperModal.tsx | 1 - 4 files changed, 2 insertions(+), 8 deletions(-) diff --git a/ts/components/conversation/InviteContactsDialog.tsx b/ts/components/conversation/InviteContactsDialog.tsx index b8e3848fa..a566e06e6 100644 --- a/ts/components/conversation/InviteContactsDialog.tsx +++ b/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'; diff --git a/ts/components/conversation/ModeratorsAddDialog.tsx b/ts/components/conversation/ModeratorsAddDialog.tsx index 5a4649d94..07d6aac5b 100644 --- a/ts/components/conversation/ModeratorsAddDialog.tsx +++ b/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); diff --git a/ts/components/conversation/ModeratorsRemoveDialog.tsx b/ts/components/conversation/ModeratorsRemoveDialog.tsx index 30d6d10d3..2bf51fa5c 100644 --- a/ts/components/conversation/ModeratorsRemoveDialog.tsx +++ b/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'; diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 09bb4c60c..462e9cc5d 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -62,7 +62,6 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { const handleClick = (e: any) => { if (!modalRef.current?.contains(e.target)) { - console.log('clicked outside of modal'); props.onClose?.(); } } From ca4dec9fda7a0fc2cc25d2b09dc200ab1d6ec786 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Tue, 20 Jul 2021 15:23:48 +1000 Subject: [PATCH 4/4] linting, formatting, testing --- ts/components/session/SessionWrapperModal.tsx | 45 +++++++++---------- 1 file changed, 20 insertions(+), 25 deletions(-) diff --git a/ts/components/session/SessionWrapperModal.tsx b/ts/components/session/SessionWrapperModal.tsx index 462e9cc5d..611867f18 100644 --- a/ts/components/session/SessionWrapperModal.tsx +++ b/ts/components/session/SessionWrapperModal.tsx @@ -64,27 +64,22 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => { if (!modalRef.current?.contains(e.target)) { props.onClose?.(); } - } + }; useEffect(() => { - document.addEventListener("mousedown", handleClick); + document.addEventListener('mousedown', handleClick); return () => { - document.removeEventListener("mousedown", handleClick); - } - }, []) + document.removeEventListener('mousedown', handleClick); + }; + }, []); return (
-
-
+ className={classNames('loki-dialog modal', additionalClassName ? additionalClassName : null)} + > +
+
{showHeader ? (
@@ -101,17 +96,17 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
{headerIconButtons ? headerIconButtons.map((iconItem: any) => { - return ( - - ); - }) + return ( + + ); + }) : null}