clean props. fixes #8

HISTORY.md

@@ -1,6 +1,10 @@
 # History
 ----
 
+## 5.0.0 2015-08-17
+
+- refactor to clean api. remove onShow onBeforeClose
+
 ## 4.5.0 2015-07-23
 
 use rc-animate & rc-align

README.md

@@ -74,13 +74,7 @@ var Dialog = require('rc-dialog');
           <td>visible</td>
           <td>Boolean</td>
           <th>false</th>
-          <td></td>
-      </tr>
-      <tr>
-          <td>renderToBody</td>
-          <td>Boolean</td>
-          <th>true</th>
-          <td>whether render dialog to body</td>
+          <td>current dialog's visible status</td>
       </tr>
       <tr>
           <td>animation</td>
@@ -113,10 +107,16 @@ var Dialog = require('rc-dialog');
           <td>whether show close button and click mask to close</td>
       </tr>
       <tr>
-          <td>onBeforeClose</td>
-          <td>function(close)</td>
+          <td>mousePosition</td>
+          <td>{x:number,y:number}</td>
+          <th></th>
+          <td>set pageX and pageY of current mouse(it will cause transform origin to be set).</td>
+      </tr>
+      <tr>
+          <td>onClose</td>
+          <td>function()</td>
           <th></th>
-          <td>when click close button or mask. argument is a close function</td>
+          <td>called when click close button or mask</td>
       </tr>
     </tbody>
 </table>

examples/ant-design.js

@@ -3,67 +3,66 @@
 import 'rc-dialog/assets/index.css';
 import React from 'react';
 import Dialog from 'rc-dialog';
-var container;
 
-function showDialog(content, props) {
-  if (!container) {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  }
-  var close = props.onClose;
-  props.onClose = function () {
-    if (close) {
-      close();
-    }
-    React.unmountComponentAtNode(container);
-  };
-  var dialog = React.render(<Dialog {...props} renderToBody={false}>{content}</Dialog>, container);
-  dialog.show();
-  return dialog;
-}
-
-var DialogContent = React.createClass({
-  getInitialState: function () {
+var MyControl = React.createClass({
+  getInitialState(){
     return {
-      value: ''
+      visible:false,
+      destroyOnClose:false,
     };
   },
 
-  render: function () {
-    return <div>
-      <p>basic modal</p>
-    </div>;
-  }
-});
-
-var MyControl = React.createClass({
-  handleTrigger: function (e) {
-    this.d = showDialog(<DialogContent />, {
-      title: <p> 第二个弹框 <input /></p>,
-      animation: 'zoom',
-      maskAnimation: 'fade',
-      onBeforeClose: this.beforeClose,
+  onClick: function (e) {
+    this.setState({
       mousePosition: {
         x:e.pageX,
         y:e.pageY
       },
-      style: {width: 600}
+      visible:true
+    });
+  },
+
+  onClose(){
+    this.setState({
+      visible:false
     });
   },
 
+  onDestroyOnCloseChange(e){
+    this.setState({
+      destroyOnClose:e.target.checked
+    });
+  },
 
   render: function () {
+    var dialog;
+    if(this.state.visible || !this.state.destroyOnClose){
+      dialog= <Dialog visible={this.state.visible}
+              animation="zoom"
+              maskAnimation="fade"
+              onClose={this.onClose}
+              style={{width:600}}
+              mousePosition={this.state.mousePosition} title={<div> 第二个弹框</div>}>
+        <input />
+        <p>basic modal</p>
+      </Dialog>;
+   }
     return (
       <div>
-        <button className="btn btn-primary" onClick={this.handleTrigger}>show dialog</button>
+        <p>
+        <button className="btn btn-primary" onClick={this.onClick}>show dialog</button>
+          &nbsp;
+          <label>destroy on close: <input type="checkbox" checked={this.state.destroyOnClose} onChange={this.onDestroyOnCloseChange}/></label>
+          </p>
+        {dialog}
       </div>
     );
   }
 });
 
 React.render(
   <div>
-    <h2>render dialog standalone</h2>
+    <h2>ant-design dialog</h2>
     <MyControl/>
   </div>,
   document.getElementById('__react-content')