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
Jason Williams committed
Jun 15, 2018 at 14:15 UTC
64c54edea4a1f41d87fb6d4c14767adedf652d90
5 files changed
+89
fixtures/dom/src/components/Header.js
+1
@@ -65,6 +65,7 @@ class Header extends React.Component {
65
<option value="/custom-elements">Custom Elements</option>
66
<option value="/media-events">Media Events</option>
67
<option value="/pointer-events">Pointer Events</option>
68
+ <option value="/mouse-events">Mouse Events</option>
69
</select>
70
</label>
71
<label htmlFor="react_version">
fixtures/dom/src/components/fixtures/index.js
+3
@@ -12,6 +12,7 @@ import EventPooling from './event-pooling';
12
import CustomElementFixtures from './custom-elements';
13
import MediaEventsFixtures from './media-events';
14
import PointerEventsFixtures from './pointer-events';
15
+import MouseEventsFixtures from './mouse-events';
16
17
const React = window.React;
18
@@ -49,6 +50,8 @@ function FixturesPage() {
50
return <MediaEventsFixtures />;
51
case '/pointer-events':
52
return <PointerEventsFixtures />;
53
+ case '/mouse-events':
54
+ return <MouseEventsFixtures />;
55
default:
56
return <p>Please select a test fixture.</p>;
57
}
fixtures/dom/src/components/fixtures/mouse-events/index.js
new
+16
@@ -0,0 +1,16 @@
1
+import FixtureSet from '../../FixtureSet';
2
+import MouseMovement from './mouse-movement';
3
+
4
+const React = window.React;
5
+
6
+class MouseEvents extends React.Component {
7
+ render() {
8
+ return (
9
+ <FixtureSet title="Mouse Events" description="">
10
+ <MouseMovement />
11
+ </FixtureSet>
12
+ );
13
+ }
14
+}
15
+
16
+export default MouseEvents;
fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js
new
+48
@@ -0,0 +1,48 @@
1
+import TestCase from '../../TestCase';
2
+
3
+const React = window.React;
4
+
5
+class MouseMovement extends React.Component {
6
+ state = {
7
+ movement: {x: 0, y: 0},
8
+ };
9
+
10
+ onMove = event => {
11
+ this.setState({x: event.movementX, y: event.movementY});
12
+ };
13
+
14
+ render() {
15
+ const {x, y} = this.state;
16
+
17
+ const boxStyle = {
18
+ padding: '10px 20px',
19
+ border: '1px solid #d9d9d9',
20
+ margin: '10px 0 20px',
21
+ };
22
+
23
+ return (
24
+ <TestCase
25
+ title="Mouse Movement"
26
+ description="We polyfill the movementX and movementY fields."
27
+ affectedBrowsers="IE, Safari">
28
+ <TestCase.Steps>
29
+ <li>Mouse over the box below</li>
30
+ </TestCase.Steps>
31
+
32
+ <TestCase.ExpectedResult>
33
+ The reported values should equal the pixel (integer) difference
34
+ between mouse movements positions.
35
+ </TestCase.ExpectedResult>
36
+
37
+ <div style={boxStyle} onMouseMove={this.onMove}>
38
+ <p>Trace your mouse over this box.</p>
39
+ <p>
40
+ Last movement: {x},{y}
41
+ </p>
42
+ </div>
43
+ </TestCase>
44
+ );
45
+ }
46
+}
47
+
48
+export default MouseMovement;
packages/react-dom/src/events/SyntheticMouseEvent.js
+21
@@ -8,6 +8,9 @@
8
import SyntheticUIEvent from './SyntheticUIEvent';
9
import getEventModifierState from './getEventModifierState';
10
11
+let previousScreenX = null;
12
+let previousScreenY = null;
13
+
14
/**
15
* @interface MouseEvent
16
* @see http://www.w3.org/TR/DOM-Level-3-Events/
@@ -34,6 +37,24 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
37
: event.fromElement)
38
);
39
},
40
+ movementX: function(event) {
41
+ if ('movementX' in event) {
42
+ return event.movementX;
43
+ }
44
+
45
+ const screenX = previousScreenX;
46
+ previousScreenX = event.screenX;
47
+ return screenX ? event.screenX - screenX : 0;
48
+ },
49
+ movementY: function(event) {
50
+ if ('movementY' in event) {
51
+ return event.movementY;
52
+ }
53
+
54
+ const screenY = previousScreenY;
55
+ previousScreenY = event.screenY;
56
+ return screenY ? event.screenY - screenY : 0;
57
+ },
58
});
59
60
export default SyntheticMouseEvent;