Skip to content

Commit 39b94b1

Browse files
necolasnecolas
committed
Remove internal createEventHandle module
Migrate to 'addEventListener' helper. Fix #2459
1 parent e160546 commit 39b94b1

File tree

5 files changed

+92
-128
lines changed

5 files changed

+92
-128
lines changed

‎packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.js‎ renamed to ‎packages/react-native-web/src/modules/addEventListener/__tests__/index-test.js‎

Lines changed: 41 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,17 @@
1010
import * as React from 'react';
1111
import { act, render } from '@testing-library/react';
1212
import { createEventTarget } from 'dom-event-testing-library';
13-
import createEventHandle from '..';
13+
import { addEventListener } from '..';
1414

15-
describe('create-event-handle', () => {
16-
describe('createEventTarget()', () => {
15+
describe('addEventListener', () => {
16+
describe('addEventListener()', () => {
1717
test('event dispatched on target', () => {
1818
const listener = jest.fn();
1919
const targetRef = React.createRef();
20-
const addClickListener = createEventHandle('click');
2120

2221
function Component() {
2322
React.useEffect(() => {
24-
return addClickListener(targetRef.current, listener);
23+
return addEventListener(targetRef.current, 'click', listener);
2524
});
2625
return <div ref={targetRef} />;
2726
}
@@ -42,20 +41,19 @@ describe('create-event-handle', () => {
4241
const listenerCapture = jest.fn();
4342
const targetRef = React.createRef();
4443
const parentRef = React.createRef();
45-
const addClickListener = createEventHandle('click');
46-
const addClickCaptureListener = createEventHandle('click', {
47-
capture: true
48-
});
4944

5045
function Component() {
5146
React.useEffect(() => {
52-
const removeClickListener = addClickListener(
47+
const removeClickListener = addEventListener(
5348
targetRef.current,
49+
'click',
5450
listener
5551
);
56-
const removeClickCaptureListener = addClickCaptureListener(
52+
const removeClickCaptureListener = addEventListener(
5753
targetRef.current,
58-
listenerCapture
54+
'click',
55+
listenerCapture,
56+
{ capture: true }
5957
);
6058
return () => {
6159
removeClickListener();
@@ -91,20 +89,19 @@ describe('create-event-handle', () => {
9189
});
9290
const targetRef = React.createRef();
9391
const childRef = React.createRef();
94-
const addClickListener = createEventHandle('click');
95-
const addClickCaptureListener = createEventHandle('click', {
96-
capture: true
97-
});
9892

9993
function Component() {
10094
React.useEffect(() => {
101-
const removeClickListener = addClickListener(
95+
const removeClickListener = addEventListener(
10296
targetRef.current,
97+
'click',
10398
listener
10499
);
105-
const removeClickCaptureListener = addClickCaptureListener(
100+
const removeClickCaptureListener = addEventListener(
106101
targetRef.current,
107-
listenerCapture
102+
'click',
103+
listenerCapture,
104+
{ capture: true }
108105
);
109106
return () => {
110107
removeClickListener();
@@ -135,11 +132,10 @@ describe('create-event-handle', () => {
135132
const listener = jest.fn();
136133
const targetRef = React.createRef();
137134
const childRef = React.createRef();
138-
const addClickListener = createEventHandle('click');
139135

140136
function Component() {
141137
React.useEffect(() => {
142-
return addClickListener(targetRef.current, listener);
138+
return addEventListener(targetRef.current, 'click', listener);
143139
});
144140
return (
145141
<div ref={targetRef}>
@@ -162,11 +158,10 @@ describe('create-event-handle', () => {
162158
test('listener can be attached to document', () => {
163159
const listener = jest.fn();
164160
const targetRef = React.createRef();
165-
const addClickListener = createEventHandle('click');
166161

167162
function Component({ target }) {
168163
React.useEffect(() => {
169-
return addClickListener(target, listener);
164+
return addEventListener(target, 'click', listener);
170165
});
171166
return <div ref={targetRef} />;
172167
}
@@ -184,11 +179,10 @@ describe('create-event-handle', () => {
184179
test('listener can be attached to window ', () => {
185180
const listener = jest.fn();
186181
const targetRef = React.createRef();
187-
const addClickListener = createEventHandle('click');
188182

189183
function Component({ target }) {
190184
React.useEffect(() => {
191-
return addClickListener(target, listener);
185+
return addEventListener(target, 'click', listener);
192186
});
193187
return <div ref={targetRef} />;
194188
}
@@ -206,11 +200,10 @@ describe('create-event-handle', () => {
206200
test('custom event dispatched on target', () => {
207201
const listener = jest.fn();
208202
const targetRef = React.createRef();
209-
const addMagicEventListener = createEventHandle('magic-event');
210203

211204
function Component() {
212205
React.useEffect(() => {
213-
return addMagicEventListener(targetRef.current, listener);
206+
return addEventListener(targetRef.current, 'magic-event', listener);
214207
});
215208
return <div ref={targetRef} />;
216209
}
@@ -230,10 +223,7 @@ describe('create-event-handle', () => {
230223
const targetRef = React.createRef();
231224
const parentRef = React.createRef();
232225
const childRef = React.createRef();
233-
const addClickListener = createEventHandle('click');
234-
const addClickCaptureListener = createEventHandle('click', {
235-
capture: true
236-
});
226+
237227
const listener = jest.fn((e) => {
238228
log.push(['bubble', e.currentTarget.id]);
239229
});
@@ -244,10 +234,14 @@ describe('create-event-handle', () => {
244234
function Component() {
245235
React.useEffect(() => {
246236
// the same event handle is used to set listeners on different targets
247-
addClickListener(targetRef.current, listener);
248-
addClickListener(parentRef.current, listener);
249-
addClickCaptureListener(targetRef.current, listenerCapture);
250-
addClickCaptureListener(parentRef.current, listenerCapture);
237+
addEventListener(targetRef.current, 'click', listener);
238+
addEventListener(parentRef.current, 'click', listener);
239+
addEventListener(targetRef.current, 'click', listenerCapture, {
240+
capture: true
241+
});
242+
addEventListener(parentRef.current, 'click', listenerCapture, {
243+
capture: true
244+
});
251245
});
252246
return (
253247
<div id="parent" ref={parentRef}>
@@ -280,14 +274,6 @@ describe('create-event-handle', () => {
280274
const log = [];
281275
const targetRef = React.createRef();
282276
const childRef = React.createRef();
283-
const addClickListener = createEventHandle('click');
284-
const addClickAltListener = createEventHandle('click');
285-
const addClickCaptureListener = createEventHandle('click', {
286-
capture: true
287-
});
288-
const addClickCaptureAltListener = createEventHandle('click', {
289-
capture: true
290-
});
291277
const listener = jest.fn((e) => {
292278
log.push(['bubble', 'target']);
293279
});
@@ -303,10 +289,14 @@ describe('create-event-handle', () => {
303289

304290
function Component() {
305291
React.useEffect(() => {
306-
addClickListener(targetRef.current, listener);
307-
addClickAltListener(targetRef.current, listenerAlt);
308-
addClickCaptureListener(targetRef.current, listenerCapture);
309-
addClickCaptureAltListener(targetRef.current, listenerCaptureAlt);
292+
addEventListener(targetRef.current, 'click', listener);
293+
addEventListener(targetRef.current, 'click', listenerAlt);
294+
addEventListener(targetRef.current, 'click', listenerCapture, {
295+
capture: true
296+
});
297+
addEventListener(targetRef.current, 'click', listenerCaptureAlt, {
298+
capture: true
299+
});
310300
});
311301
return (
312302
<div id="target" ref={targetRef}>
@@ -344,12 +334,11 @@ describe('create-event-handle', () => {
344334
const targetListener = jest.fn();
345335
const targetRef = React.createRef();
346336
const childRef = React.createRef();
347-
const addClickListener = createEventHandle('click');
348337

349338
function Component() {
350339
React.useEffect(() => {
351-
addClickListener(childRef.current, childListener);
352-
addClickListener(targetRef.current, targetListener);
340+
addEventListener(childRef.current, 'click', childListener);
341+
addEventListener(targetRef.current, 'click', targetListener);
353342
});
354343
return (
355344
<div ref={targetRef}>
@@ -376,13 +365,11 @@ describe('create-event-handle', () => {
376365
});
377366
const secondListener = jest.fn();
378367
const targetRef = React.createRef();
379-
const addFirstClickListener = createEventHandle('click');
380-
const addSecondClickListener = createEventHandle('click');
381368

382369
function Component() {
383370
React.useEffect(() => {
384-
addFirstClickListener(targetRef.current, firstListener);
385-
addSecondClickListener(targetRef.current, secondListener);
371+
addEventListener(targetRef.current, 'click', firstListener);
372+
addEventListener(targetRef.current, 'click', secondListener);
386373
});
387374
return <div ref={targetRef} />;
388375
}

‎packages/react-native-web/src/modules/createEventHandle/__tests__/index-test.node.js‎ renamed to ‎packages/react-native-web/src/modules/addEventListener/__tests__/index-test.node.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,16 @@
99

1010
import * as React from 'react';
1111
import * as ReactDOMServer from 'react-dom/server';
12-
import createEventHandle from '..';
12+
import { addEventListener } from '..';
1313

14-
describe('create-event-handle', () => {
14+
describe('addEventListener', () => {
1515
test('can render correctly using ReactDOMServer', () => {
1616
const listener = jest.fn();
1717
const targetRef = React.createRef();
18-
const addClickListener = createEventHandle('click');
1918

2019
function Component() {
2120
React.useEffect(() => {
22-
return addClickListener(targetRef.current, listener);
21+
return addEventListener(targetRef.current, 'click', listener);
2322
});
2423
return <div ref={targetRef} />;
2524
}

‎packages/react-native-web/src/modules/createEventHandle/index.js‎ renamed to ‎packages/react-native-web/src/modules/addEventListener/index.js‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,10 @@ import canUseDOM from '../canUseDom';
1212

1313
type Listener = (e: any) => void;
1414

15-
type EventHandle = (target: EventTarget, callback: ?Listener) => () => void;
16-
1715
export type EventOptions = {
1816
capture?: boolean,
19-
passive?: boolean
17+
passive?: boolean,
18+
once?: boolean
2019
};
2120

2221
const emptyFunction = () => {};
@@ -72,28 +71,19 @@ function normalizeEvent(event: any) {
7271
/**
7372
*
7473
*/
75-
export default function createEventHandle(
76-
type: string,
74+
export function addEventListener(
75+
target: EventTarget,
76+
type: any,
77+
listener: Listener,
7778
options: ?EventOptions
78-
): EventHandle {
79+
): () => void {
7980
const opts = getOptions(options);
81+
const compatListener = (e: any) => listener(normalizeEvent(e));
82+
target.addEventListener(type, compatListener, opts);
8083

81-
return function (target: EventTarget, listener: ?Listener) {
82-
if (target == null || typeof target.addEventListener !== 'function') {
83-
throw new Error('createEventHandle: called on an invalid target.');
84-
}
85-
86-
const element = (target: any);
87-
if (listener != null) {
88-
const compatListener = (e) => listener(normalizeEvent(e));
89-
element.addEventListener(type, compatListener, opts);
90-
return function removeListener() {
91-
if (element != null) {
92-
element.removeEventListener(type, compatListener, opts);
93-
}
94-
};
95-
} else {
96-
return emptyFunction;
84+
return function removeEventListener() {
85+
if (target != null) {
86+
target.removeEventListener(type, compatListener, opts);
9787
}
9888
};
9989
}

‎packages/react-native-web/src/modules/modality/index.js‎

Lines changed: 25 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @flow
88
*/
99

10-
import createEventHandle from '../createEventHandle';
10+
import { addEventListener } from '../addEventListener';
1111
import canUseDOM from '../canUseDom';
1212

1313
export type Modality = 'keyboard' | 'mouse' | 'touch' | 'pen';
@@ -45,32 +45,6 @@ const VISIBILITYCHANGE = 'visibilitychange';
4545
const bubbleOptions = { passive: true };
4646
const captureOptions = { capture: true, passive: true };
4747

48-
// Window events
49-
const addBlurListener = createEventHandle(BLUR, bubbleOptions);
50-
const addFocusListener = createEventHandle(FOCUS, bubbleOptions);
51-
// Must be capture phase because 'stopPropagation' might prevent these
52-
// events bubbling to the document.
53-
const addVisibilityChangeListener = createEventHandle(
54-
VISIBILITYCHANGE,
55-
captureOptions
56-
);
57-
const addKeyDownListener = createEventHandle(KEYDOWN, captureOptions);
58-
const addPointerDownListener = createEventHandle(POINTERDOWN, captureOptions);
59-
const addPointerMoveListener = createEventHandle(POINTERMOVE, captureOptions);
60-
// Fallback events
61-
const addContextMenuListener = createEventHandle(CONTEXTMENU, captureOptions);
62-
const addMouseDownListener = createEventHandle(MOUSEDOWN, captureOptions);
63-
const addMouseMoveListener = createEventHandle(MOUSEMOVE, captureOptions);
64-
const addMouseUpListener = createEventHandle(MOUSEUP, captureOptions);
65-
const addScrollListener = createEventHandle(SCROLL, captureOptions);
66-
const addSelectiomChangeListener = createEventHandle(
67-
SELECTIONCHANGE,
68-
captureOptions
69-
);
70-
const addTouchCancelListener = createEventHandle(TOUCHCANCEL, captureOptions);
71-
const addTouchMoveListener = createEventHandle(TOUCHMOVE, captureOptions);
72-
const addTouchStartListener = createEventHandle(TOUCHSTART, captureOptions);
73-
7448
function restoreModality() {
7549
if (previousModality != null || previousActiveModality != null) {
7650
if (previousModality != null) {
@@ -184,22 +158,30 @@ function onPointerish(event: any) {
184158
}
185159

186160
if (canUseDOM) {
187-
addBlurListener(window, onBlurWindow);
188-
addFocusListener(window, onFocusWindow);
189-
addKeyDownListener(document, onKeyDown);
190-
addPointerDownListener(document, onPointerish);
191-
addPointerMoveListener(document, onPointerish);
192-
addVisibilityChangeListener(document, onVisibilityChange);
193-
// fallbacks
194-
addContextMenuListener(document, onPointerish);
195-
addMouseDownListener(document, onPointerish);
196-
addMouseMoveListener(document, onPointerish);
197-
addMouseUpListener(document, onPointerish);
198-
addTouchCancelListener(document, onPointerish);
199-
addTouchMoveListener(document, onPointerish);
200-
addTouchStartListener(document, onPointerish);
201-
addSelectiomChangeListener(document, onPointerish);
202-
addScrollListener(document, onPointerish);
161+
// Window events
162+
addEventListener(window, BLUR, onBlurWindow, bubbleOptions);
163+
addEventListener(window, FOCUS, onFocusWindow, bubbleOptions);
164+
// Must be capture phase because 'stopPropagation' might prevent these
165+
// events bubbling to the document.
166+
addEventListener(document, KEYDOWN, onKeyDown, captureOptions);
167+
addEventListener(
168+
document,
169+
VISIBILITYCHANGE,
170+
onVisibilityChange,
171+
captureOptions
172+
);
173+
addEventListener(document, POINTERDOWN, onPointerish, captureOptions);
174+
addEventListener(document, POINTERMOVE, onPointerish, captureOptions);
175+
// Fallback events
176+
addEventListener(document, CONTEXTMENU, onPointerish, captureOptions);
177+
addEventListener(document, MOUSEDOWN, onPointerish, captureOptions);
178+
addEventListener(document, MOUSEMOVE, onPointerish, captureOptions);
179+
addEventListener(document, MOUSEUP, onPointerish, captureOptions);
180+
addEventListener(document, TOUCHCANCEL, onPointerish, captureOptions);
181+
addEventListener(document, TOUCHMOVE, onPointerish, captureOptions);
182+
addEventListener(document, TOUCHSTART, onPointerish, captureOptions);
183+
addEventListener(document, SELECTIONCHANGE, onPointerish, captureOptions);
184+
addEventListener(document, SCROLL, onPointerish, captureOptions);
203185
}
204186

205187
function callListeners() {

0 commit comments

Comments
 (0)