scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-2831-image-gallery-history (pull request #2155)

Browse Source 
fix(SW-2831): checking isOpen before rendering Lightbox component to avoid spamming the window history

* fix(SW-2831): checking isOpen before rendering Lightbox component to avoid spamming the window history


Approved-by: Linus Flood
This commit is contained in:
Erik Tiekstra
2025-05-20 07:38:13 +00:00
committed by Linus Flood
parent f4ef5a342f
commit f60d07fd9e
5 changed files with 71 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
apps/scandic-web/components/ContentType/DestinationPage/TopImages/index.tsx
View File

@@ -69,18 +69,19 @@ export default function TopImages({ images, destinationName }: TopImageProps) {
defaultMessage: "See all photos",
})}
</Button>
<Lightbox
images={lightboxImages}
dialogTitle={intl.formatMessage(
{
defaultMessage: "{title} - Image gallery",
},
{ title: destinationName }
)}
isOpen={lightboxState.open}
activeIndex={lightboxState.activeIndex}
onClose={() => setLightboxState({ open: false, activeIndex: 0 })}
/>
{lightboxState.open ? (
<Lightbox
images={lightboxImages}
dialogTitle={intl.formatMessage(
{
defaultMessage: "{title} - Image gallery",
},
{ title: destinationName }
)}
activeIndex={lightboxState.activeIndex}
onClose={() => setLightboxState({ open: false, activeIndex: 0 })}
/>
) : null}
</>
)}
</div>

27
apps/scandic-web/components/ContentType/HotelPage/PreviewImages/index.tsx
View File

@@ -71,18 +71,21 @@ export default function PreviewImages({
defaultMessage: "See all photos",
})}
</Button>
<Lightbox
images={lightboxImages}
dialogTitle={intl.formatMessage(
{
defaultMessage: "{title} - Image gallery",
},
{ title: hotelName }
)}
isOpen={lightboxState.isOpen}
activeIndex={lightboxState.activeIndex}
onClose={() => setLightboxState({ activeIndex: 0, isOpen: false })}
/>
{lightboxState.isOpen ? (
<Lightbox
images={lightboxImages}
dialogTitle={intl.formatMessage(
{
defaultMessage: "{title} - Image gallery",
},
{ title: hotelName }
)}
activeIndex={lightboxState.activeIndex}
onClose={() =>
setLightboxState({ activeIndex: 0, isOpen: false })
}
/>
) : null}
</>
)}
</div>

15
apps/scandic-web/components/ImageGallery/index.tsx
View File

@@ -58,13 +58,14 @@ function ImageGallery({
})}
/>
</div>
<Lightbox
images={images}
dialogTitle={title}
isOpen={isOpen}
onClose={() => setIsOpen(false)}
hideLabel={hideLabel}
/>
{isOpen ? (
<Lightbox
images={images}
dialogTitle={title}
onClose={() => setIsOpen(false)}
hideLabel={hideLabel}
/>
) : null}
</>
)
}

79
apps/scandic-web/components/Lightbox/index.tsx
View File

@@ -14,19 +14,12 @@ export default function Lightbox({
images,
dialogTitle,
onClose,
isOpen,
activeIndex = 0,
hideLabel,
}: LightboxProps) {
const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
const [isFullView, setIsFullView] = useState(false)
useEffect(() => {
if (isOpen) {
setIsFullView(false)
}
}, [isOpen])
useEffect(() => {
setSelectedImageIndex(activeIndex)
}, [activeIndex])
@@ -62,7 +55,7 @@ export default function Lightbox({
return (
<ModalOverlay
isOpen={isOpen}
isOpen={true}
onOpenChange={handleClose}
className={styles.overlay}
isDismissable
@@ -70,42 +63,40 @@ export default function Lightbox({
<Modal>
<AnimatePresence>
<Dialog aria-label={dialogTitle}>
{isOpen && (
<motion.div
className={`${styles.content} ${
isFullView ? styles.fullViewContent : styles.galleryContent
}`}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.2 }}
>
{isFullView ? (
<FullView
image={images[selectedImageIndex]}
onClose={() => setIsFullView(false)}
onNext={handleNext}
onPrev={handlePrev}
currentIndex={selectedImageIndex}
totalImages={images.length}
hideLabel={hideLabel}
/>
) : (
<Gallery
images={images}
onClose={handleClose}
onSelectImage={(image) => {
setSelectedImageIndex(
images.findIndex((img) => img === image)
)
}}
onImageClick={() => setIsFullView(true)}
selectedImage={images[selectedImageIndex]}
hideLabel={hideLabel}
/>
)}
</motion.div>
)}
<motion.div
className={`${styles.content} ${
isFullView ? styles.fullViewContent : styles.galleryContent
}`}
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ duration: 0.2 }}
>
{isFullView ? (
<FullView
image={images[selectedImageIndex]}
onClose={() => setIsFullView(false)}
onNext={handleNext}
onPrev={handlePrev}
currentIndex={selectedImageIndex}
totalImages={images.length}
hideLabel={hideLabel}
/>
) : (
<Gallery
images={images}
onClose={handleClose}
onSelectImage={(image) => {
setSelectedImageIndex(
images.findIndex((img) => img === image)
)
}}
onImageClick={() => setIsFullView(true)}
selectedImage={images[selectedImageIndex]}
hideLabel={hideLabel}
/>
)}
</motion.div>
</Dialog>
</AnimatePresence>
</Modal>

1
apps/scandic-web/types/components/lightbox/lightbox.ts
View File

@@ -4,7 +4,6 @@ export interface LightboxProps {
images: GalleryImage[]
dialogTitle: string /* Accessible title for dialog screen readers */
onClose: () => void
isOpen: boolean
activeIndex?: number
hideLabel?: boolean
}