Fix cancel button can not close modal

1. 关闭取消按钮的修复
2. 优化 loading 按钮的效果

components/modal/demo/basic.md

@@ -18,7 +18,7 @@ var Test = React.createClass({
   showModal(e) {
     this.setState({
       visible: true,
-      mousePosition:{x:e.pageX,y:e.pageY}
+      mousePosition: {x:e.pageX,y:e.pageY}
     });
   },
   handleOk() {

components/modal/demo/confirm-promise.md

@@ -15,8 +15,8 @@ function showConfirm(){
     content: '一些解释',
     onOk: function() {
       alert('1 秒后关闭');
-      return new Promise(function(resolve){
-        setTimeout(resolve,1000);
+      return new Promise(function(resolve) {
+        setTimeout(resolve, 1000);
       });
     },
     onCancel: function() {}

components/modal/demo/footer.md

@@ -17,11 +17,14 @@ var Test = React.createClass({
     };
   },
   showModal(e) {
-    this.setState({ visible: true,mousePosition:{x:e.pageX,y:e.pageY} });
+    this.setState({
+      visible: true,
+      mousePosition:{x:e.pageX,y:e.pageY}
+    });
   },
   handleOk() {
     this.setState({ loading: true });
-    setTimeout(()=> {
+    setTimeout(() => {
       this.setState({ loading: false, visible: false });
     }, 3000);
   },
@@ -39,9 +42,8 @@ var Test = React.createClass({
        title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
         footer={[
           <button key="back" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>返 回</button>,
-          <button key="submit" className="ant-btn ant-btn-primary ant-btn-lg" onClick={this.handleOk}>
+          <button key="submit" className={'ant-btn ant-btn-primary ant-btn-lg ' + (this.state.loading?'ant-btn-loading':'')} onClick={this.handleOk}>
             提 交
-            <i className={'anticon anticon-loading'+(this.state.loading?'':'hide')}></i>
           </button>
         ]}>
         <p>对话框的内容</p>

components/modal/index.jsx

@@ -4,16 +4,6 @@ function noop() {
 }
 
 export default React.createClass({
-  getInitialState() {
-    return {
-      confirmLoading: false
-    };
-  },
-
-  handleCancel() {
-    this.props.onCancel();
-  },
-
   getDefaultProps() {
     return {
       prefixCls: 'ant-modal',
@@ -22,6 +12,20 @@ export default React.createClass({
     };
   },
 
+  getInitialState() {
+    return {
+      confirmLoading: false,
+      visible: this.props.visible
+    };
+  },
+
+  handleCancel() {
+    this.props.onCancel();
+    this.setState({
+      visible: false
+    });
+  },
+
   handleOk() {
     this.setState({
       confirmLoading: true
@@ -31,27 +35,32 @@ export default React.createClass({
 
   componentWillReceiveProps(nextProps) {
     if ('visible' in nextProps) {
+      let newState = {
+        visible: nextProps.visible
+      };
       // 隐藏后去除按钮 loading 效果
       if (!nextProps.visible) {
-        this.setState({
-          confirmLoading: false
-        });
+        newState.confirmLoading = false;
       }
+      this.setState(newState);
     }
   },
 
   render() {
-    var loadingIcon = this.state.confirmLoading ?
-      <i className="anticon anticon-loading"></i> : '';
-    var props = this.props;
-    var defaultFooter = [
+    let loadingClass = this.state.confirmLoading ? ' ant-btn-loading' : '';
+    let props = this.props;
+    let defaultFooter = [
       <button key="cancel" type="button" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>取 消</button>,
-      <button key="confirm" type="button" className="ant-btn ant-btn-primary ant-btn-lg" onClick={this.handleOk}>
-        确 定 {loadingIcon}
+      <button key="confirm"
+        type="button"
+        className={'ant-btn ant-btn-primary ant-btn-lg' + loadingClass}
+        onClick={this.handleOk}>
+        确 定
       </button>
     ];
-    var footer = props.footer || defaultFooter;
-    return <Dialog transitionName="zoom" onClose={props.onCancel} visible={this.state.visible}
-                   maskAnimation="fade" width="500" footer={footer} {...props}/>;
+    let footer = props.footer || defaultFooter;
+    let visible = this.state.visible;
+    return <Dialog transitionName="zoom" onClose={this.handleCancel} maskAnimation="fade"
+                   width="500" footer={footer} {...props} visible={visible} />;
   }
 });