From e19186f78382ec2dcd4e74d48e040aea4e7deff2 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 27 Oct 2015 19:57:18 +0800
Subject: [PATCH] confirmLoading is fully controlled by props now, fix #392

---
 components/modal/demo/{custom.md => async.md} | 11 +++---
 components/modal/demo/basic.md                |  3 +-
 components/modal/index.jsx                    | 35 +++----------------
 3 files changed, 13 insertions(+), 36 deletions(-)
 rename components/modal/demo/{custom.md => async.md} (78%)

diff --git a/components/modal/demo/custom.md b/components/modal/demo/async.md
similarity index 78%
rename from components/modal/demo/custom.md
rename to components/modal/demo/async.md
index d5bd2993ad..7e4ffb31d5 100644
--- a/components/modal/demo/custom.md
+++ b/components/modal/demo/async.md
@@ -2,7 +2,7 @@
 
 - order: 1
 
-点击确定后异步关闭对话框。
+点击确定后异步关闭对话框，例如提交表单。
 
 ---
 
@@ -26,11 +26,13 @@ var Test = React.createClass({
   },
   handleOk() {
     this.setState({
-      ModalText: '对话框将在两秒后关闭'
+      ModalText: '对话框将在两秒后关闭',
+      confirmLoading: true
     });
     setTimeout(() => {
       this.setState({
-        visible: false
+        visible: false,
+        confirmLoading: false
       });
     }, 2000);
   },
@@ -46,6 +48,7 @@ var Test = React.createClass({
       <Modal title="对话框标题"
         visible={this.state.visible}
         onOk={this.handleOk}
+        confirmLoading={this.state.confirmLoading}
         onCancel={this.handleCancel}>
         <p>{this.state.ModalText}</p>
       </Modal>
@@ -53,5 +56,5 @@ var Test = React.createClass({
   }
 });
 
-ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-custom'));
+ReactDOM.render(<Test/> , document.getElementById('components-modal-demo-async'));
 ````
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index ffe81b9a6c..bca6cd1c42 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -22,7 +22,6 @@ var App = React.createClass({
   handleOk() {
     console.log('点击了确定');
     this.setState({
-      confirmLoading: false,
       visible: false
     });
   },
@@ -35,7 +34,7 @@ var App = React.createClass({
     return <div>
       <Button type="primary" onClick={this.showModal}>显示对话框</Button>
       <Modal title="第一个 Modal" visible={this.state.visible}
-        confirmLoading={this.state.confirmLoading} onOk={this.handleOk} onCancel={this.handleCancel}>
+        onOk={this.handleOk} onCancel={this.handleCancel}>
         <p>对话框的内容</p>
         <p>对话框的内容</p>
         <p>对话框的内容</p>
diff --git a/components/modal/index.jsx b/components/modal/index.jsx
index 9956cc04e2..0a9f1e83fe 100644
--- a/components/modal/index.jsx
+++ b/components/modal/index.jsx
@@ -4,8 +4,7 @@ import { Dom } from 'rc-util';
 import confirm from './confirm';
 import { Button } from '../button';
 
-function noop() {
-}
+function noop() {}
 
 let mousePosition;
 let mousePositionEventBinded;
@@ -18,14 +17,9 @@ let AntModal = React.createClass({
       onCancel: noop,
       width: 520,
       transitionName: 'zoom',
-      maskAnimation: 'fade'
-    };
-  },
-
-  getInitialState() {
-    return {
+      maskAnimation: 'fade',
       confirmLoading: false,
-      visible: this.props.visible
+      visible: false
     };
   },
 
@@ -34,27 +28,9 @@ let AntModal = React.createClass({
   },
 
   handleOk() {
-    this.setState({
-      confirmLoading: true
-    });
     this.props.onOk();
   },
 
-  componentWillReceiveProps(nextProps) {
-    let newState = {};
-    if ('visible' in nextProps) {
-      newState.visible = nextProps.visible;
-      // 隐藏后默认去除按钮 loading 效果
-      if (!nextProps.visible) {
-        newState.confirmLoading = false;
-      }
-    }
-    if ('confirmLoading' in nextProps) {
-      newState.confirmLoading = !!nextProps.confirmLoading;
-    }
-    this.setState(newState);
-  },
-
   componentDidMount() {
     if (mousePositionEventBinded) {
       return;
@@ -85,15 +61,14 @@ let AntModal = React.createClass({
       <Button key="confirm"
         type="primary"
         size="large"
-        loading={this.state.confirmLoading}
+        loading={props.confirmLoading}
         onClick={this.handleOk}>
         确定
       </Button>
     ];
     let footer = props.footer || defaultFooter;
-    let visible = this.state.visible;
     return <Dialog onClose={this.handleCancel} footer={footer} {...props}
-      visible={visible} mousePosition={mousePosition} />;
+      visible={props.visible} mousePosition={mousePosition} />;
   }
 });