From 9ee6e6bfa33d73ffb89ff01105a19fef11770842 Mon Sep 17 00:00:00 2001 From: Sean Manson Date: Tue, 20 Nov 2018 15:44:01 +1000 Subject: [PATCH 1/2] Fix IOS scrolling in modals (again) (hopefully for good) INT-3634 --- package.json | 1 + src/common/services/utils.ts | 24 ----------------- .../Modal/__snapshots__/Modal.test.tsx.snap | 16 ++++++------ src/domain/Modals/Modal/style.tsx | 26 ++++++++++--------- yarn.lock | 5 ++++ 5 files changed, 28 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 24c3b6a86..5942a8e45 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@intellihr/icons": "0.0.6", "@intellihr/styled-components-breakpoint": "0.0.2", "better-react-spinkit": "2.0.4", + "body-scroll-lock": "2.5.10", "capitalize": "1.0.0", "chart.js": "2.7.2", "classnames": "2.2.5", diff --git a/src/common/services/utils.ts b/src/common/services/utils.ts index 83d295834..4d2ce028d 100644 --- a/src/common/services/utils.ts +++ b/src/common/services/utils.ts @@ -72,30 +72,6 @@ namespace Utils { setTimeout(update, msPerStep) }) } - - const previousBodyOverflowSetting = document.body && document.body.style && document.body.style.overflow - - export function enableBodyScroll () { - document.body.style.overflow = previousBodyOverflowSetting - if (isIosDevice()) { - document.body.style.position = null - } - } - - export function disableBodyScroll () { - document.body.style.overflow = 'hidden' - if (isIosDevice()) { - document.body.style.position = 'fixed' - } - } - - export function isIosDevice () { - return typeof window !== 'undefined' && - window.navigator && - window.navigator.platform && - /iPad|iPhone|iPod|(iPad Simulator)|(iPhone Simulator)|(iPod Simulator)/.test(window.navigator.platform) - - } } export { diff --git a/src/domain/Modals/Modal/__snapshots__/Modal.test.tsx.snap b/src/domain/Modals/Modal/__snapshots__/Modal.test.tsx.snap index 250403e81..e1c7dbdb7 100644 --- a/src/domain/Modals/Modal/__snapshots__/Modal.test.tsx.snap +++ b/src/domain/Modals/Modal/__snapshots__/Modal.test.tsx.snap @@ -62,8 +62,13 @@ exports[` should render a hidden modal 1`] = ` @media only screen and (max-width:640px) { .c0 .modal-overlay { - overflow-y: hidden; + background-color: #FFFFFF; + height: 100%; + min-height: 100vh; padding: 0; + left: 0; + margin: 0; + top: 0; } } @@ -72,17 +77,12 @@ exports[` should render a hidden modal 1`] = ` border: 0; border-radius: 0; max-width: none; - overflow-y: scroll; + min-height: 100vh; position: initial; -webkit-transform: none; -ms-transform: none; transform: none; - -webkit-overflow-scrolling: touch; - height: 100%; - left: 0; - margin: 0; - min-height: 100vh; - top: 0; + padding-bottom: 100px; } } diff --git a/src/domain/Modals/Modal/style.tsx b/src/domain/Modals/Modal/style.tsx index 8a67abeed..723c7b22c 100644 --- a/src/domain/Modals/Modal/style.tsx +++ b/src/domain/Modals/Modal/style.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Utils } from '../../../common/services/utils' +import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock' import Color from 'color' import styled, { StyledComponentClass } from 'styled-components' import ReactModal from 'react-modal' @@ -34,9 +34,9 @@ class ReactModalAdapter extends React.PureComponent { private setOverlayRef = (overlayRef: HTMLDivElement) => { if (!this.overlayRef && overlayRef) { - Utils.disableBodyScroll() + disableBodyScroll(overlayRef, { reserveScrollBarGap: true }) } else if (this.overlayRef && !overlayRef) { - Utils.enableBodyScroll() + enableBodyScroll(this.overlayRef) } this.overlayRef = overlayRef @@ -82,8 +82,14 @@ const StyledReactModal = styled(ReactModalAdapter)` top: 0; @media only screen and (max-width: ${breakpointTablet}px) { - overflow-y: hidden; + background-color: ${Variables.Color.n100}; + height: 100%; + min-height: 100vh; padding: 0; + + left: 0; + margin: 0; + top: 0; } } @@ -104,16 +110,12 @@ const StyledReactModal = styled(ReactModalAdapter)` border-radius: 0; max-width: none; - overflow-y: scroll; + min-height: 100vh; position: initial; transform: none; - -webkit-overflow-scrolling: touch; - - height: 100%; - left: 0; - margin: 0; - min-height: 100vh; - top: 0; + + // Add a bottom padding in mobile to counteract ios bottom bar + padding-bottom: 100px; } .modal-close-button { diff --git a/yarn.lock b/yarn.lock index 89301bf9a..e5a63a63b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1884,6 +1884,11 @@ body-parser@1.18.2: raw-body "2.3.2" type-is "~1.6.15" +body-scroll-lock@2.5.10: + version "2.5.10" + resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.5.10.tgz#aefde4dab39b8d41391e9d14cebc52c56694af35" + integrity sha512-yuVO3LEyIB1D+nzocCJGJcSV43tPD74Ma74use7wckajJsCeTvLvC1zy2rpjOWBc45uSzmrUSREoSPLUTPPG/Q== + bonjour@^3.5.0: version "3.5.0" resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5" From d8cdf49e55d283c6393ab0f6fd1f9efc76896e07 Mon Sep 17 00:00:00 2001 From: Sean Manson Date: Tue, 20 Nov 2018 15:46:10 +1000 Subject: [PATCH 2/2] Remove dumb example INT-3634 --- src/domain/Modals/Modal/Modal.examples.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/domain/Modals/Modal/Modal.examples.md b/src/domain/Modals/Modal/Modal.examples.md index 7b5fdf3d3..14fc15f70 100644 --- a/src/domain/Modals/Modal/Modal.examples.md +++ b/src/domain/Modals/Modal/Modal.examples.md @@ -117,15 +117,6 @@ ModalExample.defaultProps = { showCloseButton: true }; ``` -#### shouldCloseOnEsc and shouldCloseOnOverlayClick - -```jsx - -
- The following is a dummy space to fill out the page and ensure it doesn't scroll when a modal is open -
-``` - #### Long pages ```jsx