Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x | // Constants
import { ACTION_MENU_LABELS } from '@/constants';
// Types
import { BaseVariant } from '@/types';
// Utils
import { combineClasses } from '@shared/utils';
// Components
import { LoadingIcon, TrashIcon } from '../icons/reacts';
// Styles
import './styles/confirm-delete-dialog.css';
const variantTheme = {
[BaseVariant.PRIMARY]: {
root: 'confirm-delete-dialog-root',
iconWrapper: 'confirm-delete-dialog-icon-wrapper',
title: 'confirm-delete-dialog-title',
content: 'confirm-delete-dialog-content',
actions: 'confirm-delete-dialog-actions',
cancelButton: 'confirm-delete-dialog-cancel-button',
deleteButton: 'confirm-delete-dialog-delete-button',
deleteButtonLoading: 'confirm-delete-dialog-delete-button-loading',
},
};
export interface ConfirmDeleteDialogProps {
title: string;
content: string;
onCancel?: () => void;
onDelete?: () => void;
isLoading?: boolean;
className?: string;
variant?: BaseVariant;
}
export const ConfirmDeleteDialog = ({
title,
content,
onCancel,
onDelete,
isLoading = false,
className = '',
variant = BaseVariant.PRIMARY,
}: ConfirmDeleteDialogProps) => {
const theme = variantTheme[variant];
return (
<div
data-variant={variant}
className={combineClasses(theme.root, className)}
>
<div className={theme.iconWrapper}>
<TrashIcon />
</div>
<h2 className={theme.title}>{title}</h2>
<p className={theme.content}>{content}</p>
<div className={theme.actions}>
<button
type="button"
aria-label="Cancel"
onClick={onCancel}
className={theme.cancelButton}
>
{ACTION_MENU_LABELS.cancel}
</button>
<button
type="button"
aria-label="Delete"
onClick={onDelete}
disabled={isLoading}
className={combineClasses(
theme.deleteButton,
isLoading && theme.deleteButtonLoading,
)}
>
{isLoading ? (
<LoadingIcon className="size-4" />
) : (
ACTION_MENU_LABELS.delete
)}
</button>
</div>
</div>
);
};
|