import { Immutable } from "helpers/types"; import { Dispatch, SetStateAction } from "react"; import Hotkeys from "react-hot-keys"; import { useSwipeable } from "react-swipeable"; import { Img } from "./Img"; import { Button } from "./Inputs/Button"; import { Popup } from "./Popup"; interface Props { setState: | Dispatch> | Dispatch>; state: boolean; images: string[]; index: number; setIndex: Dispatch>; } export function LightBox(props: Immutable): JSX.Element { const { state, setState, images, index, setIndex } = props; function handlePrevious() { if (index > 0) setIndex(index - 1); } function handleNext() { if (index < images.length - 1) setIndex(index + 1); } const sensibilitySwipe = 0.5; const handlers = useSwipeable({ onSwipedLeft: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; handleNext(); }, onSwipedRight: (SwipeEventData) => { if (SwipeEventData.velocity < sensibilitySwipe) return; handlePrevious(); }, }); return ( <> {state && ( { if (keyName === "left") { handlePrevious(); } else { handleNext(); } }} >
{index > 0 && ( )}
{index < images.length - 1 && ( )}
)} ); }