fix(Modal): add scroll event on modal container

shervinchen · Nov 11, 2023 · 498554e · 498554e
1 parent e2675d1
commit 498554e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 76 deletions.
diff --git a/packages/Modal/ModalWrapper.tsx b/packages/Modal/ModalWrapper.tsx
@@ -1,4 +1,5 @@
 import React, { FC, PropsWithChildren, MouseEvent } from 'react';
+import { RemoveScroll } from 'react-remove-scroll';
 import { useTheme } from '../Theme';
 import { useTransition } from '../utils/hooks';
 import { useModalContext } from './modal-context';
@@ -30,59 +31,64 @@ const ModalWrapper: FC<PropsWithChildren<ModalWrapperProps>> = ({
 
   return (
     shouldMount && (
-      <div className="raw-modal-container" onClick={clickModalContainerHandler}>
+      <RemoveScroll>
         <div
-          className={className}
-          onClick={clickModalHandler}
-          style={
-            stage === 'enter'
-              ? {
-                  opacity: 1,
-                  transform: 'translate3d(0px, 0px, 0px)',
-                }
-              : {
-                  opacity: 0,
-                  transform: 'translate3d(0px, -30px, 0px)',
-                }
-          }
-          data-testid="modalWrapper"
-          {...restProps}
+          className="raw-modal-container"
+          onClick={clickModalContainerHandler}
         >
-          {children}
+          <div
+            className={className}
+            onClick={clickModalHandler}
+            style={
+              stage === 'enter'
+                ? {
+                    opacity: 1,
+                    transform: 'translate3d(0px, 0px, 0px)',
+                  }
+                : {
+                    opacity: 0,
+                    transform: 'translate3d(0px, -30px, 0px)',
+                  }
+            }
+            data-testid="modalWrapper"
+            {...restProps}
+          >
+            {children}
+          </div>
+          <style jsx>{`
+            .raw-modal-container {
+              position: fixed;
+              top: 0;
+              left: 0;
+              right: 0;
+              bottom: 0;
+              width: 100%;
+              height: 100%;
+              z-index: 1000;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              overflow: auto;
+              padding: 64px 0;
+            }
+            .raw-modal-wrapper {
+              position: relative;
+              display: flex;
+              flex-direction: column;
+              width: 100%;
+              max-width: ${width};
+              border-radius: 6px;
+              background-color: ${theme.palette.background};
+              color: ${theme.palette.foreground};
+              font-size: 16px;
+              box-shadow: ${theme.tokens.shadow.lg};
+              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
+                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+              margin: auto;
+            }
+          `}</style>
         </div>
-        <style jsx>{`
-          .raw-modal-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: auto;
-            padding: 64px 0;
-          }
-          .raw-modal-wrapper {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            max-width: ${width};
-            border-radius: 6px;
-            background-color: ${theme.palette.background};
-            color: ${theme.palette.foreground};
-            font-size: 16px;
-            box-shadow: ${theme.tokens.shadow.lg};
-            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
-              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-            margin: auto;
-          }
-        `}</style>
-      </div>
+      </RemoveScroll>
     )
   );
 };

diff --git a/packages/Overlay/Overlay.tsx b/packages/Overlay/Overlay.tsx
@@ -1,5 +1,4 @@
 import React, { FC, MouseEvent } from 'react';
-import { RemoveScroll } from 'react-remove-scroll';
 import { OverlayProps } from './Overlay.types';
 import { useTheme } from '../Theme';
 import { useTransition } from '../utils/hooks';
@@ -14,31 +13,29 @@ const Overlay: FC<OverlayProps> = ({ visible, onClick, ...restProps }) => {
 
   return (
     shouldMount && (
-      <RemoveScroll>
-        <div
-          className="raw-overlay"
-          onClick={clickHandler}
-          style={{
-            opacity: stage === 'enter' ? 0.25 : 0,
-          }}
-          {...restProps}
-        >
-          <style jsx>{`
-            .raw-overlay {
-              position: fixed;
-              top: 0;
-              left: 0;
-              right: 0;
-              bottom: 0;
-              width: 100%;
-              height: 100%;
-              z-index: 1000;
-              background-color: ${theme.palette.foreground};
-              transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
-            }
-          `}</style>
-        </div>
-      </RemoveScroll>
+      <div
+        className="raw-overlay"
+        onClick={clickHandler}
+        style={{
+          opacity: stage === 'enter' ? 0.25 : 0,
+        }}
+        {...restProps}
+      >
+        <style jsx>{`
+          .raw-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 1000;
+            background-color: ${theme.palette.foreground};
+            transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+          }
+        `}</style>
+      </div>
     )
   );
 };