106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
"use client"
|
|
import { AnimatePresence, motion } from "motion/react"
|
|
import { useEffect, useState } from "react"
|
|
import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
|
|
|
import FullView from "./FullView"
|
|
import Gallery from "./Gallery"
|
|
|
|
import styles from "./lightbox.module.css"
|
|
|
|
import type { LightboxProps } from "@/types/components/lightbox/lightbox"
|
|
|
|
export default function Lightbox({
|
|
images,
|
|
dialogTitle,
|
|
onClose,
|
|
activeIndex = 0,
|
|
hideLabel,
|
|
}: LightboxProps) {
|
|
const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
|
|
const [isFullView, setIsFullView] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setSelectedImageIndex(activeIndex)
|
|
}, [activeIndex])
|
|
|
|
function handleClose() {
|
|
setSelectedImageIndex(0)
|
|
onClose()
|
|
}
|
|
|
|
function handleNext() {
|
|
setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
|
|
}
|
|
|
|
function handlePrev() {
|
|
setSelectedImageIndex(
|
|
(prevIndex) => (prevIndex - 1 + images.length) % images.length
|
|
)
|
|
}
|
|
|
|
useEffect(() => {
|
|
function handlePopState() {
|
|
handleClose()
|
|
}
|
|
|
|
window.history.pushState(null, "", window.location.href)
|
|
window.addEventListener("popstate", handlePopState)
|
|
|
|
return () => {
|
|
window.removeEventListener("popstate", handlePopState)
|
|
}
|
|
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
|
}, [])
|
|
|
|
return (
|
|
<ModalOverlay
|
|
isOpen={true}
|
|
onOpenChange={handleClose}
|
|
className={styles.overlay}
|
|
isDismissable
|
|
>
|
|
<Modal>
|
|
<AnimatePresence>
|
|
<Dialog aria-label={dialogTitle}>
|
|
<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>
|
|
</ModalOverlay>
|
|
)
|
|
}
|