Merge pull request #568 from PolymathNetwork/fix/modal-lock-scroll

fix(new-ui): fix body scroll lock jump when body doesnt scroll

Author: RafaelVidaurre

packages/new-polymath-ui/src/components/Modal/Modal.tsx

@@ -1,5 +1,6 @@
-import React, { FC } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 import ReactModal from 'react-modal';
+import scrollbarWidth from 'scrollbarwidth';
 import { withTheme, ThemeInterface, styled } from '~/styles';
 import { Header } from './Header';
 import { Body } from './Body';
@@ -19,6 +20,10 @@ interface Props {
   theme: ThemeInterface;
 }
 
+function hasScrollbar() {
+  return document.documentElement.scrollHeight > window.innerHeight;
+}
+
 export const ModalBase: FC<Props> = ({
   children,
   className,
@@ -30,6 +35,7 @@ export const ModalBase: FC<Props> = ({
   status,
 }) => {
   let overlayRef: HTMLDivElement | null = null;
+  const [prevOpen, setPrevOpen] = useState(false);
   const handleCloseRequest = () => {
     if (!isCloseable) {
       return;
@@ -47,6 +53,30 @@ export const ModalBase: FC<Props> = ({
     }
   };
 
+  useEffect(
+    () => {
+      if (prevOpen !== isOpen) {
+        if (isOpen) {
+          if (hasScrollbar()) {
+            document.body.style.overflow = 'hidden';
+            document.body.style.paddingRight = `${scrollbarWidth()}px`;
+          }
+        } else {
+          document.body.style.overflow = null;
+          document.body.style.paddingRight = null;
+        }
+
+        setPrevOpen(isOpen);
+      }
+
+      return () => {
+        document.body.style.overflow = null;
+        document.body.style.paddingRight = null;
+      };
+    },
+    [isOpen]
+  );
+
   return (
     <ReactModal
       isOpen={isOpen}

packages/new-polymath-ui/src/styles/GlobalStyles.ts

@@ -2,7 +2,6 @@ import { normalize } from 'polished';
 import fontFaceDefinition from 'typeface-overpass';
 import * as styledComponents from 'styled-components';
 import { ThemedStyledComponentsModule } from 'styled-components';
-import scrollbarWidth from 'scrollbarwidth';
 import { ThemeInterface } from './types';
 
 const { createGlobalStyle } = styledComponents as ThemedStyledComponentsModule<
@@ -27,11 +26,6 @@ export const GlobalStyles = createGlobalStyle`
     color: ${({ theme }) => theme.colors.baseText};
     font-family: ${({ theme }) => theme.fontFamilies.baseText};
     font-weight: ${({ theme }) => theme.fontWeights.normal};
-
-    &.ReactModal__Body--open {
-      overflow: hidden;
-      padding-right: ${scrollbarWidth()}px;
-    }
   }
 
   strong {