ant-design/components/modal/confirm.jsx

86 lines
1.9 KiB
React
Raw Normal View History

import React from 'react';
import Dialog from 'rc-dialog';
2015-06-10 22:02:13 +08:00
var div;
export default function (props) {
2015-06-10 22:02:13 +08:00
var d;
props = props || {};
props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
var width = props.width || 375;
function close() {
d.setState({
visible: false
});
}
function onCancel() {
2015-06-11 16:35:36 +08:00
var cancelFn = props.onCancel;
if (cancelFn) {
2015-06-25 15:29:56 +08:00
var 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-06-11 16:35:36 +08:00
var okFn = props.onOk;
if (okFn) {
2015-06-25 15:29:56 +08:00
var 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();
}
}
var 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-06-10 22:02:13 +08:00
var 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>;
if (!div) {
div = document.createElement('div');
document.body.appendChild(div);
}
2015-06-15 21:22:40 +08:00
React.render(<Dialog
prefixCls="ant-modal"
className="ant-confirm"
renderToBody={false}
visible={true}
closable={false}
title=""
transitionName="zoom"
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;
});
}