mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
support promise for modal
This commit is contained in:
parent
58b04e8a11
commit
abcdaddcaa
@ -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();
|
||||
}
|
||||
|
30
components/modal/demo/confirm-promise.md
Normal file
30
components/modal/demo/confirm-promise.md
Normal 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'));
|
||||
````
|
@ -13,7 +13,8 @@ var Modal = React.createClass({
|
||||
},
|
||||
|
||||
handleCancel() {
|
||||
this.refs.d.requestClose();
|
||||
var d = this.refs.d;
|
||||
d.requestClose();
|
||||
},
|
||||
|
||||
getDefaultProps() {
|
||||
|
@ -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 |
|
||||
|
@ -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",
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user