"use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { motion, type PanInfo, useMotionValue, useTransform, } from "motion/react"; import { Children, cloneElement, type HTMLAttributes, type ReactElement, useCallback, useEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; export type DeckProps = HTMLAttributes; export const Deck = ({ className, ...props }: DeckProps) => (

); export type DeckCardsProps = HTMLAttributes & { onSwipe?: (index: number, direction: "left" | "right") => void; onSwipeEnd?: (index: number, direction: "left" | "right") => void; threshold?: number; stackSize?: number; perspective?: number; scale?: number; currentIndex?: number; defaultCurrentIndex?: number; onCurrentIndexChange?: (index: number) => void; animateOnIndexChange?: boolean; indexChangeDirection?: "left" | "right"; }; export const DeckCards = ({ children, className, onSwipe, onSwipeEnd, threshold = 150, stackSize = 3, perspective = 1000, scale = 0.05, currentIndex: currentIndexProp, defaultCurrentIndex = 0, onCurrentIndexChange, animateOnIndexChange = true, indexChangeDirection = "left", ...props }: DeckCardsProps) => { const childrenArray = Children.toArray(children) as ReactElement[]; const [currentIndex, setCurrentIndex] = useControllableState({ prop: currentIndexProp, defaultProp: defaultCurrentIndex, onChange: onCurrentIndexChange, }); const [exitDirection, setExitDirection] = useState<"left" | "right" | null>( null ); const [displayIndex, setDisplayIndex] = useState(currentIndex); const isInternalChangeRef = useRef(false); const prevIndexRef = useRef(currentIndex); // Detect external currentIndex changes and trigger animation useEffect(() => { const prevIndex = prevIndexRef.current; // Skip initial mount and internal changes if (prevIndex === currentIndex || isInternalChangeRef.current) { isInternalChangeRef.current = false; prevIndexRef.current = currentIndex; setDisplayIndex(currentIndex); return; } // Only animate if the option is enabled and we have cards to show if (animateOnIndexChange && prevIndex < childrenArray.length) { setExitDirection(indexChangeDirection); // Update display index after animation completes setTimeout(() => { setExitDirection(null); setDisplayIndex(currentIndex); }, 300); } else { // No animation, update display index immediately setDisplayIndex(currentIndex); } prevIndexRef.current = currentIndex; }, [ currentIndex, animateOnIndexChange, indexChangeDirection, childrenArray.length, ]); const handleSwipe = useCallback( (direction: "left" | "right") => { if (displayIndex >= childrenArray.length) { return; } setExitDirection(direction); if (direction === "left") { onSwipe?.(displayIndex, "left"); } else { onSwipe?.(displayIndex, "right"); } onSwipeEnd?.(displayIndex, direction); // Move to next card after animation setTimeout(() => { isInternalChangeRef.current = true; const newIndex = displayIndex + 1; setCurrentIndex(newIndex); setDisplayIndex(newIndex); setExitDirection(null); }, 300); }, [displayIndex, childrenArray.length, onSwipe, onSwipeEnd, setCurrentIndex] ); const visibleCards = childrenArray.slice( displayIndex, displayIndex + stackSize ); if (displayIndex >= childrenArray.length) { return null; } return (

{visibleCards.map((child, index) => { const isTopCard = !index; const zIndex = stackSize - index; const scaleValue = 1 - index * scale; const yOffset = index * 4; const cardKey = `${displayIndex}-${child.key ?? index}`; if (isTopCard) { return ( {child} ); } const nextCardScale = index === 1 && exitDirection ? 1 : scaleValue; const nextCardY = index === 1 && exitDirection ? 0 : yOffset; return ( {child} ); })}

); }; type DeckCardProps = { children: ReactElement; onSwipe: (direction: "left" | "right") => void; threshold: number; style?: object; exitDirection: "left" | "right" | null; }; const DeckCard = ({ children, onSwipe, threshold, style, exitDirection, }: DeckCardProps) => { const x = useMotionValue(0); const rotate = useTransform(x, [-200, 200], [-25, 25]); const opacity = useTransform( x, [-200, -threshold, 0, threshold, 200], [0, 1, 1, 1, 0] ); const handleDragEnd = (_: unknown, info: PanInfo) => { const swipeThreshold = threshold; if (Math.abs(info.offset.x) > swipeThreshold) { const direction = info.offset.x > 0 ? "right" : "left"; onSwipe(direction); } }; let exitX = 0; if (exitDirection === "left") { exitX = -500; } else if (exitDirection === "right") { exitX = 500; } const castedChildren = children as ReactElement< HTMLAttributes >; return ( {cloneElement(castedChildren, { className: cn( "h-full w-full select-none rounded-lg shadow-lg", castedChildren.props.className ), })} ); }; export type DeckItemProps = HTMLAttributes; export const DeckItem = ({ className, ...props }: DeckItemProps) => (

); export type DeckEmptyProps = HTMLAttributes; export const DeckEmpty = ({ children, className, ...props }: HTMLAttributes) => (

{children ??

No more cards

}

);

deck

Instalação

Dependências