From 036b70de1ee1f784be1d123677458bf7de1cf7f4 Mon Sep 17 00:00:00 2001 From: Melloware Date: Wed, 14 Feb 2024 15:31:59 -0500 Subject: [PATCH] Fix #5889: BlockUI in unstyled mode (#5967) --- components/lib/blockui/BlockUI.js | 31 ++++++++++--------- .../__snapshots__/BlockUI.spec.js.snap | 18 +++-------- components/lib/utils/DomHandler.js | 22 +++++++++++++ 3 files changed, 42 insertions(+), 29 deletions(-) diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js index 3017dc1c07..e5872a593d 100644 --- a/components/lib/blockui/BlockUI.js +++ b/components/lib/blockui/BlockUI.js @@ -28,28 +28,29 @@ export const BlockUI = React.forwardRef((inProps, ref) => { }; const unblock = () => { - const callback = () => { - setVisibleState(false); + !isUnstyled() && DomHandler.addClass(maskRef.current, 'p-component-overlay-leave'); - if (props.fullScreen) { - DomHandler.unblockBodyScroll(); - activeElementRef.current && activeElementRef.current.focus(); - } - - props.onUnblocked && props.onUnblocked(); - }; - - if (maskRef.current) { - DomHandler.addClass(maskRef.current, 'p-component-overlay-leave'); + if (DomHandler.hasCSSAnimation(maskRef.current) > 0) { maskRef.current.addEventListener('animationend', () => { - ZIndexUtils.clear(maskRef.current); - callback(); + removeMask(); }); } else { - callback(); + removeMask(); } }; + const removeMask = () => { + ZIndexUtils.clear(maskRef.current); + setVisibleState(false); + + if (props.fullScreen) { + DomHandler.unblockBodyScroll(); + activeElementRef.current && activeElementRef.current.focus(); + } + + props.onUnblocked && props.onUnblocked(); + }; + const onPortalMounted = () => { if (props.fullScreen) { DomHandler.blockBodyScroll(); diff --git a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap index cf60a1da34..68a1a53851 100644 --- a/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap +++ b/components/lib/blockui/__snapshots__/BlockUI.spec.js.snap @@ -16,15 +16,15 @@ exports[`BlockUI block and unblock fullscreen events: blocked-event-fullscreen 1
`; exports[`BlockUI block and unblock fullscreen events: unblocked-event-fullscreen 1`] = `
-
`; @@ -111,11 +106,6 @@ exports[`BlockUI block and unblock panel events: unblocked-event 1`] = `
-
`; @@ -223,7 +213,7 @@ exports[`BlockUI container style and className 1`] = `
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js index e26e14ffdd..b50473cb62 100644 --- a/components/lib/utils/DomHandler.js +++ b/components/lib/utils/DomHandler.js @@ -1214,4 +1214,26 @@ export default class DomHandler { // Seem the same return true; } + + static hasCSSAnimation(element) { + if (element) { + const style = getComputedStyle(element); + const animationDuration = parseFloat(style.getPropertyValue('animation-duration') || '0'); + + return animationDuration > 0; + } + + return false; + } + + static hasCSSTransition(element) { + if (element) { + const style = getComputedStyle(element); + const transitionDuration = parseFloat(style.getPropertyValue('transition-duration') || '0'); + + return transitionDuration > 0; + } + + return false; + } }