From a210b5b44016c086f83008cd03146d5acdacd12c Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 17 Sep 2018 18:43:16 +0100 Subject: [PATCH] Revert "Do not bind topLevelType to dispatch" (#13674) * Revert "Do not bind topLevelType to dispatch (#13618)" This reverts commit 0c9c591bfb4c280d69bc9c1dd692ab0028bb0f8e. --- packages/events/PluginModuleType.js | 2 +- packages/events/ReactGenericBatching.js | 8 ++-- .../src/events/ReactDOMEventListener.js | 38 ++++++++++++------- .../src/test-utils/ReactTestUtils.js | 6 +-- 4 files changed, 31 insertions(+), 23 deletions(-) diff --git a/packages/events/PluginModuleType.js b/packages/events/PluginModuleType.js index 0f79f749f5332..cd7a07661ab4e 100644 --- a/packages/events/PluginModuleType.js +++ b/packages/events/PluginModuleType.js @@ -16,7 +16,7 @@ import type {TopLevelType} from './TopLevelEventTypes'; export type EventTypes = {[key: string]: DispatchConfig}; -export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | TouchEvent; +export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch; export type PluginName = string; diff --git a/packages/events/ReactGenericBatching.js b/packages/events/ReactGenericBatching.js index e37481e4deee8..8347382f48a53 100644 --- a/packages/events/ReactGenericBatching.js +++ b/packages/events/ReactGenericBatching.js @@ -20,8 +20,8 @@ import { let _batchedUpdatesImpl = function(fn, bookkeeping) { return fn(bookkeeping); }; -let _interactiveUpdatesImpl = function(fn, a) { - return fn(a); +let _interactiveUpdatesImpl = function(fn, a, b) { + return fn(a, b); }; let _flushInteractiveUpdatesImpl = function() {}; @@ -52,8 +52,8 @@ export function batchedUpdates(fn, bookkeeping) { } } -export function interactiveUpdates(fn, a) { - return _interactiveUpdatesImpl(fn, a); +export function interactiveUpdates(fn, a, b) { + return _interactiveUpdatesImpl(fn, a, b); } export function flushInteractiveUpdates() { diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js index 0ef3af801789a..e49266d267f70 100644 --- a/packages/react-dom/src/events/ReactDOMEventListener.js +++ b/packages/react-dom/src/events/ReactDOMEventListener.js @@ -21,7 +21,6 @@ import getEventTarget from './getEventTarget'; import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree'; import SimpleEventPlugin from './SimpleEventPlugin'; import {getRawEventName} from './DOMTopLevelEventTypes'; -import {unsafeCastStringToDOMTopLevelType} from 'events/TopLevelEventTypes'; const {isInteractiveTopLevelEventType} = SimpleEventPlugin; @@ -49,6 +48,7 @@ function findRootContainerNode(inst) { // Used to store ancestor hierarchy in top level callback function getTopLevelCallbackBookKeeping( + topLevelType, nativeEvent, targetInst, ): { @@ -57,9 +57,6 @@ function getTopLevelCallbackBookKeeping( targetInst: Fiber | null, ancestors: Array, } { - // This is safe because DOMTopLevelTypes are always native event type strings - const topLevelType = unsafeCastStringToDOMTopLevelType(nativeEvent.type); - if (callbackBookkeepingPool.length) { const instance = callbackBookkeepingPool.pop(); instance.topLevelType = topLevelType; @@ -144,13 +141,16 @@ export function trapBubbledEvent( if (!element) { return null; } - - // Check if interactive and wrap in interactiveUpdates const dispatch = isInteractiveTopLevelEventType(topLevelType) ? dispatchInteractiveEvent : dispatchEvent; - addEventBubbleListener(element, getRawEventName(topLevelType), dispatch); + addEventBubbleListener( + element, + getRawEventName(topLevelType), + // Check if interactive and wrap in interactiveUpdates + dispatch.bind(null, topLevelType), + ); } /** @@ -169,20 +169,26 @@ export function trapCapturedEvent( if (!element) { return null; } - - // Check if interactive and wrap in interactiveUpdates const dispatch = isInteractiveTopLevelEventType(topLevelType) ? dispatchInteractiveEvent : dispatchEvent; - addEventCaptureListener(element, getRawEventName(topLevelType), dispatch); + addEventCaptureListener( + element, + getRawEventName(topLevelType), + // Check if interactive and wrap in interactiveUpdates + dispatch.bind(null, topLevelType), + ); } -function dispatchInteractiveEvent(nativeEvent) { - interactiveUpdates(dispatchEvent, nativeEvent); +function dispatchInteractiveEvent(topLevelType, nativeEvent) { + interactiveUpdates(dispatchEvent, topLevelType, nativeEvent); } -export function dispatchEvent(nativeEvent: AnyNativeEvent) { +export function dispatchEvent( + topLevelType: DOMTopLevelEventType, + nativeEvent: AnyNativeEvent, +) { if (!_enabled) { return; } @@ -201,7 +207,11 @@ export function dispatchEvent(nativeEvent: AnyNativeEvent) { targetInst = null; } - const bookKeeping = getTopLevelCallbackBookKeeping(nativeEvent, targetInst); + const bookKeeping = getTopLevelCallbackBookKeeping( + topLevelType, + nativeEvent, + targetInst, + ); try { // Event queue being processed in the same cycle allows diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js index 88710e9518dc4..dad3d0f14e2ef 100644 --- a/packages/react-dom/src/test-utils/ReactTestUtils.js +++ b/packages/react-dom/src/test-utils/ReactTestUtils.js @@ -42,9 +42,7 @@ const [ runEventsInBatch, ] = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events; -function Event(type) { - this.type = type; -} +function Event(suffix) {} let hasWarnedAboutDeprecatedMockComponent = false; @@ -61,7 +59,7 @@ let hasWarnedAboutDeprecatedMockComponent = false; */ function simulateNativeEventOnNode(topLevelType, node, fakeNativeEvent) { fakeNativeEvent.target = node; - dispatchEvent(fakeNativeEvent); + dispatchEvent(topLevelType, fakeNativeEvent); } /**