diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js index a1d6f4cfc87ec..3b702efc3cd1f 100644 --- a/packages/react-dom/src/events/DOMPluginEventSystem.js +++ b/packages/react-dom/src/events/DOMPluginEventSystem.js @@ -726,8 +726,9 @@ export function accumulateSinglePhaseListeners( inCapturePhase: boolean, accumulateTargetOnly: boolean, ): void { - const bubbled = event._reactName; - const captured = bubbled !== null ? bubbled + 'Capture' : null; + const bubbleName = event._reactName; + const captureName = bubbleName !== null ? bubbleName + 'Capture' : null; + const reactEventName = inCapturePhase ? captureName : bubbleName; const listeners: Array = []; let instance = targetFiber; @@ -739,48 +740,34 @@ export function accumulateSinglePhaseListeners( const {stateNode, tag} = instance; // Handle listeners that are on HostComponents (i.e.
) if (tag === HostComponent && stateNode !== null) { - const currentTarget = stateNode; - lastHostComponent = currentTarget; - // For Event Handle listeners - if (enableCreateEventHandleAPI) { - const eventHandlerlisteners = getEventHandlerListeners(currentTarget); + lastHostComponent = stateNode; - if (eventHandlerlisteners !== null) { - const eventHandlerlistenersArr = Array.from(eventHandlerlisteners); - for (let i = 0; i < eventHandlerlistenersArr.length; i++) { - const { - callback, - capture: isCapturePhaseListener, - type, - } = eventHandlerlistenersArr[i]; - if (type === targetType) { - if (isCapturePhaseListener && inCapturePhase) { - listeners.push( - createDispatchListener(instance, callback, currentTarget), - ); - } else if (!isCapturePhaseListener && !inCapturePhase) { - listeners.push( - createDispatchListener(instance, callback, currentTarget), - ); - } + // createEventHandle listeners + if (enableCreateEventHandleAPI) { + const eventHandlerListeners = getEventHandlerListeners( + lastHostComponent, + ); + if (eventHandlerListeners !== null) { + eventHandlerListeners.forEach(entry => { + if (entry.type === targetType && entry.capture === inCapturePhase) { + listeners.push( + createDispatchListener( + instance, + entry.callback, + (lastHostComponent: any), + ), + ); } - } - } - } - // Standard React on* listeners, i.e. onClick prop - if (captured !== null && inCapturePhase) { - const captureListener = getListener(instance, captured); - if (captureListener != null) { - listeners.push( - createDispatchListener(instance, captureListener, currentTarget), - ); + }); } } - if (bubbled !== null && !inCapturePhase) { - const bubbleListener = getListener(instance, bubbled); - if (bubbleListener != null) { + + // Standard React on* listeners, i.e. onClick or onClickCapture + if (reactEventName !== null) { + const listener = getListener(instance, reactEventName); + if (listener != null) { listeners.push( - createDispatchListener(instance, bubbleListener, currentTarget), + createDispatchListener(instance, listener, lastHostComponent), ); } } @@ -791,32 +778,23 @@ export function accumulateSinglePhaseListeners( lastHostComponent !== null && stateNode !== null ) { + // Scopes const reactScopeInstance = stateNode; - const eventHandlerlisteners = getEventHandlerListeners( + const eventHandlerListeners = getEventHandlerListeners( reactScopeInstance, ); - const lastCurrentTarget = ((lastHostComponent: any): Element); - - if (eventHandlerlisteners !== null) { - const eventHandlerlistenersArr = Array.from(eventHandlerlisteners); - for (let i = 0; i < eventHandlerlistenersArr.length; i++) { - const { - callback, - capture: isCapturePhaseListener, - type, - } = eventHandlerlistenersArr[i]; - if (type === targetType) { - if (isCapturePhaseListener && inCapturePhase) { - listeners.push( - createDispatchListener(instance, callback, lastCurrentTarget), - ); - } else if (!isCapturePhaseListener && !inCapturePhase) { - listeners.push( - createDispatchListener(instance, callback, lastCurrentTarget), - ); - } + if (eventHandlerListeners !== null) { + eventHandlerListeners.forEach(entry => { + if (entry.type === targetType && entry.capture === inCapturePhase) { + listeners.push( + createDispatchListener( + instance, + entry.callback, + (lastHostComponent: any), + ), + ); } - } + }); } } // If we are only accumulating events for the target, then we don't @@ -844,8 +822,8 @@ export function accumulateTwoPhaseListeners( dispatchQueue: DispatchQueue, event: ReactSyntheticEvent, ): void { - const bubbled = event._reactName; - const captured = bubbled !== null ? bubbled + 'Capture' : null; + const bubbleName = event._reactName; + const captureName = bubbleName !== null ? bubbleName + 'Capture' : null; const listeners: Array = []; let instance = targetFiber; @@ -856,16 +834,16 @@ export function accumulateTwoPhaseListeners( if (tag === HostComponent && stateNode !== null) { const currentTarget = stateNode; // Standard React on* listeners, i.e. onClick prop - if (captured !== null) { - const captureListener = getListener(instance, captured); + if (captureName !== null) { + const captureListener = getListener(instance, captureName); if (captureListener != null) { listeners.unshift( createDispatchListener(instance, captureListener, currentTarget), ); } } - if (bubbled !== null) { - const bubbleListener = getListener(instance, bubbled); + if (bubbleName !== null) { + const bubbleListener = getListener(instance, bubbleName); if (bubbleListener != null) { listeners.push( createDispatchListener(instance, bubbleListener, currentTarget), @@ -1026,20 +1004,14 @@ export function accumulateEventHandleNonManagedNodeListeners( const eventListeners = getEventHandlerListeners(currentTarget); if (eventListeners !== null) { - const listenersArr = Array.from(eventListeners); const targetType = ((event.type: any): DOMEventName); - - for (let i = 0; i < listenersArr.length; i++) { - const listener = listenersArr[i]; - const {callback, capture: isCapturePhaseListener, type} = listener; - if (type === targetType) { - if (inCapturePhase && isCapturePhaseListener) { - listeners.push(createDispatchListener(null, callback, currentTarget)); - } else if (!inCapturePhase && !isCapturePhaseListener) { - listeners.push(createDispatchListener(null, callback, currentTarget)); - } + eventListeners.forEach(entry => { + if (entry.type === targetType && entry.capture === inCapturePhase) { + listeners.push( + createDispatchListener(null, entry.callback, currentTarget), + ); } - } + }); } if (listeners.length !== 0) { dispatchQueue.push(createDispatchEntry(event, listeners)); diff --git a/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js b/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js index 5ef712e08212a..80a20e5faf561 100644 --- a/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js +++ b/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js @@ -50,10 +50,9 @@ export default function useEvent( clears.set(target, clear); }, clear(): void { - const clearsArr = Array.from(clears.values()); - for (let i = 0; i < clearsArr.length; i++) { - clearsArr[i](); - } + clears.forEach(c => { + c(); + }); clears.clear(); }, };