support promise for modal

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();
     }

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(
+<button className="ant-btn" onClick={showConfirm}>
+  确认对话框
+</button>, document.getElementById('components-modal-demo-confirm-promise'));
+````

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() {

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         | 无           |
+| onOk       | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭      | function         | 无           |
-| onCancel | 取消回调，参数为关闭函数       | function         | 无           |
+| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭       | function         | 无           |
 | width      | 宽度           | String or Number | 375           |
 | iconClassName | 图标样式名 | String | anticon-exclamation-circle |

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

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>
+    <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>
     {% 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>
+</header>
-  <div class="main-wrapper">
+<div class="main-wrapper">
     {% block aside %}{% endblock %}
     {% block content %}{% endblock %}
-  </div>
+</div>
-  {%- include "footer.html" %}
+{%- include "footer.html" %}
 </body>
 </html>