Skip to content

Commit 5ef0d1d

Browse files
behzad888trueadm
authored andcommitted
Rename hover props in experimental event API and write unit tests (#15283)
* Rename hover props in experimental event API and write unit tests
1 parent 9444a54 commit 5ef0d1d

File tree

2 files changed

+117
-15
lines changed

2 files changed

+117
-15
lines changed

packages/react-events/src/Hover.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -29,19 +29,19 @@ if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
2929
targetEventTypes.push('touchstart', 'mouseover', 'mouseout');
3030
}
3131

32-
function dispatchHoverInEvents(
32+
function dispatchHoverStartEvents(
3333
context: EventResponderContext,
3434
props: Object,
3535
state: HoverState,
3636
): void {
3737
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+
}
3844
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-
}
4545
const hoverChangeEventListener = () => {
4646
props.onHoverChange(true);
4747
};
@@ -54,13 +54,13 @@ function dispatchHoverInEvents(
5454
}
5555
}
5656

57-
function dispatchHoverOutEvents(context: EventResponderContext, props: Object) {
57+
function dispatchHoverEndEvents(context: EventResponderContext, props: Object) {
5858
const {event, eventTarget} = context;
5959
if (context.isTargetWithinEventComponent((event: any).relatedTarget)) {
6060
return;
6161
}
62-
if (props.onHoverOut) {
63-
context.dispatchEvent('hoverout', props.onHoverOut, eventTarget, true);
62+
if (props.onHoverEnd) {
63+
context.dispatchEvent('hoverend', props.onHoverEnd, eventTarget, true);
6464
}
6565
if (props.onHoverChange) {
6666
const hoverChangeEventListener = () => {
@@ -118,15 +118,15 @@ const HoverResponder = {
118118
state.isInHitSlop = true;
119119
return;
120120
}
121-
dispatchHoverInEvents(context, props, state);
121+
dispatchHoverStartEvents(context, props, state);
122122
state.isHovered = true;
123123
}
124124
break;
125125
}
126126
case 'pointerout':
127127
case 'mouseout': {
128128
if (state.isHovered && !state.isTouched) {
129-
dispatchHoverOutEvents(context, props);
129+
dispatchHoverEndEvents(context, props);
130130
state.isHovered = false;
131131
}
132132
state.isInHitSlop = false;
@@ -142,7 +142,7 @@ const HoverResponder = {
142142
(event: any).y,
143143
)
144144
) {
145-
dispatchHoverInEvents(context, props, state);
145+
dispatchHoverStartEvents(context, props, state);
146146
state.isHovered = true;
147147
state.isInHitSlop = false;
148148
}
@@ -153,7 +153,7 @@ const HoverResponder = {
153153
(event: any).y,
154154
)
155155
) {
156-
dispatchHoverOutEvents(context, props);
156+
dispatchHoverEndEvents(context, props);
157157
state.isHovered = false;
158158
state.isInHitSlop = true;
159159
}
@@ -162,7 +162,7 @@ const HoverResponder = {
162162
}
163163
case 'pointercancel': {
164164
if (state.isHovered && !state.isTouched) {
165-
dispatchHoverOutEvents(context, props);
165+
dispatchHoverEndEvents(context, props);
166166
state.isHovered = false;
167167
state.isTouched = false;
168168
}
Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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+
});

0 commit comments

Comments
 (0)