75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
import React from 'react';
|
|
|
|
interface ConfirmationModalProps {
|
|
show: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
title: string;
|
|
message: string;
|
|
confirmText?: string;
|
|
cancelText?: string;
|
|
confirmButtonClass?: string;
|
|
loading?: boolean;
|
|
}
|
|
|
|
const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
|
|
show,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmText = 'Confirm',
|
|
cancelText = 'Cancel',
|
|
confirmButtonClass = 'btn-danger',
|
|
loading = false
|
|
}) => {
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className="modal d-block" tabIndex={-1} style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<h5 className="modal-title">{title}</h5>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
onClick={onClose}
|
|
disabled={loading}
|
|
></button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<p>{message}</p>
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button
|
|
type="button"
|
|
className="btn btn-secondary"
|
|
onClick={onClose}
|
|
disabled={loading}
|
|
>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={`btn ${confirmButtonClass}`}
|
|
onClick={onConfirm}
|
|
disabled={loading}
|
|
>
|
|
{loading ? (
|
|
<>
|
|
<span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
|
|
Processing...
|
|
</>
|
|
) : (
|
|
confirmText
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConfirmationModal; |