ant-design/components/modal/confirm.jsx

100 lines
2.5 KiB
React
Raw Normal View History

import React from 'react';
import Dialog from './index';
2015-06-10 22:02:13 +08:00
export default function (props) {
2015-09-18 16:00:12 +08:00
let div = document.createElement('div');
document.body.appendChild(div);
2015-09-01 16:18:46 +08:00
let d;
2015-06-10 22:02:13 +08:00
props = props || {};
2015-09-07 11:48:57 +08:00
props.iconClassName = props.iconClassName || 'anticon-question-circle';
let width = props.width || 416;
// 默认为 true保持向下兼容
if (!('okCancel' in props)) {
props.okCancel = true;
}
2015-06-10 22:02:13 +08:00
function close() {
d.setState({
visible: false
});
2015-09-18 16:00:12 +08:00
React.unmountComponentAtNode(div);
2015-06-10 22:02:13 +08:00
}
function onCancel() {
2015-09-01 16:18:46 +08:00
let cancelFn = props.onCancel;
2015-06-11 16:35:36 +08:00
if (cancelFn) {
2015-09-01 16:18:46 +08:00
let ret;
2015-06-15 21:22:40 +08:00
if (cancelFn.length) {
2015-06-25 15:29:56 +08:00
ret = cancelFn(close);
2015-06-15 21:22:40 +08:00
} else {
2015-06-25 15:29:56 +08:00
ret = cancelFn();
if (!ret) {
close();
}
}
if (ret && ret.then) {
ret.then(close);
2015-06-11 16:35:36 +08:00
}
2015-06-10 22:02:13 +08:00
} else {
close();
}
}
function onOk() {
2015-09-01 16:18:46 +08:00
let okFn = props.onOk;
2015-06-11 16:35:36 +08:00
if (okFn) {
2015-09-01 16:18:46 +08:00
let ret;
2015-06-15 21:22:40 +08:00
if (okFn.length) {
2015-06-25 15:29:56 +08:00
ret = okFn(close);
2015-06-15 21:22:40 +08:00
} else {
2015-06-25 15:29:56 +08:00
ret = okFn();
if (!ret) {
close();
}
}
if (ret && ret.then) {
ret.then(close);
2015-06-11 16:35:36 +08:00
}
2015-06-10 22:02:13 +08:00
} else {
close();
}
}
2015-09-01 16:18:46 +08:00
let body = <div className="ant-confirm-body">
2015-06-11 16:35:36 +08:00
<i className={'anticon ' + props.iconClassName}></i>
2015-06-10 22:02:13 +08:00
<span className="ant-confirm-title">{props.title}</span>
<div className="ant-confirm-content">{props.content}</div>
2015-06-11 16:35:36 +08:00
</div>;
2015-09-01 16:18:46 +08:00
let footer = <div className="ant-confirm-btns">
2015-06-10 22:02:13 +08:00
<button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}> </button>
<button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}> </button>
</div>;
2015-09-07 11:48:57 +08:00
if (props.okCancel) {
footer = <div className="ant-confirm-btns">
<button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}> </button>
<button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}> </button>
</div>;
} else {
footer = <div className="ant-confirm-btns">
2015-09-08 15:03:02 +08:00
<button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>知道了</button>
2015-09-07 11:48:57 +08:00
</div>;
}
2015-06-15 21:22:40 +08:00
React.render(<Dialog
prefixCls="ant-modal"
className="ant-confirm"
visible={true}
closable={false}
title=""
transitionName="zoom"
footer=""
2015-06-15 21:22:40 +08:00
maskTransitionName="fade" width={width}>
2015-06-11 16:35:36 +08:00
<div style={{zoom: 1, overflow: 'hidden'}}>{body} {footer}</div>
2015-06-10 22:02:13 +08:00
</Dialog>, div, function () {
d = this;
});
}