65 lines
1.8 KiB
React
65 lines
1.8 KiB
React
import React from 'react';
|
||
import './Modal.css';
|
||
|
||
/**
|
||
* Aurora Admin Modal（React）
|
||
* 对齐 modal.json 契约：
|
||
* - size: small(320) | default(480) | large(680)
|
||
* - 遮罩 rgba(0,0,0,0.45)，圆角8px，右下角操作按钮（次+主）
|
||
* 受控：<Modal open={open} onClose={setOpen} onOk={...} />
|
||
*/
|
||
export default function Modal({
|
||
open = false,
|
||
title = '',
|
||
size = 'default', // small | default | large
|
||
closable = true,
|
||
maskClosable = true,
|
||
hideFooter = false,
|
||
cancelText = '取消',
|
||
okText = '确定',
|
||
onClose,
|
||
onOk,
|
||
footer,
|
||
children
|
||
}) {
|
||
if (!open) return null;
|
||
|
||
const handleMask = (e) => {
|
||
if (maskClosable && e.target === e.currentTarget) onClose && onClose();
|
||
};
|
||
|
||
return (
|
||
<div className="aa-mask" onClick={handleMask}>
|
||
<div className={`aa-modal aa-modal--${size}`} role="dialog" onClick={(e) => e.stopPropagation()}>
|
||
<div className="aa-modal__header">
|
||
<span>{title}</span>
|
||
{closable && (
|
||
<button className="aa-modal__close" aria-label="关闭" onClick={() => onClose && onClose()}>✕</button>
|
||
)}
|
||
</div>
|
||
<div className="aa-modal__body">{children}</div>
|
||
{!hideFooter && (
|
||
<div className="aa-modal__footer">
|
||
{footer || (
|
||
<>
|
||
<button className="btn-base btn-ghost" onClick={() => onClose && onClose()}>{cancelText}</button>
|
||
<button className="btn-base btn-primary" onClick={() => onOk && onOk()}>{okText}</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
/*
|
||
用法示例：
|
||
import Modal from './Modal';
|
||
const [open, setOpen] = useState(false);
|
||
|
||
<Modal open={open} title="提示" size="default" onClose={() => setOpen(false)} onOk={handleOk}>
|
||
对话框内容...
|
||
</Modal>
|
||
*/
|