102 lines
2.8 KiB
TypeScript
102 lines
2.8 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;
|
|
showReasonInput?: boolean;
|
|
reason?: string;
|
|
onReasonChange?: (reason: string) => void;
|
|
reasonPlaceholder?: string;
|
|
reasonRequired?: boolean;
|
|
}
|
|
|
|
const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
|
|
show,
|
|
onClose,
|
|
onConfirm,
|
|
title,
|
|
message,
|
|
confirmText = 'Confirm',
|
|
cancelText = 'Cancel',
|
|
confirmButtonClass = 'btn-danger',
|
|
loading = false,
|
|
showReasonInput = false,
|
|
reason = '',
|
|
onReasonChange,
|
|
reasonPlaceholder = 'Enter reason...',
|
|
reasonRequired = false
|
|
}) => {
|
|
if (!show) return null;
|
|
|
|
const isConfirmDisabled = loading || (reasonRequired && showReasonInput && !reason.trim());
|
|
|
|
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>
|
|
{showReasonInput && (
|
|
<div className="mt-3">
|
|
<label className="form-label">
|
|
Reason {reasonRequired && <span className="text-danger">*</span>}
|
|
</label>
|
|
<textarea
|
|
className="form-control"
|
|
rows={3}
|
|
value={reason}
|
|
onChange={(e) => onReasonChange?.(e.target.value)}
|
|
placeholder={reasonPlaceholder}
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
)}
|
|
</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={isConfirmDisabled}
|
|
>
|
|
{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; |