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';
|
2015-08-18 13:15:16 +08:00
|
|
|
|
import Dialog from './index';
|
2015-10-02 15:41:04 +08:00
|
|
|
|
import Icon from '../iconfont';
|
2015-10-08 15:13:04 +08:00
|
|
|
|
import {Button} from '../button';
|
2015-06-10 22:02:13 +08:00
|
|
|
|
|
2015-07-23 22:23:11 +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-10-02 15:41:04 +08:00
|
|
|
|
props.iconClassName = props.iconClassName || 'question-circle';
|
|
|
|
|
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
|
|
|
|
|
|
|
|
|
function close() {
|
|
|
|
|
d.setState({
|
|
|
|
|
visible: false
|
|
|
|
|
});
|
2015-10-20 16:47:55 +08:00
|
|
|
|
ReactDOM.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-10-02 15:41:04 +08:00
|
|
|
|
<Icon type={iconClassType} />
|
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-10-08 15:13:04 +08:00
|
|
|
|
<Button size="lg" onClick={onCancel}>取 消</Button>
|
|
|
|
|
<Button type="primary" size="lg" onClick={onOk}>确 定</Button>
|
2015-06-10 22:02:13 +08:00
|
|
|
|
</div>;
|
|
|
|
|
|
2015-09-07 11:48:57 +08:00
|
|
|
|
if (props.okCancel) {
|
|
|
|
|
footer = <div className="ant-confirm-btns">
|
2015-10-08 15:13:04 +08:00
|
|
|
|
<Button size="lg" onClick={onCancel}>取 消</Button>
|
|
|
|
|
<Button type="primary" size="lg" onClick={onOk}>确 定</Button>
|
2015-09-07 11:48:57 +08:00
|
|
|
|
</div>;
|
|
|
|
|
} else {
|
|
|
|
|
footer = <div className="ant-confirm-btns">
|
2015-10-08 15:13:04 +08:00
|
|
|
|
<Button type="primary" size="lg" onClick={onOk}>知道了</Button>
|
2015-09-07 11:48:57 +08:00
|
|
|
|
</div>;
|
|
|
|
|
}
|
|
|
|
|
|
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"
|
|
|
|
|
visible={true}
|
|
|
|
|
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}>
|
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;
|
|
|
|
|
});
|
2015-07-23 22:23:11 +08:00
|
|
|
|
}
|