95 lines
2.5 KiB
TypeScript
95 lines
2.5 KiB
TypeScript
import { useRef, useState } from "react";
|
|
import { Button } from "./button";
|
|
import ModalOrSlide from "./modals/ModalOrSlide";
|
|
import { Label } from "./label";
|
|
import { Input } from "./input";
|
|
import { Form } from "react-router";
|
|
import ConfirmDialog, { RefConfirmDialog } from "./modals/ConfirmDialog";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
interface Props {
|
|
type?: "button" | "submit";
|
|
variant: "default" | "outline" | "ghost" | "link" | "destructive" | "secondary";
|
|
size?: "xs" | "icon" | "default" | "sm" | "lg";
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
description?: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
onClick: () => void;
|
|
isLoading?: boolean;
|
|
destructive?: boolean;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
}
|
|
export default function ButtonConfirm({
|
|
type = "button",
|
|
variant = "default",
|
|
size = "default",
|
|
children,
|
|
title,
|
|
description,
|
|
confirmText,
|
|
cancelText,
|
|
onClick,
|
|
isLoading,
|
|
destructive = true,
|
|
className,
|
|
disabled,
|
|
}: Props) {
|
|
const { t } = useTranslation();
|
|
|
|
const confirmDialog = useRef<RefConfirmDialog>(null);
|
|
|
|
const onShowDialog = () => {
|
|
confirmDialog.current?.show({
|
|
title: title || t("shared.confirmDelete"),
|
|
description,
|
|
destructive,
|
|
confirmText: confirmText || t("shared.confirm"),
|
|
cancelText: cancelText || t("shared.cancel"),
|
|
onConfirm: () => onClick(),
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Button
|
|
type={type}
|
|
variant={variant}
|
|
size={size}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onShowDialog();
|
|
}}
|
|
isLoading={isLoading}
|
|
className={className}
|
|
disabled={disabled}
|
|
>
|
|
{children}
|
|
</Button>
|
|
|
|
{/* <ModalOrSlide title={title} type="dialog" open={isOpen.open} setOpen={() => setIsOpen({ ...isOpen, open: false })} size="sm">
|
|
<Form
|
|
method="post"
|
|
className="space-y-2 p-4"
|
|
onSubmit={() => {
|
|
onClick(isOpen.value);
|
|
setIsOpen({ open: false, value: "" });
|
|
}}
|
|
>
|
|
<Label>{label}</Label>
|
|
<Input value={isOpen.value} onChange={(e) => setIsOpen({ open: true, value: e.target.value })} />
|
|
<div className="flex justify-end">
|
|
<Button type="button" variant="outline" size="sm" onClick={() => setIsOpen({ open: false, value: "" })}>
|
|
Accept
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</ModalOrSlide> */}
|
|
|
|
<ConfirmDialog ref={confirmDialog} />
|
|
</div>
|
|
);
|
|
}
|