confirmLoading is fully controlled by props now, fix #392

components/modal/demo/custom.md → 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'));
 ````

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>

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