Add container to event listener signature (#18075)
Dominic Gannaway committed
Feb 19, 2020 at 18:00 UTC
1000f6135efba4f8d8ebffedeb7b472f532a8475
5 files changed
+68
-15
packages/legacy-events/ReactGenericBatching.js
+4
-4
@@ -23,8 +23,8 @@ import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
23
let batchedUpdatesImpl = function(fn, bookkeeping) {
24
return fn(bookkeeping);
25
};
26
-let discreteUpdatesImpl = function(fn, a, b, c) {
27
- return fn(a, b, c);
26
+let discreteUpdatesImpl = function(fn, a, b, c, d) {
27
+ return fn(a, b, c, d);
28
};
29
let flushDiscreteUpdatesImpl = function() {};
30
let batchedEventUpdatesImpl = batchedUpdatesImpl;
@@ -89,11 +89,11 @@ export function executeUserEventHandler(fn: any => void, value: any): void {
89
}
90
}
91
92
-export function discreteUpdates(fn, a, b, c) {
92
+export function discreteUpdates(fn, a, b, c, d) {
93
const prevIsInsideEventHandler = isInsideEventHandler;
94
isInsideEventHandler = true;
95
try {
96
- return discreteUpdatesImpl(fn, a, b, c);
96
+ return discreteUpdatesImpl(fn, a, b, c, d);
97
} finally {
98
isInsideEventHandler = prevIsInsideEventHandler;
99
if (!isInsideEventHandler) {
packages/react-dom/src/events/ReactDOMEventListener.js
+45
-8
@@ -119,6 +119,7 @@ export function addResponderEventSystemEvent(
119
null,
120
((topLevelType: any): DOMTopLevelEventType),
121
eventFlags,
122
+ document,
123
);
124
if (passiveBrowserEventsSupported) {
125
addEventCaptureListenerWithPassiveFlag(
@@ -149,7 +150,7 @@ export function removeActiveResponderEventSystemEvent(
150
}
151
152
function trapEventForPluginEventSystem(
152
- element: Document | Element | Node,
153
+ container: Document | Element | Node,
154
topLevelType: DOMTopLevelEventType,
155
capture: boolean,
156
): void {
@@ -160,6 +161,7 @@ function trapEventForPluginEventSystem(
161
null,
162
topLevelType,
163
PLUGIN_EVENT_SYSTEM,
164
+ container,
165
);
166
break;
167
case UserBlockingEvent:
@@ -167,41 +169,66 @@ function trapEventForPluginEventSystem(
169
null,
170
topLevelType,
171
PLUGIN_EVENT_SYSTEM,
172
+ container,
173
);
174
break;
175
case ContinuousEvent:
176
default:
174
- listener = dispatchEvent.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM);
177
+ listener = dispatchEvent.bind(
178
+ null,
179
+ topLevelType,
180
+ PLUGIN_EVENT_SYSTEM,
181
+ container,
182
+ );
183
break;
184
}
185
186
const rawEventName = getRawEventName(topLevelType);
187
if (capture) {
180
- addEventCaptureListener(element, rawEventName, listener);
188
+ addEventCaptureListener(container, rawEventName, listener);
189
} else {
182
- addEventBubbleListener(element, rawEventName, listener);
190
+ addEventBubbleListener(container, rawEventName, listener);
191
}
192
}
193
186
-function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
194
+function dispatchDiscreteEvent(
195
+ topLevelType,
196
+ eventSystemFlags,
197
+ container,
198
+ nativeEvent,
199
+) {
200
flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
188
- discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
201
+ discreteUpdates(
202
+ dispatchEvent,
203
+ topLevelType,
204
+ eventSystemFlags,
205
+ container,
206
+ nativeEvent,
207
+ );
208
}
209
210
function dispatchUserBlockingUpdate(
211
topLevelType,
212
eventSystemFlags,
213
+ container,
214
nativeEvent,
215
) {
216
runWithPriority(
217
UserBlockingPriority,
198
- dispatchEvent.bind(null, topLevelType, eventSystemFlags, nativeEvent),
218
+ dispatchEvent.bind(
219
+ null,
220
+ topLevelType,
221
+ eventSystemFlags,
222
+ container,
223
+ nativeEvent,
224
+ ),
225
);
226
}
227
228
export function dispatchEvent(
229
topLevelType: DOMTopLevelEventType,
230
eventSystemFlags: EventSystemFlags,
231
+ container: Document | Element | Node,
232
nativeEvent: AnyNativeEvent,
233
): void {
234
if (!_enabled) {
@@ -216,6 +243,7 @@ export function dispatchEvent(
243
topLevelType,
244
eventSystemFlags,
245
nativeEvent,
246
+ container,
247
);
248
return;
249
}
@@ -224,6 +252,7 @@ export function dispatchEvent(
252
topLevelType,
253
eventSystemFlags,
254
nativeEvent,
255
+ container,
256
);
257
258
if (blockedOn === null) {
@@ -234,7 +263,13 @@ export function dispatchEvent(
263
264
if (isReplayableDiscreteEvent(topLevelType)) {
265
// This this to be replayed later once the target is available.
237
- queueDiscreteEvent(blockedOn, topLevelType, eventSystemFlags, nativeEvent);
266
+ queueDiscreteEvent(
267
+ blockedOn,
268
+ topLevelType,
269
+ eventSystemFlags,
270
+ nativeEvent,
271
+ container,
272
+ );
273
return;
274
}
275
@@ -244,6 +279,7 @@ export function dispatchEvent(
279
topLevelType,
280
eventSystemFlags,
281
nativeEvent,
282
+ container,
283
)
284
) {
285
return;
@@ -289,6 +325,7 @@ export function attemptToDispatchEvent(
325
topLevelType: DOMTopLevelEventType,
326
eventSystemFlags: EventSystemFlags,
327
nativeEvent: AnyNativeEvent,
328
+ container: Document | Element | Node,
329
): null | Container | SuspenseInstance {
330
// TODO: Warn if _enabled is false.
331
packages/react-dom/src/events/ReactDOMEventReplaying.js
+15
@@ -124,6 +124,7 @@ type QueuedReplayableEvent = {|
124
topLevelType: DOMTopLevelEventType,
125
eventSystemFlags: EventSystemFlags,
126
nativeEvent: AnyNativeEvent,
127
+ container: Document | Element | Node,
128
|};
129
130
let hasScheduledReplayAttempt = false;
@@ -252,12 +253,14 @@ function createQueuedReplayableEvent(
253
topLevelType: DOMTopLevelEventType,
254
eventSystemFlags: EventSystemFlags,
255
nativeEvent: AnyNativeEvent,
256
+ container: Document | Element | Node,
257
): QueuedReplayableEvent {
258
return {
259
blockedOn,
260
topLevelType,
261
eventSystemFlags: eventSystemFlags | IS_REPLAYED,
262
nativeEvent,
263
+ container,
264
};
265
}
266
@@ -266,12 +269,14 @@ export function queueDiscreteEvent(
269
topLevelType: DOMTopLevelEventType,
270
eventSystemFlags: EventSystemFlags,
271
nativeEvent: AnyNativeEvent,
272
+ container: Document | Element | Node,
273
): void {
274
const queuedEvent = createQueuedReplayableEvent(
275
blockedOn,
276
topLevelType,
277
eventSystemFlags,
278
nativeEvent,
279
+ container,
280
);
281
queuedDiscreteEvents.push(queuedEvent);
282
if (enableSelectiveHydration) {
@@ -339,6 +344,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
344
topLevelType: DOMTopLevelEventType,
345
eventSystemFlags: EventSystemFlags,
346
nativeEvent: AnyNativeEvent,
347
+ container: Document | Element | Node,
348
): QueuedReplayableEvent {
349
if (
350
existingQueuedEvent === null ||
@@ -349,6 +355,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
355
topLevelType,
356
eventSystemFlags,
357
nativeEvent,
358
+ container,
359
);
360
if (blockedOn !== null) {
361
let fiber = getInstanceFromNode(blockedOn);
@@ -372,6 +379,7 @@ export function queueIfContinuousEvent(
379
topLevelType: DOMTopLevelEventType,
380
eventSystemFlags: EventSystemFlags,
381
nativeEvent: AnyNativeEvent,
382
+ container: Document | Element | Node,
383
): boolean {
384
// These set relatedTarget to null because the replayed event will be treated as if we
385
// moved from outside the window (no target) onto the target once it hydrates.
@@ -385,6 +393,7 @@ export function queueIfContinuousEvent(
393
topLevelType,
394
eventSystemFlags,
395
focusEvent,
396
+ container,
397
);
398
return true;
399
}
@@ -396,6 +405,7 @@ export function queueIfContinuousEvent(
405
topLevelType,
406
eventSystemFlags,
407
dragEvent,
408
+ container,
409
);
410
return true;
411
}
@@ -407,6 +417,7 @@ export function queueIfContinuousEvent(
417
topLevelType,
418
eventSystemFlags,
419
mouseEvent,
420
+ container,
421
);
422
return true;
423
}
@@ -421,6 +432,7 @@ export function queueIfContinuousEvent(
432
topLevelType,
433
eventSystemFlags,
434
pointerEvent,
435
+ container,
436
),
437
);
438
return true;
@@ -436,6 +448,7 @@ export function queueIfContinuousEvent(
448
topLevelType,
449
eventSystemFlags,
450
pointerEvent,
451
+ container,
452
),
453
);
454
return true;
@@ -512,6 +525,7 @@ function attemptReplayContinuousQueuedEvent(
525
queuedEvent.topLevelType,
526
queuedEvent.eventSystemFlags,
527
queuedEvent.nativeEvent,
528
+ queuedEvent.container,
529
);
530
if (nextBlockedOn !== null) {
531
// We're still blocked. Try again later.
@@ -554,6 +568,7 @@ function replayUnblockedEvents() {
568
nextDiscreteEvent.topLevelType,
569
nextDiscreteEvent.eventSystemFlags,
570
nextDiscreteEvent.nativeEvent,
571
+ nextDiscreteEvent.container,
572
);
573
if (nextBlockedOn !== null) {
574
// We're still blocked. Try again later.
packages/react-dom/src/test-utils/ReactTestUtils.js
+1
-1
@@ -62,7 +62,7 @@ let hasWarnedAboutDeprecatedMockComponent = false;
62
*/
63
function simulateNativeEventOnNode(topLevelType, node, fakeNativeEvent) {
64
fakeNativeEvent.target = node;
65
- dispatchEvent(topLevelType, PLUGIN_EVENT_SYSTEM, fakeNativeEvent);
65
+ dispatchEvent(topLevelType, PLUGIN_EVENT_SYSTEM, document, fakeNativeEvent);
66
}
67
68
/**
packages/react-reconciler/src/ReactFiberWorkLoop.js
+3
-2
@@ -1160,17 +1160,18 @@ export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
1160
}
1161
}
1162
1163
-export function discreteUpdates<A, B, C, R>(
1163
+export function discreteUpdates<A, B, C, D, R>(
1164
fn: (A, B, C) => R,
1165
a: A,
1166
b: B,
1167
c: C,
1168
+ d: D,
1169
): R {
1170
const prevExecutionContext = executionContext;
1171
executionContext |= DiscreteEventContext;
1172
try {
1173
// Should this
1173
- return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c));
1174
+ return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c, d));
1175
} finally {
1176
executionContext = prevExecutionContext;
1177
if (executionContext === NoContext) {