e20f2e4f7d
fix(SW-2064): fix next image idx * fix(SW-2064): fix next image idx Approved-by: Anton Gunnarsson
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { useMemo } from "react"
|
|
import { LightboxImage } from ".."
|
|
|
|
export const THUMBNAIL_WINDOW = 5
|
|
export const THUMBNAIL_OFFSET = Math.ceil(THUMBNAIL_WINDOW / 2)
|
|
|
|
interface useThumbnailProps {
|
|
images: LightboxImage[]
|
|
mainImageIdx: number
|
|
}
|
|
/*
|
|
* Keep the main image in the center of the thumbnail, unless when it's one of the first or the last pictures.
|
|
*/
|
|
export function useThumbnail({ images, mainImageIdx }: useThumbnailProps) {
|
|
return useMemo(() => {
|
|
if (mainImageIdx < THUMBNAIL_OFFSET) {
|
|
return {
|
|
images: images.slice(0, THUMBNAIL_WINDOW),
|
|
next: images[THUMBNAIL_WINDOW],
|
|
}
|
|
}
|
|
if (mainImageIdx >= images.length - THUMBNAIL_OFFSET) {
|
|
return {
|
|
previous: images[images.length - THUMBNAIL_WINDOW - 1],
|
|
images: images.slice(images.length - THUMBNAIL_WINDOW, images.length),
|
|
}
|
|
}
|
|
return {
|
|
previous: images[mainImageIdx - THUMBNAIL_OFFSET],
|
|
images: images.slice(
|
|
mainImageIdx - THUMBNAIL_OFFSET + 1,
|
|
mainImageIdx + THUMBNAIL_OFFSET
|
|
),
|
|
next: images[mainImageIdx + THUMBNAIL_OFFSET],
|
|
}
|
|
}, [images, mainImageIdx])
|
|
}
|