Merge pull request #126 from axsmap/AM-331

AM-331: Fix buggy scrolling on Mapathons info modal

src/components/Mapathons/InformationDialog.js

@@ -1,38 +1,64 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { intlShape } from 'react-intl'
 import styled from 'styled-components'
-
 import Icon from '../Icon'
 import { colors, media } from '../../styles'
 
-export default class Modal extends React.Component {
-  onClose = e => {
-    this.props.onClose && this.props.onClose(e)
+const ModalWrapper = styled.div`
+  .modal {
+    background-color: rgba( 0, 0, 0, .35);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+    top: 0;
+    right: 0;
+  }
+
+  .modal-container {
+    background-color: white;
+    padding: 20px;
+    margin: 40px 20px;
+    border-radius: 15px;
+    height: 90%
+    overflow: auto;
   }
+`
 
-  render() {
-    if (!this.props.show) {
-      return null
-    }
-    return (
+const Modal = ({ onClose, show, children }) => {
+  useEffect(
+    () => {
+      const handleBodyOverflow = () => {
+        document.body.style.overflow = show ? 'hidden' : 'auto'
+      }
+      handleBodyOverflow()
+      return () => {
+        document.body.style.overflow = 'auto'
+      }
+    },
+    [show]
+  )
+
+  if (!show) {
+    return null
+  }
+
+  return <ModalWrapper>
       <div className="modal" id="modal">
         <div className="modal-container">
-          <div className="toggle-button" onClick={this.onClose}>
-            <Icon
-              glyph="cross"
-              size={1}
-              backgroundColor={colors.white}
-              color={colors.black}
-            />
+          <div onClick={onClose}>
+            <Icon glyph="cross" size={1} backgroundColor={colors.white} color={colors.black} />
           </div>
-          <div className="content">{this.props.children}</div>
+          <div className="content">{children}</div>
         </div>
       </div>
-    )
-  }
+    </ModalWrapper>
 }
+
 Modal.propTypes = {
   onClose: PropTypes.func.isRequired,
-  show: PropTypes.bool.isRequired
+  show: PropTypes.bool.isRequired,
 }
+
+export default Modal

src/styles.js

@@ -1773,21 +1773,4 @@ html {
       }
     }
   }
-
-  .modal {
-    background-color: rgba( 0, 0, 0, .35);
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    z-index: 99999;
-    top: 0;  
-  }
-  .modal-container {
-    background-color: white;
-    padding: 20px;
-    margin: 40px 20px;
-    border-radius: 15px;
-    height: 90%
-    overflow: hidden;
-  }
 `