Fix #5077:Improve block/unblockScroll architecture

primefaces · Oct 11, 2023 · aa5b9df · aa5b9df
1 parent e9264f8
commit aa5b9df
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 28 deletions.
diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
@@ -28,8 +28,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
         const callback = () => {
             setVisibleState(false);
 
-            props.fullScreen && DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            props.fullScreen && DomHandler.unblockBodyScroll();
             props.onUnblocked && props.onUnblocked();
         };
 
@@ -46,8 +45,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
 
     const onPortalMounted = () => {
         if (props.fullScreen) {
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
-            document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+            DomHandler.blockBodyScroll();
             document.activeElement.blur();
         }
 
@@ -70,8 +68,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
 
     useUnmountEffect(() => {
         if (props.fullScreen) {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
         }
 
         ZIndexUtils.clear(maskRef.current);

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -1552,8 +1552,7 @@ export const Calendar = React.memo(
                 touchUIMask.current.addEventListener('click', touchUIMaskClickListener.current);
 
                 document.body.appendChild(touchUIMask.current);
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll();
             }
         };
 
@@ -1591,8 +1590,7 @@ export const Calendar = React.memo(
             }
 
             if (!hasBlockerMasks) {
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll();
             }
         };
 

diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js
@@ -332,11 +332,9 @@ export const Dialog = React.forwardRef((inProps, ref) => {
         const isThereAnyDialogThatBlocksScrolling = document.primeDialogParams && document.primeDialogParams.some((i) => i.hasBlockScroll);
 
         if (isThereAnyDialogThatBlocksScrolling) {
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
-            document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+            DomHandler.blockBodyScroll();
         } else {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
         }
     };
 

diff --git a/components/lib/galleria/Galleria.js b/components/lib/galleria/Galleria.js
@@ -70,8 +70,7 @@ export const Galleria = React.memo(
         };
 
         const onEnter = () => {
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
-            document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+            DomHandler.blockBodyScroll();
         };
 
         const onEntering = () => {
@@ -84,8 +83,7 @@ export const Galleria = React.memo(
         };
 
         const onExit = () => {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
             !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
         };
 

diff --git a/components/lib/image/Image.js b/components/lib/image/Image.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useOnEscapeKey } from '../../lib/hooks/Hooks';
 import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
@@ -13,7 +14,6 @@ import { UndoIcon } from '../icons/undo';
 import { Portal } from '../portal/Portal';
 import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { ImageBase } from './ImageBase';
-import { useOnEscapeKey } from '../../lib/hooks/Hooks';
 
 export const Image = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -48,8 +48,7 @@ export const Image = React.memo(
         const show = () => {
             if (props.preview) {
                 setMaskVisibleState(true);
-                DomHandler.addClass(document.body, 'p-overflow-hidden');
-                document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+                DomHandler.blockBodyScroll();
                 setTimeout(() => {
                     setPreviewVisibleState(true);
                 }, 25);
@@ -59,8 +58,7 @@ export const Image = React.memo(
         const hide = () => {
             if (!previewClick.current) {
                 setPreviewVisibleState(false);
-                DomHandler.removeClass(document.body, 'p-overflow-hidden');
-                document.body.style.removeProperty('--scrollbar-width');
+                DomHandler.unblockBodyScroll();
                 setRotateState(0);
                 setScaleState(1);
             }

diff --git a/components/lib/sidebar/Sidebar.js b/components/lib/sidebar/Sidebar.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useOnEscapeKey } from '../../lib/hooks/Hooks';
 import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
@@ -8,7 +9,6 @@ import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
 import { DomHandler, IconUtils, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
 import { SidebarBase } from './SidebarBase';
-import { useOnEscapeKey } from '../../lib/hooks/Hooks';
 
 export const Sidebar = React.forwardRef((inProps, ref) => {
     const context = React.useContext(PrimeReactContext);
@@ -104,17 +104,15 @@ export const Sidebar = React.forwardRef((inProps, ref) => {
         }
 
         if (props.blockScroll) {
-            DomHandler.addClass(document.body, 'p-overflow-hidden');
-            document.body.style.setProperty('--scrollbar-width', DomHandler.calculateScrollbarWidth() + 'px');
+            DomHandler.blockBodyScroll();
         }
     };
 
     const disableDocumentSettings = () => {
         unbindDocumentClickListener();
 
         if (props.blockScroll) {
-            DomHandler.removeClass(document.body, 'p-overflow-hidden');
-            document.body.style.removeProperty('--scrollbar-width');
+            DomHandler.unblockBodyScroll();
         }
     };
 

diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
@@ -829,6 +829,10 @@ export default class DomHandler {
         }
     }
 
+    static calculateBodyScrollbarWidth() {
+        return window.innerWidth - document.documentElement.offsetWidth;
+    }
+
     static getBrowser() {
         if (!this.browser) {
             let matched = this.resolveUserAgent();
@@ -860,6 +864,16 @@ export default class DomHandler {
         };
     }
 
+    static blockBodyScroll(className = 'p-overflow-hidden') {
+        document.body.style.setProperty('--scrollbar-width', this.calculateBodyScrollbarWidth() + 'px');
+        this.addClass(document.body, className);
+    }
+
+    static unblockBodyScroll(className = 'p-overflow-hidden') {
+        document.body.style.removeProperty('--scrollbar-width');
+        this.removeClass(document.body, className);
+    }
+
     static isVisible(element) {
         // https://stackoverflow.com/a/59096915/502366 (in future use IntersectionObserver)
         return element && (element.clientHeight !== 0 || element.getClientRects().length !== 0 || getComputedStyle(element).display !== 'none');

diff --git a/components/lib/utils/utils.d.ts b/components/lib/utils/utils.d.ts
@@ -63,7 +63,10 @@ export declare class DomHandler {
     static scrollInView(container: HTMLElement, item: HTMLElement): void;
     static clearSelection(): void;
     static calculateScrollbarWidth(el: HTMLElement): number;
+    static calculateBodyScrollbarWidth(): number;
     static getBrowser(): object;
+    static blockBodyScroll(className?: string): void;
+    static unblockBodyScroll(className?: string): void;
     static resolveUserAgent(): { browser: string; version: string };
     static isVisible(el: HTMLElement): boolean;
     static isExist(el: HTMLElement): boolean;