DeleteConfirmationDialog

Diálogo de confirmación especializado para operaciones de eliminación. Está construido sobre el componente Modal y viene con el botón de confirmación en color de peligro sin necesidad de configuración adicional. El mensaje admite interpolación dinámica.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | isOpen | boolean | Sí | — | Controla si el diálogo está visible. | | onClose | () => void | Sí | — | Se llama cuando el diálogo se cierra (botón cancelar o backdrop). | | onConfirm | () => void | Sí | — | Se llama cuando el usuario hace clic en el botón de eliminar. El diálogo se cierra automáticamente después. | | title | string | No | "¿Eliminar?" | Encabezado mostrado en la parte superior del diálogo. | | message | string | No | "¿Estás seguro que deseas eliminar?" | Texto del cuerpo. Admite HTML e interpolación mediante interpolationData. | | confirmButtonText | string | No | "Eliminar" | Etiqueta del botón de eliminación. | | cancelButtonText | string | No | "Cancelar" | Etiqueta del botón de cancelación. | | zIndex | number | No | 999 | z-index CSS del overlay modal. | | interpolationData | Record<string, any> | No | {} | Pares clave-valor para interpolar marcadores en message. |

Uso

Básico

import React from 'react';
import DeleteConfirmationDialog from '@/components/dialogs/DeleteConfirmationDialog';

export default function Example() {
  const [open, setOpen] = React.useState(false);

  const handleDelete = () => {
    console.log('Record deleted');
  };

  return (
    <>
      <button onClick={() => setOpen(true)}>Delete record</button>
      <DeleteConfirmationDialog
        isOpen={open}
        onClose={() => setOpen(false)}
        onConfirm={handleDelete}
      />
    </>
  );
}

Con mensaje interpolado

<DeleteConfirmationDialog
  isOpen={open}
  onClose={() => setOpen(false)}
  onConfirm={handleDelete}
  title="Delete product?"
  message="Are you sure you want to delete <strong>{{productName}}</strong>? This action cannot be undone."
  interpolationData={{ productName: 'Blue T-Shirt (XL)' }}
  confirmButtonText="Yes, delete"
/>