Adding movementX and movementY to synthenticMouseEvent fixes #6723 (#…

…9018)

* adding movementX and movementY into syntheticMouseEvent

* fixing case mistake

* Add test fixture for movementX/Y fields

fixtures/dom/src/components/Header.js

@@ -65,6 +65,7 @@ class Header extends React.Component {
                 <option value="/custom-elements">Custom Elements</option>
                 <option value="/media-events">Media Events</option>
                 <option value="/pointer-events">Pointer Events</option>
+                <option value="/mouse-events">Mouse Events</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/index.js

@@ -12,6 +12,7 @@ import EventPooling from './event-pooling';
 import CustomElementFixtures from './custom-elements';
 import MediaEventsFixtures from './media-events';
 import PointerEventsFixtures from './pointer-events';
+import MouseEventsFixtures from './mouse-events';
 
 const React = window.React;
 
@@ -49,6 +50,8 @@ function FixturesPage() {
       return <MediaEventsFixtures />;
     case '/pointer-events':
       return <PointerEventsFixtures />;
+    case '/mouse-events':
+      return <MouseEventsFixtures />;
     default:
       return <p>Please select a test fixture.</p>;
   }

fixtures/dom/src/components/fixtures/mouse-events/index.js

@@ -0,0 +1,16 @@
+import FixtureSet from '../../FixtureSet';
+import MouseMovement from './mouse-movement';
+
+const React = window.React;
+
+class MouseEvents extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Mouse Events" description="">
+        <MouseMovement />
+      </FixtureSet>
+    );
+  }
+}
+
+export default MouseEvents;

fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js

@@ -0,0 +1,48 @@
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+class MouseMovement extends React.Component {
+  state = {
+    movement: {x: 0, y: 0},
+  };
+
+  onMove = event => {
+    this.setState({x: event.movementX, y: event.movementY});
+  };
+
+  render() {
+    const {x, y} = this.state;
+
+    const boxStyle = {
+      padding: '10px 20px',
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+    };
+
+    return (
+      <TestCase
+        title="Mouse Movement"
+        description="We polyfill the movementX and movementY fields."
+        affectedBrowsers="IE, Safari">
+        <TestCase.Steps>
+          <li>Mouse over the box below</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The reported values should equal the pixel (integer) difference
+          between mouse movements positions.
+        </TestCase.ExpectedResult>
+
+        <div style={boxStyle} onMouseMove={this.onMove}>
+          <p>Trace your mouse over this box.</p>
+          <p>
+            Last movement: {x},{y}
+          </p>
+        </div>
+      </TestCase>
+    );
+  }
+}
+
+export default MouseMovement;

packages/react-dom/src/events/SyntheticMouseEvent.js

@@ -8,6 +8,9 @@
 import SyntheticUIEvent from './SyntheticUIEvent';
 import getEventModifierState from './getEventModifierState';
 
+let previousScreenX = null;
+let previousScreenY = null;
+
 /**
  * @interface MouseEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -34,6 +37,24 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
         : event.fromElement)
     );
   },
+  movementX: function(event) {
+    if ('movementX' in event) {
+      return event.movementX;
+    }
+
+    const screenX = previousScreenX;
+    previousScreenX = event.screenX;
+    return screenX ? event.screenX - screenX : 0;
+  },
+  movementY: function(event) {
+    if ('movementY' in event) {
+      return event.movementY;
+    }
+
+    const screenY = previousScreenY;
+    previousScreenY = event.screenY;
+    return screenY ? event.screenY - screenY : 0;
+  },
 });
 
 export default SyntheticMouseEvent;