From abcdaddcaa8d2db9435a75ebe4c21e7cb270ecab Mon Sep 17 00:00:00 2001 From: yiminghe Date: Thu, 25 Jun 2015 15:29:56 +0800 Subject: [PATCH] support promise for modal --- components/modal/confirm.jsx | 24 ++++-- components/modal/demo/confirm-promise.md | 30 ++++++++ components/modal/index.jsx | 9 ++- components/modal/index.md | 6 +- package.json | 2 +- site/templates/layout.html | 95 ++++++++++++------------ 6 files changed, 104 insertions(+), 62 deletions(-) create mode 100644 components/modal/demo/confirm-promise.md diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx index 1fd20f230b..7a5c76b967 100644 --- a/components/modal/confirm.jsx +++ b/components/modal/confirm.jsx @@ -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(); diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md new file mode 100644 index 0000000000..2d58e172b6 --- /dev/null +++ b/components/modal/demo/confirm-promise.md @@ -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( +, document.getElementById('components-modal-demo-confirm-promise')); +```` diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 8936bc140f..a5dbe3fcc7 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -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 || [ - , - - ]; + , + + ]; return ; } }); diff --git a/components/modal/index.md b/components/modal/index.md index 020cad8c9f..bc672dea3a 100644 --- a/components/modal/index.md +++ b/components/modal/index.md @@ -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 | diff --git a/package.json b/package.json index a1691f8ebf..103d80a1a6 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/site/templates/layout.html b/site/templates/layout.html index da258af6c1..ea3b3e2a83 100644 --- a/site/templates/layout.html +++ b/site/templates/layout.html @@ -1,64 +1,63 @@ - - - - - - {% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %} - - - - {% block styles %}{% endblock %} - - - - - - - {% block scripts %}{% endblock %} + + + + + + {% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %} + + + + {% block styles %}{% endblock %} + + + + + {% block scripts %}{% endblock %} - +
{% block aside %}{% endblock %} {% block content %}{% endblock %} -
- {%- include "footer.html" %} + +{%- include "footer.html" %} -- GitLab