Feature on close event

examples/ant-design.js

@@ -1,43 +1,42 @@
-'use strict';
-
 import 'rc-dialog/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Dialog from 'rc-dialog';
 import assign from 'object-assign';
 
-var MyControl = React.createClass({
-  getInitialState(){
+const MyControl = React.createClass({
+  getInitialState() {
     return {
       visible: false,
       width: 600,
       align: {
         points: ['tc', 'tc'],
-        offset: [0, 100]
+        offset: [0, 100],
       },
       destroyOnClose: false,
     };
   },
 
-  onClick: function (e) {
+  onClick(e) {
     this.setState({
       mousePosition: {
         x: e.pageX,
-        y: e.pageY
+        y: e.pageY,
       },
-      visible: true
+      visible: true,
     });
   },
 
-  onClose(){
+  onClose(e) {
+    console.log(e);
     this.setState({
-      visible: false
+      visible: false,
     });
   },
 
-  onDestroyOnCloseChange(e){
+  onDestroyOnCloseChange(e) {
     this.setState({
-      destroyOnClose: e.target.checked
+      destroyOnClose: e.target.checked,
     });
   },
 
@@ -48,22 +47,23 @@ var MyControl = React.createClass({
     });
   },
 
-  render: function () {
-    var dialog;
+  render() {
+    let dialog;
     if (this.state.visible || !this.state.destroyOnClose) {
-      dialog = <Dialog visible={this.state.visible}
-                       align={this.state.align}
-                       animation="zoom"
-                       maskAnimation="fade"
-                       onClose={this.onClose}
-                       style={{width:this.state.width}}
-                       mousePosition={this.state.mousePosition} title={<div> 第二个弹框</div>}>
-        <input />
-
-        <p>basic modal</p>
-        <button onClick={this.changeWidth}>change width</button>
-        <div style={{height:200}}></div>
-      </Dialog>;
+      dialog = (
+        <Dialog visible={this.state.visible}
+                align={this.state.align}
+                animation="zoom"
+                maskAnimation="fade"
+                onClose={this.onClose}
+                style={{width: this.state.width}}
+                mousePosition={this.state.mousePosition} title={<div>第二个弹框</div>}>
+          <input />
+          <p>basic modal</p>
+          <button onClick={this.changeWidth}>change width</button>
+          <div style={{height: 200}}></div>
+        </Dialog>
+      );
     }
     return (
       <div>
@@ -76,13 +76,13 @@ var MyControl = React.createClass({
         {dialog}
       </div>
     );
-  }
+  },
 });
 
 ReactDOM.render(
   <div>
     <h2>ant-design dialog</h2>
-    <MyControl/>
+    <MyControl />
   </div>,
   document.getElementById('__react-content')
 );

examples/bootstrap.js

@@ -1,64 +1,64 @@
-'use strict';
-
 import 'rc-dialog/assets/bootstrap.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Dialog from 'rc-dialog';
 
-var MyControl = React.createClass({
-  getInitialState(){
+const MyControl = React.createClass({
+  getInitialState() {
     return {
-      visible:false,
-      destroyOnClose:false,
+      visible: false,
+      destroyOnClose: false,
     };
   },
 
-  onClick: function (e) {
+  onClick(e) {
     this.setState({
       mousePosition: {
-        x:e.pageX,
-        y:e.pageY
+        x: e.pageX,
+        y: e.pageY,
       },
-      visible:true
+      visible: true,
     });
   },
 
-  onClose(){
+  onClose() {
     this.setState({
-      visible:false
+      visible: false,
     });
   },
 
-  onDestroyOnCloseChange(e){
+  onDestroyOnCloseChange(e) {
     this.setState({
-      destroyOnClose:e.target.checked
+      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>;
-   }
+  render() {
+    let 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>
         <p>
-        <button className="btn btn-primary" onClick={this.onClick}>show dialog</button>
+          <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>
+        </p>
         {dialog}
       </div>
     );
-  }
+  },
 });
 
 ReactDOM.render(

package.json

@@ -55,9 +55,10 @@
     "lint"
   ],
   "dependencies": {
+    "classnames": "2.x",
     "object-assign": "4.x",
     "rc-align": "2.x",
     "rc-animate": "2.x",
     "rc-util": "3.x"
   }
-}
+}

src/Dialog.jsx

@@ -1,10 +1,11 @@
 import React, {PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import Align from 'rc-align';
-import {KeyCode, classSet} from 'rc-util';
+import { KeyCode } from 'rc-util';
 import assign from 'object-assign';
 import Animate from 'rc-animate';
 import DOMWrap from './DOMWrap';
+import classNames from 'classnames';
 
 function noop() {
 }
@@ -87,9 +88,9 @@ const Dialog = React.createClass({
     this.props.onAfterClose();
   },
 
-  onMaskClick() {
+  onMaskClick(e) {
     if (this.props.closable) {
-      this.close();
+      this.close(e);
     }
     ReactDOM.findDOMNode(this.refs.dialog).focus();
   },
@@ -98,7 +99,7 @@ const Dialog = React.createClass({
     const props = this.props;
     if (props.closable) {
       if (e.keyCode === KeyCode.ESC) {
-        this.close();
+        this.close(e);
       }
     }
     // keep focus inside dialog
@@ -251,8 +252,8 @@ const Dialog = React.createClass({
     return transitionName;
   },
 
-  close() {
-    this.props.onClose();
+  close(e) {
+    this.props.onClose(e);
   },
 
   render() {
@@ -262,7 +263,7 @@ const Dialog = React.createClass({
       [`${prefixCls}-wrap`]: 1,
     };
 
-    return (<div className={classSet(className)}>
+    return (<div className={classNames(className)}>
       {[this.getMaskElement(), this.getDialogElement()]}
     </div>);
   },

src/DialogWrap.jsx

@@ -63,8 +63,8 @@ class DialogWrap extends React.Component {
     }
   }
 
-  onClose() {
-    this.props.onClose();
+  onClose(e) {
+    this.props.onClose(e);
   }
 
   getDialogContainer() {