37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import { useCallback, useEffect, useState, type RefObject } from 'react'
|
|
import { trackInlineImageLightboxOpened } from '../lib/productAnalytics'
|
|
import { getDoubleClickedImageTarget, type ImageLightboxTarget } from '../utils/imageLightboxTarget'
|
|
|
|
type UseImageLightboxArgs = {
|
|
containerRef: RefObject<HTMLDivElement | null>
|
|
}
|
|
|
|
type UseImageLightboxResult = {
|
|
image: ImageLightboxTarget | null
|
|
close: () => void
|
|
}
|
|
|
|
export function useImageLightbox({ containerRef }: UseImageLightboxArgs): UseImageLightboxResult {
|
|
const [image, setImage] = useState<ImageLightboxTarget | null>(null)
|
|
const close = useCallback(() => setImage(null), [])
|
|
|
|
useEffect(() => {
|
|
const container = containerRef.current
|
|
if (!container) return
|
|
|
|
const onDoubleClick = (event: MouseEvent) => {
|
|
const nextImage = getDoubleClickedImageTarget(event.target)
|
|
if (!nextImage) return
|
|
|
|
event.preventDefault()
|
|
setImage(nextImage)
|
|
trackInlineImageLightboxOpened()
|
|
}
|
|
|
|
container.addEventListener('dblclick', onDoubleClick, true)
|
|
return () => container.removeEventListener('dblclick', onDoubleClick, true)
|
|
}, [containerRef])
|
|
|
|
return { image, close }
|
|
}
|