fc857ad58f
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
31 lines
828 B
TypeScript
31 lines
828 B
TypeScript
import { useCallback, useEffect } from 'react'
|
|
|
|
const ANIMATION_OFFSET = 300
|
|
|
|
export const animationVariants = {
|
|
initial: (animateLeft: boolean) => ({
|
|
opacity: 0,
|
|
x: animateLeft ? ANIMATION_OFFSET : -ANIMATION_OFFSET,
|
|
}),
|
|
animate: { opacity: 1, x: 0 },
|
|
exit: (animateLeft: boolean) => ({
|
|
opacity: 0,
|
|
x: animateLeft ? -ANIMATION_OFFSET : ANIMATION_OFFSET,
|
|
}),
|
|
} as const
|
|
|
|
export function useKeyboardNavigation(onPrev: () => void, onNext: () => void) {
|
|
const handleKeyDown = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (e.key === 'ArrowLeft') onPrev()
|
|
if (e.key === 'ArrowRight') onNext()
|
|
},
|
|
[onPrev, onNext]
|
|
)
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('keydown', handleKeyDown)
|
|
return () => window.removeEventListener('keydown', handleKeyDown)
|
|
}, [handleKeyDown])
|
|
}
|