Confirm Dialog

Panoramica

Il componente ConfirmDialog è una modale di conferma riutilizzabile, progettata per mostrare un messaggio e due pulsanti: uno per confermare l'azione e uno per annullare. Utilizza il componente Dialog di base della libreria e il componente "Button"

È consigliato usare questo componente in tutti i casi in cui è richiesta una conferma dell'utente prima di un'azione irreversibile.

import { ConfirmDialog } from "@itlogix/itlogix-ui";

Proprietà (Props)

Nome	Tipo	Obbligatorio	Default	Descrizione
isOpen	boolean	sì	-	Controlla l'apertura della modale.
dialogContentText	string	sì	-	Testo del contenuto principale della modale.
confirmFunction	() => void	sì	-	Funzione eseguita al click su "Conferma".
cancelFunction	() => void	sì	-	Funzione eseguita al click su "Annulla" o fuori dalla modale.
isLoading	boolean	no	false	Se true, mostra uno spinner nel pulsante di conferma.
confirmBtnObj	{ label?: string, icon?: IconDefinition, severity?: ..., variant?: ... }	no	-	Configurazione personalizzata per il pulsante di conferma.
cancelBtnObj	{ label?: string, icon?: IconDefinition, severity?: ... , variant?: ...}	no	-	Configurazione personalizzata per il pulsante di annullamento.
title	string	no	-	Titolo (opzionale) da visualizzare nell'intestazione.

Tipi di severity supportati

• primary
• secondary
• success
• warning
• error

Esempi di utilizzo

Dialog di conferma semplice

<ConfirmDialog
  isOpen={open}
  dialogContentText="Sei sicuro di voler procedere"
  confirmFunction={() => console.log("confermato")}
  cancelFunction={() => setOpen(false)}
/>

Dialog con pulsanti personalizzati e loading

<ConfirmDialog
  isOpen={open}
  dialogContentText="Vuoi eliminare questo elemento"
  confirmFunction={handleDelete}
  cancelFunction={() => setOpen(false)}
  isLoading={loading}
  confirmBtnObj={{ label: "Elimina", severity: "error" }}
  cancelBtnObj={{ label: "Indietro", severity: "secondary" }}
/>

Comportamento

• La modale viene chiusa chiamando cancelFunction; cliccando all'esterno della modale o premendo il pulsante "Annulla" (cancelBtn).
• Lo stato di loading disabilita il pulsante e mostra uno spinner se isLoading è true.

Note aggiuntive

• La dimensione della modale è fissata su maxWidth="sm" e fullWidth.
• L'icona nei pulsanti è opzionale e supportata tramite FontAwesome.