support promise for modal

This commit is contained in:
yiminghe 2015-06-25 15:29:56 +08:00
parent 58b04e8a11
commit abcdaddcaa
6 changed files with 104 additions and 62 deletions

View File

@ -19,12 +19,18 @@ module.exports = function (props) {
function onCancel() {
var cancelFn = props.onCancel;
if (cancelFn) {
var ret;
if (cancelFn.length) {
cancelFn(close);
ret = cancelFn(close);
} else {
cancelFn();
ret = cancelFn();
if (!ret) {
close();
}
}
if (ret && ret.then) {
ret.then(close);
}
} else {
close();
}
@ -33,12 +39,18 @@ module.exports = function (props) {
function onOk() {
var okFn = props.onOk;
if (okFn) {
var ret;
if (okFn.length) {
okFn(close);
ret = okFn(close);
} else {
okFn();
ret = okFn();
if (!ret) {
close();
}
}
if (ret && ret.then) {
ret.then(close);
}
} else {
close();
}

View File

@ -0,0 +1,30 @@
# 确认对话框
- order: 5
使用 `confirm()` 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭
---
````jsx
var confirm = antd.confirm;
function showConfirm(){
confirm({
title: '您是否确认要删除这项内容',
content: '一些解释',
onOk: function() {
alert('1 秒后关闭');
return new Promise(function(resolve){
setTimeout(resolve,1000);
});
},
onCancel: function() {}
});
}
React.render(
<button className="ant-btn" onClick={showConfirm}>
确认对话框
</button>, document.getElementById('components-modal-demo-confirm-promise'));
````

View File

@ -13,7 +13,8 @@ var Modal = React.createClass({
},
handleCancel() {
this.refs.d.requestClose();
var d = this.refs.d;
d.requestClose();
},
getDefaultProps() {

View File

@ -22,7 +22,7 @@
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element | 无 |
| onOk | 点击确定回调 | function | 无 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调,返回 promise 时 resolve 后自动关闭 | function | 无 |
| width | 宽度 | String or Number | 500 |
| footer | 底部内容 | React.Element | 确定取消按钮 |
@ -34,7 +34,7 @@
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| title | 标题 | React.Element or String | 无 |
| onOk | 点击确定回调,参数为关闭函数 | function | 无 |
| onCancel | 取消回调,参数为关闭函数 | function | 无 |
| onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 |
| onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 |
| width | 宽度 | String or Number | 375 |
| iconClassName | 图标样式名 | String | anticon-exclamation-circle |

View File

@ -15,7 +15,7 @@
"gregorian-calendar": "~3.0.0",
"gregorian-calendar-format": "~3.0.1",
"rc-calendar": "~3.9.0",
"rc-dialog": "~4.3.2",
"rc-dialog": "~4.3.4",
"rc-dropdown": "~1.0.2",
"rc-menu": "~3.4.0",
"rc-progress": "~1.0.0",

View File

@ -13,9 +13,7 @@
{% block styles %}{% endblock %}
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/tomorrow.css">
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<!-- react -->
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.min.js"></script>
<script src="https://a.alipayobjects.com/??jquery/jquery/1.11.1/jquery.js,es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js,react/0.13.3/react.min.js,bluebird/2.9.30/bluebird.js"></script>
<script src="/static/script.js"></script>
{% block scripts %}{% endblock %}
</head>
@ -25,6 +23,7 @@
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
{{ config.site.name }}
</a>
<div class="search">
<form>
<input type="text" placeholder="search">