[react-events] Refactor getCurrentTarget to getResponderNode (#16660)
Dominic Gannaway committed
Sep 4, 2019 at 20:04 UTC
c66edb9f8b6baba71df4c21908829f805e57c0b1
11 files changed
+22
-57
packages/react-dom/src/events/DOMEventResponderSystem.js
+5
-22
@@ -66,7 +66,6 @@ type ResponderTimer = {|
66
instance: ReactDOMEventResponderInstance,
67
func: () => void,
68
id: number,
69
- targetFiber: Fiber | null,
69
timeStamp: number,
70
|};
71
@@ -87,7 +86,6 @@ let currentInstance: null | ReactDOMEventResponderInstance = null;
86
let currentTimerIDCounter = 0;
87
let currentDocument: null | Document = null;
88
let currentPropagationBehavior: PropagationBehavior = DoNotPropagateToNextResponder;
90
-let currentTargetFiber: null | Fiber = null;
89
90
const eventResponderContext: ReactDOMResponderContext = {
91
dispatchEvent(
@@ -230,7 +228,6 @@ const eventResponderContext: ReactDOMResponderContext = {
228
instance: ((currentInstance: any): ReactDOMEventResponderInstance),
229
func,
230
id: timerId,
233
- targetFiber: currentTargetFiber,
231
timeStamp: currentTimeStamp,
232
});
233
activeTimeouts.set(timerId, timeout);
@@ -273,23 +270,14 @@ const eventResponderContext: ReactDOMResponderContext = {
270
currentPropagationBehavior = PropagateToNextResponder;
271
},
272
enqueueStateRestore,
276
- getCurrentTarget(): Element | null {
273
+ getResponderNode(): Element | null {
274
validateResponderContext();
275
const responderFiber = ((currentInstance: any): ReactDOMEventResponderInstance)
276
.fiber;
280
- let fiber = currentTargetFiber;
281
- let currentTarget = null;
282
-
283
- while (fiber !== null) {
284
- if (fiber.tag === HostComponent) {
285
- currentTarget = fiber.stateNode;
286
- }
287
- if (fiber === responderFiber || fiber.alternate === responderFiber) {
288
- break;
289
- }
290
- fiber = fiber.return;
277
+ if (responderFiber.tag === ScopeComponent) {
278
+ return null;
279
}
292
- return currentTarget;
280
+ return responderFiber.stateNode;
281
},
282
};
283
@@ -373,9 +361,8 @@ function processTimers(
361
try {
362
batchedEventUpdates(() => {
363
for (let i = 0; i < timersArr.length; i++) {
376
- const {instance, func, id, timeStamp, targetFiber} = timersArr[i];
364
+ const {instance, func, id, timeStamp} = timersArr[i];
365
currentInstance = instance;
378
- currentTargetFiber = targetFiber;
366
currentTimeStamp = timeStamp + delay;
367
try {
368
func();
@@ -388,7 +375,6 @@ function processTimers(
375
currentTimers = null;
376
currentInstance = null;
377
currentTimeStamp = 0;
391
- currentTargetFiber = null;
378
}
379
}
380
@@ -599,10 +585,8 @@ export function dispatchEventForResponderEventSystem(
585
const previousTimeStamp = currentTimeStamp;
586
const previousDocument = currentDocument;
587
const previousPropagationBehavior = currentPropagationBehavior;
602
- const previousTargetFiber = currentTargetFiber;
588
currentPropagationBehavior = DoNotPropagateToNextResponder;
589
currentTimers = null;
605
- currentTargetFiber = targetFiber;
590
// nodeType 9 is DOCUMENT_NODE
591
currentDocument =
592
(nativeEventTarget: any).nodeType === 9
@@ -626,7 +610,6 @@ export function dispatchEventForResponderEventSystem(
610
currentTimeStamp = previousTimeStamp;
611
currentDocument = previousDocument;
612
currentPropagationBehavior = previousPropagationBehavior;
629
- currentTargetFiber = previousTargetFiber;
613
}
614
}
615
}
packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js
+1
-1
@@ -1017,7 +1017,7 @@ describe('DOMEventResponderSystem', () => {
1017
const obj = {
1018
counter,
1019
timeStamp: context.getTimeStamp(),
1020
- target: context.getCurrentTarget(),
1020
+ target: context.getResponderNode(),
1021
type: 'click-test',
1022
};
1023
context.dispatchEvent(obj, props.onClick, DiscreteEvent);
packages/react-events/src/dom/Focus.js
+2
-2
@@ -289,7 +289,7 @@ const focusResponderImpl = {
289
290
switch (type) {
291
case 'focus': {
292
- state.focusTarget = context.getCurrentTarget();
292
+ state.focusTarget = context.getResponderNode();
293
// Limit focus events to the direct child of the event component.
294
// Browser focus is not expected to bubble.
295
if (!state.isFocused && state.focusTarget === target) {
@@ -427,7 +427,7 @@ const focusWithinResponderImpl = {
427
428
switch (type) {
429
case 'focus': {
430
- state.focusTarget = context.getCurrentTarget();
430
+ state.focusTarget = context.getResponderNode();
431
// Limit focus events to the direct child of the event component.
432
// Browser focus is not expected to bubble.
433
if (!state.isFocused) {
packages/react-events/src/dom/Hover.js
+2
-2
@@ -235,7 +235,7 @@ const hoverResponderImpl = {
235
// START
236
case 'pointerover': {
237
if (!state.isHovered && pointerType !== 'touch') {
238
- state.hoverTarget = context.getCurrentTarget();
238
+ state.hoverTarget = context.getResponderNode();
239
dispatchHoverStartEvents(event, context, props, state);
240
}
241
break;
@@ -295,7 +295,7 @@ const hoverResponderFallbackImpl = {
295
// START
296
case 'mouseover': {
297
if (!state.isHovered && !state.ignoreEmulatedMouseEvents) {
298
- state.hoverTarget = context.getCurrentTarget();
298
+ state.hoverTarget = context.getResponderNode();
299
dispatchHoverStartEvents(event, context, props, state);
300
}
301
break;
packages/react-events/src/dom/Input.js
+1
-1
@@ -184,7 +184,7 @@ const inputResponderImpl = {
184
if (props.disabled) {
185
return;
186
}
187
- const currentTarget = context.getCurrentTarget();
187
+ const currentTarget = context.getResponderNode();
188
if (target !== currentTarget || currentTarget === null) {
189
return;
190
}
packages/react-events/src/dom/Keyboard.js
+1
-2
@@ -143,7 +143,6 @@ function createKeyboardEvent(
143
repeat,
144
shiftKey,
145
} = nativeEvent;
146
- const target = ((context.getCurrentTarget(): any): Element);
146
147
return {
148
altKey,
@@ -155,7 +154,7 @@ function createKeyboardEvent(
154
metaKey,
155
repeat,
156
shiftKey,
158
- target,
157
+ target: event.target,
158
timeStamp: context.getTimeStamp(),
159
type,
160
};
packages/react-events/src/dom/Press.js
+2
-2
@@ -582,7 +582,7 @@ const pressResponderImpl = {
582
// We set these here, before the button check so we have this
583
// data around for handling of the context menu
584
state.pointerType = pointerType;
585
- const pressTarget = (state.pressTarget = context.getCurrentTarget());
585
+ const pressTarget = (state.pressTarget = context.getResponderNode());
586
if (isPointerEvent) {
587
state.activePointerId = pointerId;
588
} else if (isTouchEvent) {
@@ -634,7 +634,7 @@ const pressResponderImpl = {
634
635
if (isFunction(onPress) && isScreenReaderVirtualClick(nativeEvent)) {
636
state.pointerType = 'keyboard';
637
- state.pressTarget = context.getCurrentTarget();
637
+ state.pressTarget = context.getResponderNode();
638
const preventDefault = props.preventDefault;
639
640
if (preventDefault !== false) {
packages/react-events/src/rn/Press.js
+1
-1
@@ -412,7 +412,7 @@ const pressResponderImpl = {
412
if (type === 'topTouchStart') {
413
if (!state.isPressed) {
414
state.pointerType = 'touch';
415
- const pressTarget = (state.pressTarget = context.getCurrentTarget());
415
+ const pressTarget = (state.pressTarget = context.getResponderNode());
416
const touchEvent = getTouchFromPressEvent(nativeEvent);
417
if (touchEvent === null) {
418
return;
packages/react-native-renderer/src/ReactFabricEventResponderSystem.js
+5
-22
@@ -52,7 +52,6 @@ type ResponderTimer = {|
52
instance: ReactNativeEventResponderInstance,
53
func: () => void,
54
id: number,
55
- targetFiber: Fiber | null,
55
timeStamp: number,
56
|};
57
@@ -78,7 +77,6 @@ let currentTimeStamp = 0;
77
let currentTimers = new Map();
78
let currentInstance: null | ReactNativeEventResponderInstance = null;
79
let currentTimerIDCounter = 0;
81
-let currentTargetFiber: Fiber | null = null;
80
81
const eventResponderContext: ReactNativeResponderContext = {
82
dispatchEvent(
@@ -198,7 +196,6 @@ const eventResponderContext: ReactNativeResponderContext = {
196
instance: ((currentInstance: any): ReactNativeEventResponderInstance),
197
func,
198
id: timerId,
201
- targetFiber: currentTargetFiber,
199
timeStamp: currentTimeStamp,
200
});
201
activeTimeouts.set(timerId, timeout);
@@ -220,23 +217,14 @@ const eventResponderContext: ReactNativeResponderContext = {
217
validateResponderContext();
218
return currentTimeStamp;
219
},
223
- getCurrentTarget(): ReactNativeEventTarget | null {
220
+ getResponderNode(): ReactNativeEventTarget | null {
221
validateResponderContext();
222
const responderFiber = ((currentInstance: any): ReactNativeEventResponderInstance)
223
.fiber;
227
- let fiber = currentTargetFiber;
228
- let currentTarget = null;
229
-
230
- while (fiber !== null) {
231
- if (fiber.tag === HostComponent) {
232
- currentTarget = fiber.stateNode;
233
- }
234
- if (fiber === responderFiber || fiber.alternate === responderFiber) {
235
- break;
236
- }
237
- fiber = fiber.return;
224
+ if (responderFiber.tag === ScopeComponent) {
225
+ return null;
226
}
239
- return currentTarget;
227
+ return responderFiber.stateNode;
228
},
229
};
230
@@ -308,9 +296,8 @@ function processTimers(
296
try {
297
batchedEventUpdates(() => {
298
for (let i = 0; i < timersArr.length; i++) {
311
- const {instance, func, id, targetFiber, timeStamp} = timersArr[i];
299
+ const {instance, func, id, timeStamp} = timersArr[i];
300
currentInstance = instance;
313
- currentTargetFiber = targetFiber;
301
currentTimeStamp = timeStamp + delay;
302
try {
303
func();
@@ -323,7 +310,6 @@ function processTimers(
310
currentTimers = null;
311
currentInstance = null;
312
currentTimeStamp = 0;
326
- currentTargetFiber = null;
313
}
314
}
315
@@ -450,9 +436,7 @@ export function dispatchEventForResponderEventSystem(
436
const previousInstance = currentInstance;
437
const previousTimers = currentTimers;
438
const previousTimeStamp = currentTimeStamp;
453
- const previousTargetFiber = currentTargetFiber;
439
currentTimers = null;
455
- currentTargetFiber = targetFiber;
440
// We might want to control timeStamp another way here
441
currentTimeStamp = Date.now();
442
try {
@@ -467,7 +451,6 @@ export function dispatchEventForResponderEventSystem(
451
currentTimers = previousTimers;
452
currentInstance = previousInstance;
453
currentTimeStamp = previousTimeStamp;
470
- currentTargetFiber = previousTargetFiber;
454
}
455
}
456
packages/react-native-renderer/src/ReactNativeTypes.js
+1
-1
@@ -219,7 +219,7 @@ export type ReactNativeResponderContext = {
219
setTimeout: (func: () => void, timeout: number) => number,
220
clearTimeout: (timerId: number) => void,
221
getTimeStamp: () => number,
222
- getCurrentTarget(): ReactNativeEventTarget | null,
222
+ getResponderNode(): ReactNativeEventTarget | null,
223
};
224
225
export type PointerType =
packages/shared/ReactDOMTypes.js
+1
-1
@@ -75,5 +75,5 @@ export type ReactDOMResponderContext = {
75
continuePropagation(): void,
76
// Used for controller components
77
enqueueStateRestore(Element | Document): void,
78
- getCurrentTarget(): Element | null,
78
+ getResponderNode(): Element | null,
79
};