get mousePosition from mousemove listener for more elegant API

components/modal/demo/basic.md

@@ -13,12 +13,11 @@ var Test = React.createClass({
   getInitialState(){
     return{
       visible: false
-    }
+    };
   },
-  showModal(e) {
+  showModal() {
     this.setState({
-      visible: true,
-      mousePosition: {x:e.pageX,y:e.pageY}
+      visible: true
     });
   },
   handleOk() {
@@ -32,7 +31,6 @@ var Test = React.createClass({
       <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
       <Modal title="第一个 Modal"
         visible={this.state.visible}
-        mousePosition={this.state.mousePosition}
         onOk={this.handleOk}
         onCancel={this.handleCancel}>
         <p>对话框的内容</p>

components/modal/demo/custom.md

@@ -17,10 +17,9 @@ var Test = React.createClass({
       visible: false
     };
   },
-  showModal(e) {
+  showModal() {
     this.setState({
-      visible: true,
-      mousePosition:{x:e.pageX,y:e.pageY}
+      visible: true
     });
   },
   handleOk() {
@@ -40,7 +39,6 @@ var Test = React.createClass({
     return <div>
       <button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
       <Modal title="对话框标题"
-      mousePosition={this.state.mousePosition}
         visible={this.state.visible}
         onOk={this.handleOk}
         onCancel={this.handleCancel}>

components/modal/demo/footer.md

@@ -16,10 +16,9 @@ var Test = React.createClass({
       visible: false
     };
   },
-  showModal(e) {
+  showModal() {
     this.setState({
-      visible: true,
-      mousePosition:{x:e.pageX,y:e.pageY}
+      visible: true
     });
   },
   handleOk() {
@@ -38,7 +37,6 @@ var Test = React.createClass({
       </button>
       <Modal ref="modal"
        visible={this.state.visible}
-       mousePosition={this.state.mousePosition}
        title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
         footer={[
           <button key="back" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>返 回</button>,

components/modal/index.jsx

@@ -3,6 +3,21 @@ import Dialog from 'rc-dialog';
 function noop() {
 }
 
+function wrap(standard, fallback) {
+  return function (el, evtName, listener, useCapture) {
+    if (el[standard]) {
+      el[standard](evtName, listener, useCapture);
+    } else if (el[fallback]) {
+      el[fallback]('on' + evtName, listener);
+    }
+  };
+}
+
+let eventListener = {
+  add: wrap('addEventListener', 'attachEvent'),
+  remove: wrap('removeEventListener', 'detachEvent')
+};
+
 export default React.createClass({
   getDefaultProps() {
     return {
@@ -19,6 +34,21 @@ export default React.createClass({
     };
   },
 
+  onDocumentMousemove(e) {
+    this.mousePosition = {
+      x: e.pageX,
+      y: e.pageY
+    };
+  },
+
+  componentWillMount() {
+    eventListener.add(document, 'mousemove', this.onDocumentMousemove);
+  },
+
+  componentWillUnmount() {
+    eventListener.remove(document, 'mousemove', this.onDocumentMousemove);
+  },
+
   handleCancel() {
     this.props.onCancel();
     this.setState({
@@ -60,7 +90,8 @@ export default React.createClass({
     ];
     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} />;
+    return <Dialog transitionName="zoom" onClose={this.handleCancel}
+      maskAnimation="fade" width="500" footer={footer} {...props}
+      visible={visible} mousePosition={this.mousePosition} />;
   }
 });