support promise for modal

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();
+        ret = cancelFn();
-        close();
+        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();
+        ret = okFn();
-        close();
+        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() {
@@ -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-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-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"/>;
   }
 });

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

@@ -1,64 +1,63 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <meta charset="utf-8">
+    <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
-  <meta name="format-detection" content="telephone=no">
+    <meta name="format-detection" content="telephone=no">
-  <title>{% block title %}{{ config.site.name }} - {{ config.site.description }}{% endblock %}</title>
+    <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="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="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
-  <link rel="stylesheet" href="/static/normalize.css">
+    <link rel="stylesheet" href="/static/normalize.css">
-  {% 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="/static/script.js"></script>
-  <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>
+    {% block scripts %}{% endblock %}
-  <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">
+        <img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
-      {{ config.site.name }}
+        {{ config.site.name }}
     </a>
+
     <div class="search">
-      <form>
+        <form>
-        <input type="text" placeholder="search">
+            <input type="text" placeholder="search">
-        <button type="submit"></button>
+            <button type="submit"></button>
-      </form>
+        </form>
     </div>
     <nav class="nav">
         <span class="bar"></span>
-      <ul>
+        <ul>
-        <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
+            <li class="{%- if post.meta.filepath === 'README.md' %}current{%- endif %}">
-          <a href="/">首页</a>
+                <a href="/">首页</a>
-        </li>
+            </li>
-        <li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
+            <li class="{%- if post.meta.category === 'start' %}current{%- endif %}">
-          <a href="/docs/introduce">上手</a>
+                <a href="/docs/introduce">上手</a>
-        </li>
+            </li>
-        <li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
+            <li class="{%- if post.meta.template === 'component' %}current{%- endif %}">
-          <a href="/components">组件</a>
+                <a href="/components">组件</a>
-        </li>
+            </li>
-        <li class="{%- if post.filename === 'design' %}current{%- endif %}">
+            <li class="{%- if post.filename === 'design' %}current{%- endif %}">
-          <a class="disabled" href="/docs/design">设计</a>
+                <a class="disabled" href="/docs/design">设计</a>
-        </li>
+            </li>
-        <li class="{%- if post.filename === 'modes' %}current{%- endif %}">
+            <li class="{%- if post.filename === 'modes' %}current{%- endif %}">
-          <a class="disabled" href="/docs/modes">模式</a>
+                <a class="disabled" href="/docs/modes">模式</a>
-        </li>
+            </li>
-        <li class="{%- if post.filename === 'cases' %}current{%- endif %}">
+            <li class="{%- if post.filename === 'cases' %}current{%- endif %}">
-          <a class="disabled" href="/docs/cases">案例</a>
+                <a class="disabled" href="/docs/cases">案例</a>
-        </li>
+            </li>
-      </ul>
+        </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>