"use client"; import { Loader2, Save } from "lucide-react"; import { AnimatePresence, easeOut, motion, useAnimation } from "motion/react"; import { Button } from "@/components/ui/button"; import { useState, useEffect, useCallback, useMemo, memo } from "react"; import { cn } from "@/lib/utils"; import React from "react"; const UnsavePopupDescription = memo( ({ children }: { children: React.ReactNode }) => { return

{children}

; } ); UnsavePopupDescription.displayName = "UnsavePopupDescription"; const UnsavePopupAction = memo( ({ children, isLoading, onClick, }: { children: React.ReactNode; isLoading?: boolean; onClick?: () => Promise; }) => { return ( ); } ); UnsavePopupAction.displayName = "UnsavePopupAction"; const UnsavePopupDismiss = memo( ({ children, onClick, }: { children: React.ReactNode; onClick?: () => void; }) => { return ( ); } ); UnsavePopupDismiss.displayName = "UnsavePopupDismiss"; // Main component const UnsavePopup = memo(function UnsavePopup({ children, onSave, onReset, shouldBlockFn, show, className, }: { children: React.ReactNode; className?: string; onSave?: () => Promise; onReset?: () => void; shouldBlockFn?: () => boolean; show: boolean; }) { const controls = useAnimation(); const [isLoading, setIsLoading] = useState(false); const shakeAnimation = useCallback( () => ({ x: [0, -8, 12, -15, 8, -10, 5, -3, 2, -1, 0], y: [0, 4, -9, 6, -12, 8, -3, 5, -2, 1, 0], filter: [ "blur(0px)", "blur(2px)", "blur(2px)", "blur(3px)", "blur(2px)", "blur(2px)", "blur(1px)", "blur(2px)", "blur(1px)", "blur(1px)", "blur(0px)", ], transition: { duration: 0.4, ease: easeOut, }, }), [] ); const triggerShake = useCallback(async () => { await controls.start(shakeAnimation()); }, [controls, shakeAnimation]); const handleSave = useCallback(async () => { setIsLoading(true); await onSave?.(); setIsLoading(false); }, [onSave]); const handleReset = useCallback(() => { onReset?.(); }, [onReset]); const { hasCompoundComponents, hasValidComponents } = useMemo(() => { const childrenArray = React.Children.toArray(children); const hasCompound = childrenArray.some( (child) => React.isValidElement(child) && (child.type === UnsavePopupDescription || child.type === UnsavePopupAction || child.type === UnsavePopupDismiss) ); if (!hasCompound) { return { hasCompoundComponents: false, hasValidComponents: true }; } const hasDescription = childrenArray.some( (child) => React.isValidElement(child) && child.type === UnsavePopupDescription ); const hasAction = childrenArray.some( (child) => React.isValidElement(child) && child.type === UnsavePopupAction ); const hasDismiss = childrenArray.some( (child) => React.isValidElement(child) && child.type === UnsavePopupDismiss ); return { hasCompoundComponents: true, hasValidComponents: hasDescription && hasAction && hasDismiss, }; }, [children]); useEffect(() => { if (hasCompoundComponents && !hasValidComponents) { throw new Error( cn( "When using UnsavePopupDescription, UnsavePopupAction, or UnsavePopupDismiss, ", "you must use all three components together. Check out the docs for more info." ) ); } }, [hasCompoundComponents, hasValidComponents]); const defaultButtons = useCallback( () => (

), [isLoading, handleReset, handleSave] ); useEffect(() => { if (shouldBlockFn && shouldBlockFn()) { triggerShake(); } }, [shouldBlockFn, triggerShake]); return ( {show && ( {hasCompoundComponents ? ( children ) : ( <>

{children}

{defaultButtons()} )} )} ); }); UnsavePopup.displayName = "UnsavePopup"; export { UnsavePopup, UnsavePopupDescription, UnsavePopupAction, UnsavePopupDismiss, };