support promise for modal

abcdaddc · yiminghe · 58b04e8a · abcdaddc · abcdaddc · abcdaddc
6 changed file
--- a/components/modal/confirm.jsx
+++ b/components/modal/confirm.jsx
@@ -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();
    }

--- a/components/modal/demo/confirm-promise.md
+++ b/components/modal/demo/confirm-promise.md
+# 确认对话框
+
+- 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'));
+````
--- 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() {

--- 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 |
--- 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",

--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@@ -13,18 +13,17 @@
    {% 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>
 <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 }}
    </a>
+
    <div class="search">
        <form>
            <input type="text" placeholder="search">
@@ -54,11 +53,11 @@
            </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>