import React from
"react"
;
import { useRef } from
"react"
;
import { motion, AnimatePresence } from
"framer-motion"
;
import { wrap } from
"@popmotion/popcorn"
;
const xOffset = 100;
const variants = {
enter: (direction) => ({
x: direction > 0 ? xOffset : -xOffset,
opacity: 0
}),
active: {
x: 0,
opacity: 1,
transition: { delay: 0.2 }
},
exit: (direction) => ({
x: direction > 0 ? -xOffset : xOffset,
opacity: 0
})
};
const pages = [0, 1, 2, 3, 4];
const PageSlider = ({ currentPage, setPage, direction }) => {
const hasPaginated = useRef(
false
);
function
detectPaginationGesture(e, { offset }) {
if
(hasPaginated.current)
return
;
let newPage = currentPage;
const threshold = xOffset / 2;
if
(offset.x < -threshold) {
newPage = currentPage + 1;
}
else
if
(offset.x > threshold) {
newPage = currentPage - 1;
}
if
(newPage !== currentPage) {
hasPaginated.current =
true
;
newPage = wrap(0, pages.length, newPage);
setPage(newPage, offset.x < 0 ? 1 : -1);
}
}
return
(
<div className=
"slider-container"
>
<AnimatePresence
custom={direction}>
<motion.div
key={currentPage}
className=
"slide"
data-page={currentPage}
variants={variants}
initial=
"enter"
animate=
"active"
exit=
"exit"
drag=
"x"
onDrag={detectPaginationGesture}
onDragStart={() => (hasPaginated.current =
false
)}
onDragEnd={() => (hasPaginated.current =
true
)}
dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
custom={direction}
/>
</AnimatePresence>
</div>
);
};
export
default
PageSlider;