Merge pull request #164 from nabeliwo/fix-modal

Suppresses scrolling of body while modal is displayed
kufu · Jun 21, 2019 · 44eaafe · 44eaafe
2 parents 1bbb935 + 8811de1
commit 44eaafe
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 19 deletions.
diff --git a/src/components/Modal/Box.tsx b/src/components/Modal/Box.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled, { css, createGlobalStyle } from 'styled-components'
 
 import { InjectedProps, withTheme } from '../../hocs/withTheme'
 
@@ -20,17 +20,14 @@ interface MergedStyledProps extends InjectedProps {
   left?: number
 }
 
-const BoxComponent: React.FC<Props & InjectedProps> = ({
-  active,
-  children,
-  hideModal,
-  ...props
-}) => (
+const BoxComponent: React.FC<Props> = ({ active, children, hideModal, ...props }) => (
   <Wrapper className={active ? 'active' : ''} {...props}>
     {active ? (
       <React.Fragment>
         <Background {...props} onClick={hideModal} />
         <Inner {...props}>{children}</Inner>
+        {/* Suppresses scrolling of body while modal is displayed */}
+        <ScrollSuppressing />
       </React.Fragment>
     ) : null}
   </Wrapper>
@@ -59,12 +56,12 @@ const Wrapper = styled.div`
 `
 const Inner = styled.div`
   ${({ theme, top, right, bottom, left }: MergedStyledProps) => {
-    const positionRight: number | string = exist(right) ? `${right}px` : 'auto'
-    const positionBottom: number | string = exist(bottom) ? `${bottom}px` : 'auto'
-    let positionTop: number | string = exist(top) ? `${top}px` : 'auto'
-    let positionLeft: number | string = exist(left) ? `${left}px` : 'auto'
-    let translateX: string = '0'
-    let translateY: string = '0'
+    const positionRight = exist(right) ? `${right}px` : 'auto'
+    const positionBottom = exist(bottom) ? `${bottom}px` : 'auto'
+    let positionTop = exist(top) ? `${top}px` : 'auto'
+    let positionLeft = exist(left) ? `${left}px` : 'auto'
+    let translateX = '0'
+    let translateY = '0'
 
     if (top === undefined && bottom === undefined) {
       positionTop = '50%'
@@ -102,3 +99,8 @@ const Background = styled.div`
     `
   }}
 `
+const ScrollSuppressing = createGlobalStyle`
+  body {
+    overflow: hidden;
+  }
+`
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -32,9 +32,8 @@ class ModalController extends React.PureComponent {
   }
 }
 
-/* eslint-disable jsx-a11y/no-autofocus */
-storiesOf('Modal', module).add('all', () => (
-  <div>
+const StoryComponents = () => (
+  <React.Fragment>
     <ModalController />
 
     <ModalWrapper>
@@ -103,20 +102,58 @@ storiesOf('Modal', module).add('all', () => (
       </ModalTrigger>
       <ModalContent>
         <Inner>
+          {/* eslint-disable-next-line jsx-a11y/no-autofocus */}
           <input type="text" autoFocus />
           <ModalEraser>
             <button>閉じる</button>
           </ModalEraser>
         </Inner>
       </ModalContent>
     </ModalWrapper>
-  </div>
-))
-/* eslint-enable jsx-a11y/no-autofocus */
+  </React.Fragment>
+)
+
+storiesOf('Modal', module)
+  .add('all', () => <StoryComponents />)
+  .add('Suppresses scrolling', () => (
+    <Wrapper>
+      <ScrollBox>
+        <ScrollChunk>0px</ScrollChunk>
+        <ScrollChunk>200px</ScrollChunk>
+        <ScrollChunk>400px</ScrollChunk>
+        <ScrollChunk>600px</ScrollChunk>
+        <ScrollChunk>800px</ScrollChunk>
+        <ScrollChunk>1000px</ScrollChunk>
+        <ScrollChunk>1200px</ScrollChunk>
+        <ScrollChunk>1400px</ScrollChunk>
+        <ScrollChunk>1600px</ScrollChunk>
+        <ScrollChunk>1800px</ScrollChunk>
+        <ScrollChunk>2000px</ScrollChunk>
+      </ScrollBox>
+      <div>
+        <ButtonWrap>
+          <StoryComponents />
+        </ButtonWrap>
+      </div>
+    </Wrapper>
+  ))
 
 const Inner = styled.div`
   padding: 2.4rem;
 `
 const Txt = styled.p`
   margin: 0;
 `
+const Wrapper = styled.div`
+  display: flex;
+`
+const ScrollBox = styled.div`
+  width: 300px;
+`
+const ScrollChunk = styled.div`
+  height: 200px;
+`
+const ButtonWrap = styled.div`
+  position: fixed;
+  top: 0;
+`