fix: modal email view is closeable on outer clicks

erxes · Sep 12, 2023 · 9d1197f · 9d1197f
1 parent cc6e15f
commit 9d1197f
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 34 deletions.
diff --git a/packages/ui-inbox/src/inbox/components/EmailWidget.tsx b/packages/ui-inbox/src/inbox/components/EmailWidget.tsx
@@ -3,15 +3,15 @@ import {
   NewEmailHeader,
   WidgetButton
 } from '@erxes/ui-inbox/src/settings/integrations/components/mail/styles';
-
 import Button from '@erxes/ui/src/components/Button';
 import Icon from '@erxes/ui/src/components/Icon';
 import MailForm from '@erxes/ui-inbox/src/settings/integrations/containers/mail/MailForm';
 import React from 'react';
 import Tip from '@erxes/ui/src/components/Tip';
 import { WidgetWrapper } from '@erxes/ui-inbox/src/settings/integrations/components/mail/styles';
 import { __ } from '@erxes/ui/src/utils';
-
+import { ModalWrapper } from '../styles';
+import CommonPortal from '@erxes/ui/src/components/CommonPortal';
 type Props = {
   disabled?: boolean;
   emailTo?: string;
@@ -89,7 +89,7 @@ class Widget extends React.Component<Props, State> {
         >
           <Tip text="Send e-mail" placement="top-end">
             <Icon icon="envelope-alt" />
-          </Tip>{' '}
+          </Tip>
           {buttonText && buttonText}
         </Button>
       );
@@ -99,7 +99,7 @@ class Widget extends React.Component<Props, State> {
       return (
         <Link onClick={() => this.showWidget()}>
           {emailTo}
-          {emailStatus && emailStatus()}{' '}
+          {emailStatus && emailStatus()}
         </Link>
       );
     }
@@ -158,34 +158,39 @@ class Widget extends React.Component<Props, State> {
     const isShrink = shrink === 'true' ? true : false;
 
     return (
-      <WidgetWrapper
-        shrink={isShrink}
-        show={isWidgetShow.show}
-        fullScreen={isFullscreen}
-      >
-        <NewEmailHeader>
-          <span onClick={changeShrink}>{__('New Email')}</span>
-          <div>
-            <Icon
-              size={10}
-              icon={shrink === 'true' ? 'plus' : 'minus'}
-              onClick={changeShrink}
-            />
-            <Icon
-              size={10}
-              icon={isFullscreen ? 'compress' : 'expand-arrows-alt'}
-              onClick={handleExpand}
-            />
-            <Icon size={10} icon="cancel" onClick={onClose} />
-          </div>
-        </NewEmailHeader>
-        <MailForm
-          {...this.props}
+      <ModalWrapper onClick={() => changeShrink()} show={isFullscreen}>
+        <WidgetWrapper
           shrink={isShrink}
-          clear={clear}
-          clearOnSubmit={true}
-        />
-      </WidgetWrapper>
+          show={isWidgetShow.show}
+          fullScreen={isFullscreen}
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        >
+          <NewEmailHeader>
+            <span onClick={changeShrink}>{__('New Email')}</span>
+            <div>
+              <Icon
+                size={10}
+                icon={shrink === 'true' ? 'plus' : 'minus'}
+                onClick={changeShrink}
+              />
+              <Icon
+                size={10}
+                icon={isFullscreen ? 'compress' : 'expand-arrows-alt'}
+                onClick={handleExpand}
+              />
+              <Icon size={10} icon="cancel" onClick={onClose} />
+            </div>
+          </NewEmailHeader>
+          <MailForm
+            {...this.props}
+            shrink={isShrink}
+            clear={clear}
+            clearOnSubmit={true}
+          />
+        </WidgetWrapper>
+      </ModalWrapper>
     );
   }
 
@@ -210,7 +215,7 @@ class Widget extends React.Component<Props, State> {
     return (
       <>
         {this.renderTrigger()}
-        {this.renderWidget()}
+        <CommonPortal>{this.renderWidget()}</CommonPortal>
       </>
     );
   }

diff --git a/packages/ui-inbox/src/inbox/styles.ts b/packages/ui-inbox/src/inbox/styles.ts
@@ -352,7 +352,23 @@ const SmallEditor = styled.div`
 const CallLabel = styledTS<{ type: string }>(styled.span)`
   color: ${props => (props.type === 'answered' ? 'green' : 'red')};
 `;
-
+const ModalWrapper = styledTS<{ show?: boolean }>(styled.div)`
+
+${({ show }) =>
+  show
+    ? `
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 300;
+  `
+    : ``}`;
 export {
   PopoverButton,
   RespondBoxStyled,
@@ -381,5 +397,6 @@ export {
   NoHeight,
   SmallEditor,
   CallLabel,
-  MailRespondBox
+  MailRespondBox,
+  ModalWrapper
 };