26 lines
1.1 KiB
TypeScript
26 lines
1.1 KiB
TypeScript
import { useEffect } from 'react';
|
|
|
|
export default function ConfirmModal({ open, title, message, confirmText = '确定', danger = true, onConfirm, onCancel }: any) {
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onCancel(); };
|
|
if (open) window.addEventListener('keydown', onKey);
|
|
return () => window.removeEventListener('keydown', onKey);
|
|
}, [open, onCancel]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="confirm-modal-overlay" onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}>
|
|
<div className="confirm-modal">
|
|
<div className="confirm-modal-icon">{danger ? '\u26A0' : '\u2139'}</div>
|
|
<div className="confirm-modal-title">{title}</div>
|
|
<div className="confirm-modal-message">{message}</div>
|
|
<div className="confirm-modal-actions">
|
|
<button className="btn" onClick={onCancel}>取消</button>
|
|
<button className={`btn ${danger ? 'btn-danger' : 'btn-primary'}`} onClick={onConfirm}>{confirmText}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|