"use client"; import { useControllableState } from "@radix-ui/react-use-controllable-state"; import { Portal } from "radix-ui"; import type { ButtonHTMLAttributes, Dispatch, HTMLAttributes, MouseEvent, MouseEventHandler, ReactElement, SetStateAction, } from "react"; import { Children, cloneElement, createContext, useCallback, useContext, useEffect, useState, } from "react"; import { cn } from "@/lib/utils"; type DialogStackContextType = { activeIndex: number; setActiveIndex: Dispatch>; totalDialogs: number; setTotalDialogs: Dispatch>; isOpen: boolean; setIsOpen: Dispatch>; clickable: boolean; }; const DialogStackContext = createContext({ activeIndex: 0, setActiveIndex: () => {}, totalDialogs: 0, setTotalDialogs: () => {}, isOpen: false, setIsOpen: () => {}, clickable: false, }); type DialogStackChildProps = { index?: number; }; export type DialogStackProps = HTMLAttributes & { open?: boolean; clickable?: boolean; onOpenChange?: (open: boolean) => void; defaultOpen?: boolean; }; export const DialogStack = ({ children, className, open, defaultOpen = false, onOpenChange, clickable = false, ...props }: DialogStackProps) => { const [activeIndex, setActiveIndex] = useState(0); const [isOpen, setIsOpen] = useControllableState({ defaultProp: defaultOpen, prop: open, onChange: onOpenChange, }); useEffect(() => { if (onOpenChange && isOpen !== undefined) { onOpenChange(isOpen); } }, [isOpen, onOpenChange]); return ( {}, isOpen: isOpen ?? false, setIsOpen: (value) => setIsOpen(Boolean(value)), clickable, }} >

{children}

); }; export type DialogStackTriggerProps = ButtonHTMLAttributes & { asChild?: boolean; }; export const DialogStackTrigger = ({ children, className, onClick, asChild, ...props }: DialogStackTriggerProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackTrigger must be used within a DialogStack"); } const handleClick: MouseEventHandler = (e) => { context.setIsOpen(true); onClick?.(e); }; if (asChild && children) { const child = children as ReactElement<{ onClick: MouseEventHandler; className?: string; }>; return cloneElement(child, { onClick: (e: MouseEvent) => { handleClick(e); child.props.onClick?.(e); }, className: cn(className, child.props.className), ...props, }); } return ( ); }; export type DialogStackOverlayProps = HTMLAttributes; export const DialogStackOverlay = ({ className, ...props }: DialogStackOverlayProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackOverlay must be used within a DialogStack"); } const handleClick = useCallback(() => { context.setIsOpen(false); }, [context.setIsOpen]); if (!context.isOpen) { return null; } return ( // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable overlay" // biome-ignore lint/a11y/useKeyWithClickEvents: "This is a clickable overlay"

); }; export type DialogStackBodyProps = HTMLAttributes & { children: | ReactElement[] | ReactElement; }; export const DialogStackBody = ({ children, className, ...props }: DialogStackBodyProps) => { const context = useContext(DialogStackContext); const [totalDialogs, setTotalDialogs] = useState(Children.count(children)); if (!context) { throw new Error("DialogStackBody must be used within a DialogStack"); } if (!context.isOpen) { return null; } return (

{Children.map(children, (child, index) => { const childElement = child as ReactElement<{ index: number; onClick: MouseEventHandler; className?: string; }>; return cloneElement(childElement, { ...childElement.props, index, }); })}

); }; export type DialogStackContentProps = HTMLAttributes & { index?: number; offset?: number; }; export const DialogStackContent = ({ children, className, index = 0, offset = 10, ...props }: DialogStackContentProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackContent must be used within a DialogStack"); } if (!context.isOpen) { return null; } const handleClick = () => { if (context.clickable && context.activeIndex > index) { context.setActiveIndex(index ?? 0); } }; const distanceFromActive = index - context.activeIndex; const translateY = distanceFromActive < 0 ? `-${Math.abs(distanceFromActive) * offset}px` : `${Math.abs(distanceFromActive) * offset}px`; return ( // biome-ignore lint/a11y/noStaticElementInteractions: "This is a clickable dialog" // biome-ignore lint/a11y/useKeyWithClickEvents: "This is a clickable dialog"

0 ? 0 : 1, cursor: context.clickable && context.activeIndex > index ? "pointer" : "default", }} {...props} >

{children}

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

{children}

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

{children}

); export type DialogStackHeaderProps = HTMLAttributes; export const DialogStackHeader = ({ className, ...props }: DialogStackHeaderProps) => (

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

{children}

); export type DialogStackNextProps = ButtonHTMLAttributes & { asChild?: boolean; }; export const DialogStackNext = ({ children, className, asChild, ...props }: DialogStackNextProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackNext must be used within a DialogStack"); } const handleNext = () => { if (context.activeIndex < context.totalDialogs - 1) { context.setActiveIndex(context.activeIndex + 1); } }; if (asChild && children) { const child = children as ReactElement<{ onClick: MouseEventHandler; className?: string; }>; return cloneElement(child, { onClick: (e: MouseEvent) => { handleNext(); child.props.onClick?.(e); }, className: cn(className, child.props.className), ...props, }); } return ( ); }; export type DialogStackPreviousProps = ButtonHTMLAttributes & { asChild?: boolean; }; export const DialogStackPrevious = ({ children, className, asChild, ...props }: DialogStackPreviousProps) => { const context = useContext(DialogStackContext); if (!context) { throw new Error("DialogStackPrevious must be used within a DialogStack"); } const handlePrevious = () => { if (context.activeIndex > 0) { context.setActiveIndex(context.activeIndex - 1); } }; if (asChild && children) { const child = children as ReactElement<{ onClick: MouseEventHandler; className?: string; }>; return cloneElement(child, { onClick: (e: MouseEvent) => { handlePrevious(); child.props.onClick?.(e); }, className: cn(className, child.props.className), ...props, }); } return ( ); };

dialog-stack

Instalação

Dependências