@coinmeca/ui
Version:
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
61 lines • 2.98 kB
JSX
"use client";
import { AnimatePresence, motion } from "motion/react";
import { memo, useEffect, useState } from "react";
import BG from "../../../components/layouts/bg/BG";
import { useSwipe } from "../../../hooks";
import { Style } from "./Slide.styled";
const Slide = (props) => {
const [slideNo, setSlideNo] = useState(props?.slideNo || 0);
const swipe = useSwipe(props?.swipe && {
...(typeof props?.swipe === "object" && props?.swipe),
index: slideNo,
length: props?.slides?.length,
onSwipe: (e, i) => setSlideNo(i),
});
const timer = typeof props?.timer !== "number" ? 0 : props?.timer;
const padding = props?.padding || 4;
const scale = props?.scale || 1;
const vertical = props?.align?.vertical || "center";
const horizon = props?.align?.horizon || "center";
useEffect(() => {
if (typeof props?.slideNo === "number" && props?.slideNo !== slideNo)
setSlideNo(props?.slideNo);
}, [props?.slideNo]);
useEffect(() => {
if (timer > 0) {
let index = 0;
const change = setInterval(() => {
if (index === props?.slides.length - 1)
index = 0;
else
index++;
if (typeof props?.event === "function")
props?.event(index);
setSlideNo(index);
}, timer);
return () => clearInterval(change);
}
}, [props?.slides, props?.event, timer]);
return (<Style style={props?.style} $scale={scale} $timer={timer} $padding={padding} $nav={props?.nav} $vertical={vertical} $horizon={horizon} data-align={props?.align?.horizon}>
<AnimatePresence initial={false} custom={swipe?.direction}>
{props?.slides && props?.slides?.length > 0 && (<>
<div>
{props?.slides?.map((slide, i) => (<div key={i} data-active={slide?.active || slideNo === i} onClick={(e) => slide?.onClick && slide?.onClick(e)}>
{slide?.background && <BG {...slide?.background}/>}
<motion.div {...swipe} data-row={props?.align?.horizon} style={slide?.style} variants={undefined}>
{/* <motion.div {...swipe} data-row={props?.align?.horizon} style={slide?.style} variants={undefined}> */}
{slide.children}
</motion.div>
</div>))}
</div>
<div>
{props?.slides.map((_, i) => (<div key={i} data-active={slideNo === i} onClick={() => {
setSlideNo(i);
}}/>))}
</div>
</>)}
</AnimatePresence>
</Style>);
};
export default memo(Slide);
//# sourceMappingURL=Slide.jsx.map