mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-29 10:36:27 +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() {
|
function onCancel() {
|
||||||
var cancelFn = props.onCancel;
|
var cancelFn = props.onCancel;
|
||||||
if (cancelFn) {
|
if (cancelFn) {
|
||||||
|
var ret;
|
||||||
if (cancelFn.length) {
|
if (cancelFn.length) {
|
||||||
cancelFn(close);
|
ret = cancelFn(close);
|
||||||
} else {
|
} else {
|
||||||
cancelFn();
|
ret = cancelFn();
|
||||||
|
if (!ret) {
|
||||||
close();
|
close();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (ret && ret.then) {
|
||||||
|
ret.then(close);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
close();
|
close();
|
||||||
}
|
}
|
||||||
@ -33,12 +39,18 @@ module.exports = function (props) {
|
|||||||
function onOk() {
|
function onOk() {
|
||||||
var okFn = props.onOk;
|
var okFn = props.onOk;
|
||||||
if (okFn) {
|
if (okFn) {
|
||||||
|
var ret;
|
||||||
if (okFn.length) {
|
if (okFn.length) {
|
||||||
okFn(close);
|
ret = okFn(close);
|
||||||
} else {
|
} else {
|
||||||
okFn();
|
ret = okFn();
|
||||||
|
if (!ret) {
|
||||||
close();
|
close();
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
if (ret && ret.then) {
|
||||||
|
ret.then(close);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
close();
|
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() {
|
handleCancel() {
|
||||||
this.refs.d.requestClose();
|
var d = this.refs.d;
|
||||||
|
d.requestClose();
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
|------------|----------------|------------------|--------------|
|
|------------|----------------|------------------|--------------|
|
||||||
| title | 标题 | React.Element | 无 |
|
| title | 标题 | React.Element | 无 |
|
||||||
| onOk | 点击确定回调 | function | 无 |
|
| onOk | 点击确定回调 | function | 无 |
|
||||||
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function | 无 |
|
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调,返回 promise 时 resolve 后自动关闭 | function | 无 |
|
||||||
| width | 宽度 | String or Number | 500 |
|
| width | 宽度 | String or Number | 500 |
|
||||||
| footer | 底部内容 | React.Element | 确定取消按钮 |
|
| footer | 底部内容 | React.Element | 确定取消按钮 |
|
||||||
|
|
||||||
@ -34,7 +34,7 @@
|
|||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|------------|----------------|------------------|--------------|
|
|------------|----------------|------------------|--------------|
|
||||||
| title | 标题 | React.Element or String | 无 |
|
| title | 标题 | React.Element or String | 无 |
|
||||||
| onOk | 点击确定回调,参数为关闭函数 | function | 无 |
|
| onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 |
|
||||||
| onCancel | 取消回调,参数为关闭函数 | function | 无 |
|
| onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 |
|
||||||
| width | 宽度 | String or Number | 375 |
|
| width | 宽度 | String or Number | 375 |
|
||||||
| iconClassName | 图标样式名 | String | anticon-exclamation-circle |
|
| iconClassName | 图标样式名 | String | anticon-exclamation-circle |
|
||||||
|
@ -15,7 +15,7 @@
|
|||||||
"gregorian-calendar": "~3.0.0",
|
"gregorian-calendar": "~3.0.0",
|
||||||
"gregorian-calendar-format": "~3.0.1",
|
"gregorian-calendar-format": "~3.0.1",
|
||||||
"rc-calendar": "~3.9.0",
|
"rc-calendar": "~3.9.0",
|
||||||
"rc-dialog": "~4.3.2",
|
"rc-dialog": "~4.3.4",
|
||||||
"rc-dropdown": "~1.0.2",
|
"rc-dropdown": "~1.0.2",
|
||||||
"rc-menu": "~3.4.0",
|
"rc-menu": "~3.4.0",
|
||||||
"rc-progress": "~1.0.0",
|
"rc-progress": "~1.0.0",
|
||||||
|
@ -13,9 +13,7 @@
|
|||||||
{% block styles %}{% endblock %}
|
{% block styles %}{% endblock %}
|
||||||
<link rel="stylesheet" href="/static/style.css">
|
<link rel="stylesheet" href="/static/style.css">
|
||||||
<link rel="stylesheet" href="/static/tomorrow.css">
|
<link rel="stylesheet" href="/static/tomorrow.css">
|
||||||
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.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>
|
||||||
<!-- 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="/static/script.js"></script>
|
<script src="/static/script.js"></script>
|
||||||
{% block scripts %}{% endblock %}
|
{% block scripts %}{% endblock %}
|
||||||
</head>
|
</head>
|
||||||
@ -25,6 +23,7 @@
|
|||||||
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||||
{{ config.site.name }}
|
{{ config.site.name }}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<form>
|
<form>
|
||||||
<input type="text" placeholder="search">
|
<input type="text" placeholder="search">
|
||||||
|
Loading…
Reference in New Issue
Block a user