87 lines
2.7 KiB
TypeScript
Executable File
87 lines
2.7 KiB
TypeScript
Executable File
import { LoaderCircleIcon, X } from 'lucide-react';
|
|
import React from 'react';
|
|
import { useIntl } from 'react-intl';
|
|
import { Button } from '#shared/ui/Button';
|
|
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '#shared/ui/Dialog';
|
|
import { useDelete } from '../../api/delete';
|
|
import { invalidateList } from '../../api/list';
|
|
|
|
export const DeleteTrigger: React.FC<
|
|
React.PropsWithChildren<{
|
|
id: number;
|
|
deleteTarget?: React.ReactNode;
|
|
}>
|
|
> = ({ id, deleteTarget, children }) => {
|
|
const intl = useIntl();
|
|
|
|
const mutationDelete = useDelete();
|
|
|
|
const handleDelete = () => {
|
|
mutationDelete.mutate(
|
|
{ id: id },
|
|
{
|
|
onSuccess() {
|
|
invalidateList();
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
{children ? (
|
|
children
|
|
) : (
|
|
<Button variant="destructive" size="sm" shape="default" mode="icon">
|
|
<X />
|
|
</Button>
|
|
)}
|
|
</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{intl.formatMessage({ id: 'ACTION.CONFIRM' })}</DialogTitle>
|
|
<DialogDescription className="sr-only"></DialogDescription>
|
|
</DialogHeader>
|
|
<DialogBody className="text-sm">
|
|
{deleteTarget ? (
|
|
<React.Fragment>
|
|
{intl.formatMessage(
|
|
{ id: 'MODULE.COMMON.REMOVE_ITEM_QUESTION' },
|
|
{ target: deleteTarget }
|
|
)}
|
|
<span className="ml-1">
|
|
{intl.formatMessage({
|
|
id: 'MODULE.COMMON.REMOVE_ITEM_QUESTION_DESC'
|
|
})}
|
|
</span>
|
|
</React.Fragment>
|
|
) : (
|
|
intl.formatMessage({ id: 'MODULE.COMMON.ARE_YOU_SURE?' }) +
|
|
' ' +
|
|
intl.formatMessage({
|
|
id: 'MODULE.COMMON.REMOVE_ITEM_QUESTION_DESC'
|
|
})
|
|
)}
|
|
</DialogBody>
|
|
<DialogFooter>
|
|
<Button variant="destructive" disabled={mutationDelete.isPending} onClick={handleDelete}>
|
|
{mutationDelete.isPending ? (
|
|
<span className="flex items-center gap-2">
|
|
<LoaderCircleIcon className="h-4 w-4 animate-spin" />
|
|
{intl.formatMessage({ id: 'STATE.REMOVING' })}...
|
|
</span>
|
|
) : (
|
|
intl.formatMessage({ id: 'ACTION.REMOVE' })
|
|
)}
|
|
</Button>
|
|
|
|
<DialogClose asChild>
|
|
<Button variant="outline">{intl.formatMessage({ id: 'ACTION.CANCEL' })}</Button>
|
|
</DialogClose>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|