mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
support promise for modal
This commit is contained in:
yiminghe
parent
58b04e8a11
commit
abcdaddcaa
@ -19,11 +19,17 @@ module.exports = function (props) {
|
||||
function onCancel() {
|
||||
var cancelFn = props.onCancel;
|
||||
if (cancelFn) {
|
||||
var ret;
|
||||
if (cancelFn.length) {
|
||||
cancelFn(close);
|
||||
ret = cancelFn(close);
|
||||
} else {
|
||||
cancelFn();
|
||||
close();
|
||||
ret = cancelFn();
|
||||
if (!ret) {
|
||||
close();
|
||||
}
|
||||
}
|
||||
if (ret && ret.then) {
|
||||
ret.then(close);
|
||||
}
|
||||
} else {
|
||||
close();
|
||||
@ -33,11 +39,17 @@ module.exports = function (props) {
|
||||
function onOk() {
|
||||
var okFn = props.onOk;
|
||||
if (okFn) {
|
||||
var ret;
|
||||
if (okFn.length) {
|
||||
okFn(close);
|
||||
ret = okFn(close);
|
||||
} else {
|
||||
okFn();
|
||||
close();
|
||||
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() {
|
||||
@ -43,9 +44,9 @@ var Modal = React.createClass({
|
||||
render() {
|
||||
var props = this.props;
|
||||
var footer = props.footer || [
|
||||
<button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
|
||||
<button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
|
||||
];
|
||||
<button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
|
||||
<button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
|
||||
];
|
||||
return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
|
||||
}
|
||||
});
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -1,64 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
|
||||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||||
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/static/normalize.css">
|
||||
{% 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="/static/script.js"></script>
|
||||
{% block scripts %}{% endblock %}
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
|
||||
<link rel="icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||||
<link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
|
||||
<link rel="stylesheet" href="/static/normalize.css">
|
||||
{% 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,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>
|
||||
<body {% block bodyAttribute %}{% endblock %}>
|
||||
<header id="header">
|
||||
<header id="header">
|
||||
<a class="logo" href="/">
|
||||
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
|
||||
{{ config.site.name }}
|
||||
<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">
|
||||
<button type="submit"></button>
|
||||
</form>
|
||||
<form>
|
||||
<input type="text" placeholder="search">
|
||||
<button type="submit"></button>
|
||||
</form>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<span class="bar"></span>
|
||||
<ul>
|
||||
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
|
||||
<a href="/">首页</a>
|
||||
</li>
|
||||
<li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
|
||||
<a href="/docs/introduce">上手</a>
|
||||
</li>
|
||||
<li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
|
||||
<a href="/components">组件</a>
|
||||
</li>
|
||||
<li class="{%- if post.filename === 'design' %}current{%- endif %}">
|
||||
<a class="disabled" href="/docs/design">设计</a>
|
||||
</li>
|
||||
<li class="{%- if post.filename === 'modes' %}current{%- endif %}">
|
||||
<a class="disabled" href="/docs/modes">模式</a>
|
||||
</li>
|
||||
<li class="{%- if post.filename === 'cases' %}current{%- endif %}">
|
||||
<a class="disabled" href="/docs/cases">案例</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
|
||||
<a href="/">首页</a>
|
||||
</li>
|
||||
<li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
|
||||
<a href="/docs/introduce">上手</a>
|
||||
</li>
|
||||
<li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
|
||||
<a href="/components">组件</a>
|
||||
</li>
|
||||
<li class="{%- if post.filename === 'design' %}current{%- endif %}">
|
||||
<a class="disabled" href="/docs/design">设计</a>
|
||||
</li>
|
||||
<li class="{%- if post.filename === 'modes' %}current{%- endif %}">
|
||||
<a class="disabled" href="/docs/modes">模式</a>
|
||||
</li>
|
||||
<li class="{%- if post.filename === 'cases' %}current{%- endif %}">
|
||||
<a class="disabled" href="/docs/cases">案例</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="main-wrapper">
|
||||
</header>
|
||||
<div class="main-wrapper">
|
||||
{% block aside %}{% endblock %}
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
{%- include "footer.html" %}
|
||||
</div>
|
||||
{%- include "footer.html" %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user