fix(image-lightbox): fix closing transition triggering multiple times

lumapps · Oct 9, 2024 · f1e7683 · f1e7683
1 parent f607a1a
commit f1e7683
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   `ImageLightbox`: fix closing transition triggering multiple times.
+
 ## [3.9.2][] - 2024-10-04
 
 ### Fixed

diff --git a/packages/lumx-react/package.json b/packages/lumx-react/package.json
@@ -39,6 +39,7 @@
         "@testing-library/user-event": "^14.4.3",
         "@types/body-scroll-lock": "^2.6.1",
         "@types/classnames": "^2.2.9",
+        "@types/dom-view-transitions": "^1.0.5",
         "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
         "@types/react": "^17.0.2",

diff --git a/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx b/packages/lumx-react/src/components/image-lightbox/ImageLightbox.tsx
@@ -55,6 +55,8 @@ const Inner: Comp<ImageLightboxProps, HTMLDivElement> = forwardRef((props, ref)
             closeButtonProps={closeButtonProps}
             focusElement={currentPaginationItemRef}
             {...forwardedProps}
+            // Disable the close on click away as we want a custom one here
+            preventAutoClose
         >
             <ClickAwayProvider childrenRefs={clickAwayChildrenRefs} callback={onClickAway}>
                 <ImageSlideshow

diff --git a/packages/lumx-react/src/components/image-lightbox/useImageLightbox.tsx b/packages/lumx-react/src/components/image-lightbox/useImageLightbox.tsx
@@ -109,7 +109,7 @@ export function useImageLightbox<P extends Partial<ImageLightboxProps>>(
                         isOpen: true,
                         onClose: () => {
                             close();
-                            prevProps?.onClose?.();
+                            propsRef.current?.onClose?.();
                         },
                         images,
                         activeImageIndex: activeImageIndex || 0,

diff --git a/packages/lumx-react/src/utils/DOM/startViewTransition.ts b/packages/lumx-react/src/utils/DOM/startViewTransition.ts
@@ -5,9 +5,21 @@ import { MaybeElementOrRef } from '@lumx/react/utils/type';
 import { unref } from '../react/unref';
 import { getPrefersReducedMotion } from '../browser/getPrefersReducedMotion';
 
-function setTransitionViewName(elementRef: MaybeElementOrRef<HTMLElement>, name: string | null | undefined) {
-    const element = unref(elementRef) as any;
-    if (element) element.style.viewTransitionName = name;
+function setupViewTransitionName(elementRef: MaybeElementOrRef<HTMLElement>, name: string) {
+    let originalName: string | null = null;
+    return {
+        set() {
+            const element = unref(elementRef);
+            if (!element) return;
+            originalName = element.style.viewTransitionName;
+            element.style.viewTransitionName = name;
+        },
+        unset() {
+            const element = unref(elementRef);
+            if (!element || originalName === null) return;
+            element.style.viewTransitionName = originalName;
+        },
+    };
 }
 
 /**
@@ -37,20 +49,20 @@ export async function startViewTransition({
         return;
     }
 
-    // Set transition name on source element
-    setTransitionViewName(viewTransitionName.source, viewTransitionName.name);
+    // Setup set/unset transition name on source & target
+    const sourceTransitionName = setupViewTransitionName(viewTransitionName.source, viewTransitionName.name);
+    const targetTransitionName = setupViewTransitionName(viewTransitionName.target, viewTransitionName.name);
+
+    sourceTransitionName.set();
 
     // Start view transition, apply changes & flush to DOM
     await start(() => {
-        // Un-set transition name on source element
-        setTransitionViewName(viewTransitionName.source, null);
+        sourceTransitionName.unset();
 
         flushSync(changes);
 
-        // Set transition name on target element
-        setTransitionViewName(viewTransitionName.target, viewTransitionName.name);
+        targetTransitionName.set();
     }).updateCallbackDone;
 
-    // Un-set transition name on target element
-    setTransitionViewName(viewTransitionName.target, null);
+    targetTransitionName.unset();
 }
diff --git a/yarn.lock b/yarn.lock
@@ -3869,6 +3869,7 @@ __metadata:
     "@testing-library/user-event": ^14.4.3
     "@types/body-scroll-lock": ^2.6.1
     "@types/classnames": ^2.2.9
+    "@types/dom-view-transitions": ^1.0.5
     "@types/jest": ^29.2.1
     "@types/lodash": ^4.14.149
     "@types/react": ^17.0.2
@@ -6067,6 +6068,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/dom-view-transitions@npm:^1.0.5":
+  version: 1.0.5
+  resolution: "@types/dom-view-transitions@npm:1.0.5"
+  checksum: 4190915a3d4c63d4c590d5e64d14ca1d1140496a75adb5af64b0ef13e075cc7676bff926f5c5c60305c4f6d46965a196c119a7960cbe0ff40e95e17e82334c22
+  languageName: node
+  linkType: hard
+
 "@types/ejs@npm:^3.1.1":
   version: 3.1.2
   resolution: "@types/ejs@npm:3.1.2"