38 lines
1.5 KiB
React
38 lines
1.5 KiB
React
import React, { useState } from 'react';
|
|
import './ConfirmModal.css';
|
|
|
|
export default function ConfirmModal({
|
|
visible = false, title = '确认操作', content = '', confirmType = 'danger',
|
|
confirmText = '确定', cancelText = '取消', loading = false, dontAsk = false,
|
|
onConfirm, onCancel
|
|
}) {
|
|
const [checked, setChecked] = useState(false);
|
|
if (!visible) return null;
|
|
return (
|
|
<div className="aa-modal-mask" onClick={e => { if (e.target === e.currentTarget) onCancel && onCancel(); }}>
|
|
<div className={`aa-confirm ${confirmType === 'danger' ? 'is-danger' : 'is-primary'}`}>
|
|
<div className="aa-confirm-head">
|
|
<span className="aa-confirm-icon">!</span>
|
|
<div className="aa-confirm-title">{title}</div>
|
|
</div>
|
|
<div className="aa-confirm-content">{content}</div>
|
|
{dontAsk ? (
|
|
<label className="aa-confirm-extra">
|
|
<input type="checkbox" checked={checked} onChange={e => setChecked(e.target.checked)} /> 不再提示
|
|
</label>
|
|
) : null}
|
|
<div className="aa-confirm-footer">
|
|
<button className="aa-confirm-btn" disabled={loading} onClick={onCancel}>{cancelText}</button>
|
|
<button
|
|
className={`aa-confirm-btn ${confirmType === 'danger' ? 'danger' : 'primary'}`}
|
|
disabled={loading}
|
|
onClick={() => onConfirm && onConfirm(checked)}
|
|
>
|
|
{loading ? '处理中…' : confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|