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

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>