Rename hover props in experimental event API and write unit tests (#15283)
* Rename hover props in experimental event API and write unit tests
Behzad Abbasi committed
Apr 1, 2019 at 19:49 UTC
5ef0d1d29d42462a6ffde9ec6f9f9ffe8825404a
2 files changed
+117
-15
packages/react-events/src/Hover.js
+15
-15
@@ -29,19 +29,19 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
29
targetEventTypes.push('touchstart', 'mouseover', 'mouseout');
30
}
31
32
-function dispatchHoverInEvents(
32
+function dispatchHoverStartEvents(
33
context: EventResponderContext,
34
props: Object,
35
state: HoverState,
36
): void {
37
const {event, eventTarget} = context;
38
+ if (context.isTargetWithinEventComponent((event: any).relatedTarget)) {
39
+ return;
40
+ }
41
+ if (props.onHoverStart) {
42
+ context.dispatchEvent('hoverstart', props.onHoverStart, eventTarget, true);
43
+ }
44
if (props.onHoverChange) {
39
- if (context.isTargetWithinEventComponent((event: any).relatedTarget)) {
40
- return;
41
- }
42
- if (props.onHoverIn) {
43
- context.dispatchEvent('hoverin', props.onHoverIn, eventTarget, true);
44
- }
45
const hoverChangeEventListener = () => {
46
props.onHoverChange(true);
47
};
@@ -54,13 +54,13 @@ function dispatchHoverInEvents(
54
}
55
}
56
57
-function dispatchHoverOutEvents(context: EventResponderContext, props: Object) {
57
+function dispatchHoverEndEvents(context: EventResponderContext, props: Object) {
58
const {event, eventTarget} = context;
59
if (context.isTargetWithinEventComponent((event: any).relatedTarget)) {
60
return;
61
}
62
- if (props.onHoverOut) {
63
- context.dispatchEvent('hoverout', props.onHoverOut, eventTarget, true);
62
+ if (props.onHoverEnd) {
63
+ context.dispatchEvent('hoverend', props.onHoverEnd, eventTarget, true);
64
}
65
if (props.onHoverChange) {
66
const hoverChangeEventListener = () => {
@@ -118,7 +118,7 @@ const HoverResponder = {
118
state.isInHitSlop = true;
119
return;
120
}
121
- dispatchHoverInEvents(context, props, state);
121
+ dispatchHoverStartEvents(context, props, state);
122
state.isHovered = true;
123
}
124
break;
@@ -126,7 +126,7 @@ const HoverResponder = {
126
case 'pointerout':
127
case 'mouseout': {
128
if (state.isHovered && !state.isTouched) {
129
- dispatchHoverOutEvents(context, props);
129
+ dispatchHoverEndEvents(context, props);
130
state.isHovered = false;
131
}
132
state.isInHitSlop = false;
@@ -142,7 +142,7 @@ const HoverResponder = {
142
(event: any).y,
143
)
144
) {
145
- dispatchHoverInEvents(context, props, state);
145
+ dispatchHoverStartEvents(context, props, state);
146
state.isHovered = true;
147
state.isInHitSlop = false;
148
}
@@ -153,7 +153,7 @@ const HoverResponder = {
153
(event: any).y,
154
)
155
) {
156
- dispatchHoverOutEvents(context, props);
156
+ dispatchHoverEndEvents(context, props);
157
state.isHovered = false;
158
state.isInHitSlop = true;
159
}
@@ -162,7 +162,7 @@ const HoverResponder = {
162
}
163
case 'pointercancel': {
164
if (state.isHovered && !state.isTouched) {
165
- dispatchHoverOutEvents(context, props);
165
+ dispatchHoverEndEvents(context, props);
166
state.isHovered = false;
167
state.isTouched = false;
168
}
packages/react-events/src/__tests__/Hover-test.internal.js
new
+102
@@ -0,0 +1,102 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+let React;
13
+let ReactFeatureFlags;
14
+let ReactDOM;
15
+let Hover;
16
+
17
+describe('Hover event responder', () => {
18
+ let container;
19
+
20
+ beforeEach(() => {
21
+ jest.resetModules();
22
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
23
+ ReactFeatureFlags.enableEventAPI = true;
24
+ React = require('react');
25
+ ReactDOM = require('react-dom');
26
+ Hover = require('react-events/hover');
27
+
28
+ container = document.createElement('div');
29
+ document.body.appendChild(container);
30
+ });
31
+
32
+ afterEach(() => {
33
+ document.body.removeChild(container);
34
+ container = null;
35
+ });
36
+
37
+ it('should support onHover', () => {
38
+ let divRef = React.createRef();
39
+ let events = [];
40
+
41
+ function handleOnHover(e) {
42
+ if (e) {
43
+ events.push('hover in');
44
+ } else {
45
+ events.push('hover out');
46
+ }
47
+ }
48
+
49
+ function Component() {
50
+ return (
51
+ <Hover onHoverChange={handleOnHover}>
52
+ <div ref={divRef}>Hover me!</div>
53
+ </Hover>
54
+ );
55
+ }
56
+
57
+ ReactDOM.render(<Component />, container);
58
+
59
+ const mouseOverEvent = document.createEvent('Event');
60
+ mouseOverEvent.initEvent('mouseover', true, true);
61
+ divRef.current.dispatchEvent(mouseOverEvent);
62
+
63
+ const mouseOutEvent = document.createEvent('Event');
64
+ mouseOutEvent.initEvent('mouseout', true, true);
65
+ divRef.current.dispatchEvent(mouseOutEvent);
66
+
67
+ expect(events).toEqual(['hover in', 'hover out']);
68
+ });
69
+
70
+ it('should support onHoverStart and onHoverEnd', () => {
71
+ let divRef = React.createRef();
72
+ let events = [];
73
+
74
+ function handleOnHoverStart() {
75
+ events.push('onHoverStart');
76
+ }
77
+
78
+ function handleOnHoverEnd() {
79
+ events.push('onHoverEnd');
80
+ }
81
+
82
+ function Component() {
83
+ return (
84
+ <Hover onHoverStart={handleOnHoverStart} onHoverEnd={handleOnHoverEnd}>
85
+ <div ref={divRef}>Hover me!</div>
86
+ </Hover>
87
+ );
88
+ }
89
+
90
+ ReactDOM.render(<Component />, container);
91
+
92
+ const mouseOverEvent = document.createEvent('Event');
93
+ mouseOverEvent.initEvent('mouseover', true, true);
94
+ divRef.current.dispatchEvent(mouseOverEvent);
95
+
96
+ const mouseOutEvent = document.createEvent('Event');
97
+ mouseOutEvent.initEvent('mouseout', true, true);
98
+ divRef.current.dispatchEvent(mouseOutEvent);
99
+
100
+ expect(events).toEqual(['onHoverStart', 'onHoverEnd']);
101
+ });
102
+});