From 3718ad06f3b54f8f16290df2d49d1fd8d580b4d1 Mon Sep 17 00:00:00 2001 From: Bugra <71140097+habubey@users.noreply.github.com> Date: Wed, 27 Sep 2023 16:28:52 +0300 Subject: [PATCH] Revert "Fix #4940: scroll block applied incorrectly in some cases (#4946)" This reverts commit bbc621c1fce3ea8858170e90b31d4e636b46d62a. --- components/lib/dialog/Dialog.js | 74 ++++++++++++++++----------------- 1 file changed, 36 insertions(+), 38 deletions(-) diff --git a/components/lib/dialog/Dialog.js b/components/lib/dialog/Dialog.js index 033ee0163a..02c35eb6a7 100644 --- a/components/lib/dialog/Dialog.js +++ b/components/lib/dialog/Dialog.js @@ -36,7 +36,6 @@ export const Dialog = React.forwardRef((inProps, ref) => { const attributeSelector = React.useRef(uniqueId); const focusElementOnHide = React.useRef(null); const maximized = props.onMaximize ? props.maximized : maximizedState; - const shouldBlockScroll = visibleState && (props.blockScroll || (props.maximizable && maximized)); const { ptm, cx, sx, isUnstyled } = DialogBase.setMetaData({ props, @@ -286,6 +285,13 @@ export const Dialog = React.forwardRef((inProps, ref) => { dialogRef.current.style.margin = ''; }; + const getPositionClass = () => { + const positions = ['center', 'left', 'right', 'top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right']; + const pos = positions.find((item) => item === props.position || item.replace('-', '') === props.position); + + return pos ? `p-dialog-${pos}` : ''; + }; + const onEnter = () => { dialogRef.current.setAttribute(attributeSelector.current, ''); }; @@ -304,6 +310,10 @@ export const Dialog = React.forwardRef((inProps, ref) => { if (props.modal) { DomHandler.addClass(maskRef.current, 'p-component-overlay-leave'); } + + if (props.blockScroll) { + DomHandler.removeClass(document.body, 'p-overflow-hidden'); + } }; const onExited = () => { @@ -319,51 +329,26 @@ export const Dialog = React.forwardRef((inProps, ref) => { const enableDocumentSettings = () => { bindGlobalListeners(); - updateGlobalDialogsRegistry(true); - }; - const disableDocumentSettings = () => { - unbindGlobalListeners(); - updateGlobalDialogsRegistry(false); - }; - - const updateScrollBlocker = () => { - // Scroll should be unblocked if there is at least one dialog that blocks scrolling: - const isThereAnyDialogThatBlocksScrolling = document.primeDialogParams && document.primeDialogParams.some((i) => i.hasBlockScroll); - - if (isThereAnyDialogThatBlocksScrolling) { + if (props.blockScroll || (props.maximizable && maximized)) { DomHandler.addClass(document.body, 'p-overflow-hidden'); - } else { - DomHandler.removeClass(document.body, 'p-overflow-hidden'); } }; - const updateGlobalDialogsRegistry = (isMounted) => { - // Update current dialog info in global registry if it is mounted: - if (isMounted) { - const newParam = { id: idState, hasBlockScroll: shouldBlockScroll }; + const disableDocumentSettings = () => { + unbindGlobalListeners(); - // Create registry if not yet created: - if (!document.primeDialogParams) { - document.primeDialogParams = []; - } + const isMaximized = props.maximizable && maximized; - const currentDialogIndexInRegistry = document.primeDialogParams.findIndex((dialogInRegistry) => dialogInRegistry.id === idState); + if (props.modal) { + const hasBlockScroll = props.blockScroll || (document.primeDialogParams && document.primeDialogParams.some((param) => param.hasBlockScroll)); - if (currentDialogIndexInRegistry === -1) { - document.primeDialogParams = [...document.primeDialogParams, newParam]; - } else { - document.primeDialogParams = document.primeDialogParams.toSpliced(currentDialogIndexInRegistry, 1, newParam); + if (hasBlockScroll || isMaximized) { + DomHandler.removeClass(document.body, 'p-overflow-hidden'); } + } else if (props.blockScroll || isMaximized) { + DomHandler.removeClass(document.body, 'p-overflow-hidden'); } - // Or remove it from global registry if unmounted: - else { - document.primeDialogParams = document.primeDialogParams && document.primeDialogParams.filter((param) => param.id !== idState); - } - - // Always update scroll blocker after dialog registry - this way we ensure that - // p-overflow-hidden class is properly added/removed: - updateScrollBlocker(); }; const bindGlobalListeners = () => { @@ -378,6 +363,9 @@ export const Dialog = React.forwardRef((inProps, ref) => { } bindDocumentKeyDownListener(); + const newParam = { id: idState, hasBlockScroll: props.blockScroll }; + + document.primeDialogParams = document.primeDialogParams ? [...document.primeDialogParams, newParam] : [newParam]; }; const unbindGlobalListeners = () => { @@ -386,6 +374,8 @@ export const Dialog = React.forwardRef((inProps, ref) => { unbindDocumentResizeListener(); unbindDocumentResizEndListener(); unbindDocumentKeyDownListener(); + + document.primeDialogParams = document.primeDialogParams && document.primeDialogParams.filter((param) => param.id !== idState); }; const createStyle = () => { @@ -406,6 +396,14 @@ export const Dialog = React.forwardRef((inProps, ref) => { styleElement.current.innerHTML = innerHTML; }; + const changeScrollOnMaximizable = () => { + if (!props.blockScroll) { + let funcName = maximized && visibleState ? 'addClass' : 'removeClass'; + + DomHandler[funcName](document.body, 'p-overflow-hidden'); + } + }; + useMountEffect(() => { if (props.visible) { setMaskVisibleState(true); @@ -440,8 +438,8 @@ export const Dialog = React.forwardRef((inProps, ref) => { }, [maskVisibleState]); useUpdateEffect(() => { - updateGlobalDialogsRegistry(true); - }, [shouldBlockScroll]); + changeScrollOnMaximizable(); + }, [props.maximized, maximizedState, visibleState]); useUnmountEffect(() => { disableDocumentSettings();