Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
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>
|
||||
*/
|
||||
Reference in New Issue
Block a user