confirm-delete-dialog.tsx

Overview

confirm-delete-dialog.tsx defines a reusable React component named ConfirmDeleteDialog that provides a standardized modal dialog for confirming deletion actions within a user interface. It leverages a pre-built AlertDialog UI component set to display a modal with customizable title, cancel, and confirm buttons.

This component is designed to wrap any child element(s), transforming them into a trigger for the confirmation dialog. It supports internationalization via the react-i18next library, enabling multi-language support for all UI text strings.

Detailed Explanation

ConfirmDeleteDialog Component

Purpose

To present a modal dialog that asks users to confirm or cancel a deletion action, preventing accidental data loss by requiring explicit user confirmation.

Props

Signature

function ConfirmDeleteDialog({
  children,
  title,
  onOk,
  onCancel,
  hidden = false,
}: IProps & PropsWithChildren): JSX.Element

Usage Example

import { ConfirmDeleteDialog } from './confirm-delete-dialog';

function DeleteButton() {
  const handleConfirm = () => {
    // Perform delete operation
    console.log('Item deleted');
  };

  const handleCancel = () => {
    console.log('Delete canceled');
  };

  return (
    <ConfirmDeleteDialog
      title="Are you sure you want to delete this item?"
      onOk={handleConfirm}
      onCancel={handleCancel}
    >
      <button>Delete Item</button>
    </ConfirmDeleteDialog>
  );
}

Implementation Details

• The component uses the AlertDialog and related subcomponents imported from a shared UI library (@/components/ui/alert-dialog). These subcomponents abstract the accessibility and styling concerns of modal dialogs.

• The dialog trigger is the wrapped children element(s), passed to <AlertDialogTrigger asChild>. This means the children become the element that, when clicked, opens the dialog.

• The dialog content prevents event propagation and default selection to ensure clean UX inside the modal.

• The dialog header displays a title, defaulting to a translation key 'common.deleteModalTitle' if no explicit title prop is passed.

• The dialog footer contains two buttons:

  • Cancel (AlertDialogCancel): Calls onCancel when clicked.

  • OK (AlertDialogAction): Calls onOk when clicked and styled with error states to emphasize the destructive action.

• The optional hidden prop allows the component to bypass rendering the dialog and just render the children directly. This is useful to disable confirmation dialogs conditionally.

• Localization is supported via the useTranslation hook from react-i18next. All button labels and default titles use translation keys ('common.cancel', 'common.ok', etc.).

• The dialog description section is commented out but can be easily enabled for additional explanatory text.

Interaction with Other Parts of the System

• This component depends on a shared UI library of alert dialog components (AlertDialog*) from the path @/components/ui/alert-dialog. These manage accessibility, animations, and styling consistently across the app.

• It uses react-i18next for internationalization, ensuring text strings adapt to the user's language preferences.

• The component is designed to wrap interactive UI elements (buttons, icons, etc.) elsewhere in the app, converting them into triggers for deleting confirmation without duplicating modal logic.

• The callbacks onOk and onCancel should be provided by the parent component to handle actual delete logic and UI state management, making this component purely presentational and logic-agnostic.

Mermaid Component Diagram

componentDiagram
    component ConfirmDeleteDialog {
      +children: ReactNode
      +title?: string
      +onOk?: function
      +onCancel?: function
      +hidden?: boolean
      +render()
    }

    component AlertDialog {
      +AlertDialogTrigger
      +AlertDialogContent
      +AlertDialogHeader
      +AlertDialogTitle
      +AlertDialogFooter
      +AlertDialogCancel
      +AlertDialogAction
    }

    ConfirmDeleteDialog --> AlertDialog : uses
    ConfirmDeleteDialog --> AlertDialogTrigger : wraps children
    ConfirmDeleteDialog --> AlertDialogContent : renders modal content
    ConfirmDeleteDialog --> AlertDialogCancel : cancel button
    ConfirmDeleteDialog --> AlertDialogAction : confirm button

Summary

The ConfirmDeleteDialog component encapsulates the common UI pattern of confirming destructive actions with a modal dialog. It is flexible, accessible, internationalized, and designed for easy integration by wrapping existing UI elements. It relies on a shared alert dialog UI library and i18n infrastructure, promoting consistency and localization across the application.