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 ? ( + + ) : ( +
{ e.preventDefault(); e.stopPropagation(); - if (isLegacy) { - props.button?.cancel.onClick?.(); - } else { - props.onCancel?.(e); - } - setIsConfirming(false); - }; + setIsConfirming(true); + }} + > + {props.children} +
+ ); - const triggerContent = isLegacy ? ( - + const withTooltip = + isLegacy && props.button?.main.tooltipText && isDisabled ? ( + + + +
{triggerContent}
+
+ +

{props.button?.main.tooltipText}

+
+
+
) : ( -
{ - e.preventDefault(); - e.stopPropagation(); - setIsConfirming(true); - }}> - {props.children} -
+ triggerContent ); - const withTooltip = isLegacy && props.button?.main.tooltipText && isDisabled ? ( - - - -
{triggerContent}
-
- -

{props.button?.main.tooltipText}

-
-
-
- ) : triggerContent; - - return ( - - - {withTooltip} - - e.preventDefault()} - onInteractOutside={(e) => e.preventDefault()} - onClick={(e) => e.stopPropagation()} - onMouseMove={(e) => e.stopPropagation()} - onMouseEnter={(e) => e.stopPropagation()} - onMouseLeave={(e) => e.stopPropagation()} - onOpenAutoFocus={(e) => e.preventDefault()} + return ( + + {withTooltip} + e.preventDefault()} + onInteractOutside={(e) => e.preventDefault()} + onClick={(e) => e.stopPropagation()} + onMouseMove={(e) => e.stopPropagation()} + onMouseEnter={(e) => e.stopPropagation()} + onMouseLeave={(e) => e.stopPropagation()} + onOpenAutoFocus={(e) => e.preventDefault()} + > +
+
+

{props.title}

+

{props.description}

+
+
+ - -
-
-
-
- ); -}; \ No newline at end of file + {props.isPending && ( + + )} + {isLegacy && props.button?.confirm.icon} + + {isLegacy + ? props.button?.confirm.text + : (props.confirmButtonText ?? "Confirm")} + + + + + +
+
+ ); +};