diff --git a/packages/react-dom/src/events/DOMEventProperties.js b/packages/react-dom/src/events/DOMEventProperties.js index 9fe967737e935..ab13027b05cec 100644 --- a/packages/react-dom/src/events/DOMEventProperties.js +++ b/packages/react-dom/src/events/DOMEventProperties.js @@ -7,7 +7,6 @@ * @flow */ -import type {EventPriority} from 'shared/ReactTypes'; import type {DOMEventName} from './DOMEventNames'; import {registerTwoPhaseEvent} from './EventRegistry'; @@ -17,7 +16,6 @@ import { ANIMATION_START, TRANSITION_END, } from './DOMEventNames'; -import {DiscreteEvent, ContinuousEvent, DefaultEvent} from 'shared/ReactTypes'; import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags'; @@ -26,19 +24,8 @@ export const topLevelEventsToReactNames: Map< string | null, > = new Map(); -const eventPriorities = new Map(); - -// We store most of the events in this module in pairs of two strings so we can re-use -// the code required to apply the same logic for event prioritization and that of the -// SimpleEventPlugin. This complicates things slightly, but the aim is to reduce code -// duplication (for which there would be quite a bit). For the events that are not needed -// for the SimpleEventPlugin (otherDiscreteEvents) we process them separately as an -// array of top level events. - -// Lastly, we ignore prettier so we can keep the formatting sane. - // prettier-ignore -const discreteEventPairsForSimpleEventPlugin = [ +const simpleEventPluginNames = [ ('cancel': DOMEventName), 'cancel', ('click': DOMEventName), 'click', ('close': DOMEventName), 'close', @@ -73,27 +60,7 @@ const discreteEventPairsForSimpleEventPlugin = [ ('touchend': DOMEventName), 'touchEnd', ('touchstart': DOMEventName), 'touchStart', ('volumechange': DOMEventName), 'volumeChange', -]; - -const otherDiscreteEvents: Array = [ - 'change', - 'selectionchange', - 'textInput', - 'compositionstart', - 'compositionend', - 'compositionupdate', -]; - -if (enableCreateEventHandleAPI) { - // Special case: these two events don't have on* React handler - // and are only accessible via the createEventHandle API. - topLevelEventsToReactNames.set('beforeblur', null); - topLevelEventsToReactNames.set('afterblur', null); - otherDiscreteEvents.push('beforeblur', 'afterblur'); -} -// prettier-ignore -const continuousPairsForSimpleEventPlugin: Array = [ ('drag': DOMEventName), 'drag', ('dragenter': DOMEventName), 'dragEnter', ('dragexit': DOMEventName), 'dragExit', @@ -109,10 +76,7 @@ const continuousPairsForSimpleEventPlugin: Array = [ ('toggle': DOMEventName), 'toggle', ('touchmove': DOMEventName), 'touchMove', ('wheel': DOMEventName), 'wheel', -]; -// prettier-ignore -const defaultPairsForSimpleEventPlugin: Array = [ ('abort': DOMEventName), 'abort', (ANIMATION_END: DOMEventName), 'animationEnd', (ANIMATION_ITERATION: DOMEventName), 'animationIteration', @@ -140,6 +104,13 @@ const defaultPairsForSimpleEventPlugin: Array = [ ('waiting': DOMEventName), 'waiting', ]; +if (enableCreateEventHandleAPI) { + // Special case: these two events don't have on* React handler + // and are only accessible via the createEventHandle API. + topLevelEventsToReactNames.set('beforeblur', null); + topLevelEventsToReactNames.set('afterblur', null); +} + /** * Turns * ['abort', ...] @@ -152,75 +123,19 @@ const defaultPairsForSimpleEventPlugin: Array = [ * * and registers them. */ -function registerSimplePluginEventsAndSetTheirPriorities( - eventTypes: Array, - priority: EventPriority, -): void { +export function registerSimpleEvents() { // As the event types are in pairs of two, we need to iterate // through in twos. The events are in pairs of two to save code // and improve init perf of processing this array, as it will // result in far fewer object allocations and property accesses // if we only use three arrays to process all the categories of // instead of tuples. - for (let i = 0; i < eventTypes.length; i += 2) { - const topEvent = ((eventTypes[i]: any): DOMEventName); - const event = ((eventTypes[i + 1]: any): string); + for (let i = 0; i < simpleEventPluginNames.length; i += 2) { + const topEvent = ((simpleEventPluginNames[i]: any): DOMEventName); + const event = ((simpleEventPluginNames[i + 1]: any): string); const capitalizedEvent = event[0].toUpperCase() + event.slice(1); const reactName = 'on' + capitalizedEvent; - eventPriorities.set(topEvent, priority); topLevelEventsToReactNames.set(topEvent, reactName); registerTwoPhaseEvent(reactName, [topEvent]); } } - -function setEventPriorities( - eventTypes: Array, - priority: EventPriority, -): void { - for (let i = 0; i < eventTypes.length; i++) { - eventPriorities.set(eventTypes[i], priority); - } -} - -export function getEventPriorityForPluginSystem( - domEventName: DOMEventName, -): EventPriority { - const priority = eventPriorities.get(domEventName); - // Default to a DefaultEvent. Note: we might - // want to warn if we can't detect the priority - // for the event. - return priority === undefined ? DefaultEvent : priority; -} - -export function getEventPriorityForListenerSystem( - type: DOMEventName, -): EventPriority { - const priority = eventPriorities.get(type); - if (priority !== undefined) { - return priority; - } - if (__DEV__) { - console.warn( - 'The event "%s" provided to createEventHandle() does not have a known priority type.' + - ' This is likely a bug in React.', - type, - ); - } - return DefaultEvent; -} - -export function registerSimpleEvents() { - registerSimplePluginEventsAndSetTheirPriorities( - discreteEventPairsForSimpleEventPlugin, - DiscreteEvent, - ); - registerSimplePluginEventsAndSetTheirPriorities( - continuousPairsForSimpleEventPlugin, - ContinuousEvent, - ); - registerSimplePluginEventsAndSetTheirPriorities( - defaultPairsForSimpleEventPlugin, - DefaultEvent, - ); - setEventPriorities(otherDiscreteEvents, DiscreteEvent); -} diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js index 4b87da2c320d7..7790bf70a1681 100644 --- a/packages/react-dom/src/events/ReactDOMEventListener.js +++ b/packages/react-dom/src/events/ReactDOMEventListener.js @@ -11,6 +11,7 @@ import type {AnyNativeEvent} from '../events/PluginModuleType'; import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes'; import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig'; import type {DOMEventName} from '../events/DOMEventNames'; +import type {EventPriority} from 'shared/ReactTypes'; // Intentionally not named imports because Rollup would use dynamic dispatch for // CommonJS interop named imports. @@ -44,7 +45,6 @@ import { enableNewReconciler, } from 'shared/ReactFeatureFlags'; import {ContinuousEvent, DefaultEvent, DiscreteEvent} from 'shared/ReactTypes'; -import {getEventPriorityForPluginSystem} from './DOMEventProperties'; import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem'; import { flushDiscreteUpdatesIfNeeded, @@ -339,3 +339,76 @@ export function attemptToDispatchEvent( // We're not blocked on anything. return null; } + +function getEventPriorityForPluginSystem( + domEventName: DOMEventName, +): EventPriority { + switch (domEventName) { + // Used by SimpleEventPlugin: + case 'cancel': + case 'click': + case 'close': + case 'contextmenu': + case 'copy': + case 'cut': + case 'auxclick': + case 'dblclick': + case 'dragend': + case 'dragstart': + case 'drop': + case 'focusin': + case 'focusout': + case 'input': + case 'invalid': + case 'keydown': + case 'keypress': + case 'keyup': + case 'mousedown': + case 'mouseup': + case 'paste': + case 'pause': + case 'play': + case 'pointercancel': + case 'pointerdown': + case 'pointerup': + case 'ratechange': + case 'reset': + case 'seeked': + case 'submit': + case 'touchcancel': + case 'touchend': + case 'touchstart': + case 'volumechange': + // Used by polyfills: + // eslint-disable-next-line no-fallthrough + case 'change': + case 'selectionchange': + case 'textInput': + case 'compositionstart': + case 'compositionend': + case 'compositionupdate': + // Only enableCreateEventHandleAPI: + // eslint-disable-next-line no-fallthrough + case 'beforeblur': + case 'afterblur': + return DiscreteEvent; + case 'drag': + case 'dragenter': + case 'dragexit': + case 'dragleave': + case 'dragover': + case 'mousemove': + case 'mouseout': + case 'mouseover': + case 'pointermove': + case 'pointerout': + case 'pointerover': + case 'scroll': + case 'toggle': + case 'touchmove': + case 'wheel': + return ContinuousEvent; + default: + return DefaultEvent; + } +} diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js index 853aa3a6aefa7..d92777a75cce3 100644 --- a/packages/react-dom/src/events/ReactSyntheticEventType.js +++ b/packages/react-dom/src/events/ReactSyntheticEventType.js @@ -9,7 +9,6 @@ */ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes'; -import type {EventPriority} from 'shared/ReactTypes'; import type {DOMEventName} from './DOMEventNames'; export type DispatchConfig = {| @@ -19,7 +18,6 @@ export type DispatchConfig = {| captured: null | string, |}, registrationName?: string, - eventPriority?: EventPriority, |}; type BaseSyntheticEvent = { diff --git a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js index 1bc167afe0068..57d019e2a398d 100644 --- a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js +++ b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js @@ -9,7 +9,6 @@ */ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes'; -import type {EventPriority} from 'shared/ReactTypes'; import type {TopLevelType} from './TopLevelEventTypes'; export type DispatchConfig = {| @@ -19,7 +18,6 @@ export type DispatchConfig = {| captured: null | string, |}, registrationName?: string, - eventPriority: EventPriority, |}; export type CustomDispatchConfig = {|