diff --git a/src/components/wrappers/common/button/button-with-confirm.tsx b/src/components/wrappers/common/button/button-with-confirm.tsx index 5a820042..7b5a43b9 100644 --- a/src/components/wrappers/common/button/button-with-confirm.tsx +++ b/src/components/wrappers/common/button/button-with-confirm.tsx @@ -1,161 +1,198 @@ -"use client" -import {Button, ButtonVariantsProps} from "@/components/ui/button"; -import {ReactNode, useState} from "react"; -import {Loader2} from "lucide-react"; -import {Popover, PopoverContent, PopoverTrigger} from "@/components/ui/popover"; -import {cn} from "@/lib/utils"; -import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip"; +"use client"; +import { Button, ButtonVariantsProps } from "@/components/ui/button"; +import { ReactNode, useState } from "react"; +import { Loader2 } from "lucide-react"; +import { + Popover, + PopoverContent, + PopoverTrigger, +} from "@/components/ui/popover"; +import { cn } from "@/lib/utils"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; export type ButtonWithConfirmProps = { - title: string; - description: string; - button?: { - main: { - className?: string; - type?: "button" | "submit" | "reset" | undefined; - text?: string; - icon?: any; - variant?: ButtonVariantsProps["variant"]; - size?: ButtonVariantsProps["size"]; - disabled?: boolean; - tooltipText?: string; - }; - confirm: { - className?: string; - text: string; - icon?: any; - variant?: ButtonVariantsProps["variant"]; - size?: ButtonVariantsProps["size"]; - onClick?: () => void; - }; - cancel: { - className?: string; - text: string; - icon?: any; - variant?: ButtonVariantsProps["variant"]; - size?: ButtonVariantsProps["size"]; - onClick?: () => void; - }; + title: string; + description: string; + button?: { + main: { + className?: string; + type?: "button" | "submit" | "reset" | undefined; + text?: string; + icon?: any; + variant?: ButtonVariantsProps["variant"]; + size?: ButtonVariantsProps["size"]; + disabled?: boolean; + tooltipText?: string; }; - children?: ReactNode; - onConfirm?: (e: React.MouseEvent) => void; - onCancel?: (e: React.MouseEvent) => void; - confirmButtonText?: string; - cancelButtonText?: string; - isPending?: boolean; + confirm: { + className?: string; + text: string; + icon?: any; + variant?: ButtonVariantsProps["variant"]; + size?: ButtonVariantsProps["size"]; + onClick?: () => void; + }; + cancel: { + className?: string; + text: string; + icon?: any; + variant?: ButtonVariantsProps["variant"]; + size?: ButtonVariantsProps["size"]; + onClick?: () => void; + }; + }; + children?: ReactNode; + onConfirm?: (e: React.MouseEvent) => void; + onCancel?: (e: React.MouseEvent) => void; + confirmButtonText?: string; + cancelButtonText?: string; + isPending?: boolean; }; - export const ButtonWithConfirm = (props: ButtonWithConfirmProps) => { - const [isConfirming, setIsConfirming] = useState(false); + const [isConfirming, setIsConfirming] = useState(false); - const isLegacy = !!props.button; - const isDisabled = isLegacy ? !!props.button?.main.disabled : false; + const isLegacy = !!props.button; + const isDisabled = isLegacy ? !!props.button?.main.disabled : false; - const handleConfirm = (e: React.MouseEvent) => { + const handleConfirm = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + if (isLegacy) { + props.button?.confirm.onClick?.(); + } else { + props.onConfirm?.(e); + } + setIsConfirming(false); + }; + + const handleCancel = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + if (isLegacy) { + props.button?.cancel.onClick?.(); + } else { + props.onCancel?.(e); + } + setIsConfirming(false); + }; + + const triggerContent = isLegacy ? ( + + ) : ( +
{props.button?.main.tooltipText}
+{props.button?.main.tooltipText}
-{props.description}
+