From bb44feb05dd258c4b4868f6c3f11bf0a2f491564 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 15 May 2018 13:55:01 +0100 Subject: [PATCH] Try to fix Flow circular dependency --- .../src/events/DOMTopLevelEventTypes.js | 147 +++++++++--------- .../src/events/ReactDOMEventListener.js | 15 +- .../react-dom/src/events/SimpleEventPlugin.js | 5 +- 3 files changed, 84 insertions(+), 83 deletions(-) diff --git a/packages/react-dom/src/events/DOMTopLevelEventTypes.js b/packages/react-dom/src/events/DOMTopLevelEventTypes.js index 79f13057f9..aac82dbbe7 100644 --- a/packages/react-dom/src/events/DOMTopLevelEventTypes.js +++ b/packages/react-dom/src/events/DOMTopLevelEventTypes.js @@ -7,7 +7,6 @@ * @flow */ -import type {TopLevelType} from 'events/TopLevelEventTypes'; import getVendorPrefixedEventName from './getVendorPrefixedEventName'; /** @@ -94,87 +93,87 @@ export opaque type DOMTopLevelEventType = | 'waiting' | 'wheel'; -export const TOP_ABORT: TopLevelType = 'abort'; -export const TOP_ANIMATION_END: TopLevelType = getVendorPrefixedEventName( +export const TOP_ABORT: DOMTopLevelEventType = 'abort'; +export const TOP_ANIMATION_END: DOMTopLevelEventType = getVendorPrefixedEventName( 'animationend', ); -export const TOP_ANIMATION_ITERATION: TopLevelType = getVendorPrefixedEventName( +export const TOP_ANIMATION_ITERATION: DOMTopLevelEventType = getVendorPrefixedEventName( 'animationiteration', ); -export const TOP_ANIMATION_START: TopLevelType = getVendorPrefixedEventName( +export const TOP_ANIMATION_START: DOMTopLevelEventType = getVendorPrefixedEventName( 'animationstart', ); -export const TOP_BLUR: TopLevelType = 'blur'; -export const TOP_CAN_PLAY: TopLevelType = 'canplay'; -export const TOP_CAN_PLAY_THROUGH: TopLevelType = 'canplaythrough'; -export const TOP_CANCEL: TopLevelType = 'cancel'; -export const TOP_CHANGE: TopLevelType = 'change'; -export const TOP_CLICK: TopLevelType = 'click'; -export const TOP_CLOSE: TopLevelType = 'close'; -export const TOP_COMPOSITION_END: TopLevelType = 'compositionend'; -export const TOP_COMPOSITION_START: TopLevelType = 'compositionstart'; -export const TOP_COMPOSITION_UPDATE: TopLevelType = 'compositionupdate'; -export const TOP_CONTEXT_MENU: TopLevelType = 'contextmenu'; -export const TOP_COPY: TopLevelType = 'copy'; -export const TOP_CUT: TopLevelType = 'cut'; -export const TOP_DOUBLE_CLICK: TopLevelType = 'dblclick'; -export const TOP_DRAG: TopLevelType = 'drag'; -export const TOP_DRAG_END: TopLevelType = 'dragend'; -export const TOP_DRAG_ENTER: TopLevelType = 'dragenter'; -export const TOP_DRAG_EXIT: TopLevelType = 'dragexit'; -export const TOP_DRAG_LEAVE: TopLevelType = 'dragleave'; -export const TOP_DRAG_OVER: TopLevelType = 'dragover'; -export const TOP_DRAG_START: TopLevelType = 'dragstart'; -export const TOP_DROP: TopLevelType = 'drop'; -export const TOP_DURATION_CHANGE: TopLevelType = 'durationchange'; -export const TOP_EMPTIED: TopLevelType = 'emptied'; -export const TOP_ENCRYPTED: TopLevelType = 'encrypted'; -export const TOP_ENDED: TopLevelType = 'ended'; -export const TOP_ERROR: TopLevelType = 'error'; -export const TOP_FOCUS: TopLevelType = 'focus'; -export const TOP_INPUT: TopLevelType = 'input'; -export const TOP_INVALID: TopLevelType = 'invalid'; -export const TOP_KEY_DOWN: TopLevelType = 'keydown'; -export const TOP_KEY_PRESS: TopLevelType = 'keypress'; -export const TOP_KEY_UP: TopLevelType = 'keyup'; -export const TOP_LOAD: TopLevelType = 'load'; -export const TOP_LOAD_START: TopLevelType = 'loadstart'; -export const TOP_LOADED_DATA: TopLevelType = 'loadeddata'; -export const TOP_LOADED_METADATA: TopLevelType = 'loadedmetadata'; -export const TOP_MOUSE_DOWN: TopLevelType = 'mousedown'; -export const TOP_MOUSE_MOVE: TopLevelType = 'mousemove'; -export const TOP_MOUSE_OUT: TopLevelType = 'mouseout'; -export const TOP_MOUSE_OVER: TopLevelType = 'mouseover'; -export const TOP_MOUSE_UP: TopLevelType = 'mouseup'; -export const TOP_PASTE: TopLevelType = 'paste'; -export const TOP_PAUSE: TopLevelType = 'pause'; -export const TOP_PLAY: TopLevelType = 'play'; -export const TOP_PLAYING: TopLevelType = 'playing'; -export const TOP_PROGRESS: TopLevelType = 'progress'; -export const TOP_RATE_CHANGE: TopLevelType = 'ratechange'; -export const TOP_RESET: TopLevelType = 'reset'; -export const TOP_SCROLL: TopLevelType = 'scroll'; -export const TOP_SEEKED: TopLevelType = 'seeked'; -export const TOP_SEEKING: TopLevelType = 'seeking'; -export const TOP_SELECTION_CHANGE: TopLevelType = 'selectionchange'; -export const TOP_STALLED: TopLevelType = 'stalled'; -export const TOP_SUBMIT: TopLevelType = 'submit'; -export const TOP_SUSPEND: TopLevelType = 'suspend'; -export const TOP_TEXT_INPUT: TopLevelType = 'textInput'; -export const TOP_TIME_UPDATE: TopLevelType = 'timeupdate'; -export const TOP_TOGGLE: TopLevelType = 'toggle'; -export const TOP_TOUCH_CANCEL: TopLevelType = 'touchcancel'; -export const TOP_TOUCH_END: TopLevelType = 'touchend'; -export const TOP_TOUCH_MOVE: TopLevelType = 'touchmove'; -export const TOP_TOUCH_START: TopLevelType = 'touchstart'; -export const TOP_TRANSITION_END: TopLevelType = getVendorPrefixedEventName( +export const TOP_BLUR: DOMTopLevelEventType = 'blur'; +export const TOP_CAN_PLAY: DOMTopLevelEventType = 'canplay'; +export const TOP_CAN_PLAY_THROUGH: DOMTopLevelEventType = 'canplaythrough'; +export const TOP_CANCEL: DOMTopLevelEventType = 'cancel'; +export const TOP_CHANGE: DOMTopLevelEventType = 'change'; +export const TOP_CLICK: DOMTopLevelEventType = 'click'; +export const TOP_CLOSE: DOMTopLevelEventType = 'close'; +export const TOP_COMPOSITION_END: DOMTopLevelEventType = 'compositionend'; +export const TOP_COMPOSITION_START: DOMTopLevelEventType = 'compositionstart'; +export const TOP_COMPOSITION_UPDATE: DOMTopLevelEventType = 'compositionupdate'; +export const TOP_CONTEXT_MENU: DOMTopLevelEventType = 'contextmenu'; +export const TOP_COPY: DOMTopLevelEventType = 'copy'; +export const TOP_CUT: DOMTopLevelEventType = 'cut'; +export const TOP_DOUBLE_CLICK: DOMTopLevelEventType = 'dblclick'; +export const TOP_DRAG: DOMTopLevelEventType = 'drag'; +export const TOP_DRAG_END: DOMTopLevelEventType = 'dragend'; +export const TOP_DRAG_ENTER: DOMTopLevelEventType = 'dragenter'; +export const TOP_DRAG_EXIT: DOMTopLevelEventType = 'dragexit'; +export const TOP_DRAG_LEAVE: DOMTopLevelEventType = 'dragleave'; +export const TOP_DRAG_OVER: DOMTopLevelEventType = 'dragover'; +export const TOP_DRAG_START: DOMTopLevelEventType = 'dragstart'; +export const TOP_DROP: DOMTopLevelEventType = 'drop'; +export const TOP_DURATION_CHANGE: DOMTopLevelEventType = 'durationchange'; +export const TOP_EMPTIED: DOMTopLevelEventType = 'emptied'; +export const TOP_ENCRYPTED: DOMTopLevelEventType = 'encrypted'; +export const TOP_ENDED: DOMTopLevelEventType = 'ended'; +export const TOP_ERROR: DOMTopLevelEventType = 'error'; +export const TOP_FOCUS: DOMTopLevelEventType = 'focus'; +export const TOP_INPUT: DOMTopLevelEventType = 'input'; +export const TOP_INVALID: DOMTopLevelEventType = 'invalid'; +export const TOP_KEY_DOWN: DOMTopLevelEventType = 'keydown'; +export const TOP_KEY_PRESS: DOMTopLevelEventType = 'keypress'; +export const TOP_KEY_UP: DOMTopLevelEventType = 'keyup'; +export const TOP_LOAD: DOMTopLevelEventType = 'load'; +export const TOP_LOAD_START: DOMTopLevelEventType = 'loadstart'; +export const TOP_LOADED_DATA: DOMTopLevelEventType = 'loadeddata'; +export const TOP_LOADED_METADATA: DOMTopLevelEventType = 'loadedmetadata'; +export const TOP_MOUSE_DOWN: DOMTopLevelEventType = 'mousedown'; +export const TOP_MOUSE_MOVE: DOMTopLevelEventType = 'mousemove'; +export const TOP_MOUSE_OUT: DOMTopLevelEventType = 'mouseout'; +export const TOP_MOUSE_OVER: DOMTopLevelEventType = 'mouseover'; +export const TOP_MOUSE_UP: DOMTopLevelEventType = 'mouseup'; +export const TOP_PASTE: DOMTopLevelEventType = 'paste'; +export const TOP_PAUSE: DOMTopLevelEventType = 'pause'; +export const TOP_PLAY: DOMTopLevelEventType = 'play'; +export const TOP_PLAYING: DOMTopLevelEventType = 'playing'; +export const TOP_PROGRESS: DOMTopLevelEventType = 'progress'; +export const TOP_RATE_CHANGE: DOMTopLevelEventType = 'ratechange'; +export const TOP_RESET: DOMTopLevelEventType = 'reset'; +export const TOP_SCROLL: DOMTopLevelEventType = 'scroll'; +export const TOP_SEEKED: DOMTopLevelEventType = 'seeked'; +export const TOP_SEEKING: DOMTopLevelEventType = 'seeking'; +export const TOP_SELECTION_CHANGE: DOMTopLevelEventType = 'selectionchange'; +export const TOP_STALLED: DOMTopLevelEventType = 'stalled'; +export const TOP_SUBMIT: DOMTopLevelEventType = 'submit'; +export const TOP_SUSPEND: DOMTopLevelEventType = 'suspend'; +export const TOP_TEXT_INPUT: DOMTopLevelEventType = 'textInput'; +export const TOP_TIME_UPDATE: DOMTopLevelEventType = 'timeupdate'; +export const TOP_TOGGLE: DOMTopLevelEventType = 'toggle'; +export const TOP_TOUCH_CANCEL: DOMTopLevelEventType = 'touchcancel'; +export const TOP_TOUCH_END: DOMTopLevelEventType = 'touchend'; +export const TOP_TOUCH_MOVE: DOMTopLevelEventType = 'touchmove'; +export const TOP_TOUCH_START: DOMTopLevelEventType = 'touchstart'; +export const TOP_TRANSITION_END: DOMTopLevelEventType = getVendorPrefixedEventName( 'transitionend', ); -export const TOP_VOLUME_CHANGE: TopLevelType = 'volumechange'; -export const TOP_WAITING: TopLevelType = 'waiting'; -export const TOP_WHEEL: TopLevelType = 'wheel'; +export const TOP_VOLUME_CHANGE: DOMTopLevelEventType = 'volumechange'; +export const TOP_WAITING: DOMTopLevelEventType = 'waiting'; +export const TOP_WHEEL: DOMTopLevelEventType = 'wheel'; -export const mediaEventTypes: Array = [ +export const mediaEventTypes: Array = [ TOP_ABORT, TOP_CAN_PLAY, TOP_CAN_PLAY_THROUGH, @@ -200,6 +199,6 @@ export const mediaEventTypes: Array = [ TOP_WAITING, ]; -export function getRawEventName(topLevelType: TopLevelType): string { +export function getRawEventName(topLevelType: DOMTopLevelEventType): string { return topLevelType; } diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js index 0125a8437b..8878d447d2 100644 --- a/packages/react-dom/src/events/ReactDOMEventListener.js +++ b/packages/react-dom/src/events/ReactDOMEventListener.js @@ -7,13 +7,14 @@ * @flow */ +import type {AnyNativeEvent} from 'events/PluginModuleType'; +import type {Fiber} from 'react-reconciler/src/ReactFiber'; +import type {DOMTopLevelEventType} from './DOMTopLevelEventTypes'; + import {batchedUpdates, interactiveUpdates} from 'events/ReactGenericBatching'; import {runExtractedEventsInBatch} from 'events/EventPluginHub'; import {isFiberMounted} from 'react-reconciler/reflection'; import {HostRoot} from 'shared/ReactTypeOfWork'; -import type {AnyNativeEvent} from 'events/PluginModuleType'; -import type {TopLevelType} from 'events/TopLevelEventTypes'; -import type {Fiber} from 'react-reconciler/src/ReactFiber'; import {addEventBubbleListener, addEventCaptureListener} from './EventListener'; import getEventTarget from './getEventTarget'; @@ -51,7 +52,7 @@ function getTopLevelCallbackBookKeeping( nativeEvent, targetInst, ): { - topLevelType: ?TopLevelType, + topLevelType: ?DOMTopLevelEventType, nativeEvent: ?AnyNativeEvent, targetInst: Fiber, ancestors: Array, @@ -134,7 +135,7 @@ export function isEnabled() { * @internal */ export function trapBubbledEvent( - topLevelType: TopLevelType, + topLevelType: DOMTopLevelEventType, element: Document | Element, ) { if (!element) { @@ -162,7 +163,7 @@ export function trapBubbledEvent( * @internal */ export function trapCapturedEvent( - topLevelType: TopLevelType, + topLevelType: DOMTopLevelEventType, element: Document | Element, ) { if (!element) { @@ -185,7 +186,7 @@ function dispatchInteractiveEvent(topLevelType, nativeEvent) { } export function dispatchEvent( - topLevelType: TopLevelType, + topLevelType: DOMTopLevelEventType, nativeEvent: AnyNativeEvent, ) { if (!_enabled) { diff --git a/packages/react-dom/src/events/SimpleEventPlugin.js b/packages/react-dom/src/events/SimpleEventPlugin.js index 6da1d244c9..8c9a4bad1c 100644 --- a/packages/react-dom/src/events/SimpleEventPlugin.js +++ b/packages/react-dom/src/events/SimpleEventPlugin.js @@ -8,6 +8,7 @@ */ import type {TopLevelType} from 'events/TopLevelEventTypes'; +import type {DOMTopLevelEventType} from './DOMTopLevelEventTypes'; import type { DispatchConfig, ReactSyntheticEvent, @@ -51,7 +52,7 @@ import getEventCharCode from './getEventCharCode'; * [TOP_ABORT, { sameConfig }], * ]); */ -type EventTuple = [TopLevelType, string]; +type EventTuple = [DOMTopLevelEventType, string]; const interactiveEventTypeNames: Array = [ [DOMTopLevelEventTypes.TOP_BLUR, 'blur'], [DOMTopLevelEventTypes.TOP_CANCEL, 'cancel'], @@ -154,7 +155,7 @@ nonInteractiveEventTypeNames.forEach(eventTuple => { }); // Only used in DEV for exhaustiveness validation. -const knownHTMLTopLevelTypes: Array = [ +const knownHTMLTopLevelTypes: Array = [ DOMTopLevelEventTypes.TOP_ABORT, DOMTopLevelEventTypes.TOP_CANCEL, DOMTopLevelEventTypes.TOP_CAN_PLAY,