Merged in SW-2064-lightbox-updates (pull request #3347)
feat(SW-2064): Lightbox updates * chore(SW-2064): add opacity to not selected images * chore(SW-2064): set main image as the first image in thumbnail * chore(SW-2064): disable navigation buttons on first and last image * fix(SW-2064): use cx * Revert "chore(SW-2064): disable navigation buttons on first and last image" This reverts commit 9c5acd8a02b83740f35d1cfa88bfba6b006ba947. * refactor(SW-2064): create ImageCounter component * refactor(SW-2064) * chore(SW-2064): add enter keu down on main image Approved-by: Erik Tiekstra
This commit is contained in:
Matilda Landström
@@ -1,6 +1,6 @@
|
||||
"use client"
|
||||
import { AnimatePresence, motion } from "motion/react"
|
||||
import { useEffect, useState } from "react"
|
||||
import { useMemo, useState } from "react"
|
||||
import { Button as ButtonRAC } from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
@@ -13,8 +13,12 @@ import { cx } from "class-variance-authority"
|
||||
import { useMediaQuery } from "usehooks-ts"
|
||||
import { LightboxImage } from ".."
|
||||
import styles from "./gallery.module.css"
|
||||
import { ImageCounter } from "../../ImageCounter"
|
||||
import { animationVariants, useKeyboardNavigation } from "../util"
|
||||
import { ThumbnailImage } from "./ThumnailImage"
|
||||
import { useThumbnail } from "./useThumbNail"
|
||||
|
||||
type GalleryProps = {
|
||||
interface GalleryProps {
|
||||
images: LightboxImage[]
|
||||
onClose: () => void
|
||||
onSelectImage: (image: LightboxImage) => void
|
||||
@@ -23,7 +27,7 @@ type GalleryProps = {
|
||||
hideLabel?: boolean
|
||||
}
|
||||
|
||||
export default function Gallery({
|
||||
export function Gallery({
|
||||
images,
|
||||
onClose,
|
||||
onSelectImage,
|
||||
@@ -32,59 +36,34 @@ export default function Gallery({
|
||||
hideLabel,
|
||||
}: GalleryProps) {
|
||||
const intl = useIntl()
|
||||
const [animateLeft, setAnimateLeft] = useState(true)
|
||||
const mainImage = selectedImage || images[0]
|
||||
const mainImageIndex = images.findIndex((img) => img === mainImage)
|
||||
const [slideDirection, setSlideDirection] = useState<"left" | "right">("left")
|
||||
const isMobile = useMediaQuery("(max-width: 767px)")
|
||||
|
||||
function getThumbImages() {
|
||||
const thumbs = []
|
||||
for (let i = 1; i <= Math.min(5, images.length); i++) {
|
||||
const index = (mainImageIndex + i) % images.length
|
||||
thumbs.push(images[index])
|
||||
}
|
||||
return thumbs
|
||||
}
|
||||
const mainImage = selectedImage || images[0]
|
||||
const mainImageIndex = useMemo(
|
||||
() => images.findIndex((img) => img === mainImage),
|
||||
[images, mainImage]
|
||||
)
|
||||
|
||||
const thumbnail = useThumbnail({
|
||||
images: images,
|
||||
mainImageIdx: mainImageIndex,
|
||||
})
|
||||
|
||||
function handleNext() {
|
||||
setAnimateLeft(true)
|
||||
setSlideDirection("left")
|
||||
const nextIndex = (mainImageIndex + 1) % images.length
|
||||
onSelectImage(images[nextIndex])
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
setAnimateLeft(false)
|
||||
setSlideDirection("right")
|
||||
const prevIndex = (mainImageIndex - 1 + images.length) % images.length
|
||||
onSelectImage(images[prevIndex])
|
||||
}
|
||||
useKeyboardNavigation(handlePrev, handleNext)
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === "ArrowLeft") {
|
||||
handlePrev()
|
||||
} else if (e.key === "ArrowRight") {
|
||||
handleNext()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("keydown", handleKeyDown)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleKeyDown)
|
||||
}
|
||||
})
|
||||
|
||||
const variants = {
|
||||
initial: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? 300 : -300,
|
||||
}),
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? -300 : 300,
|
||||
}),
|
||||
} as const
|
||||
const hasPrevImage = thumbnail.previous !== undefined
|
||||
const hasNextImage = thumbnail.next !== undefined
|
||||
|
||||
return (
|
||||
<div className={styles.gallery}>
|
||||
@@ -110,12 +89,12 @@ export default function Gallery({
|
||||
</p>
|
||||
</Typography>
|
||||
<div className={styles.content}>
|
||||
<AnimatePresence initial={false} custom={animateLeft}>
|
||||
<AnimatePresence initial={false} custom={slideDirection}>
|
||||
<motion.div
|
||||
key={mainImage.src}
|
||||
className={styles.motionContainer}
|
||||
custom={animateLeft}
|
||||
variants={variants}
|
||||
custom={slideDirection}
|
||||
variants={animationVariants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
@@ -134,6 +113,11 @@ export default function Gallery({
|
||||
defaultMessage: "Open image",
|
||||
})}
|
||||
role="button"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
onImageClick()
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
@@ -157,36 +141,37 @@ export default function Gallery({
|
||||
})}
|
||||
iconName="arrow_forward"
|
||||
/>
|
||||
<ImageCounter
|
||||
number={`${mainImageIndex + 1} / ${images.length}`}
|
||||
className={styles.imageCounter}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.desktopThumbnailGrid}>
|
||||
<AnimatePresence initial={false}>
|
||||
{getThumbImages().map((image, index) => (
|
||||
<motion.div
|
||||
key={image.src}
|
||||
className={styles.thumbnailContainer}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -50 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
>
|
||||
<ButtonRAC
|
||||
className={styles.imageButton}
|
||||
onPress={() => onSelectImage(image)}
|
||||
aria-label={intl.formatMessage({
|
||||
id: "lightbox.openImage",
|
||||
defaultMessage: "Open image",
|
||||
})}
|
||||
>
|
||||
<Image
|
||||
src={image.src}
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="200px"
|
||||
className={styles.image}
|
||||
/>
|
||||
</ButtonRAC>
|
||||
</motion.div>
|
||||
))}
|
||||
{hasPrevImage && (
|
||||
<ThumbnailImage
|
||||
image={thumbnail.previous!}
|
||||
index={0}
|
||||
onSelect={onSelectImage}
|
||||
/>
|
||||
)}
|
||||
<span className={styles.thumbnail}>
|
||||
{thumbnail.images.map((image, index) => (
|
||||
<ThumbnailImage
|
||||
image={image}
|
||||
index={hasPrevImage ? index + 1 : index}
|
||||
onSelect={onSelectImage}
|
||||
isMainImage={mainImage === image}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
{hasNextImage && (
|
||||
<ThumbnailImage
|
||||
image={thumbnail.next!}
|
||||
index={6}
|
||||
onSelect={onSelectImage}
|
||||
/>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
@@ -196,7 +181,9 @@ export default function Gallery({
|
||||
{images.map((image, index) => (
|
||||
<motion.div
|
||||
key={image.src}
|
||||
className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ""}`}
|
||||
className={cx(styles.thumbnailContainer, {
|
||||
[styles.fullWidthImage]: index % 3 === 0,
|
||||
})}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
|
||||
Reference in New Issue
Block a user