update modal demos

components/modal/demo/basic.md

@@ -2,7 +2,7 @@
 
 - order: 0
 
-使用很简单。
+最基础的例子。
 
 ---
 
@@ -10,41 +10,29 @@
 var Modal = antd.Modal;
 
 var Test = React.createClass({
-  getInitialState(){
+  showModal() {
-    return {
+    this.refs.modal.show();
-      visible:false
-    };
   },
-  showModal(){
+  handleOk() {
-    this.setState({
+    console.log('点击了确定');
-      visible:true
+    this.refs.modal.hide();
-    });
   },
-  handleOk(){
+  handleCancel() {
-    alert('ok');
+    console.log('点击了取消');
-    var self = this;
-    setTimeout(function(){
-      self.setState({
-        visible:false
-      });
-    },200);
   },
-  handleCancel(){
+  render() {
-    var self = this;
-    alert('cancel');
-    setTimeout(function(){
-        self.setState({
-          visible:false
-        });
-      },200);
-  },
-  render(){
     return <div>
-    <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
+      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
-    <Modal title="第一个 Modal" visible={this.state.visible} onOk={this.handleOk} onBeforeClose={this.handleCancel}><p>对话框的内容</p></Modal>
+      <Modal title="第一个 Modal"
+        ref="modal"
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}>
+        <p>对话框的内容</p>
+      </Modal>
     </div>;
   }
 });
 
 React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
 ````
+

components/modal/demo/custom.md

@@ -0,0 +1,47 @@
+# 异步关闭
+
+- order: 1
+
+
+
+---
+
+````jsx
+var Modal = antd.Modal;
+var ModalText = '对话框的内容';
+
+var Test = React.createClass({
+  getInitialState() {
+    return {
+      ModalText: '对话框的内容'
+    };
+  },
+  showModal() {
+    this.refs.modal.show();
+  },
+  handleOk() {
+    this.setState({
+      ModalText: '对话框将在两秒后关闭'
+    });
+    setTimeout((function() {
+      this.refs.modal.hide();
+    }).bind(this), 2000);
+  },
+  handleCancel() {
+    console.log('点击了取消');
+  },
+  render() {
+    return <div>
+      <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
+      <Modal ref="modal"
+        title="对话框标题"
+        onOk={this.handleOk}
+        onCancel={this.handleCancel}>
+        <p>{this.state.ModalText}</p>
+      </Modal>
+    </div>;
+  }
+});
+
+React.render(<Test/> , document.getElementById('components-modal-demo-custom'));
+````

components/modal/index.jsx

@@ -6,8 +6,15 @@ function noop() {
 }
 
 var Modal = React.createClass({
+  getInitialState() {
+    return {
+      visible: false
+    };
+  },
+
   handleCancel() {
-    this.refs.d.requestClose();
+    this.props.onCancel();
+    this.hide();
   },
 
   getDefaultProps() {
@@ -19,6 +26,18 @@ var Modal = React.createClass({
     };
   },
 
+  show() {
+    this.setState({
+      visible: true
+    });
+  },
+
+  hide() {
+    this.setState({
+      visible: false
+    });
+  },
+
   handleOk() {
     this.props.onOk();
   },
@@ -29,7 +48,7 @@ var Modal = React.createClass({
       <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>
     ];
-    return <Dialog animation="zoom" maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
+    return <Dialog animation="zoom" visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
   }
 });