clicking outside of confirmation modal body closes confirmation modal.

pull/1785/head
Warrick Corfe-Tan 4 years ago
parent 3c0ea2b900
commit 973df5d245

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

@ -1,4 +1,4 @@
import React, { useEffect } from 'react'; import React, { useEffect, useRef } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/'; import { SessionIconButton, SessionIconSize, SessionIconType } from './icon/';
@ -7,27 +7,7 @@ import { DefaultTheme, useTheme } from 'styled-components';
// tslint:disable-next-line: no-submodule-imports // tslint:disable-next-line: no-submodule-imports
import useKey from 'react-use/lib/useKey'; import useKey from 'react-use/lib/useKey';
import { nodeName } from 'jquery';
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 = { export type SessionWrapperModalType = {
title?: string; title?: string;
@ -79,10 +59,36 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
[props.onClose] [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 ( return (
<div className={`loki-dialog modal ${additionalClassName}`}> <div
<div className="session-confirm-wrapper"> className={classNames(
<div className="session-modal"> `loki-dialog modal`,
additionalClassName ? additionalClassName : null
)}>
<div
className="session-confirm-wrapper">
<div
ref={modalRef}
className="session-modal">
{showHeader ? ( {showHeader ? (
<div className={classNames('session-modal__header', headerReverse && 'reverse')}> <div className={classNames('session-modal__header', headerReverse && 'reverse')}>
<div className="session-modal__header__close"> <div className="session-modal__header__close">
@ -99,17 +105,17 @@ export const SessionWrapperModal = (props: SessionWrapperModalType) => {
<div className="session-modal__header__icons"> <div className="session-modal__header__icons">
{headerIconButtons {headerIconButtons
? headerIconButtons.map((iconItem: any) => { ? headerIconButtons.map((iconItem: any) => {
return ( return (
<SessionIconButton <SessionIconButton
key={iconItem.iconType} key={iconItem.iconType}
iconType={iconItem.iconType} iconType={iconItem.iconType}
iconSize={SessionIconSize.Large} iconSize={SessionIconSize.Large}
iconRotation={iconItem.iconRotation} iconRotation={iconItem.iconRotation}
onClick={iconItem.onClick} onClick={iconItem.onClick}
theme={theme} theme={theme}
/> />
); );
}) })
: null} : null}
</div> </div>
</div> </div>

Loading…
Cancel
Save