2015-07-23 22:23:11 +08:00
|
|
|
|
import React from 'react';
|
2015-10-20 16:47:55 +08:00
|
|
|
|
import ReactDOM from 'react-dom';
|
2016-01-13 16:46:38 +08:00
|
|
|
|
import Dialog from './Modal';
|
2015-11-20 11:05:34 +08:00
|
|
|
|
import Icon from '../icon';
|
2015-11-03 20:06:44 +08:00
|
|
|
|
import Button from '../button';
|
2016-01-07 17:46:46 +08:00
|
|
|
|
import objectAssign from 'object-assign';
|
2015-06-10 22:02:13 +08:00
|
|
|
|
|
2016-01-07 17:46:46 +08:00
|
|
|
|
export default function (config) {
|
|
|
|
|
const props = objectAssign({}, config || {});
|
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-10-02 15:41:04 +08:00
|
|
|
|
props.iconClassName = props.iconClassName || 'question-circle';
|
2015-11-24 16:48:21 +08:00
|
|
|
|
|
2015-10-02 15:41:04 +08:00
|
|
|
|
let iconClassType = props.iconClassName;
|
|
|
|
|
|
2015-09-07 11:48:57 +08:00
|
|
|
|
let width = props.width || 416;
|
|
|
|
|
|
|
|
|
|
// 默认为 true,保持向下兼容
|
|
|
|
|
if (!('okCancel' in props)) {
|
|
|
|
|
props.okCancel = true;
|
|
|
|
|
}
|
2015-06-10 22:02:13 +08:00
|
|
|
|
|
2015-11-24 16:48:21 +08:00
|
|
|
|
props.okText = props.okText || (props.okCancel ? '确定' : '知道了');
|
|
|
|
|
props.cancelText = props.cancelText || '取消';
|
|
|
|
|
|
2015-06-10 22:02:13 +08:00
|
|
|
|
function close() {
|
|
|
|
|
d.setState({
|
|
|
|
|
visible: false
|
|
|
|
|
});
|
2015-10-20 16:47:55 +08:00
|
|
|
|
ReactDOM.unmountComponentAtNode(div);
|
2015-12-15 17:54:43 +08:00
|
|
|
|
div.parentNode.removeChild(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();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2016-01-07 14:21:29 +08:00
|
|
|
|
let body = (
|
|
|
|
|
<div className="ant-confirm-body">
|
|
|
|
|
<Icon type={iconClassType} />
|
|
|
|
|
<span className="ant-confirm-title">{props.title}</span>
|
|
|
|
|
<div className="ant-confirm-content">{props.content}</div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2015-06-10 22:02:13 +08:00
|
|
|
|
|
2015-11-24 11:01:36 +08:00
|
|
|
|
let footer = null;
|
2015-09-07 11:48:57 +08:00
|
|
|
|
if (props.okCancel) {
|
2016-01-07 14:21:29 +08:00
|
|
|
|
footer = (
|
|
|
|
|
<div className="ant-confirm-btns">
|
|
|
|
|
<Button type="ghost" size="large" onClick={onCancel}>
|
|
|
|
|
{props.cancelText}
|
|
|
|
|
</Button>
|
|
|
|
|
<Button type="primary" size="large" onClick={onOk}>
|
|
|
|
|
{props.okText}
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2015-09-07 11:48:57 +08:00
|
|
|
|
} else {
|
2016-01-07 14:21:29 +08:00
|
|
|
|
footer = (
|
|
|
|
|
<div className="ant-confirm-btns">
|
|
|
|
|
<Button type="primary" size="large" onClick={onOk}>
|
|
|
|
|
{props.okText}
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
2015-09-07 11:48:57 +08:00
|
|
|
|
}
|
|
|
|
|
|
2015-10-20 16:47:55 +08:00
|
|
|
|
ReactDOM.render(<Dialog
|
2015-06-15 21:22:40 +08:00
|
|
|
|
prefixCls="ant-modal"
|
|
|
|
|
className="ant-confirm"
|
2015-11-25 17:47:55 +08:00
|
|
|
|
visible
|
2015-06-15 21:22:40 +08:00
|
|
|
|
closable={false}
|
|
|
|
|
title=""
|
|
|
|
|
transitionName="zoom"
|
2015-08-18 13:15:16 +08:00
|
|
|
|
footer=""
|
2015-06-15 21:22:40 +08:00
|
|
|
|
maskTransitionName="fade" width={width}>
|
2016-01-07 17:46:46 +08:00
|
|
|
|
<div style={{ zoom: 1, overflow: 'hidden' }}>{body} {footer}</div>
|
2015-06-10 22:02:13 +08:00
|
|
|
|
</Dialog>, div, function () {
|
|
|
|
|
d = this;
|
|
|
|
|
});
|
2015-07-23 22:23:11 +08:00
|
|
|
|
}
|