From 56b06e168fa536ca65a7751153792cf542116c2c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 18 Aug 2015 12:26:19 +0800
Subject: [PATCH] get mousePosition from mousemove listener for more elegant
 API

---
 components/modal/demo/basic.md  |  8 +++-----
 components/modal/demo/custom.md |  6 ++----
 components/modal/demo/footer.md |  6 ++----
 components/modal/index.jsx      | 35 +++++++++++++++++++++++++++++++--
 4 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index 104a88ff3e..c8cf14d7ab 100644
--- a/components/modal/demo/basic.md
+++ b/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>
diff --git a/components/modal/demo/custom.md b/components/modal/demo/custom.md
index c6be2e08b2..08848efce1 100644
--- a/components/modal/demo/custom.md
+++ b/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}>
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index 8e2c1963ac..55e116abb3 100644
--- a/components/modal/demo/footer.md
+++ b/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>,
diff --git a/components/modal/index.jsx b/components/modal/index.jsx
index 1acba1d35f..d53dbfe695 100644
--- a/components/modal/index.jsx
+++ b/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} />;
   }
 });
-- 
GitLab