cd59102ef4
feat(SW-3695): use svg icons instead of font icons * feat(icons): use svg instead of font icons * feat(icons): use webpack/svgr for inlined svgs. Now support for isFilled again * Merge master * Remove old font icon Approved-by: Joakim Jäderberg
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])
|
|
}
|