Merge pull request #149 from ant-design/improve-modal-mouse-position

改进 modal 的 mousePosition 获取方式

components/modal/confirm.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Dialog from 'rc-dialog';
+import Dialog from './index';
 var div;
 
 export default function (props) {
@@ -76,6 +76,7 @@ export default function (props) {
     closable={false}
     title=""
     transitionName="zoom"
+    footer=""
     maskTransitionName="fade" width={width}>
     <div style={{zoom: 1, overflow: 'hidden'}}>{body} {footer}</div>
   </Dialog>, div, function () {

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>
@@ -45,4 +43,3 @@ var Test = React.createClass({
 
 React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
 ````
-

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

@@ -1,8 +1,12 @@
 import React from 'react';
 import Dialog from 'rc-dialog';
+import { Dom } from 'rc-util';
 function noop() {
 }
 
+let mousePosition;
+let mousePositionEventBinded;
+
 export default React.createClass({
   getDefaultProps() {
     return {
@@ -46,6 +50,24 @@ export default React.createClass({
     }
   },
 
+  componentDidMount() {
+    if (mousePositionEventBinded) {
+      return;
+    }
+    // 只有点击事件支持从鼠标位置动画展开
+    Dom.addEventListener(document.body, 'click', function onDocumentMousemove(e) {
+      mousePosition = {
+        x: e.pageX,
+        y: e.pageY
+      };
+      // 100ms 内发生过点击事件，则从点击位置动画展示
+      // 否则直接 zoom 展示
+      // 这样可以兼容非点击方式展开
+      setTimeout(() => mousePosition = null, 100);
+    });
+    mousePositionEventBinded = true;
+  },
+
   render() {
     let loadingClass = this.state.confirmLoading ? ' ant-btn-loading' : '';
     let props = this.props;
@@ -60,7 +82,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={mousePosition} />;
   }
 });