From c66edb9f8b6baba71df4c21908829f805e57c0b1 Mon Sep 17 00:00:00 2001 From: Dominic Gannaway Date: Wed, 4 Sep 2019 20:04:35 +0100 Subject: [PATCH] [react-events] Refactor getCurrentTarget to getResponderNode (#16660) --- .../src/events/DOMEventResponderSystem.js | 27 ++++--------------- .../DOMEventResponderSystem-test.internal.js | 2 +- packages/react-events/src/dom/Focus.js | 4 +-- packages/react-events/src/dom/Hover.js | 4 +-- packages/react-events/src/dom/Input.js | 2 +- packages/react-events/src/dom/Keyboard.js | 3 +-- packages/react-events/src/dom/Press.js | 4 +-- packages/react-events/src/rn/Press.js | 2 +- .../src/ReactFabricEventResponderSystem.js | 27 ++++--------------- .../src/ReactNativeTypes.js | 2 +- packages/shared/ReactDOMTypes.js | 2 +- 11 files changed, 22 insertions(+), 57 deletions(-) diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js index 01cb120709b28..8d08029344325 100644 --- a/packages/react-dom/src/events/DOMEventResponderSystem.js +++ b/packages/react-dom/src/events/DOMEventResponderSystem.js @@ -66,7 +66,6 @@ type ResponderTimer = {| instance: ReactDOMEventResponderInstance, func: () => void, id: number, - targetFiber: Fiber | null, timeStamp: number, |}; @@ -87,7 +86,6 @@ let currentInstance: null | ReactDOMEventResponderInstance = null; let currentTimerIDCounter = 0; let currentDocument: null | Document = null; let currentPropagationBehavior: PropagationBehavior = DoNotPropagateToNextResponder; -let currentTargetFiber: null | Fiber = null; const eventResponderContext: ReactDOMResponderContext = { dispatchEvent( @@ -230,7 +228,6 @@ const eventResponderContext: ReactDOMResponderContext = { instance: ((currentInstance: any): ReactDOMEventResponderInstance), func, id: timerId, - targetFiber: currentTargetFiber, timeStamp: currentTimeStamp, }); activeTimeouts.set(timerId, timeout); @@ -273,23 +270,14 @@ const eventResponderContext: ReactDOMResponderContext = { currentPropagationBehavior = PropagateToNextResponder; }, enqueueStateRestore, - getCurrentTarget(): Element | null { + getResponderNode(): Element | null { validateResponderContext(); const responderFiber = ((currentInstance: any): ReactDOMEventResponderInstance) .fiber; - let fiber = currentTargetFiber; - let currentTarget = null; - - while (fiber !== null) { - if (fiber.tag === HostComponent) { - currentTarget = fiber.stateNode; - } - if (fiber === responderFiber || fiber.alternate === responderFiber) { - break; - } - fiber = fiber.return; + if (responderFiber.tag === ScopeComponent) { + return null; } - return currentTarget; + return responderFiber.stateNode; }, }; @@ -373,9 +361,8 @@ function processTimers( try { batchedEventUpdates(() => { for (let i = 0; i < timersArr.length; i++) { - const {instance, func, id, timeStamp, targetFiber} = timersArr[i]; + const {instance, func, id, timeStamp} = timersArr[i]; currentInstance = instance; - currentTargetFiber = targetFiber; currentTimeStamp = timeStamp + delay; try { func(); @@ -388,7 +375,6 @@ function processTimers( currentTimers = null; currentInstance = null; currentTimeStamp = 0; - currentTargetFiber = null; } } @@ -599,10 +585,8 @@ export function dispatchEventForResponderEventSystem( const previousTimeStamp = currentTimeStamp; const previousDocument = currentDocument; const previousPropagationBehavior = currentPropagationBehavior; - const previousTargetFiber = currentTargetFiber; currentPropagationBehavior = DoNotPropagateToNextResponder; currentTimers = null; - currentTargetFiber = targetFiber; // nodeType 9 is DOCUMENT_NODE currentDocument = (nativeEventTarget: any).nodeType === 9 @@ -626,7 +610,6 @@ export function dispatchEventForResponderEventSystem( currentTimeStamp = previousTimeStamp; currentDocument = previousDocument; currentPropagationBehavior = previousPropagationBehavior; - currentTargetFiber = previousTargetFiber; } } } diff --git a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js index d939ea5553f9c..90605b9f6179f 100644 --- a/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js +++ b/packages/react-dom/src/events/__tests__/DOMEventResponderSystem-test.internal.js @@ -1017,7 +1017,7 @@ describe('DOMEventResponderSystem', () => { const obj = { counter, timeStamp: context.getTimeStamp(), - target: context.getCurrentTarget(), + target: context.getResponderNode(), type: 'click-test', }; context.dispatchEvent(obj, props.onClick, DiscreteEvent); diff --git a/packages/react-events/src/dom/Focus.js b/packages/react-events/src/dom/Focus.js index a319b9f8436b7..d3d98e7ccb32a 100644 --- a/packages/react-events/src/dom/Focus.js +++ b/packages/react-events/src/dom/Focus.js @@ -289,7 +289,7 @@ const focusResponderImpl = { switch (type) { case 'focus': { - state.focusTarget = context.getCurrentTarget(); + state.focusTarget = context.getResponderNode(); // Limit focus events to the direct child of the event component. // Browser focus is not expected to bubble. if (!state.isFocused && state.focusTarget === target) { @@ -427,7 +427,7 @@ const focusWithinResponderImpl = { switch (type) { case 'focus': { - state.focusTarget = context.getCurrentTarget(); + state.focusTarget = context.getResponderNode(); // Limit focus events to the direct child of the event component. // Browser focus is not expected to bubble. if (!state.isFocused) { diff --git a/packages/react-events/src/dom/Hover.js b/packages/react-events/src/dom/Hover.js index 8e372d7ec3054..2ba6a6352c167 100644 --- a/packages/react-events/src/dom/Hover.js +++ b/packages/react-events/src/dom/Hover.js @@ -235,7 +235,7 @@ const hoverResponderImpl = { // START case 'pointerover': { if (!state.isHovered && pointerType !== 'touch') { - state.hoverTarget = context.getCurrentTarget(); + state.hoverTarget = context.getResponderNode(); dispatchHoverStartEvents(event, context, props, state); } break; @@ -295,7 +295,7 @@ const hoverResponderFallbackImpl = { // START case 'mouseover': { if (!state.isHovered && !state.ignoreEmulatedMouseEvents) { - state.hoverTarget = context.getCurrentTarget(); + state.hoverTarget = context.getResponderNode(); dispatchHoverStartEvents(event, context, props, state); } break; diff --git a/packages/react-events/src/dom/Input.js b/packages/react-events/src/dom/Input.js index a7e9ae5c8438c..88e1f6ecc9095 100644 --- a/packages/react-events/src/dom/Input.js +++ b/packages/react-events/src/dom/Input.js @@ -184,7 +184,7 @@ const inputResponderImpl = { if (props.disabled) { return; } - const currentTarget = context.getCurrentTarget(); + const currentTarget = context.getResponderNode(); if (target !== currentTarget || currentTarget === null) { return; } diff --git a/packages/react-events/src/dom/Keyboard.js b/packages/react-events/src/dom/Keyboard.js index 68f05e49f5904..76a76a3a86e38 100644 --- a/packages/react-events/src/dom/Keyboard.js +++ b/packages/react-events/src/dom/Keyboard.js @@ -143,7 +143,6 @@ function createKeyboardEvent( repeat, shiftKey, } = nativeEvent; - const target = ((context.getCurrentTarget(): any): Element); return { altKey, @@ -155,7 +154,7 @@ function createKeyboardEvent( metaKey, repeat, shiftKey, - target, + target: event.target, timeStamp: context.getTimeStamp(), type, }; diff --git a/packages/react-events/src/dom/Press.js b/packages/react-events/src/dom/Press.js index 31fed91638793..d1ef881f809cf 100644 --- a/packages/react-events/src/dom/Press.js +++ b/packages/react-events/src/dom/Press.js @@ -582,7 +582,7 @@ const pressResponderImpl = { // We set these here, before the button check so we have this // data around for handling of the context menu state.pointerType = pointerType; - const pressTarget = (state.pressTarget = context.getCurrentTarget()); + const pressTarget = (state.pressTarget = context.getResponderNode()); if (isPointerEvent) { state.activePointerId = pointerId; } else if (isTouchEvent) { @@ -634,7 +634,7 @@ const pressResponderImpl = { if (isFunction(onPress) && isScreenReaderVirtualClick(nativeEvent)) { state.pointerType = 'keyboard'; - state.pressTarget = context.getCurrentTarget(); + state.pressTarget = context.getResponderNode(); const preventDefault = props.preventDefault; if (preventDefault !== false) { diff --git a/packages/react-events/src/rn/Press.js b/packages/react-events/src/rn/Press.js index ed25e0655e474..c2bad61489127 100644 --- a/packages/react-events/src/rn/Press.js +++ b/packages/react-events/src/rn/Press.js @@ -412,7 +412,7 @@ const pressResponderImpl = { if (type === 'topTouchStart') { if (!state.isPressed) { state.pointerType = 'touch'; - const pressTarget = (state.pressTarget = context.getCurrentTarget()); + const pressTarget = (state.pressTarget = context.getResponderNode()); const touchEvent = getTouchFromPressEvent(nativeEvent); if (touchEvent === null) { return; diff --git a/packages/react-native-renderer/src/ReactFabricEventResponderSystem.js b/packages/react-native-renderer/src/ReactFabricEventResponderSystem.js index 1ad5dfcb6be34..4e9f5da4cf5f9 100644 --- a/packages/react-native-renderer/src/ReactFabricEventResponderSystem.js +++ b/packages/react-native-renderer/src/ReactFabricEventResponderSystem.js @@ -52,7 +52,6 @@ type ResponderTimer = {| instance: ReactNativeEventResponderInstance, func: () => void, id: number, - targetFiber: Fiber | null, timeStamp: number, |}; @@ -78,7 +77,6 @@ let currentTimeStamp = 0; let currentTimers = new Map(); let currentInstance: null | ReactNativeEventResponderInstance = null; let currentTimerIDCounter = 0; -let currentTargetFiber: Fiber | null = null; const eventResponderContext: ReactNativeResponderContext = { dispatchEvent( @@ -198,7 +196,6 @@ const eventResponderContext: ReactNativeResponderContext = { instance: ((currentInstance: any): ReactNativeEventResponderInstance), func, id: timerId, - targetFiber: currentTargetFiber, timeStamp: currentTimeStamp, }); activeTimeouts.set(timerId, timeout); @@ -220,23 +217,14 @@ const eventResponderContext: ReactNativeResponderContext = { validateResponderContext(); return currentTimeStamp; }, - getCurrentTarget(): ReactNativeEventTarget | null { + getResponderNode(): ReactNativeEventTarget | null { validateResponderContext(); const responderFiber = ((currentInstance: any): ReactNativeEventResponderInstance) .fiber; - let fiber = currentTargetFiber; - let currentTarget = null; - - while (fiber !== null) { - if (fiber.tag === HostComponent) { - currentTarget = fiber.stateNode; - } - if (fiber === responderFiber || fiber.alternate === responderFiber) { - break; - } - fiber = fiber.return; + if (responderFiber.tag === ScopeComponent) { + return null; } - return currentTarget; + return responderFiber.stateNode; }, }; @@ -308,9 +296,8 @@ function processTimers( try { batchedEventUpdates(() => { for (let i = 0; i < timersArr.length; i++) { - const {instance, func, id, targetFiber, timeStamp} = timersArr[i]; + const {instance, func, id, timeStamp} = timersArr[i]; currentInstance = instance; - currentTargetFiber = targetFiber; currentTimeStamp = timeStamp + delay; try { func(); @@ -323,7 +310,6 @@ function processTimers( currentTimers = null; currentInstance = null; currentTimeStamp = 0; - currentTargetFiber = null; } } @@ -450,9 +436,7 @@ export function dispatchEventForResponderEventSystem( const previousInstance = currentInstance; const previousTimers = currentTimers; const previousTimeStamp = currentTimeStamp; - const previousTargetFiber = currentTargetFiber; currentTimers = null; - currentTargetFiber = targetFiber; // We might want to control timeStamp another way here currentTimeStamp = Date.now(); try { @@ -467,7 +451,6 @@ export function dispatchEventForResponderEventSystem( currentTimers = previousTimers; currentInstance = previousInstance; currentTimeStamp = previousTimeStamp; - currentTargetFiber = previousTargetFiber; } } diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js index cb7e867d4dc20..85a57f5f1018f 100644 --- a/packages/react-native-renderer/src/ReactNativeTypes.js +++ b/packages/react-native-renderer/src/ReactNativeTypes.js @@ -219,7 +219,7 @@ export type ReactNativeResponderContext = { setTimeout: (func: () => void, timeout: number) => number, clearTimeout: (timerId: number) => void, getTimeStamp: () => number, - getCurrentTarget(): ReactNativeEventTarget | null, + getResponderNode(): ReactNativeEventTarget | null, }; export type PointerType = diff --git a/packages/shared/ReactDOMTypes.js b/packages/shared/ReactDOMTypes.js index 9adc678ae8044..fe0a97a777752 100644 --- a/packages/shared/ReactDOMTypes.js +++ b/packages/shared/ReactDOMTypes.js @@ -75,5 +75,5 @@ export type ReactDOMResponderContext = { continuePropagation(): void, // Used for controller components enqueueStateRestore(Element | Document): void, - getCurrentTarget(): Element | null, + getResponderNode(): Element | null, };