@samitouri / QOS-React-2 / commits / 22d16cc15d

Remove event constants (#19276)

* Remove opaque event type * Rename type and merge files * Use literals where we have Flow coverage * Flowify some plugins * Remove constants except necessary ones

Dan Abramov committed Jul 30, 2020 at 21:52 UTC 22d16cc15df8e570b79c2825fb495c2b98b40bf5
20 files changed +791 -888
packages/react-dom/src/client/ReactDOMComponent.js
+20 -28
@@ -91,14 +91,6 @@ import {
91 listenToNonDelegatedEvent,
92 } from '../events/DOMPluginEventSystem';
93 import {getEventListenerMap} from './ReactDOMComponentTree';
94 -import {
95 - TOP_LOAD,
96 - TOP_ERROR,
97 - TOP_TOGGLE,
98 - TOP_INVALID,
99 - TOP_CANCEL,
100 - TOP_CLOSE,
101 -} from '../events/DOMTopLevelEventTypes';
94
95 let didWarnInvalidHydration = false;
96 let didWarnScriptTags = false;
@@ -542,8 +534,8 @@ export function setInitialProperties(
534 let props: Object;
535 switch (tag) {
536 case 'dialog':
545 - listenToNonDelegatedEvent(TOP_CANCEL, domElement);
546 - listenToNonDelegatedEvent(TOP_CLOSE, domElement);
537 + listenToNonDelegatedEvent('cancel', domElement);
538 + listenToNonDelegatedEvent('close', domElement);
539 props = rawProps;
540 break;
541 case 'iframe':
@@ -551,7 +543,7 @@ export function setInitialProperties(
543 case 'embed':
544 // We listen to this event in case to ensure emulated bubble
545 // listeners still fire for the load event.
554 - listenToNonDelegatedEvent(TOP_LOAD, domElement);
546 + listenToNonDelegatedEvent('load', domElement);
547 props = rawProps;
548 break;
549 case 'video':
@@ -566,7 +558,7 @@ export function setInitialProperties(
558 case 'source':
559 // We listen to this event in case to ensure emulated bubble
560 // listeners still fire for the error event.
569 - listenToNonDelegatedEvent(TOP_ERROR, domElement);
561 + listenToNonDelegatedEvent('error', domElement);
562 props = rawProps;
563 break;
564 case 'img':
@@ -574,14 +566,14 @@ export function setInitialProperties(
566 case 'link':
567 // We listen to these events in case to ensure emulated bubble
568 // listeners still fire for error and load events.
577 - listenToNonDelegatedEvent(TOP_ERROR, domElement);
578 - listenToNonDelegatedEvent(TOP_LOAD, domElement);
569 + listenToNonDelegatedEvent('error', domElement);
570 + listenToNonDelegatedEvent('load', domElement);
571 props = rawProps;
572 break;
573 case 'details':
574 // We listen to this event in case to ensure emulated bubble
575 // listeners still fire for the toggle event.
584 - listenToNonDelegatedEvent(TOP_TOGGLE, domElement);
576 + listenToNonDelegatedEvent('toggle', domElement);
577 props = rawProps;
578 break;
579 case 'input':
@@ -589,7 +581,7 @@ export function setInitialProperties(
581 props = ReactDOMInputGetHostProps(domElement, rawProps);
582 // We listen to this event in case to ensure emulated bubble
583 // listeners still fire for the invalid event.
592 - listenToNonDelegatedEvent(TOP_INVALID, domElement);
584 + listenToNonDelegatedEvent('invalid', domElement);
585 // For controlled components we always need to ensure we're listening
586 // to onChange. Even if there is no listener.
587 ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -603,7 +595,7 @@ export function setInitialProperties(
595 props = ReactDOMSelectGetHostProps(domElement, rawProps);
596 // We listen to this event in case to ensure emulated bubble
597 // listeners still fire for the invalid event.
606 - listenToNonDelegatedEvent(TOP_INVALID, domElement);
598 + listenToNonDelegatedEvent('invalid', domElement);
599 // For controlled components we always need to ensure we're listening
600 // to onChange. Even if there is no listener.
601 ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -613,7 +605,7 @@ export function setInitialProperties(
605 props = ReactDOMTextareaGetHostProps(domElement, rawProps);
606 // We listen to this event in case to ensure emulated bubble
607 // listeners still fire for the invalid event.
616 - listenToNonDelegatedEvent(TOP_INVALID, domElement);
608 + listenToNonDelegatedEvent('invalid', domElement);
609 // For controlled components we always need to ensure we're listening
610 // to onChange. Even if there is no listener.
611 ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -947,15 +939,15 @@ export function diffHydratedProperties(
939 // TODO: Make sure that we check isMounted before firing any of these events.
940 switch (tag) {
941 case 'dialog':
950 - listenToNonDelegatedEvent(TOP_CANCEL, domElement);
951 - listenToNonDelegatedEvent(TOP_CLOSE, domElement);
942 + listenToNonDelegatedEvent('cancel', domElement);
943 + listenToNonDelegatedEvent('close', domElement);
944 break;
945 case 'iframe':
946 case 'object':
947 case 'embed':
948 // We listen to this event in case to ensure emulated bubble
949 // listeners still fire for the load event.
958 - listenToNonDelegatedEvent(TOP_LOAD, domElement);
950 + listenToNonDelegatedEvent('load', domElement);
951 break;
952 case 'video':
953 case 'audio':
@@ -968,26 +960,26 @@ export function diffHydratedProperties(
960 case 'source':
961 // We listen to this event in case to ensure emulated bubble
962 // listeners still fire for the error event.
971 - listenToNonDelegatedEvent(TOP_ERROR, domElement);
963 + listenToNonDelegatedEvent('error', domElement);
964 break;
965 case 'img':
966 case 'image':
967 case 'link':
968 // We listen to these events in case to ensure emulated bubble
969 // listeners still fire for error and load events.
978 - listenToNonDelegatedEvent(TOP_ERROR, domElement);
979 - listenToNonDelegatedEvent(TOP_LOAD, domElement);
970 + listenToNonDelegatedEvent('error', domElement);
971 + listenToNonDelegatedEvent('load', domElement);
972 break;
973 case 'details':
974 // We listen to this event in case to ensure emulated bubble
975 // listeners still fire for the toggle event.
984 - listenToNonDelegatedEvent(TOP_TOGGLE, domElement);
976 + listenToNonDelegatedEvent('toggle', domElement);
977 break;
978 case 'input':
979 ReactDOMInputInitWrapperState(domElement, rawProps);
980 // We listen to this event in case to ensure emulated bubble
981 // listeners still fire for the invalid event.
990 - listenToNonDelegatedEvent(TOP_INVALID, domElement);
982 + listenToNonDelegatedEvent('invalid', domElement);
983 // For controlled components we always need to ensure we're listening
984 // to onChange. Even if there is no listener.
985 ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -999,7 +991,7 @@ export function diffHydratedProperties(
991 ReactDOMSelectInitWrapperState(domElement, rawProps);
992 // We listen to this event in case to ensure emulated bubble
993 // listeners still fire for the invalid event.
1002 - listenToNonDelegatedEvent(TOP_INVALID, domElement);
994 + listenToNonDelegatedEvent('invalid', domElement);
995 // For controlled components we always need to ensure we're listening
996 // to onChange. Even if there is no listener.
997 ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -1008,7 +1000,7 @@ export function diffHydratedProperties(
1000 ReactDOMTextareaInitWrapperState(domElement, rawProps);
1001 // We listen to this event in case to ensure emulated bubble
1002 // listeners still fire for the invalid event.
1011 - listenToNonDelegatedEvent(TOP_INVALID, domElement);
1003 + listenToNonDelegatedEvent('invalid', domElement);
1004 // For controlled components we always need to ensure we're listening
1005 // to onChange. Even if there is no listener.
1006 ensureListeningTo(rootContainerElement, 'onChange', domElement);
packages/react-dom/src/client/ReactDOMComponentTree.js
+2 -2
@@ -17,7 +17,7 @@ import type {
17 SuspenseInstance,
18 Props,
19 } from './ReactDOMHostConfig';
20 -import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
20 +import type {DOMEventName} from '../events/DOMEventNames';
21
22 import {
23 HostComponent,
@@ -41,7 +41,7 @@ const internalEventHandlersKey = '__reactEvents$' + randomKey;
41 const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
42
43 export type ElementListenerMap = Map<
44 - DOMTopLevelEventType | string,
44 + DOMEventName | string,
45 ElementListenerMapEntry | null,
46 >;
47
packages/react-dom/src/client/ReactDOMEventHandle.js
+13 -13
@@ -7,7 +7,7 @@
7 * @flow
8 */
9
10 -import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
10 +import type {DOMEventName} from '../events/DOMEventNames';
11 import type {EventPriority, ReactScopeInstance} from 'shared/ReactTypes';
12 import type {
13 ReactDOMEventHandle,
@@ -69,7 +69,7 @@ function isReactScope(target: EventTarget | ReactScopeInstance): boolean {
69 }
70
71 function createEventHandleListener(
72 - type: DOMTopLevelEventType,
72 + type: DOMEventName,
73 isCapturePhaseListener: boolean,
74 callback: (SyntheticEvent<EventTarget>) => void,
75 ): ReactDOMEventHandleListener {
@@ -82,7 +82,7 @@ function createEventHandleListener(
82
83 function registerEventOnNearestTargetContainer(
84 targetFiber: Fiber,
85 - topLevelType: DOMTopLevelEventType,
85 + domEventName: DOMEventName,
86 isPassiveListener: boolean | void,
87 listenerPriority: EventPriority | void,
88 isCapturePhaseListener: boolean,
@@ -102,7 +102,7 @@ function registerEventOnNearestTargetContainer(
102 targetContainer = ((targetContainer.parentNode: any): Element);
103 }
104 listenToNativeEvent(
105 - topLevelType,
105 + domEventName,
106 isCapturePhaseListener,
107 targetContainer,
108 targetElement,
@@ -113,7 +113,7 @@ function registerEventOnNearestTargetContainer(
113
114 function registerReactDOMEvent(
115 target: EventTarget | ReactScopeInstance,
116 - topLevelType: DOMTopLevelEventType,
116 + domEventName: DOMEventName,
117 isPassiveListener: boolean | void,
118 isCapturePhaseListener: boolean,
119 listenerPriority: EventPriority | void,
@@ -132,7 +132,7 @@ function registerReactDOMEvent(
132 }
133 registerEventOnNearestTargetContainer(
134 targetFiber,
135 - topLevelType,
135 + domEventName,
136 isPassiveListener,
137 listenerPriority,
138 isCapturePhaseListener,
@@ -147,7 +147,7 @@ function registerReactDOMEvent(
147 }
148 registerEventOnNearestTargetContainer(
149 targetFiber,
150 - topLevelType,
150 + domEventName,
151 isPassiveListener,
152 listenerPriority,
153 isCapturePhaseListener,
@@ -158,7 +158,7 @@ function registerReactDOMEvent(
158 // These are valid event targets, but they are also
159 // non-managed React nodes.
160 listenToNativeEvent(
161 - topLevelType,
161 + domEventName,
162 isCapturePhaseListener,
163 eventTarget,
164 null,
@@ -180,7 +180,7 @@ export function createEventHandle(
180 options?: EventHandleOptions,
181 ): ReactDOMEventHandle {
182 if (enableCreateEventHandleAPI) {
183 - const topLevelType = ((type: any): DOMTopLevelEventType);
183 + const domEventName = ((type: any): DOMEventName);
184 let isCapturePhaseListener = false;
185 let isPassiveListener = undefined; // Undefined means to use the browser default
186 let listenerPriority;
@@ -201,7 +201,7 @@ export function createEventHandle(
201 }
202 }
203 if (listenerPriority === undefined) {
204 - listenerPriority = getEventPriorityForListenerSystem(topLevelType);
204 + listenerPriority = getEventPriorityForListenerSystem(domEventName);
205 }
206
207 const registeredReactDOMEvents = new PossiblyWeakSet();
@@ -219,16 +219,16 @@ export function createEventHandle(
219 registeredReactDOMEvents.add(target);
220 registerReactDOMEvent(
221 target,
222 - topLevelType,
222 + domEventName,
223 isPassiveListener,
224 isCapturePhaseListener,
225 listenerPriority,
226 );
227 // Add the event to our known event types list.
228 - addEventTypeToDispatchConfig(topLevelType);
228 + addEventTypeToDispatchConfig(domEventName);
229 }
230 const listener = createEventHandleListener(
231 - topLevelType,
231 + domEventName,
232 isCapturePhaseListener,
233 callback,
234 );
packages/react-dom/src/client/ReactDOMHostConfig.js
+4 -5
@@ -7,7 +7,7 @@
7 * @flow
8 */
9
10 -import type {TopLevelType} from '../events/TopLevelEventTypes';
10 +import type {DOMEventName} from '../events/DOMEventNames';
11 import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
12 import type {
13 BoundingRect,
@@ -79,7 +79,6 @@ import {
79 enableScopeAPI,
80 } from 'shared/ReactFeatureFlags';
81 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
82 -import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
82 import {listenToReactEvent} from '../events/DOMPluginEventSystem';
83
84 export type Type = string;
@@ -504,7 +503,7 @@ export function insertInContainerBefore(
503 }
504 }
505
507 -function createEvent(type: TopLevelType, bubbles: boolean): Event {
506 +function createEvent(type: DOMEventName, bubbles: boolean): Event {
507 const event = document.createEvent('Event');
508 event.initEvent(((type: any): string), bubbles, false);
509 return event;
@@ -512,7 +511,7 @@ function createEvent(type: TopLevelType, bubbles: boolean): Event {
511
512 function dispatchBeforeDetachedBlur(target: HTMLElement): void {
513 if (enableDeprecatedFlareAPI || enableCreateEventHandleAPI) {
515 - const event = createEvent(TOP_BEFORE_BLUR, true);
514 + const event = createEvent('beforeblur', true);
515 // Dispatch "beforeblur" directly on the target,
516 // so it gets picked up by the event system and
517 // can propagate through the React internal tree.
@@ -522,7 +521,7 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {
521
522 function dispatchAfterDetachedBlur(target: HTMLElement): void {
523 if (enableDeprecatedFlareAPI || enableCreateEventHandleAPI) {
525 - const event = createEvent(TOP_AFTER_BLUR, false);
524 + const event = createEvent('afterblur', false);
525 // So we know what was detached, make the relatedTarget the
526 // detached target on the "afterblur" event.
527 (event: any).relatedTarget = target;
packages/react-dom/src/events/DOMEventNames.js new
+111
@@ -0,0 +1,111 @@
1 +/**
2 + * Copyright (c) Facebook, Inc. and its affiliates.
3 + *
4 + * This source code is licensed under the MIT license found in the
5 + * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 + */
9 +
10 +import getVendorPrefixedEventName from './getVendorPrefixedEventName';
11 +
12 +export type DOMEventName =
13 + | 'abort'
14 + | 'afterblur' // Not a real event. This is used by event experiments.
15 + // These are vendor-prefixed so you should use the exported constants instead:
16 + // 'animationiteration' |
17 + // 'animationend |
18 + // 'animationstart' |
19 + | 'beforeblur' // Not a real event. This is used by event experiments.
20 + | 'canplay'
21 + | 'canplaythrough'
22 + | 'cancel'
23 + | 'change'
24 + | 'click'
25 + | 'close'
26 + | 'compositionend'
27 + | 'compositionstart'
28 + | 'compositionupdate'
29 + | 'contextmenu'
30 + | 'copy'
31 + | 'cut'
32 + | 'dblclick'
33 + | 'auxclick'
34 + | 'drag'
35 + | 'dragend'
36 + | 'dragenter'
37 + | 'dragexit'
38 + | 'dragleave'
39 + | 'dragover'
40 + | 'dragstart'
41 + | 'drop'
42 + | 'durationchange'
43 + | 'emptied'
44 + | 'encrypted'
45 + | 'ended'
46 + | 'error'
47 + | 'focusin'
48 + | 'focusout'
49 + | 'gotpointercapture'
50 + | 'input'
51 + | 'invalid'
52 + | 'keydown'
53 + | 'keypress'
54 + | 'keyup'
55 + | 'load'
56 + | 'loadstart'
57 + | 'loadeddata'
58 + | 'loadedmetadata'
59 + | 'lostpointercapture'
60 + | 'mousedown'
61 + | 'mousemove'
62 + | 'mouseout'
63 + | 'mouseover'
64 + | 'mouseup'
65 + | 'paste'
66 + | 'pause'
67 + | 'play'
68 + | 'playing'
69 + | 'pointercancel'
70 + | 'pointerdown'
71 + | 'pointerenter'
72 + | 'pointerleave'
73 + | 'pointermove'
74 + | 'pointerout'
75 + | 'pointerover'
76 + | 'pointerup'
77 + | 'progress'
78 + | 'ratechange'
79 + | 'reset'
80 + | 'scroll'
81 + | 'seeked'
82 + | 'seeking'
83 + | 'selectionchange'
84 + | 'stalled'
85 + | 'submit'
86 + | 'suspend'
87 + | 'textInput' // Intentionally camelCase. Non-standard.
88 + | 'timeupdate'
89 + | 'toggle'
90 + | 'touchcancel'
91 + | 'touchend'
92 + | 'touchmove'
93 + | 'touchstart'
94 + // These are vendor-prefixed so you should use the exported constants instead:
95 + // 'transitionend' |
96 + | 'volumechange'
97 + | 'waiting'
98 + | 'wheel';
99 +
100 +export const ANIMATION_END: DOMEventName = getVendorPrefixedEventName(
101 + 'animationend',
102 +);
103 +export const ANIMATION_ITERATION: DOMEventName = getVendorPrefixedEventName(
104 + 'animationiteration',
105 +);
106 +export const ANIMATION_START: DOMEventName = getVendorPrefixedEventName(
107 + 'animationstart',
108 +);
109 +export const TRANSITION_END: DOMEventName = getVendorPrefixedEventName(
110 + 'transitionend',
111 +);
packages/react-dom/src/events/DOMEventProperties.js
+99 -100
@@ -8,13 +8,15 @@
8 */
9
10 import type {EventPriority} from 'shared/ReactTypes';
11 -import type {
12 - TopLevelType,
13 - DOMTopLevelEventType,
14 -} from '../events/TopLevelEventTypes';
11 +import type {DOMEventName} from '../events/DOMEventNames';
12
13 import {registerTwoPhaseEvent} from './EventRegistry';
17 -import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';
14 +import {
15 + ANIMATION_END,
16 + ANIMATION_ITERATION,
17 + ANIMATION_START,
18 + TRANSITION_END,
19 +} from './DOMEventNames';
20 import {
21 DiscreteEvent,
22 UserBlockingEvent,
@@ -24,7 +26,7 @@ import {
26 import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
27
28 export const topLevelEventsToReactNames: Map<
27 - TopLevelType,
29 + DOMEventName,
30 string | null,
31 > = new Map();
32
@@ -41,104 +43,101 @@ const eventPriorities = new Map();
43
44 // prettier-ignore
45 const discreteEventPairsForSimpleEventPlugin = [
44 - DOMTopLevelEventTypes.TOP_CANCEL, 'cancel',
45 - DOMTopLevelEventTypes.TOP_CLICK, 'click',
46 - DOMTopLevelEventTypes.TOP_CLOSE, 'close',
47 - DOMTopLevelEventTypes.TOP_CONTEXT_MENU, 'contextMenu',
48 - DOMTopLevelEventTypes.TOP_COPY, 'copy',
49 - DOMTopLevelEventTypes.TOP_CUT, 'cut',
50 - DOMTopLevelEventTypes.TOP_AUX_CLICK, 'auxClick',
51 - DOMTopLevelEventTypes.TOP_DOUBLE_CLICK, 'doubleClick',
52 - DOMTopLevelEventTypes.TOP_DRAG_END, 'dragEnd',
53 - DOMTopLevelEventTypes.TOP_DRAG_START, 'dragStart',
54 - DOMTopLevelEventTypes.TOP_DROP, 'drop',
55 - DOMTopLevelEventTypes.TOP_FOCUS_IN, 'focus',
56 - DOMTopLevelEventTypes.TOP_FOCUS_OUT, 'blur',
57 - DOMTopLevelEventTypes.TOP_INPUT, 'input',
58 - DOMTopLevelEventTypes.TOP_INVALID, 'invalid',
59 - DOMTopLevelEventTypes.TOP_KEY_DOWN, 'keyDown',
60 - DOMTopLevelEventTypes.TOP_KEY_PRESS, 'keyPress',
61 - DOMTopLevelEventTypes.TOP_KEY_UP, 'keyUp',
62 - DOMTopLevelEventTypes.TOP_MOUSE_DOWN, 'mouseDown',
63 - DOMTopLevelEventTypes.TOP_MOUSE_UP, 'mouseUp',
64 - DOMTopLevelEventTypes.TOP_PASTE, 'paste',
65 - DOMTopLevelEventTypes.TOP_PAUSE, 'pause',
66 - DOMTopLevelEventTypes.TOP_PLAY, 'play',
67 - DOMTopLevelEventTypes.TOP_POINTER_CANCEL, 'pointerCancel',
68 - DOMTopLevelEventTypes.TOP_POINTER_DOWN, 'pointerDown',
69 - DOMTopLevelEventTypes.TOP_POINTER_UP, 'pointerUp',
70 - DOMTopLevelEventTypes.TOP_RATE_CHANGE, 'rateChange',
71 - DOMTopLevelEventTypes.TOP_RESET, 'reset',
72 - DOMTopLevelEventTypes.TOP_SEEKED, 'seeked',
73 - DOMTopLevelEventTypes.TOP_SUBMIT, 'submit',
74 - DOMTopLevelEventTypes.TOP_TOUCH_CANCEL, 'touchCancel',
75 - DOMTopLevelEventTypes.TOP_TOUCH_END, 'touchEnd',
76 - DOMTopLevelEventTypes.TOP_TOUCH_START, 'touchStart',
77 - DOMTopLevelEventTypes.TOP_VOLUME_CHANGE, 'volumeChange',
46 + ('cancel': DOMEventName), 'cancel',
47 + ('click': DOMEventName), 'click',
48 + ('close': DOMEventName), 'close',
49 + ('contextmenu': DOMEventName), 'contextMenu',
50 + ('copy': DOMEventName), 'copy',
51 + ('cut': DOMEventName), 'cut',
52 + ('auxclick': DOMEventName), 'auxClick',
53 + ('dblclick': DOMEventName), 'doubleClick', // Careful!
54 + ('dragend': DOMEventName), 'dragEnd',
55 + ('dragstart': DOMEventName), 'dragStart',
56 + ('drop': DOMEventName), 'drop',
57 + ('focusin': DOMEventName), 'focus', // Careful!
58 + ('focusout': DOMEventName), 'blur', // Careful!
59 + ('input': DOMEventName), 'input',
60 + ('invalid': DOMEventName), 'invalid',
61 + ('keydown': DOMEventName), 'keyDown',
62 + ('keypress': DOMEventName), 'keyPress',
63 + ('keyup': DOMEventName), 'keyUp',
64 + ('mousedown': DOMEventName), 'mouseDown',
65 + ('mouseup': DOMEventName), 'mouseUp',
66 + ('paste': DOMEventName), 'paste',
67 + ('pause': DOMEventName), 'pause',
68 + ('play': DOMEventName), 'play',
69 + ('pointercancel': DOMEventName), 'pointerCancel',
70 + ('pointerdown': DOMEventName), 'pointerDown',
71 + ('pointerup': DOMEventName), 'pointerUp',
72 + ('ratechange': DOMEventName), 'rateChange',
73 + ('reset': DOMEventName), 'reset',
74 + ('seeked': DOMEventName), 'seeked',
75 + ('submit': DOMEventName), 'submit',
76 + ('touchcancel': DOMEventName), 'touchCancel',
77 + ('touchend': DOMEventName), 'touchEnd',
78 + ('touchstart': DOMEventName), 'touchStart',
79 + ('volumechange': DOMEventName), 'volumeChange',
80 ];
81
80 -const otherDiscreteEvents = [
81 - DOMTopLevelEventTypes.TOP_CHANGE,
82 - DOMTopLevelEventTypes.TOP_SELECTION_CHANGE,
83 - DOMTopLevelEventTypes.TOP_TEXT_INPUT,
84 - DOMTopLevelEventTypes.TOP_COMPOSITION_START,
85 - DOMTopLevelEventTypes.TOP_COMPOSITION_END,
86 - DOMTopLevelEventTypes.TOP_COMPOSITION_UPDATE,
82 +const otherDiscreteEvents: Array<DOMEventName> = [
83 + 'change',
84 + 'selectionchange',
85 + 'textInput',
86 + 'compositionstart',
87 + 'compositionend',
88 + 'compositionupdate',
89 ];
90
91 if (enableCreateEventHandleAPI) {
90 - otherDiscreteEvents.push(
91 - DOMTopLevelEventTypes.TOP_BEFORE_BLUR,
92 - DOMTopLevelEventTypes.TOP_AFTER_BLUR,
93 - );
92 + otherDiscreteEvents.push('beforeblur', 'afterblur');
93 }
94
95 // prettier-ignore
97 -const userBlockingPairsForSimpleEventPlugin = [
98 - DOMTopLevelEventTypes.TOP_DRAG, 'drag',
99 - DOMTopLevelEventTypes.TOP_DRAG_ENTER, 'dragEnter',
100 - DOMTopLevelEventTypes.TOP_DRAG_EXIT, 'dragExit',
101 - DOMTopLevelEventTypes.TOP_DRAG_LEAVE, 'dragLeave',
102 - DOMTopLevelEventTypes.TOP_DRAG_OVER, 'dragOver',
103 - DOMTopLevelEventTypes.TOP_MOUSE_MOVE, 'mouseMove',
104 - DOMTopLevelEventTypes.TOP_MOUSE_OUT, 'mouseOut',
105 - DOMTopLevelEventTypes.TOP_MOUSE_OVER, 'mouseOver',
106 - DOMTopLevelEventTypes.TOP_POINTER_MOVE, 'pointerMove',
107 - DOMTopLevelEventTypes.TOP_POINTER_OUT, 'pointerOut',
108 - DOMTopLevelEventTypes.TOP_POINTER_OVER, 'pointerOver',
109 - DOMTopLevelEventTypes.TOP_SCROLL, 'scroll',
110 - DOMTopLevelEventTypes.TOP_TOGGLE, 'toggle',
111 - DOMTopLevelEventTypes.TOP_TOUCH_MOVE, 'touchMove',
112 - DOMTopLevelEventTypes.TOP_WHEEL, 'wheel',
96 +const userBlockingPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
97 + ('drag': DOMEventName), 'drag',
98 + ('dragenter': DOMEventName), 'dragEnter',
99 + ('dragexit': DOMEventName), 'dragExit',
100 + ('dragleave': DOMEventName), 'dragLeave',
101 + ('dragover': DOMEventName), 'dragOver',
102 + ('mousemove': DOMEventName), 'mouseMove',
103 + ('mouseout': DOMEventName), 'mouseOut',
104 + ('mouseover': DOMEventName), 'mouseOver',
105 + ('pointermove': DOMEventName), 'pointerMove',
106 + ('pointerout': DOMEventName), 'pointerOut',
107 + ('pointerover': DOMEventName), 'pointerOver',
108 + ('scroll': DOMEventName), 'scroll',
109 + ('toggle': DOMEventName), 'toggle',
110 + ('touchmove': DOMEventName), 'touchMove',
111 + ('wheel': DOMEventName), 'wheel',
112 ];
113
114 // prettier-ignore
116 -const continuousPairsForSimpleEventPlugin = [
117 - DOMTopLevelEventTypes.TOP_ABORT, 'abort',
118 - DOMTopLevelEventTypes.TOP_ANIMATION_END, 'animationEnd',
119 - DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION, 'animationIteration',
120 - DOMTopLevelEventTypes.TOP_ANIMATION_START, 'animationStart',
121 - DOMTopLevelEventTypes.TOP_CAN_PLAY, 'canPlay',
122 - DOMTopLevelEventTypes.TOP_CAN_PLAY_THROUGH, 'canPlayThrough',
123 - DOMTopLevelEventTypes.TOP_DURATION_CHANGE, 'durationChange',
124 - DOMTopLevelEventTypes.TOP_EMPTIED, 'emptied',
125 - DOMTopLevelEventTypes.TOP_ENCRYPTED, 'encrypted',
126 - DOMTopLevelEventTypes.TOP_ENDED, 'ended',
127 - DOMTopLevelEventTypes.TOP_ERROR, 'error',
128 - DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE, 'gotPointerCapture',
129 - DOMTopLevelEventTypes.TOP_LOAD, 'load',
130 - DOMTopLevelEventTypes.TOP_LOADED_DATA, 'loadedData',
131 - DOMTopLevelEventTypes.TOP_LOADED_METADATA, 'loadedMetadata',
132 - DOMTopLevelEventTypes.TOP_LOAD_START, 'loadStart',
133 - DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE, 'lostPointerCapture',
134 - DOMTopLevelEventTypes.TOP_PLAYING, 'playing',
135 - DOMTopLevelEventTypes.TOP_PROGRESS, 'progress',
136 - DOMTopLevelEventTypes.TOP_SEEKING, 'seeking',
137 - DOMTopLevelEventTypes.TOP_STALLED, 'stalled',
138 - DOMTopLevelEventTypes.TOP_SUSPEND, 'suspend',
139 - DOMTopLevelEventTypes.TOP_TIME_UPDATE, 'timeUpdate',
140 - DOMTopLevelEventTypes.TOP_TRANSITION_END, 'transitionEnd',
141 - DOMTopLevelEventTypes.TOP_WAITING, 'waiting',
115 +const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
116 + ('abort': DOMEventName), 'abort',
117 + (ANIMATION_END: DOMEventName), 'animationEnd',
118 + (ANIMATION_ITERATION: DOMEventName), 'animationIteration',
119 + (ANIMATION_START: DOMEventName), 'animationStart',
120 + ('canplay': DOMEventName), 'canPlay',
121 + ('canplaythrough': DOMEventName), 'canPlayThrough',
122 + ('durationchange': DOMEventName), 'durationChange',
123 + ('emptied': DOMEventName), 'emptied',
124 + ('encrypted': DOMEventName), 'encrypted',
125 + ('ended': DOMEventName), 'ended',
126 + ('error': DOMEventName), 'error',
127 + ('gotpointercapture': DOMEventName), 'gotPointerCapture',
128 + ('load': DOMEventName), 'load',
129 + ('loadeddata': DOMEventName), 'loadedData',
130 + ('loadedmetadata': DOMEventName), 'loadedMetadata',
131 + ('loadstart': DOMEventName), 'loadStart',
132 + ('lostpointercapture': DOMEventName), 'lostPointerCapture',
133 + ('playing': DOMEventName), 'playing',
134 + ('progress': DOMEventName), 'progress',
135 + ('seeking': DOMEventName), 'seeking',
136 + ('stalled': DOMEventName), 'stalled',
137 + ('suspend': DOMEventName), 'suspend',
138 + ('timeupdate': DOMEventName), 'timeUpdate',
139 + (TRANSITION_END: DOMEventName), 'transitionEnd',
140 + ('waiting': DOMEventName), 'waiting',
141 ];
142
143 /**
@@ -148,13 +147,13 @@ const continuousPairsForSimpleEventPlugin = [
147 * into
148 *
149 * topLevelEventsToReactNames = new Map([
151 - * [TOP_ABORT, 'onAbort'],
150 + * ['abort', 'onAbort'],
151 * ]);
152 *
153 * and registers them.
154 */
155 function registerSimplePluginEventsAndSetTheirPriorities(
157 - eventTypes: Array<DOMTopLevelEventType | string>,
156 + eventTypes: Array<DOMEventName | string>,
157 priority: EventPriority,
158 ): void {
159 // As the event types are in pairs of two, we need to iterate
@@ -164,7 +163,7 @@ function registerSimplePluginEventsAndSetTheirPriorities(
163 // if we only use three arrays to process all the categories of
164 // instead of tuples.
165 for (let i = 0; i < eventTypes.length; i += 2) {
167 - const topEvent = ((eventTypes[i]: any): DOMTopLevelEventType);
166 + const topEvent = ((eventTypes[i]: any): DOMEventName);
167 const event = ((eventTypes[i + 1]: any): string);
168 const capitalizedEvent = event[0].toUpperCase() + event.slice(1);
169 const reactName = 'on' + capitalizedEvent;
@@ -175,7 +174,7 @@ function registerSimplePluginEventsAndSetTheirPriorities(
174 }
175
176 function setEventPriorities(
178 - eventTypes: Array<DOMTopLevelEventType | string>,
177 + eventTypes: Array<DOMEventName>,
178 priority: EventPriority,
179 ): void {
180 for (let i = 0; i < eventTypes.length; i++) {
@@ -184,9 +183,9 @@ function setEventPriorities(
183 }
184
185 export function getEventPriorityForPluginSystem(
187 - topLevelType: TopLevelType,
186 + domEventName: DOMEventName,
187 ): EventPriority {
189 - const priority = eventPriorities.get(topLevelType);
188 + const priority = eventPriorities.get(domEventName);
189 // Default to a ContinuousEvent. Note: we might
190 // want to warn if we can't detect the priority
191 // for the event.
@@ -194,7 +193,7 @@ export function getEventPriorityForPluginSystem(
193 }
194
195 export function getEventPriorityForListenerSystem(
197 - type: DOMTopLevelEventType,
196 + type: DOMEventName,
197 ): EventPriority {
198 const priority = eventPriorities.get(type);
199 if (priority !== undefined) {
packages/react-dom/src/events/DOMPluginEventSystem.js
+68 -104
@@ -7,7 +7,7 @@
7 * @flow
8 */
9
10 -import type {TopLevelType, DOMTopLevelEventType} from './TopLevelEventTypes';
10 +import type {DOMEventName} from './DOMEventNames';
11 import {
12 type EventSystemFlags,
13 SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE,
@@ -37,40 +37,6 @@ import {
37 } from 'react-reconciler/src/ReactWorkTags';
38
39 import getEventTarget from './getEventTarget';
40 -import {
41 - TOP_LOAD,
42 - TOP_ABORT,
43 - TOP_CANCEL,
44 - TOP_INVALID,
45 - TOP_SCROLL,
46 - TOP_CLOSE,
47 - TOP_CAN_PLAY,
48 - TOP_CAN_PLAY_THROUGH,
49 - TOP_DURATION_CHANGE,
50 - TOP_EMPTIED,
51 - TOP_ENCRYPTED,
52 - TOP_ENDED,
53 - TOP_ERROR,
54 - TOP_WAITING,
55 - TOP_VOLUME_CHANGE,
56 - TOP_TIME_UPDATE,
57 - TOP_SUSPEND,
58 - TOP_STALLED,
59 - TOP_SEEKING,
60 - TOP_SEEKED,
61 - TOP_PLAY,
62 - TOP_PAUSE,
63 - TOP_LOAD_START,
64 - TOP_LOADED_DATA,
65 - TOP_LOADED_METADATA,
66 - TOP_RATE_CHANGE,
67 - TOP_PROGRESS,
68 - TOP_PLAYING,
69 - TOP_CLICK,
70 - TOP_SELECTION_CHANGE,
71 - TOP_TOGGLE,
72 - getRawEventName,
73 -} from './DOMTopLevelEventTypes';
40 import {
41 getClosestInstanceFromNode,
42 getEventListenerMap,
@@ -128,7 +94,7 @@ BeforeInputEventPlugin.registerEvents();
94
95 function extractEvents(
96 dispatchQueue: DispatchQueue,
131 - topLevelType: TopLevelType,
97 + domEventName: DOMEventName,
98 targetInst: null | Fiber,
99 nativeEvent: AnyNativeEvent,
100 nativeEventTarget: null | EventTarget,
@@ -143,7 +109,7 @@ function extractEvents(
109 // us to ship builds of React without the polyfilled plugins below.
110 SimpleEventPlugin.extractEvents(
111 dispatchQueue,
146 - topLevelType,
112 + domEventName,
113 targetInst,
114 nativeEvent,
115 nativeEventTarget,
@@ -172,7 +138,7 @@ function extractEvents(
138 if (shouldProcessPolyfillPlugins) {
139 EnterLeaveEventPlugin.extractEvents(
140 dispatchQueue,
175 - topLevelType,
141 + domEventName,
142 targetInst,
143 nativeEvent,
144 nativeEventTarget,
@@ -181,7 +147,7 @@ function extractEvents(
147 );
148 ChangeEventPlugin.extractEvents(
149 dispatchQueue,
184 - topLevelType,
150 + domEventName,
151 targetInst,
152 nativeEvent,
153 nativeEventTarget,
@@ -190,7 +156,7 @@ function extractEvents(
156 );
157 SelectEventPlugin.extractEvents(
158 dispatchQueue,
193 - topLevelType,
159 + domEventName,
160 targetInst,
161 nativeEvent,
162 nativeEventTarget,
@@ -199,7 +165,7 @@ function extractEvents(
165 );
166 BeforeInputEventPlugin.extractEvents(
167 dispatchQueue,
202 - topLevelType,
168 + domEventName,
169 targetInst,
170 nativeEvent,
171 nativeEventTarget,
@@ -210,42 +176,42 @@ function extractEvents(
176 }
177
178 // List of events that need to be individually attached to media elements.
213 -export const mediaEventTypes = [
214 - TOP_ABORT,
215 - TOP_CAN_PLAY,
216 - TOP_CAN_PLAY_THROUGH,
217 - TOP_DURATION_CHANGE,
218 - TOP_EMPTIED,
219 - TOP_ENCRYPTED,
220 - TOP_ENDED,
221 - TOP_ERROR,
222 - TOP_LOADED_DATA,
223 - TOP_LOADED_METADATA,
224 - TOP_LOAD_START,
225 - TOP_PAUSE,
226 - TOP_PLAY,
227 - TOP_PLAYING,
228 - TOP_PROGRESS,
229 - TOP_RATE_CHANGE,
230 - TOP_SEEKED,
231 - TOP_SEEKING,
232 - TOP_STALLED,
233 - TOP_SUSPEND,
234 - TOP_TIME_UPDATE,
235 - TOP_VOLUME_CHANGE,
236 - TOP_WAITING,
179 +export const mediaEventTypes: Array<DOMEventName> = [
180 + 'abort',
181 + 'canplay',
182 + 'canplaythrough',
183 + 'durationchange',
184 + 'emptied',
185 + 'encrypted',
186 + 'ended',
187 + 'error',
188 + 'loadeddata',
189 + 'loadedmetadata',
190 + 'loadstart',
191 + 'pause',
192 + 'play',
193 + 'playing',
194 + 'progress',
195 + 'ratechange',
196 + 'seeked',
197 + 'seeking',
198 + 'stalled',
199 + 'suspend',
200 + 'timeupdate',
201 + 'volumechange',
202 + 'waiting',
203 ];
204
205 // We should not delegate these events to the container, but rather
206 // set them on the actual target element itself. This is primarily
207 // because these events do not consistently bubble in the DOM.
242 -export const nonDelegatedEvents: Set<DOMTopLevelEventType> = new Set([
243 - TOP_CANCEL,
244 - TOP_CLOSE,
245 - TOP_INVALID,
246 - TOP_LOAD,
247 - TOP_SCROLL,
248 - TOP_TOGGLE,
208 +export const nonDelegatedEvents: Set<DOMEventName> = new Set([
209 + 'cancel',
210 + 'close',
211 + 'invalid',
212 + 'load',
213 + 'scroll',
214 + 'toggle',
215 // In order to reduce bytes, we insert the above array of media events
216 // into this Set. Note: the "error" event isn't an exclusive media event,
217 // and can occur on other elements too. Rather than duplicate that event,
@@ -306,7 +272,7 @@ export function processDispatchQueue(
272 }
273
274 function dispatchEventsForPlugins(
309 - topLevelType: DOMTopLevelEventType,
275 + domEventName: DOMEventName,
276 eventSystemFlags: EventSystemFlags,
277 nativeEvent: AnyNativeEvent,
278 targetInst: null | Fiber,
@@ -316,7 +282,7 @@ function dispatchEventsForPlugins(
282 const dispatchQueue: DispatchQueue = [];
283 extractEvents(
284 dispatchQueue,
319 - topLevelType,
285 + domEventName,
286 targetInst,
287 nativeEvent,
288 nativeEventTarget,
@@ -336,13 +302,13 @@ function shouldUpgradeListener(
302 }
303
304 export function listenToNonDelegatedEvent(
339 - topLevelType: DOMTopLevelEventType,
305 + domEventName: DOMEventName,
306 targetElement: Element,
307 ): void {
308 const isCapturePhaseListener = false;
309 const listenerMap = getEventListenerMap(targetElement);
310 const listenerMapKey = getListenerMapKey(
345 - topLevelType,
311 + domEventName,
312 isCapturePhaseListener,
313 );
314 const listenerEntry = ((listenerMap.get(
@@ -351,7 +317,7 @@ export function listenToNonDelegatedEvent(
317 if (listenerEntry === undefined) {
318 const listener = addTrappedEventListener(
319 targetElement,
354 - topLevelType,
320 + domEventName,
321 PLUGIN_EVENT_SYSTEM | IS_NON_DELEGATED,
322 isCapturePhaseListener,
323 );
@@ -360,7 +326,7 @@ export function listenToNonDelegatedEvent(
326 }
327
328 export function listenToNativeEvent(
363 - topLevelType: DOMTopLevelEventType,
329 + domEventName: DOMEventName,
330 isCapturePhaseListener: boolean,
331 rootContainerElement: EventTarget,
332 targetElement: Element | null,
@@ -369,10 +335,10 @@ export function listenToNativeEvent(
335 eventSystemFlags?: EventSystemFlags = PLUGIN_EVENT_SYSTEM,
336 ): void {
337 let target = rootContainerElement;
372 - // TOP_SELECTION_CHANGE needs to be attached to the document
338 + // selectionchange needs to be attached to the document
339 // otherwise it won't capture incoming events that are only
340 // triggered on the document directly.
375 - if (topLevelType === TOP_SELECTION_CHANGE) {
341 + if (domEventName === 'selectionchange') {
342 target = (rootContainerElement: any).ownerDocument;
343 }
344 // If the event can be delegated (or is capture phase), we can
@@ -382,7 +348,7 @@ export function listenToNativeEvent(
348 if (
349 targetElement !== null &&
350 !isCapturePhaseListener &&
385 - nonDelegatedEvents.has(topLevelType)
351 + nonDelegatedEvents.has(domEventName)
352 ) {
353 // For all non-delegated events, apart from scroll, we attach
354 // their event listeners to the respective elements that their
@@ -393,7 +359,7 @@ export function listenToNativeEvent(
359 // TODO: ideally, we'd eventually apply the same logic to all
360 // events from the nonDelegatedEvents list. Then we can remove
361 // this special case and use the same logic for all events.
396 - if (topLevelType !== TOP_SCROLL) {
362 + if (domEventName !== 'scroll') {
363 return;
364 }
365 eventSystemFlags |= IS_NON_DELEGATED;
@@ -401,7 +367,7 @@ export function listenToNativeEvent(
367 }
368 const listenerMap = getEventListenerMap(target);
369 const listenerMapKey = getListenerMapKey(
404 - topLevelType,
370 + domEventName,
371 isCapturePhaseListener,
372 );
373 const listenerEntry = ((listenerMap.get(
@@ -417,7 +383,7 @@ export function listenToNativeEvent(
383 if (shouldUpgrade) {
384 removeTrappedEventListener(
385 target,
420 - topLevelType,
386 + domEventName,
387 isCapturePhaseListener,
388 ((listenerEntry: any): ElementListenerMapEntry).listener,
389 );
@@ -427,7 +393,7 @@ export function listenToNativeEvent(
393 }
394 const listener = addTrappedEventListener(
395 target,
430 - topLevelType,
396 + domEventName,
397 eventSystemFlags,
398 isCapturePhaseListener,
399 false,
@@ -490,7 +456,7 @@ export function listenToReactEvent(
456
457 function addTrappedEventListener(
458 targetContainer: EventTarget,
493 - topLevelType: DOMTopLevelEventType,
459 + domEventName: DOMEventName,
460 eventSystemFlags: EventSystemFlags,
461 isCapturePhaseListener: boolean,
462 isDeferredListenerForLegacyFBSupport?: boolean,
@@ -499,7 +465,7 @@ function addTrappedEventListener(
465 ): any => void {
466 let listener = createEventListenerWrapperWithPriority(
467 targetContainer,
502 - topLevelType,
468 + domEventName,
469 eventSystemFlags,
470 listenerPriority,
471 );
@@ -514,8 +480,6 @@ function addTrappedEventListener(
480 ? (targetContainer: any).ownerDocument
481 : targetContainer;
482
517 - const rawEventName = getRawEventName(topLevelType);
518 -
483 let unsubscribeListener;
484 // When legacyFBSupport is enabled, it's for when we
485 // want to add a one time event listener to a container.
@@ -533,7 +497,7 @@ function addTrappedEventListener(
497 listener = function(...p) {
498 removeEventListener(
499 targetContainer,
536 - rawEventName,
500 + domEventName,
501 unsubscribeListener,
502 isCapturePhaseListener,
503 );
@@ -544,14 +508,14 @@ function addTrappedEventListener(
508 if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {
509 unsubscribeListener = addEventCaptureListenerWithPassiveFlag(
510 targetContainer,
547 - rawEventName,
511 + domEventName,
512 listener,
513 isPassiveListener,
514 );
515 } else {
516 unsubscribeListener = addEventCaptureListener(
517 targetContainer,
554 - rawEventName,
518 + domEventName,
519 listener,
520 );
521 }
@@ -559,14 +523,14 @@ function addTrappedEventListener(
523 if (enableCreateEventHandleAPI && isPassiveListener !== undefined) {
524 unsubscribeListener = addEventBubbleListenerWithPassiveFlag(
525 targetContainer,
562 - rawEventName,
526 + domEventName,
527 listener,
528 isPassiveListener,
529 );
530 } else {
531 unsubscribeListener = addEventBubbleListener(
532 targetContainer,
569 - rawEventName,
533 + domEventName,
534 listener,
535 );
536 }
@@ -575,7 +539,7 @@ function addTrappedEventListener(
539 }
540
541 function deferClickToDocumentForLegacyFBSupport(
578 - topLevelType: DOMTopLevelEventType,
542 + domEventName: DOMEventName,
543 targetContainer: EventTarget,
544 ): void {
545 // We defer all click events with legacy FB support mode on.
@@ -584,7 +548,7 @@ function deferClickToDocumentForLegacyFBSupport(
548 const isDeferredListenerForLegacyFBSupport = true;
549 addTrappedEventListener(
550 targetContainer,
587 - topLevelType,
551 + domEventName,
552 PLUGIN_EVENT_SYSTEM | IS_LEGACY_FB_SUPPORT_MODE,
553 false,
554 isDeferredListenerForLegacyFBSupport,
@@ -603,7 +567,7 @@ function isMatchingRootContainer(
567 }
568
569 export function dispatchEventForPluginEventSystem(
606 - topLevelType: DOMTopLevelEventType,
570 + domEventName: DOMEventName,
571 eventSystemFlags: EventSystemFlags,
572 nativeEvent: AnyNativeEvent,
573 targetInst: null | Fiber,
@@ -626,10 +590,10 @@ export function dispatchEventForPluginEventSystem(
590 // then we can defer the event to the "document", to allow
591 // for legacy FB support, where the expected behavior was to
592 // match React < 16 behavior of delegated clicks to the doc.
629 - topLevelType === TOP_CLICK &&
593 + domEventName === 'click' &&
594 (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0
595 ) {
632 - deferClickToDocumentForLegacyFBSupport(topLevelType, targetContainer);
596 + deferClickToDocumentForLegacyFBSupport(domEventName, targetContainer);
597 return;
598 }
599 if (targetInst !== null) {
@@ -703,7 +667,7 @@ export function dispatchEventForPluginEventSystem(
667
668 batchedEventUpdates(() =>
669 dispatchEventsForPlugins(
706 - topLevelType,
670 + domEventName,
671 eventSystemFlags,
672 nativeEvent,
673 ancestorInst,
@@ -1045,7 +1009,7 @@ export function accumulateEventHandleNonManagedNodeListeners(
1009 const eventListeners = getEventHandlerListeners(currentTarget);
1010 if (eventListeners !== null) {
1011 const listenersArr = Array.from(eventListeners);
1048 - const targetType = ((event.type: any): DOMTopLevelEventType);
1012 + const targetType = ((event.type: any): DOMEventName);
1013
1014 for (let i = 0; i < listenersArr.length; i++) {
1015 const listener = listenersArr[i];
@@ -1064,7 +1028,7 @@ export function accumulateEventHandleNonManagedNodeListeners(
1028 }
1029 }
1030
1067 -export function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {
1031 +export function addEventTypeToDispatchConfig(type: DOMEventName): void {
1032 const reactName = topLevelEventsToReactNames.get(type);
1033 // If we don't have a reactName, then we're dealing with
1034 // an event type that React does not know about (i.e. a custom event).
@@ -1077,8 +1041,8 @@ export function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {
1041 }
1042
1043 export function getListenerMapKey(
1080 - topLevelType: DOMTopLevelEventType,
1044 + domEventName: DOMEventName,
1045 capture: boolean,
1046 ): string {
1083 - return `${getRawEventName(topLevelType)}__${capture ? 'capture' : 'bubble'}`;
1047 + return `${domEventName}__${capture ? 'capture' : 'bubble'}`;
1048 }
packages/react-dom/src/events/DOMTopLevelEventTypes.js deleted
-158
@@ -1,158 +0,0 @@
1 -/**
2 - * Copyright (c) Facebook, Inc. and its affiliates.
3 - *
4 - * This source code is licensed under the MIT license found in the
5 - * LICENSE file in the root directory of this source tree.
6 - *
7 - * @flow
8 - */
9 -
10 -import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
11 -
12 -import {
13 - unsafeCastStringToDOMTopLevelType,
14 - unsafeCastDOMTopLevelTypeToString,
15 -} from '../events/TopLevelEventTypes';
16 -import getVendorPrefixedEventName from './getVendorPrefixedEventName';
17 -
18 -/**
19 - * To identify top level events in ReactDOM, we use constants defined by this
20 - * module. This is the only module that uses the unsafe* methods to express
21 - * that the constants actually correspond to the browser event names. This lets
22 - * us save some bundle size by avoiding a top level type -> event name map.
23 - * The rest of ReactDOM code should import top level types from this file.
24 - */
25 -export const TOP_ABORT = unsafeCastStringToDOMTopLevelType('abort');
26 -export const TOP_ANIMATION_END = unsafeCastStringToDOMTopLevelType(
27 - getVendorPrefixedEventName('animationend'),
28 -);
29 -export const TOP_ANIMATION_ITERATION = unsafeCastStringToDOMTopLevelType(
30 - getVendorPrefixedEventName('animationiteration'),
31 -);
32 -export const TOP_ANIMATION_START = unsafeCastStringToDOMTopLevelType(
33 - getVendorPrefixedEventName('animationstart'),
34 -);
35 -export const TOP_CAN_PLAY = unsafeCastStringToDOMTopLevelType('canplay');
36 -export const TOP_CAN_PLAY_THROUGH = unsafeCastStringToDOMTopLevelType(
37 - 'canplaythrough',
38 -);
39 -export const TOP_CANCEL = unsafeCastStringToDOMTopLevelType('cancel');
40 -export const TOP_CHANGE = unsafeCastStringToDOMTopLevelType('change');
41 -export const TOP_CLICK = unsafeCastStringToDOMTopLevelType('click');
42 -export const TOP_CLOSE = unsafeCastStringToDOMTopLevelType('close');
43 -export const TOP_COMPOSITION_END = unsafeCastStringToDOMTopLevelType(
44 - 'compositionend',
45 -);
46 -export const TOP_COMPOSITION_START = unsafeCastStringToDOMTopLevelType(
47 - 'compositionstart',
48 -);
49 -export const TOP_COMPOSITION_UPDATE = unsafeCastStringToDOMTopLevelType(
50 - 'compositionupdate',
51 -);
52 -export const TOP_CONTEXT_MENU = unsafeCastStringToDOMTopLevelType(
53 - 'contextmenu',
54 -);
55 -export const TOP_COPY = unsafeCastStringToDOMTopLevelType('copy');
56 -export const TOP_CUT = unsafeCastStringToDOMTopLevelType('cut');
57 -export const TOP_DOUBLE_CLICK = unsafeCastStringToDOMTopLevelType('dblclick');
58 -export const TOP_AUX_CLICK = unsafeCastStringToDOMTopLevelType('auxclick');
59 -export const TOP_DRAG = unsafeCastStringToDOMTopLevelType('drag');
60 -export const TOP_DRAG_END = unsafeCastStringToDOMTopLevelType('dragend');
61 -export const TOP_DRAG_ENTER = unsafeCastStringToDOMTopLevelType('dragenter');
62 -export const TOP_DRAG_EXIT = unsafeCastStringToDOMTopLevelType('dragexit');
63 -export const TOP_DRAG_LEAVE = unsafeCastStringToDOMTopLevelType('dragleave');
64 -export const TOP_DRAG_OVER = unsafeCastStringToDOMTopLevelType('dragover');
65 -export const TOP_DRAG_START = unsafeCastStringToDOMTopLevelType('dragstart');
66 -export const TOP_DROP = unsafeCastStringToDOMTopLevelType('drop');
67 -export const TOP_DURATION_CHANGE = unsafeCastStringToDOMTopLevelType(
68 - 'durationchange',
69 -);
70 -export const TOP_EMPTIED = unsafeCastStringToDOMTopLevelType('emptied');
71 -export const TOP_ENCRYPTED = unsafeCastStringToDOMTopLevelType('encrypted');
72 -export const TOP_ENDED = unsafeCastStringToDOMTopLevelType('ended');
73 -export const TOP_ERROR = unsafeCastStringToDOMTopLevelType('error');
74 -export const TOP_GOT_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType(
75 - 'gotpointercapture',
76 -);
77 -export const TOP_INPUT = unsafeCastStringToDOMTopLevelType('input');
78 -export const TOP_INVALID = unsafeCastStringToDOMTopLevelType('invalid');
79 -export const TOP_KEY_DOWN = unsafeCastStringToDOMTopLevelType('keydown');
80 -export const TOP_KEY_PRESS = unsafeCastStringToDOMTopLevelType('keypress');
81 -export const TOP_KEY_UP = unsafeCastStringToDOMTopLevelType('keyup');
82 -export const TOP_LOAD = unsafeCastStringToDOMTopLevelType('load');
83 -export const TOP_LOAD_START = unsafeCastStringToDOMTopLevelType('loadstart');
84 -export const TOP_LOADED_DATA = unsafeCastStringToDOMTopLevelType('loadeddata');
85 -export const TOP_LOADED_METADATA = unsafeCastStringToDOMTopLevelType(
86 - 'loadedmetadata',
87 -);
88 -export const TOP_LOST_POINTER_CAPTURE = unsafeCastStringToDOMTopLevelType(
89 - 'lostpointercapture',
90 -);
91 -export const TOP_MOUSE_DOWN = unsafeCastStringToDOMTopLevelType('mousedown');
92 -export const TOP_MOUSE_MOVE = unsafeCastStringToDOMTopLevelType('mousemove');
93 -export const TOP_MOUSE_OUT = unsafeCastStringToDOMTopLevelType('mouseout');
94 -export const TOP_MOUSE_OVER = unsafeCastStringToDOMTopLevelType('mouseover');
95 -export const TOP_MOUSE_UP = unsafeCastStringToDOMTopLevelType('mouseup');
96 -export const TOP_PASTE = unsafeCastStringToDOMTopLevelType('paste');
97 -export const TOP_PAUSE = unsafeCastStringToDOMTopLevelType('pause');
98 -export const TOP_PLAY = unsafeCastStringToDOMTopLevelType('play');
99 -export const TOP_PLAYING = unsafeCastStringToDOMTopLevelType('playing');
100 -export const TOP_POINTER_CANCEL = unsafeCastStringToDOMTopLevelType(
101 - 'pointercancel',
102 -);
103 -export const TOP_POINTER_DOWN = unsafeCastStringToDOMTopLevelType(
104 - 'pointerdown',
105 -);
106 -export const TOP_POINTER_ENTER = unsafeCastStringToDOMTopLevelType(
107 - 'pointerenter',
108 -);
109 -export const TOP_POINTER_LEAVE = unsafeCastStringToDOMTopLevelType(
110 - 'pointerleave',
111 -);
112 -export const TOP_POINTER_MOVE = unsafeCastStringToDOMTopLevelType(
113 - 'pointermove',
114 -);
115 -export const TOP_POINTER_OUT = unsafeCastStringToDOMTopLevelType('pointerout');
116 -export const TOP_POINTER_OVER = unsafeCastStringToDOMTopLevelType(
117 - 'pointerover',
118 -);
119 -export const TOP_POINTER_UP = unsafeCastStringToDOMTopLevelType('pointerup');
120 -export const TOP_PROGRESS = unsafeCastStringToDOMTopLevelType('progress');
121 -export const TOP_RATE_CHANGE = unsafeCastStringToDOMTopLevelType('ratechange');
122 -export const TOP_RESET = unsafeCastStringToDOMTopLevelType('reset');
123 -export const TOP_SCROLL = unsafeCastStringToDOMTopLevelType('scroll');
124 -export const TOP_SEEKED = unsafeCastStringToDOMTopLevelType('seeked');
125 -export const TOP_SEEKING = unsafeCastStringToDOMTopLevelType('seeking');
126 -export const TOP_SELECTION_CHANGE = unsafeCastStringToDOMTopLevelType(
127 - 'selectionchange',
128 -);
129 -export const TOP_STALLED = unsafeCastStringToDOMTopLevelType('stalled');
130 -export const TOP_SUBMIT = unsafeCastStringToDOMTopLevelType('submit');
131 -export const TOP_SUSPEND = unsafeCastStringToDOMTopLevelType('suspend');
132 -export const TOP_TEXT_INPUT = unsafeCastStringToDOMTopLevelType('textInput');
133 -export const TOP_TIME_UPDATE = unsafeCastStringToDOMTopLevelType('timeupdate');
134 -export const TOP_TOGGLE = unsafeCastStringToDOMTopLevelType('toggle');
135 -export const TOP_TOUCH_CANCEL = unsafeCastStringToDOMTopLevelType(
136 - 'touchcancel',
137 -);
138 -export const TOP_TOUCH_END = unsafeCastStringToDOMTopLevelType('touchend');
139 -export const TOP_TOUCH_MOVE = unsafeCastStringToDOMTopLevelType('touchmove');
140 -export const TOP_TOUCH_START = unsafeCastStringToDOMTopLevelType('touchstart');
141 -export const TOP_TRANSITION_END = unsafeCastStringToDOMTopLevelType(
142 - getVendorPrefixedEventName('transitionend'),
143 -);
144 -export const TOP_VOLUME_CHANGE = unsafeCastStringToDOMTopLevelType(
145 - 'volumechange',
146 -);
147 -export const TOP_WAITING = unsafeCastStringToDOMTopLevelType('waiting');
148 -export const TOP_WHEEL = unsafeCastStringToDOMTopLevelType('wheel');
149 -
150 -export const TOP_AFTER_BLUR = unsafeCastStringToDOMTopLevelType('afterblur');
151 -export const TOP_BEFORE_BLUR = unsafeCastStringToDOMTopLevelType('beforeblur');
152 -
153 -export const TOP_FOCUS_IN = unsafeCastStringToDOMTopLevelType('focusin');
154 -export const TOP_FOCUS_OUT = unsafeCastStringToDOMTopLevelType('focusout');
155 -
156 -export function getRawEventName(topLevelType: DOMTopLevelEventType): string {
157 - return unsafeCastDOMTopLevelTypeToString(topLevelType);
158 -}
packages/react-dom/src/events/DeprecatedDOMEventResponderSystem.js
+17 -19
@@ -25,7 +25,7 @@ import type {
25 ReactDOMResponderContext,
26 ReactDOMResponderEvent,
27 } from '../shared/ReactDOMTypes';
28 -import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
28 +import type {DOMEventName} from '../events/DOMEventNames';
29 import {
30 batchedEventUpdates,
31 discreteUpdates,
@@ -40,7 +40,6 @@ import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
40 import {enqueueStateRestore} from './ReactDOMControlledComponent';
41 import {createEventListenerWrapper} from './ReactDOMEventListener';
42 import {passiveBrowserEventsSupported} from './checkPassiveEvents';
43 -import {getRawEventName} from './DOMTopLevelEventTypes';
43 import {
44 addEventCaptureListener,
45 addEventCaptureListenerWithPassiveFlag,
@@ -77,7 +76,7 @@ export function setListenToResponderEventTypes(
76 }
77
78 const rootEventTypesToEventResponderInstances: Map<
80 - DOMTopLevelEventType | string,
79 + DOMEventName | string,
80 Set<ReactDOMEventResponderInstance>,
81 > = new Map();
82
@@ -311,7 +310,7 @@ function getActiveDocument(): Document {
310 }
311
312 function createDOMResponderEvent(
314 - topLevelType: string,
313 + domEventName: string,
314 nativeEvent: AnyNativeEvent,
315 nativeEventTarget: Element | Document,
316 passive: boolean,
@@ -334,7 +333,7 @@ function createDOMResponderEvent(
333 passive,
334 pointerType: eventPointerType,
335 target: nativeEventTarget,
337 - type: topLevelType,
336 + type: domEventName,
337 };
338 }
339
@@ -370,7 +369,7 @@ function validateResponderTargetEventTypes(
369 }
370
371 function traverseAndHandleEventResponderInstances(
373 - topLevelType: string,
372 + domEventName: string,
373 targetFiber: null | Fiber,
374 nativeEvent: AnyNativeEvent,
375 nativeEventTarget: Document | Element,
@@ -386,7 +385,7 @@ function traverseAndHandleEventResponderInstances(
385
386 const visitedResponders = new Set();
387 const responderEvent = createDOMResponderEvent(
389 - topLevelType,
388 + domEventName,
389 nativeEvent,
390 nativeEventTarget,
391 isPassiveEvent,
@@ -411,7 +410,7 @@ function traverseAndHandleEventResponderInstances(
410 if (
411 !visitedResponders.has(responder) &&
412 validateResponderTargetEventTypes(
414 - topLevelType,
413 + domEventName,
414 responder,
415 isPassive,
416 ) &&
@@ -434,14 +433,14 @@ function traverseAndHandleEventResponderInstances(
433 node = node.return;
434 }
435 // Root phase
437 - const passive = rootEventTypesToEventResponderInstances.get(topLevelType);
436 + const passive = rootEventTypesToEventResponderInstances.get(domEventName);
437 const rootEventResponderInstances = [];
438 if (passive !== undefined) {
439 rootEventResponderInstances.push(...Array.from(passive));
440 }
441 if (!isPassive) {
442 const active = rootEventTypesToEventResponderInstances.get(
444 - topLevelType + '_active',
443 + domEventName + '_active',
444 );
445 if (active !== undefined) {
446 rootEventResponderInstances.push(...Array.from(active));
@@ -519,7 +518,7 @@ function validateResponderContext(): void {
518 }
519
520 export function DEPRECATED_dispatchEventForResponderEventSystem(
522 - topLevelType: string,
521 + domEventName: string,
522 targetFiber: null | Fiber,
523 nativeEvent: AnyNativeEvent,
524 nativeEventTarget: Document | Element,
@@ -541,7 +540,7 @@ export function DEPRECATED_dispatchEventForResponderEventSystem(
540 try {
541 batchedEventUpdates(() => {
542 traverseAndHandleEventResponderInstances(
544 - topLevelType,
543 + domEventName,
544 targetFiber,
545 nativeEvent,
546 nativeEventTarget,
@@ -598,7 +597,7 @@ function DEPRECATED_registerRootEventType(
597
598 export function addResponderEventSystemEvent(
599 document: Document,
601 - topLevelType: string,
600 + domEventName: string,
601 passive: boolean,
602 ): any => void {
603 let eventFlags = RESPONDER_EVENT_SYSTEM;
@@ -618,27 +617,26 @@ export function addResponderEventSystemEvent(
617 // Check if interactive and wrap in discreteUpdates
618 const listener = createEventListenerWrapper(
619 document,
621 - ((topLevelType: any): DOMTopLevelEventType),
620 + ((domEventName: any): DOMEventName),
621 eventFlags,
622 );
623 if (passiveBrowserEventsSupported) {
624 return addEventCaptureListenerWithPassiveFlag(
625 document,
627 - topLevelType,
626 + domEventName,
627 listener,
628 passive,
629 );
630 } else {
632 - return addEventCaptureListener(document, topLevelType, listener);
631 + return addEventCaptureListener(document, domEventName, listener);
632 }
633 }
634
635 export function removeTrappedEventListener(
636 targetContainer: EventTarget,
638 - topLevelType: DOMTopLevelEventType,
637 + domEventName: DOMEventName,
638 capture: boolean,
639 listener: any => void,
640 ): void {
642 - const rawEventName = getRawEventName(topLevelType);
643 - removeEventListener(targetContainer, rawEventName, listener, capture);
641 + removeEventListener(targetContainer, domEventName, listener, capture);
642 }
packages/react-dom/src/events/EventRegistry.js
+3 -3
@@ -7,7 +7,7 @@
7 * @flow
8 */
9
10 -import type {TopLevelType} from './TopLevelEventTypes';
10 +import type {DOMEventName} from './DOMEventNames';
11
12 /**
13 * Mapping from registration name to event name
@@ -25,7 +25,7 @@ export const possibleRegistrationNames = __DEV__ ? {} : (null: any);
25
26 export function registerTwoPhaseEvent(
27 registrationName: string,
28 - dependencies: ?Array<TopLevelType>,
28 + dependencies: ?Array<DOMEventName>,
29 ): void {
30 registerDirectEvent(registrationName, dependencies);
31 registerDirectEvent(registrationName + 'Capture', dependencies);
@@ -33,7 +33,7 @@ export function registerTwoPhaseEvent(
33
34 export function registerDirectEvent(
35 registrationName: string,
36 - dependencies: ?Array<TopLevelType>,
36 + dependencies: ?Array<DOMEventName>,
37 ) {
38 if (__DEV__) {
39 if (registrationNameDependencies[registrationName]) {
packages/react-dom/src/events/ReactDOMEventListener.js
+26 -26
@@ -11,7 +11,7 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
11 import type {EventPriority} from 'shared/ReactTypes';
12 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
13 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
14 -import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
14 +import type {DOMEventName} from '../events/DOMEventNames';
15
16 // Intentionally not named imports because Rollup would use dynamic dispatch for
17 // CommonJS interop named imports.
@@ -82,12 +82,12 @@ export function isEnabled() {
82
83 export function createEventListenerWrapper(
84 targetContainer: EventTarget,
85 - topLevelType: DOMTopLevelEventType,
85 + domEventName: DOMEventName,
86 eventSystemFlags: EventSystemFlags,
87 ): Function {
88 return dispatchEvent.bind(
89 null,
90 - topLevelType,
90 + domEventName,
91 eventSystemFlags,
92 targetContainer,
93 );
@@ -95,13 +95,13 @@ export function createEventListenerWrapper(
95
96 export function createEventListenerWrapperWithPriority(
97 targetContainer: EventTarget,
98 - topLevelType: DOMTopLevelEventType,
98 + domEventName: DOMEventName,
99 eventSystemFlags: EventSystemFlags,
100 priority?: EventPriority,
101 ): Function {
102 const eventPriority =
103 priority === undefined
104 - ? getEventPriorityForPluginSystem(topLevelType)
104 + ? getEventPriorityForPluginSystem(domEventName)
105 : priority;
106 let listenerWrapper;
107 switch (eventPriority) {
@@ -118,14 +118,14 @@ export function createEventListenerWrapperWithPriority(
118 }
119 return listenerWrapper.bind(
120 null,
121 - topLevelType,
121 + domEventName,
122 eventSystemFlags,
123 targetContainer,
124 );
125 }
126
127 function dispatchDiscreteEvent(
128 - topLevelType,
128 + domEventName,
129 eventSystemFlags,
130 container,
131 nativeEvent,
@@ -140,7 +140,7 @@ function dispatchDiscreteEvent(
140 }
141 discreteUpdates(
142 dispatchEvent,
143 - topLevelType,
143 + domEventName,
144 eventSystemFlags,
145 container,
146 nativeEvent,
@@ -148,7 +148,7 @@ function dispatchDiscreteEvent(
148 }
149
150 function dispatchUserBlockingUpdate(
151 - topLevelType,
151 + domEventName,
152 eventSystemFlags,
153 container,
154 nativeEvent,
@@ -161,7 +161,7 @@ function dispatchUserBlockingUpdate(
161 UserBlockingPriority,
162 dispatchEvent.bind(
163 null,
164 - topLevelType,
164 + domEventName,
165 eventSystemFlags,
166 container,
167 nativeEvent,
@@ -173,7 +173,7 @@ function dispatchUserBlockingUpdate(
173 }
174
175 export function dispatchEvent(
176 - topLevelType: DOMTopLevelEventType,
176 + domEventName: DOMEventName,
177 eventSystemFlags: EventSystemFlags,
178 targetContainer: EventTarget,
179 nativeEvent: AnyNativeEvent,
@@ -181,13 +181,13 @@ export function dispatchEvent(
181 if (!_enabled) {
182 return;
183 }
184 - if (hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(topLevelType)) {
184 + if (hasQueuedDiscreteEvents() && isReplayableDiscreteEvent(domEventName)) {
185 // If we already have a queue of discrete events, and this is another discrete
186 // event, then we can't dispatch it regardless of its target, since they
187 // need to dispatch in order.
188 queueDiscreteEvent(
189 null, // Flags that we're not actually blocked on anything as far as we know.
190 - topLevelType,
190 + domEventName,
191 eventSystemFlags,
192 targetContainer,
193 nativeEvent,
@@ -196,7 +196,7 @@ export function dispatchEvent(
196 }
197
198 const blockedOn = attemptToDispatchEvent(
199 - topLevelType,
199 + domEventName,
200 eventSystemFlags,
201 targetContainer,
202 nativeEvent,
@@ -204,15 +204,15 @@ export function dispatchEvent(
204
205 if (blockedOn === null) {
206 // We successfully dispatched this event.
207 - clearIfContinuousEvent(topLevelType, nativeEvent);
207 + clearIfContinuousEvent(domEventName, nativeEvent);
208 return;
209 }
210
211 - if (isReplayableDiscreteEvent(topLevelType)) {
211 + if (isReplayableDiscreteEvent(domEventName)) {
212 // This this to be replayed later once the target is available.
213 queueDiscreteEvent(
214 blockedOn,
215 - topLevelType,
215 + domEventName,
216 eventSystemFlags,
217 targetContainer,
218 nativeEvent,
@@ -223,7 +223,7 @@ export function dispatchEvent(
223 if (
224 queueIfContinuousEvent(
225 blockedOn,
226 - topLevelType,
226 + domEventName,
227 eventSystemFlags,
228 targetContainer,
229 nativeEvent,
@@ -234,14 +234,14 @@ export function dispatchEvent(
234
235 // We need to clear only if we didn't queue because
236 // queueing is accummulative.
237 - clearIfContinuousEvent(topLevelType, nativeEvent);
237 + clearIfContinuousEvent(domEventName, nativeEvent);
238
239 // This is not replayable so we'll invoke it but without a target,
240 // in case the event system needs to trace it.
241 if (enableDeprecatedFlareAPI) {
242 if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
243 dispatchEventForPluginEventSystem(
244 - topLevelType,
244 + domEventName,
245 eventSystemFlags,
246 nativeEvent,
247 null,
@@ -251,7 +251,7 @@ export function dispatchEvent(
251 if (eventSystemFlags & RESPONDER_EVENT_SYSTEM) {
252 // React Flare event system
253 DEPRECATED_dispatchEventForResponderEventSystem(
254 - (topLevelType: any),
254 + (domEventName: any),
255 null,
256 nativeEvent,
257 getEventTarget(nativeEvent),
@@ -260,7 +260,7 @@ export function dispatchEvent(
260 }
261 } else {
262 dispatchEventForPluginEventSystem(
263 - topLevelType,
263 + domEventName,
264 eventSystemFlags,
265 nativeEvent,
266 null,
@@ -271,7 +271,7 @@ export function dispatchEvent(
271
272 // Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.
273 export function attemptToDispatchEvent(
274 - topLevelType: DOMTopLevelEventType,
274 + domEventName: DOMEventName,
275 eventSystemFlags: EventSystemFlags,
276 targetContainer: EventTarget,
277 nativeEvent: AnyNativeEvent,
@@ -322,7 +322,7 @@ export function attemptToDispatchEvent(
322 if (enableDeprecatedFlareAPI) {
323 if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
324 dispatchEventForPluginEventSystem(
325 - topLevelType,
325 + domEventName,
326 eventSystemFlags,
327 nativeEvent,
328 targetInst,
@@ -332,7 +332,7 @@ export function attemptToDispatchEvent(
332 if (eventSystemFlags & RESPONDER_EVENT_SYSTEM) {
333 // React Flare event system
334 DEPRECATED_dispatchEventForResponderEventSystem(
335 - (topLevelType: any),
335 + (domEventName: any),
336 targetInst,
337 nativeEvent,
338 nativeEventTarget,
@@ -341,7 +341,7 @@ export function attemptToDispatchEvent(
341 }
342 } else {
343 dispatchEventForPluginEventSystem(
344 - topLevelType,
344 + domEventName,
345 eventSystemFlags,
346 nativeEvent,
347 targetInst,
packages/react-dom/src/events/ReactDOMEventReplaying.js
+86 -130
@@ -9,7 +9,7 @@
9
10 import type {AnyNativeEvent} from '../events/PluginModuleType';
11 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
12 -import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
12 +import type {DOMEventName} from '../events/DOMEventNames';
13 import type {ElementListenerMap} from '../client/ReactDOMComponentTree';
14 import type {EventSystemFlags} from './EventSystemFlags';
15 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
@@ -36,7 +36,6 @@ import {
36 getClosestInstanceFromNode,
37 getEventListenerMap,
38 } from '../client/ReactDOMComponentTree';
39 -import {unsafeCastDOMTopLevelTypeToString} from '../events/TopLevelEventTypes';
39 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
40
41 let attemptSynchronousHydration: (fiber: Object) => void;
@@ -87,53 +86,13 @@ type PointerEvent = Event & {
86 ...
87 };
88
90 -import {
91 - TOP_MOUSE_DOWN,
92 - TOP_MOUSE_UP,
93 - TOP_TOUCH_CANCEL,
94 - TOP_TOUCH_END,
95 - TOP_TOUCH_START,
96 - TOP_AUX_CLICK,
97 - TOP_DOUBLE_CLICK,
98 - TOP_POINTER_CANCEL,
99 - TOP_POINTER_DOWN,
100 - TOP_POINTER_UP,
101 - TOP_DRAG_END,
102 - TOP_DRAG_START,
103 - TOP_DROP,
104 - TOP_COMPOSITION_END,
105 - TOP_COMPOSITION_START,
106 - TOP_KEY_DOWN,
107 - TOP_KEY_PRESS,
108 - TOP_KEY_UP,
109 - TOP_INPUT,
110 - TOP_TEXT_INPUT,
111 - TOP_COPY,
112 - TOP_CUT,
113 - TOP_PASTE,
114 - TOP_CLICK,
115 - TOP_CHANGE,
116 - TOP_CONTEXT_MENU,
117 - TOP_RESET,
118 - TOP_SUBMIT,
119 - TOP_DRAG_ENTER,
120 - TOP_DRAG_LEAVE,
121 - TOP_MOUSE_OVER,
122 - TOP_MOUSE_OUT,
123 - TOP_POINTER_OVER,
124 - TOP_POINTER_OUT,
125 - TOP_GOT_POINTER_CAPTURE,
126 - TOP_LOST_POINTER_CAPTURE,
127 - TOP_FOCUS_IN,
128 - TOP_FOCUS_OUT,
129 -} from './DOMTopLevelEventTypes';
89 import {IS_REPLAYED} from './EventSystemFlags';
90 import {listenToNativeEvent} from './DOMPluginEventSystem';
91 import {addResponderEventSystemEvent} from './DeprecatedDOMEventResponderSystem';
92
93 type QueuedReplayableEvent = {|
94 blockedOn: null | Container | SuspenseInstance,
136 - topLevelType: DOMTopLevelEventType,
95 + domEventName: DOMEventName,
96 eventSystemFlags: EventSystemFlags,
97 nativeEvent: AnyNativeEvent,
98 targetContainers: Array<EventTarget>,
@@ -172,80 +131,77 @@ export function hasQueuedContinuousEvents(): boolean {
131 return hasAnyQueuedContinuousEvents;
132 }
133
175 -const discreteReplayableEvents = [
176 - TOP_MOUSE_DOWN,
177 - TOP_MOUSE_UP,
178 - TOP_TOUCH_CANCEL,
179 - TOP_TOUCH_END,
180 - TOP_TOUCH_START,
181 - TOP_AUX_CLICK,
182 - TOP_DOUBLE_CLICK,
183 - TOP_POINTER_CANCEL,
184 - TOP_POINTER_DOWN,
185 - TOP_POINTER_UP,
186 - TOP_DRAG_END,
187 - TOP_DRAG_START,
188 - TOP_DROP,
189 - TOP_COMPOSITION_END,
190 - TOP_COMPOSITION_START,
191 - TOP_KEY_DOWN,
192 - TOP_KEY_PRESS,
193 - TOP_KEY_UP,
194 - TOP_INPUT,
195 - TOP_TEXT_INPUT,
196 - TOP_COPY,
197 - TOP_CUT,
198 - TOP_PASTE,
199 - TOP_CLICK,
200 - TOP_CHANGE,
201 - TOP_CONTEXT_MENU,
202 - TOP_RESET,
203 - TOP_SUBMIT,
134 +const discreteReplayableEvents: Array<DOMEventName> = [
135 + 'mousedown',
136 + 'mouseup',
137 + 'touchcancel',
138 + 'touchend',
139 + 'touchstart',
140 + 'auxclick',
141 + 'dblclick',
142 + 'pointercancel',
143 + 'pointerdown',
144 + 'pointerup',
145 + 'dragend',
146 + 'dragstart',
147 + 'drop',
148 + 'compositionend',
149 + 'compositionstart',
150 + 'keydown',
151 + 'keypress',
152 + 'keyup',
153 + 'input',
154 + 'textInput', // Intentionally camelCase
155 + 'copy',
156 + 'cut',
157 + 'paste',
158 + 'click',
159 + 'change',
160 + 'contextmenu',
161 + 'reset',
162 + 'submit',
163 ];
164
206 -const continuousReplayableEvents = [
207 - TOP_DRAG_ENTER,
208 - TOP_DRAG_LEAVE,
209 - TOP_FOCUS_IN,
210 - TOP_FOCUS_OUT,
211 - TOP_MOUSE_OVER,
212 - TOP_MOUSE_OUT,
213 - TOP_POINTER_OVER,
214 - TOP_POINTER_OUT,
215 - TOP_GOT_POINTER_CAPTURE,
216 - TOP_LOST_POINTER_CAPTURE,
165 +const continuousReplayableEvents: Array<DOMEventName> = [
166 + 'dragenter',
167 + 'dragleave',
168 + 'focusin',
169 + 'focusout',
170 + 'mouseover',
171 + 'mouseout',
172 + 'pointerover',
173 + 'pointerout',
174 + 'gotpointercapture',
175 + 'lostpointercapture',
176 ];
177
219 -export function isReplayableDiscreteEvent(
220 - eventType: DOMTopLevelEventType,
221 -): boolean {
178 +export function isReplayableDiscreteEvent(eventType: DOMEventName): boolean {
179 return discreteReplayableEvents.indexOf(eventType) > -1;
180 }
181
182 function trapReplayableEventForContainer(
226 - topLevelType: DOMTopLevelEventType,
183 + domEventName: DOMEventName,
184 container: Container,
185 ) {
229 - listenToNativeEvent(topLevelType, false, ((container: any): Element), null);
186 + listenToNativeEvent(domEventName, false, ((container: any): Element), null);
187 }
188
189 function trapReplayableEventForDocument(
233 - topLevelType: DOMTopLevelEventType,
190 + domEventName: DOMEventName,
191 document: Document,
192 listenerMap: ElementListenerMap,
193 ) {
194 if (enableDeprecatedFlareAPI) {
195 // Trap events for the responder system.
239 - const topLevelTypeString = unsafeCastDOMTopLevelTypeToString(topLevelType);
196 // TODO: Ideally we shouldn't need these to be active but
197 // if we only have a passive listener, we at least need it
198 // to still pretend to be active so that Flare gets those
199 // events.
244 - const activeEventKey = topLevelTypeString + '_active';
200 + const activeEventKey = domEventName + '_active';
201 if (!listenerMap.has(activeEventKey)) {
202 const listener = addResponderEventSystemEvent(
203 document,
248 - topLevelTypeString,
204 + domEventName,
205 false,
206 );
207 listenerMap.set(activeEventKey, {passive: false, listener});
@@ -259,27 +215,27 @@ export function eagerlyTrapReplayableEvents(
215 ) {
216 const listenerMapForDoc = getEventListenerMap(document);
217 // Discrete
262 - discreteReplayableEvents.forEach(topLevelType => {
263 - trapReplayableEventForContainer(topLevelType, container);
264 - trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
218 + discreteReplayableEvents.forEach(domEventName => {
219 + trapReplayableEventForContainer(domEventName, container);
220 + trapReplayableEventForDocument(domEventName, document, listenerMapForDoc);
221 });
222 // Continuous
267 - continuousReplayableEvents.forEach(topLevelType => {
268 - trapReplayableEventForContainer(topLevelType, container);
269 - trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
223 + continuousReplayableEvents.forEach(domEventName => {
224 + trapReplayableEventForContainer(domEventName, container);
225 + trapReplayableEventForDocument(domEventName, document, listenerMapForDoc);
226 });
227 }
228
229 function createQueuedReplayableEvent(
230 blockedOn: null | Container | SuspenseInstance,
275 - topLevelType: DOMTopLevelEventType,
231 + domEventName: DOMEventName,
232 eventSystemFlags: EventSystemFlags,
233 targetContainer: EventTarget,
234 nativeEvent: AnyNativeEvent,
235 ): QueuedReplayableEvent {
236 return {
237 blockedOn,
282 - topLevelType,
238 + domEventName,
239 eventSystemFlags: eventSystemFlags | IS_REPLAYED,
240 nativeEvent,
241 targetContainers: [targetContainer],
@@ -288,14 +244,14 @@ function createQueuedReplayableEvent(
244
245 export function queueDiscreteEvent(
246 blockedOn: null | Container | SuspenseInstance,
291 - topLevelType: DOMTopLevelEventType,
247 + domEventName: DOMEventName,
248 eventSystemFlags: EventSystemFlags,
249 targetContainer: EventTarget,
250 nativeEvent: AnyNativeEvent,
251 ): void {
252 const queuedEvent = createQueuedReplayableEvent(
253 blockedOn,
298 - topLevelType,
254 + domEventName,
255 eventSystemFlags,
256 targetContainer,
257 nativeEvent,
@@ -329,30 +285,30 @@ export function queueDiscreteEvent(
285
286 // Resets the replaying for this type of continuous event to no event.
287 export function clearIfContinuousEvent(
332 - topLevelType: DOMTopLevelEventType,
288 + domEventName: DOMEventName,
289 nativeEvent: AnyNativeEvent,
290 ): void {
335 - switch (topLevelType) {
336 - case TOP_FOCUS_IN:
337 - case TOP_FOCUS_OUT:
291 + switch (domEventName) {
292 + case 'focusin':
293 + case 'focusout':
294 queuedFocus = null;
295 break;
340 - case TOP_DRAG_ENTER:
341 - case TOP_DRAG_LEAVE:
296 + case 'dragenter':
297 + case 'dragleave':
298 queuedDrag = null;
299 break;
344 - case TOP_MOUSE_OVER:
345 - case TOP_MOUSE_OUT:
300 + case 'mouseover':
301 + case 'mouseout':
302 queuedMouse = null;
303 break;
348 - case TOP_POINTER_OVER:
349 - case TOP_POINTER_OUT: {
304 + case 'pointerover':
305 + case 'pointerout': {
306 const pointerId = ((nativeEvent: any): PointerEvent).pointerId;
307 queuedPointers.delete(pointerId);
308 break;
309 }
354 - case TOP_GOT_POINTER_CAPTURE:
355 - case TOP_LOST_POINTER_CAPTURE: {
310 + case 'gotpointercapture':
311 + case 'lostpointercapture': {
312 const pointerId = ((nativeEvent: any): PointerEvent).pointerId;
313 queuedPointerCaptures.delete(pointerId);
314 break;
@@ -363,7 +319,7 @@ export function clearIfContinuousEvent(
319 function accumulateOrCreateContinuousQueuedReplayableEvent(
320 existingQueuedEvent: null | QueuedReplayableEvent,
321 blockedOn: null | Container | SuspenseInstance,
366 - topLevelType: DOMTopLevelEventType,
322 + domEventName: DOMEventName,
323 eventSystemFlags: EventSystemFlags,
324 targetContainer: EventTarget,
325 nativeEvent: AnyNativeEvent,
@@ -374,7 +330,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
330 ) {
331 const queuedEvent = createQueuedReplayableEvent(
332 blockedOn,
377 - topLevelType,
333 + domEventName,
334 eventSystemFlags,
335 targetContainer,
336 nativeEvent,
@@ -405,7 +361,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
361
362 export function queueIfContinuousEvent(
363 blockedOn: null | Container | SuspenseInstance,
408 - topLevelType: DOMTopLevelEventType,
364 + domEventName: DOMEventName,
365 eventSystemFlags: EventSystemFlags,
366 targetContainer: EventTarget,
367 nativeEvent: AnyNativeEvent,
@@ -413,44 +369,44 @@ export function queueIfContinuousEvent(
369 // These set relatedTarget to null because the replayed event will be treated as if we
370 // moved from outside the window (no target) onto the target once it hydrates.
371 // Instead of mutating we could clone the event.
416 - switch (topLevelType) {
417 - case TOP_FOCUS_IN: {
372 + switch (domEventName) {
373 + case 'focusin': {
374 const focusEvent = ((nativeEvent: any): FocusEvent);
375 queuedFocus = accumulateOrCreateContinuousQueuedReplayableEvent(
376 queuedFocus,
377 blockedOn,
422 - topLevelType,
378 + domEventName,
379 eventSystemFlags,
380 targetContainer,
381 focusEvent,
382 );
383 return true;
384 }
429 - case TOP_DRAG_ENTER: {
385 + case 'dragenter': {
386 const dragEvent = ((nativeEvent: any): DragEvent);
387 queuedDrag = accumulateOrCreateContinuousQueuedReplayableEvent(
388 queuedDrag,
389 blockedOn,
434 - topLevelType,
390 + domEventName,
391 eventSystemFlags,
392 targetContainer,
393 dragEvent,
394 );
395 return true;
396 }
441 - case TOP_MOUSE_OVER: {
397 + case 'mouseover': {
398 const mouseEvent = ((nativeEvent: any): MouseEvent);
399 queuedMouse = accumulateOrCreateContinuousQueuedReplayableEvent(
400 queuedMouse,
401 blockedOn,
446 - topLevelType,
402 + domEventName,
403 eventSystemFlags,
404 targetContainer,
405 mouseEvent,
406 );
407 return true;
408 }
453 - case TOP_POINTER_OVER: {
409 + case 'pointerover': {
410 const pointerEvent = ((nativeEvent: any): PointerEvent);
411 const pointerId = pointerEvent.pointerId;
412 queuedPointers.set(
@@ -458,7 +414,7 @@ export function queueIfContinuousEvent(
414 accumulateOrCreateContinuousQueuedReplayableEvent(
415 queuedPointers.get(pointerId) || null,
416 blockedOn,
461 - topLevelType,
417 + domEventName,
418 eventSystemFlags,
419 targetContainer,
420 pointerEvent,
@@ -466,7 +422,7 @@ export function queueIfContinuousEvent(
422 );
423 return true;
424 }
469 - case TOP_GOT_POINTER_CAPTURE: {
425 + case 'gotpointercapture': {
426 const pointerEvent = ((nativeEvent: any): PointerEvent);
427 const pointerId = pointerEvent.pointerId;
428 queuedPointerCaptures.set(
@@ -474,7 +430,7 @@ export function queueIfContinuousEvent(
430 accumulateOrCreateContinuousQueuedReplayableEvent(
431 queuedPointerCaptures.get(pointerId) || null,
432 blockedOn,
477 - topLevelType,
433 + domEventName,
434 eventSystemFlags,
435 targetContainer,
436 pointerEvent,
@@ -559,7 +515,7 @@ function attemptReplayContinuousQueuedEvent(
515 while (targetContainers.length > 0) {
516 const targetContainer = targetContainers[0];
517 const nextBlockedOn = attemptToDispatchEvent(
562 - queuedEvent.topLevelType,
518 + queuedEvent.domEventName,
519 queuedEvent.eventSystemFlags,
520 targetContainer,
521 queuedEvent.nativeEvent,
@@ -608,7 +564,7 @@ function replayUnblockedEvents() {
564 while (targetContainers.length > 0) {
565 const targetContainer = targetContainers[0];
566 const nextBlockedOn = attemptToDispatchEvent(
611 - nextDiscreteEvent.topLevelType,
567 + nextDiscreteEvent.domEventName,
568 nextDiscreteEvent.eventSystemFlags,
569 targetContainer,
570 nextDiscreteEvent.nativeEvent,
packages/react-dom/src/events/ReactSyntheticEventType.js
+2 -2
@@ -10,10 +10,10 @@
10
11 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
12 import type {EventPriority} from 'shared/ReactTypes';
13 -import type {TopLevelType} from './TopLevelEventTypes';
13 +import type {DOMEventName} from './DOMEventNames';
14
15 export type DispatchConfig = {|
16 - dependencies?: Array<TopLevelType>,
16 + dependencies?: Array<DOMEventName>,
17 phasedRegistrationNames: {|
18 bubbled: null | string,
19 captured: null | string,
packages/react-dom/src/events/TopLevelEventTypes.js
+87 -19
@@ -7,22 +7,90 @@
7 * @flow
8 */
9
10 -export opaque type DOMTopLevelEventType = string;
11 -
12 -// Do not use the below two methods directly!
13 -// Instead use constants exported from DOMTopLevelEventTypes in ReactDOM.
14 -// (It is the only module that is allowed to access these methods.)
15 -
16 -export function unsafeCastStringToDOMTopLevelType(
17 - topLevelType: string,
18 -): DOMTopLevelEventType {
19 - return topLevelType;
20 -}
21 -
22 -export function unsafeCastDOMTopLevelTypeToString(
23 - topLevelType: DOMTopLevelEventType,
24 -): string {
25 - return topLevelType;
26 -}
27 -
28 -export type TopLevelType = DOMTopLevelEventType;
10 +export type TopLevelType =
11 + | 'abort'
12 + // Dynamic and vendor-prefixed at the usage site:
13 + // 'animationiteration' |
14 + // 'animationend |
15 + // 'animationstart' |
16 + | 'canplay'
17 + | 'canplaythrough'
18 + | 'cancel'
19 + | 'change'
20 + | 'click'
21 + | 'close'
22 + | 'compositionend'
23 + | 'compositionstart'
24 + | 'compositionupdate'
25 + | 'contextmenu'
26 + | 'copy'
27 + | 'cut'
28 + | 'dblclick'
29 + | 'auxclick'
30 + | 'drag'
31 + | 'dragend'
32 + | 'dragenter'
33 + | 'dragexit'
34 + | 'dragleave'
35 + | 'dragover'
36 + | 'dragstart'
37 + | 'drop'
38 + | 'durationchange'
39 + | 'emptied'
40 + | 'encrypted'
41 + | 'ended'
42 + | 'error'
43 + | 'gotpointercapture'
44 + | 'input'
45 + | 'invalid'
46 + | 'keydown'
47 + | 'keypress'
48 + | 'keyup'
49 + | 'load'
50 + | 'loadstart'
51 + | 'loadeddata'
52 + | 'loadedmetadata'
53 + | 'lostpointercapture'
54 + | 'mousedown'
55 + | 'mousemove'
56 + | 'mouseout'
57 + | 'mouseover'
58 + | 'mouseup'
59 + | 'paste'
60 + | 'pause'
61 + | 'play'
62 + | 'playing'
63 + | 'pointercancel'
64 + | 'pointerdown'
65 + | 'pointerenter'
66 + | 'pointerleave'
67 + | 'pointermove'
68 + | 'pointerout'
69 + | 'pointerover'
70 + | 'pointerup'
71 + | 'progress'
72 + | 'ratechange'
73 + | 'reset'
74 + | 'scroll'
75 + | 'seeked'
76 + | 'seeking'
77 + | 'selectionchange'
78 + | 'stalled'
79 + | 'submit'
80 + | 'suspend'
81 + | 'textInput'
82 + | 'timeupdate'
83 + | 'toggle'
84 + | 'touchcancel'
85 + | 'touchend'
86 + | 'touchmove'
87 + | 'touchstart'
88 + // Dynamic and vendor-prefixed at the usage site:
89 + // 'transitionend' |
90 + | 'volumechange'
91 + | 'waiting'
92 + | 'wheel'
93 + | 'afterblur'
94 + | 'beforeblur'
95 + | 'focusin'
96 + | 'focusout';
packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
+87 -101
@@ -3,25 +3,19 @@
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 */
9
8 -import type {TopLevelType} from '../../events/TopLevelEventTypes';
10 +import type {DOMEventName} from '../../events/DOMEventNames';
11 +import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
12 +import type {AnyNativeEvent} from '../../events/PluginModuleType';
13 +import type {DispatchQueue} from '../DOMPluginEventSystem';
14 +import type {EventSystemFlags} from '../EventSystemFlags';
15
16 import {canUseDOM} from 'shared/ExecutionEnvironment';
17
18 import {registerTwoPhaseEvent} from '../EventRegistry';
13 -import {
14 - TOP_FOCUS_OUT,
15 - TOP_COMPOSITION_START,
16 - TOP_COMPOSITION_END,
17 - TOP_COMPOSITION_UPDATE,
18 - TOP_KEY_DOWN,
19 - TOP_KEY_PRESS,
20 - TOP_KEY_UP,
21 - TOP_MOUSE_DOWN,
22 - TOP_TEXT_INPUT,
23 - TOP_PASTE,
24 -} from '../DOMTopLevelEventTypes';
19 import {
20 getData as FallbackCompositionStateGetData,
21 initialize as FallbackCompositionStateInitialize,
@@ -63,34 +57,34 @@ const SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
57
58 function registerEvents() {
59 registerTwoPhaseEvent('onBeforeInput', [
66 - TOP_COMPOSITION_END,
67 - TOP_KEY_PRESS,
68 - TOP_TEXT_INPUT,
69 - TOP_PASTE,
60 + 'compositionend',
61 + 'keypress',
62 + 'textInput',
63 + 'paste',
64 ]);
65 registerTwoPhaseEvent('onCompositionEnd', [
72 - TOP_COMPOSITION_END,
73 - TOP_FOCUS_OUT,
74 - TOP_KEY_DOWN,
75 - TOP_KEY_PRESS,
76 - TOP_KEY_UP,
77 - TOP_MOUSE_DOWN,
66 + 'compositionend',
67 + 'focusout',
68 + 'keydown',
69 + 'keypress',
70 + 'keyup',
71 + 'mousedown',
72 ]);
73 registerTwoPhaseEvent('onCompositionStart', [
80 - TOP_COMPOSITION_START,
81 - TOP_FOCUS_OUT,
82 - TOP_KEY_DOWN,
83 - TOP_KEY_PRESS,
84 - TOP_KEY_UP,
85 - TOP_MOUSE_DOWN,
74 + 'compositionstart',
75 + 'focusout',
76 + 'keydown',
77 + 'keypress',
78 + 'keyup',
79 + 'mousedown',
80 ]);
81 registerTwoPhaseEvent('onCompositionUpdate', [
88 - TOP_COMPOSITION_UPDATE,
89 - TOP_FOCUS_OUT,
90 - TOP_KEY_DOWN,
91 - TOP_KEY_PRESS,
92 - TOP_KEY_UP,
93 - TOP_MOUSE_DOWN,
82 + 'compositionupdate',
83 + 'focusout',
84 + 'keydown',
85 + 'keypress',
86 + 'keyup',
87 + 'mousedown',
88 ]);
89 }
90
@@ -102,7 +96,7 @@ let hasSpaceKeypress = false;
96 * This is required because Firefox fires `keypress` events for key commands
97 * (cut, copy, select-all, etc.) even though no character is inserted.
98 */
105 -function isKeypressCommand(nativeEvent) {
99 +function isKeypressCommand(nativeEvent: any) {
100 return (
101 (nativeEvent.ctrlKey || nativeEvent.altKey || nativeEvent.metaKey) &&
102 // ctrlKey && altKey is equivalent to AltGr, and is not a command.
@@ -112,17 +106,14 @@ function isKeypressCommand(nativeEvent) {
106
107 /**
108 * Translate native top level events into event types.
115 - *
116 - * @param {string} topLevelType
117 - * @return {object}
109 */
119 -function getCompositionEventType(topLevelType) {
120 - switch (topLevelType) {
121 - case TOP_COMPOSITION_START:
110 +function getCompositionEventType(domEventName: DOMEventName) {
111 + switch (domEventName) {
112 + case 'compositionstart':
113 return 'onCompositionStart';
123 - case TOP_COMPOSITION_END:
114 + case 'compositionend':
115 return 'onCompositionEnd';
125 - case TOP_COMPOSITION_UPDATE:
116 + case 'compositionupdate':
117 return 'onCompositionUpdate';
118 }
119 }
@@ -130,34 +121,32 @@ function getCompositionEventType(topLevelType) {
121 /**
122 * Does our fallback best-guess model think this event signifies that
123 * composition has begun?
133 - *
134 - * @param {string} topLevelType
135 - * @param {object} nativeEvent
136 - * @return {boolean}
124 */
138 -function isFallbackCompositionStart(topLevelType, nativeEvent) {
139 - return topLevelType === TOP_KEY_DOWN && nativeEvent.keyCode === START_KEYCODE;
125 +function isFallbackCompositionStart(
126 + domEventName: DOMEventName,
127 + nativeEvent: any,
128 +): boolean {
129 + return domEventName === 'keydown' && nativeEvent.keyCode === START_KEYCODE;
130 }
131
132 /**
133 * Does our fallback mode think that this event is the end of composition?
144 - *
145 - * @param {string} topLevelType
146 - * @param {object} nativeEvent
147 - * @return {boolean}
134 */
149 -function isFallbackCompositionEnd(topLevelType, nativeEvent) {
150 - switch (topLevelType) {
151 - case TOP_KEY_UP:
135 +function isFallbackCompositionEnd(
136 + domEventName: DOMEventName,
137 + nativeEvent: any,
138 +): boolean {
139 + switch (domEventName) {
140 + case 'keyup':
141 // Command keys insert or clear IME input.
142 return END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1;
154 - case TOP_KEY_DOWN:
143 + case 'keydown':
144 // Expect IME keyCode on each keydown. If we get any other
145 // code we must have exited earlier.
146 return nativeEvent.keyCode !== START_KEYCODE;
158 - case TOP_KEY_PRESS:
159 - case TOP_MOUSE_DOWN:
160 - case TOP_FOCUS_OUT:
147 + case 'keypress':
148 + case 'mousedown':
149 + case 'focusout':
150 // Events are not possible without cancelling IME.
151 return true;
152 default:
@@ -174,7 +163,7 @@ function isFallbackCompositionEnd(topLevelType, nativeEvent) {
163 * @param {object} nativeEvent
164 * @return {?string}
165 */
177 -function getDataFromCustomEvent(nativeEvent) {
166 +function getDataFromCustomEvent(nativeEvent: any) {
167 const detail = nativeEvent.detail;
168 if (typeof detail === 'object' && 'data' in detail) {
169 return detail.data;
@@ -192,7 +181,7 @@ function getDataFromCustomEvent(nativeEvent) {
181 * @param {object} nativeEvent
182 * @return {boolean}
183 */
195 -function isUsingKoreanIME(nativeEvent) {
184 +function isUsingKoreanIME(nativeEvent: any) {
185 return nativeEvent.locale === 'ko';
186 }
187
@@ -204,7 +193,7 @@ let isComposing = false;
193 */
194 function extractCompositionEvent(
195 dispatchQueue,
207 - topLevelType,
196 + domEventName,
197 targetInst,
198 nativeEvent,
199 nativeEventTarget,
@@ -213,12 +202,12 @@ function extractCompositionEvent(
202 let fallbackData;
203
204 if (canUseCompositionEvent) {
216 - eventType = getCompositionEventType(topLevelType);
205 + eventType = getCompositionEventType(domEventName);
206 } else if (!isComposing) {
218 - if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
207 + if (isFallbackCompositionStart(domEventName, nativeEvent)) {
208 eventType = 'onCompositionStart';
209 }
221 - } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
210 + } else if (isFallbackCompositionEnd(domEventName, nativeEvent)) {
211 eventType = 'onCompositionEnd';
212 }
213
@@ -259,16 +248,14 @@ function extractCompositionEvent(
248 }
249 }
250
262 -/**
263 - * @param {TopLevelType} topLevelType Number from `TopLevelType`.
264 - * @param {object} nativeEvent Native browser event.
265 - * @return {?string} The string corresponding to this `beforeInput` event.
266 - */
267 -function getNativeBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
268 - switch (topLevelType) {
269 - case TOP_COMPOSITION_END:
251 +function getNativeBeforeInputChars(
252 + domEventName: DOMEventName,
253 + nativeEvent: any,
254 +): ?string {
255 + switch (domEventName) {
256 + case 'compositionend':
257 return getDataFromCustomEvent(nativeEvent);
271 - case TOP_KEY_PRESS:
258 + case 'keypress':
259 /**
260 * If native `textInput` events are available, our goal is to make
261 * use of them. However, there is a special case: the spacebar key.
@@ -291,7 +278,7 @@ function getNativeBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
278 hasSpaceKeypress = true;
279 return SPACEBAR_CHAR;
280
294 - case TOP_TEXT_INPUT:
281 + case 'textInput':
282 // Record the characters to be added to the DOM.
283 const chars = nativeEvent.data;
284
@@ -313,21 +300,20 @@ function getNativeBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
300 /**
301 * For browsers that do not provide the `textInput` event, extract the
302 * appropriate string to use for SyntheticInputEvent.
316 - *
317 - * @param {number} topLevelType Number from `TopLevelEventTypes`.
318 - * @param {object} nativeEvent Native browser event.
319 - * @return {?string} The fallback string for this `beforeInput` event.
303 */
321 -function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
304 +function getFallbackBeforeInputChars(
305 + domEventName: DOMEventName,
306 + nativeEvent: any,
307 +): ?string {
308 // If we are currently composing (IME) and using a fallback to do so,
309 // try to extract the composed characters from the fallback object.
310 // If composition event is available, we extract a string only at
311 // compositionevent, otherwise extract it at fallback events.
312 if (isComposing) {
313 if (
328 - topLevelType === TOP_COMPOSITION_END ||
314 + domEventName === 'compositionend' ||
315 (!canUseCompositionEvent &&
330 - isFallbackCompositionEnd(topLevelType, nativeEvent))
316 + isFallbackCompositionEnd(domEventName, nativeEvent))
317 ) {
318 const chars = FallbackCompositionStateGetData();
319 FallbackCompositionStateReset();
@@ -337,12 +323,12 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
323 return null;
324 }
325
340 - switch (topLevelType) {
341 - case TOP_PASTE:
326 + switch (domEventName) {
327 + case 'paste':
328 // If a paste event occurs after a keypress, throw out the input
329 // chars. Paste events should not lead to BeforeInput events.
330 return null;
345 - case TOP_KEY_PRESS:
331 + case 'keypress':
332 /**
333 * As of v27, Firefox may fire keypress events even when no character
334 * will be inserted. A few possibilities:
@@ -373,7 +359,7 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
359 }
360 }
361 return null;
376 - case TOP_COMPOSITION_END:
362 + case 'compositionend':
363 return useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)
364 ? null
365 : nativeEvent.data;
@@ -390,7 +376,7 @@ function getFallbackBeforeInputChars(topLevelType: TopLevelType, nativeEvent) {
376 */
377 function extractBeforeInputEvent(
378 dispatchQueue,
393 - topLevelType,
379 + domEventName,
380 targetInst,
381 nativeEvent,
382 nativeEventTarget,
@@ -398,9 +384,9 @@ function extractBeforeInputEvent(
384 let chars;
385
386 if (canUseTextInputEvent) {
401 - chars = getNativeBeforeInputChars(topLevelType, nativeEvent);
387 + chars = getNativeBeforeInputChars(domEventName, nativeEvent);
388 } else {
403 - chars = getFallbackBeforeInputChars(topLevelType, nativeEvent);
389 + chars = getFallbackBeforeInputChars(domEventName, nativeEvent);
390 }
391
392 // If no characters are being inserted, no BeforeInput event should
@@ -439,24 +425,24 @@ function extractBeforeInputEvent(
425 * `composition` event types.
426 */
427 function extractEvents(
442 - dispatchQueue,
443 - topLevelType,
444 - targetInst,
445 - nativeEvent,
446 - nativeEventTarget,
447 - eventSystemFlags,
448 - targetContainer,
449 -) {
428 + dispatchQueue: DispatchQueue,
429 + domEventName: DOMEventName,
430 + targetInst: null | Fiber,
431 + nativeEvent: AnyNativeEvent,
432 + nativeEventTarget: null | EventTarget,
433 + eventSystemFlags: EventSystemFlags,
434 + targetContainer: EventTarget,
435 +): void {
436 extractCompositionEvent(
437 dispatchQueue,
452 - topLevelType,
438 + domEventName,
439 targetInst,
440 nativeEvent,
441 nativeEventTarget,
442 );
443 extractBeforeInputEvent(
444 dispatchQueue,
459 - topLevelType,
445 + domEventName,
446 targetInst,
447 nativeEvent,
448 nativeEventTarget,
packages/react-dom/src/events/plugins/ChangeEventPlugin.js
+36 -36
@@ -7,7 +7,7 @@
7 * @flow
8 */
9 import type {AnyNativeEvent} from '../PluginModuleType';
10 -import type {TopLevelType} from '../TopLevelEventTypes';
10 +import type {DOMEventName} from '../DOMEventNames';
11 import type {DispatchQueue} from '../DOMPluginEventSystem';
12 import type {EventSystemFlags} from '../EventSystemFlags';
13
@@ -16,16 +16,6 @@ import {SyntheticEvent} from '../SyntheticEvent';
16 import isTextInputElement from '../isTextInputElement';
17 import {canUseDOM} from 'shared/ExecutionEnvironment';
18
19 -import {
20 - TOP_FOCUS_OUT,
21 - TOP_CHANGE,
22 - TOP_CLICK,
23 - TOP_FOCUS_IN,
24 - TOP_INPUT,
25 - TOP_KEY_DOWN,
26 - TOP_KEY_UP,
27 - TOP_SELECTION_CHANGE,
28 -} from '../DOMTopLevelEventTypes';
19 import getEventTarget from '../getEventTarget';
20 import isEventSupported from '../isEventSupported';
21 import {getNodeFromInstance} from '../../client/ReactDOMComponentTree';
@@ -42,14 +32,14 @@ import {
32
33 function registerEvents() {
34 registerTwoPhaseEvent('onChange', [
45 - TOP_CHANGE,
46 - TOP_CLICK,
47 - TOP_FOCUS_IN,
48 - TOP_FOCUS_OUT,
49 - TOP_INPUT,
50 - TOP_KEY_DOWN,
51 - TOP_KEY_UP,
52 - TOP_SELECTION_CHANGE,
35 + 'change',
36 + 'click',
37 + 'focusin',
38 + 'focusout',
39 + 'input',
40 + 'keydown',
41 + 'keyup',
42 + 'selectionchange',
43 ]);
44 }
45
@@ -116,8 +106,8 @@ function getInstIfValueChanged(targetInst: Object) {
106 }
107 }
108
119 -function getTargetInstForChangeEvent(topLevelType, targetInst) {
120 - if (topLevelType === TOP_CHANGE) {
109 +function getTargetInstForChangeEvent(domEventName: DOMEventName, targetInst) {
110 + if (domEventName === 'change') {
111 return targetInst;
112 }
113 }
@@ -171,8 +161,12 @@ function handlePropertyChange(nativeEvent) {
161 }
162 }
163
174 -function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
175 - if (topLevelType === TOP_FOCUS_IN) {
164 +function handleEventsForInputEventPolyfill(
165 + domEventName: DOMEventName,
166 + target,
167 + targetInst,
168 +) {
169 + if (domEventName === 'focusin') {
170 // In IE9, propertychange fires for most input events but is buggy and
171 // doesn't fire when text is deleted, but conveniently, selectionchange
172 // appears to fire in all of the remaining cases so we catch those and
@@ -185,17 +179,20 @@ function handleEventsForInputEventPolyfill(topLevelType, target, targetInst) {
179 // missed a blur event somehow.
180 stopWatchingForValueChange();
181 startWatchingForValueChange(target, targetInst);
188 - } else if (topLevelType === TOP_FOCUS_OUT) {
182 + } else if (domEventName === 'focusout') {
183 stopWatchingForValueChange();
184 }
185 }
186
187 // For IE8 and IE9.
194 -function getTargetInstForInputEventPolyfill(topLevelType, targetInst) {
188 +function getTargetInstForInputEventPolyfill(
189 + domEventName: DOMEventName,
190 + targetInst,
191 +) {
192 if (
196 - topLevelType === TOP_SELECTION_CHANGE ||
197 - topLevelType === TOP_KEY_UP ||
198 - topLevelType === TOP_KEY_DOWN
193 + domEventName === 'selectionchange' ||
194 + domEventName === 'keyup' ||
195 + domEventName === 'keydown'
196 ) {
197 // On the selectionchange event, the target is just document which isn't
198 // helpful for us so just check activeElement instead.
@@ -226,14 +223,17 @@ function shouldUseClickEvent(elem) {
223 );
224 }
225
229 -function getTargetInstForClickEvent(topLevelType, targetInst) {
230 - if (topLevelType === TOP_CLICK) {
226 +function getTargetInstForClickEvent(domEventName: DOMEventName, targetInst) {
227 + if (domEventName === 'click') {
228 return getInstIfValueChanged(targetInst);
229 }
230 }
231
235 -function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
236 - if (topLevelType === TOP_INPUT || topLevelType === TOP_CHANGE) {
232 +function getTargetInstForInputOrChangeEvent(
233 + domEventName: DOMEventName,
234 + targetInst,
235 +) {
236 + if (domEventName === 'input' || domEventName === 'change') {
237 return getInstIfValueChanged(targetInst);
238 }
239 }
@@ -263,7 +263,7 @@ function handleControlledInputBlur(node: HTMLInputElement) {
263 */
264 function extractEvents(
265 dispatchQueue: DispatchQueue,
266 - topLevelType: TopLevelType,
266 + domEventName: DOMEventName,
267 targetInst: null | Fiber,
268 nativeEvent: AnyNativeEvent,
269 nativeEventTarget: null | EventTarget,
@@ -287,7 +287,7 @@ function extractEvents(
287 }
288
289 if (getTargetInstFunc) {
290 - const inst = getTargetInstFunc(topLevelType, targetInst);
290 + const inst = getTargetInstFunc(domEventName, targetInst);
291 if (inst) {
292 createAndAccumulateChangeEvent(
293 dispatchQueue,
@@ -300,11 +300,11 @@ function extractEvents(
300 }
301
302 if (handleEventFunc) {
303 - handleEventFunc(topLevelType, targetNode, targetInst);
303 + handleEventFunc(domEventName, targetNode, targetInst);
304 }
305
306 // When blurring, set the value attribute for number inputs
307 - if (topLevelType === TOP_FOCUS_OUT) {
307 + if (domEventName === 'focusout') {
308 handleControlledInputBlur(((targetNode: any): HTMLInputElement));
309 }
310 }
packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
+33 -36
@@ -3,15 +3,16 @@
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 */
9
10 +import type {AnyNativeEvent} from '../PluginModuleType';
11 +import type {DOMEventName} from '../DOMEventNames';
12 +import type {DispatchQueue} from '../DOMPluginEventSystem';
13 +import type {EventSystemFlags} from '../EventSystemFlags';
14 +
15 import {registerDirectEvent} from '../EventRegistry';
9 -import {
10 - TOP_MOUSE_OUT,
11 - TOP_MOUSE_OVER,
12 - TOP_POINTER_OUT,
13 - TOP_POINTER_OVER,
14 -} from '../DOMTopLevelEventTypes';
16 import {IS_REPLAYED} from 'react-dom/src/events/EventSystemFlags';
17 import {
18 SyntheticEvent,
@@ -28,10 +29,10 @@ import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
29 import {getNearestMountedFiber} from 'react-reconciler/src/ReactFiberTreeReflection';
30
31 function registerEvents() {
31 - registerDirectEvent('onMouseEnter', [TOP_MOUSE_OUT, TOP_MOUSE_OVER]);
32 - registerDirectEvent('onMouseLeave', [TOP_MOUSE_OUT, TOP_MOUSE_OVER]);
33 - registerDirectEvent('onPointerEnter', [TOP_POINTER_OUT, TOP_POINTER_OVER]);
34 - registerDirectEvent('onPointerLeave', [TOP_POINTER_OUT, TOP_POINTER_OVER]);
32 + registerDirectEvent('onMouseEnter', ['mouseout', 'mouseover']);
33 + registerDirectEvent('onMouseLeave', ['mouseout', 'mouseover']);
34 + registerDirectEvent('onPointerEnter', ['pointerout', 'pointerover']);
35 + registerDirectEvent('onPointerLeave', ['pointerout', 'pointerover']);
36 }
37
38 /**
@@ -42,21 +43,22 @@ function registerEvents() {
43 * the `mouseover` top-level event.
44 */
45 function extractEvents(
45 - dispatchQueue,
46 - topLevelType,
47 - targetInst,
48 - nativeEvent,
49 - nativeEventTarget,
50 - eventSystemFlags,
51 - targetContainer,
46 + dispatchQueue: DispatchQueue,
47 + domEventName: DOMEventName,
48 + targetInst: null | Fiber,
49 + nativeEvent: AnyNativeEvent,
50 + nativeEventTarget: null | EventTarget,
51 + eventSystemFlags: EventSystemFlags,
52 + targetContainer: EventTarget,
53 ) {
54 const isOverEvent =
54 - topLevelType === TOP_MOUSE_OVER || topLevelType === TOP_POINTER_OVER;
55 + domEventName === 'mouseover' || domEventName === 'pointerover';
56 const isOutEvent =
56 - topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_POINTER_OUT;
57 + domEventName === 'mouseout' || domEventName === 'pointerout';
58
59 if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0) {
59 - const related = nativeEvent.relatedTarget || nativeEvent.fromElement;
60 + const related =
61 + (nativeEvent: any).relatedTarget || (nativeEvent: any).fromElement;
62 if (related) {
63 // Due to the fact we don't add listeners to the document with the
64 // modern event system and instead attach listeners to roots, we
@@ -75,12 +77,13 @@ function extractEvents(
77 }
78
79 let win;
78 - if (nativeEventTarget.window === nativeEventTarget) {
80 + // TODO: why is this nullable in the types but we read from it?
81 + if ((nativeEventTarget: any).window === nativeEventTarget) {
82 // `nativeEventTarget` is probably a window object.
83 win = nativeEventTarget;
84 } else {
85 // TODO: Figure out why `ownerDocument` is sometimes undefined in IE8.
83 - const doc = nativeEventTarget.ownerDocument;
86 + const doc = (nativeEventTarget: any).ownerDocument;
87 if (doc) {
88 win = doc.defaultView || doc.parentWindow;
89 } else {
@@ -91,9 +94,9 @@ function extractEvents(
94 let from;
95 let to;
96 if (isOutEvent) {
94 - const related = nativeEvent.relatedTarget || nativeEvent.toElement;
97 + const related = nativeEvent.relatedTarget || (nativeEvent: any).toElement;
98 from = targetInst;
96 - to = related ? getClosestInstanceFromNode(related) : null;
99 + to = related ? getClosestInstanceFromNode((related: any)) : null;
100 if (to !== null) {
101 const nearestMounted = getNearestMountedFiber(to);
102 if (
@@ -114,17 +117,11 @@ function extractEvents(
117 return;
118 }
119
117 - let eventInterface, leaveEventType, enterEventType, eventTypePrefix;
118 -
119 - if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {
120 - eventInterface = MouseEventInterface;
121 - leaveEventType = 'onMouseLeave';
122 - enterEventType = 'onMouseEnter';
123 - eventTypePrefix = 'mouse';
124 - } else if (
125 - topLevelType === TOP_POINTER_OUT ||
126 - topLevelType === TOP_POINTER_OVER
127 - ) {
120 + let eventInterface = MouseEventInterface;
121 + let leaveEventType = 'onMouseLeave';
122 + let enterEventType = 'onMouseEnter';
123 + let eventTypePrefix = 'mouse';
124 + if (domEventName === 'pointerout' || domEventName === 'pointerover') {
125 eventInterface = PointerEventInterface;
126 leaveEventType = 'onPointerLeave';
127 enterEventType = 'onPointerEnter';
@@ -159,7 +156,7 @@ function extractEvents(
156 // If we are not processing the first ancestor, then we
157 // should not process the same nativeEvent again, as we
158 // will have already processed it in the first ancestor.
162 - const nativeTargetInst = getClosestInstanceFromNode(nativeEventTarget);
159 + const nativeTargetInst = getClosestInstanceFromNode((nativeEventTarget: any));
160 if (nativeTargetInst !== targetInst) {
161 enter = null;
162 }
packages/react-dom/src/events/plugins/SelectEventPlugin.js
+39 -53
@@ -3,25 +3,21 @@
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 + *
7 + * @flow
8 */
9
10 +import type {AnyNativeEvent} from '../PluginModuleType';
11 +import type {DOMEventName} from '../DOMEventNames';
12 +import type {DispatchQueue} from '../DOMPluginEventSystem';
13 +import type {EventSystemFlags} from '../EventSystemFlags';
14 +
15 import {canUseDOM} from 'shared/ExecutionEnvironment';
16 import {SyntheticEvent} from '../../events/SyntheticEvent';
17 import isTextInputElement from '../isTextInputElement';
18 import shallowEqual from 'shared/shallowEqual';
19
20 import {registerTwoPhaseEvent} from '../EventRegistry';
14 -import {
15 - TOP_FOCUS_OUT,
16 - TOP_CONTEXT_MENU,
17 - TOP_DRAG_END,
18 - TOP_FOCUS_IN,
19 - TOP_KEY_DOWN,
20 - TOP_KEY_UP,
21 - TOP_MOUSE_DOWN,
22 - TOP_MOUSE_UP,
23 - TOP_SELECTION_CHANGE,
24 -} from '../DOMTopLevelEventTypes';
21 import getActiveElement from '../../client/getActiveElement';
22 import {
23 getNodeFromInstance,
@@ -34,21 +30,17 @@ import {accumulateTwoPhaseListeners} from '../DOMPluginEventSystem';
30 const skipSelectionChangeEvent =
31 canUseDOM && 'documentMode' in document && document.documentMode <= 11;
32
37 -const rootTargetDependencies = [
38 - TOP_FOCUS_OUT,
39 - TOP_CONTEXT_MENU,
40 - TOP_DRAG_END,
41 - TOP_FOCUS_IN,
42 - TOP_KEY_DOWN,
43 - TOP_KEY_UP,
44 - TOP_MOUSE_DOWN,
45 - TOP_MOUSE_UP,
46 -];
47 -
33 function registerEvents() {
34 registerTwoPhaseEvent('onSelect', [
50 - ...rootTargetDependencies,
51 - TOP_SELECTION_CHANGE,
35 + 'focusout',
36 + 'contextmenu',
37 + 'dragend',
38 + 'focusin',
39 + 'keydown',
40 + 'keyup',
41 + 'mousedown',
42 + 'mouseup',
43 + 'selectionchange',
44 ]);
45 }
46
@@ -62,11 +54,8 @@ let mouseDown = false;
54 *
55 * The return value will not be consistent across nodes or browsers, but
56 * two identical selections on the same node will return identical objects.
65 - *
66 - * @param {DOMElement} node
67 - * @return {object}
57 */
69 -function getSelection(node) {
58 +function getSelection(node: any) {
59 if ('selectionStart' in node && hasSelectionCapabilities(node)) {
60 return {
61 start: node.selectionStart,
@@ -87,11 +76,8 @@ function getSelection(node) {
76
77 /**
78 * Get document associated with the event target.
90 - *
91 - * @param {object} nativeEventTarget
92 - * @return {Document}
79 */
94 -function getEventTargetDocument(eventTarget) {
80 +function getEventTargetDocument(eventTarget: any) {
81 return eventTarget.window === eventTarget
82 ? eventTarget.document
83 : eventTarget.nodeType === DOCUMENT_NODE
@@ -159,23 +145,23 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
145 * - Fires after user input.
146 */
147 function extractEvents(
162 - dispatchQueue,
163 - topLevelType,
164 - targetInst,
165 - nativeEvent,
166 - nativeEventTarget,
167 - eventSystemFlags,
168 - targetContainer,
148 + dispatchQueue: DispatchQueue,
149 + domEventName: DOMEventName,
150 + targetInst: null | Fiber,
151 + nativeEvent: AnyNativeEvent,
152 + nativeEventTarget: null | EventTarget,
153 + eventSystemFlags: EventSystemFlags,
154 + targetContainer: EventTarget,
155 ) {
156 const eventListenerMap = getEventListenerMap(targetContainer);
157 // Track whether all listeners exists for this plugin. If none exist, we do
158 // not extract events. See #3639.
159 if (
174 - // If we are handling TOP_SELECTION_CHANGE, then we don't need to
175 - // check for the other dependencies, as TOP_SELECTION_CHANGE is only
160 + // If we are handling selectionchange, then we don't need to
161 + // check for the other dependencies, as selectionchange is only
162 // event attached from the onChange plugin and we don't expose an
163 // onSelectionChange event from React.
178 - topLevelType !== TOP_SELECTION_CHANGE &&
164 + domEventName !== 'selectionchange' &&
165 !eventListenerMap.has('onSelect') &&
166 !eventListenerMap.has('onSelectCapture')
167 ) {
@@ -184,11 +170,11 @@ function extractEvents(
170
171 const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
172
187 - switch (topLevelType) {
173 + switch (domEventName) {
174 // Track the input node that has focus.
189 - case TOP_FOCUS_IN:
175 + case 'focusin':
176 if (
191 - isTextInputElement(targetNode) ||
177 + isTextInputElement((targetNode: any)) ||
178 targetNode.contentEditable === 'true'
179 ) {
180 activeElement = targetNode;
@@ -196,19 +182,19 @@ function extractEvents(
182 lastSelection = null;
183 }
184 break;
199 - case TOP_FOCUS_OUT:
185 + case 'focusout':
186 activeElement = null;
187 activeElementInst = null;
188 lastSelection = null;
189 break;
190 // Don't fire the event while the user is dragging. This matches the
191 // semantics of the native select event.
206 - case TOP_MOUSE_DOWN:
192 + case 'mousedown':
193 mouseDown = true;
194 break;
209 - case TOP_CONTEXT_MENU:
210 - case TOP_MOUSE_UP:
211 - case TOP_DRAG_END:
195 + case 'contextmenu':
196 + case 'mouseup':
197 + case 'dragend':
198 mouseDown = false;
199 constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
200 break;
@@ -221,13 +207,13 @@ function extractEvents(
207 // keyup, but we check on keydown as well in the case of holding down a
208 // key, when multiple keydown events are fired but only one keyup is.
209 // This is also our approach for IE handling, for the reason above.
224 - case TOP_SELECTION_CHANGE:
210 + case 'selectionchange':
211 if (skipSelectionChangeEvent) {
212 break;
213 }
214 // falls through
229 - case TOP_KEY_DOWN:
230 - case TOP_KEY_UP:
215 + case 'keydown':
216 + case 'keyup':
217 constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget);
218 }
219
packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+56 -51
@@ -7,7 +7,7 @@
7 * @flow
8 */
9
10 -import type {TopLevelType} from '../../events/TopLevelEventTypes';
10 +import type {DOMEventName} from '../../events/DOMEventNames';
11 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
12 import type {AnyNativeEvent} from '../../events/PluginModuleType';
13 import type {DispatchQueue} from '../DOMPluginEventSystem';
@@ -28,7 +28,12 @@ import {
28 WheelEventInterface,
29 } from '../../events/SyntheticEvent';
30
31 -import * as DOMTopLevelEventTypes from '../DOMTopLevelEventTypes';
31 +import {
32 + ANIMATION_END,
33 + ANIMATION_ITERATION,
34 + ANIMATION_START,
35 + TRANSITION_END,
36 +} from '../DOMEventNames';
37 import {
38 topLevelEventsToReactNames,
39 registerSimpleEvents,
@@ -49,20 +54,20 @@ import {
54
55 function extractEvents(
56 dispatchQueue: DispatchQueue,
52 - topLevelType: TopLevelType,
57 + domEventName: DOMEventName,
58 targetInst: null | Fiber,
59 nativeEvent: AnyNativeEvent,
60 nativeEventTarget: null | EventTarget,
61 eventSystemFlags: EventSystemFlags,
62 targetContainer: EventTarget,
63 ): void {
59 - const reactName = topLevelEventsToReactNames.get(topLevelType);
64 + const reactName = topLevelEventsToReactNames.get(domEventName);
65 if (reactName === undefined) {
66 return;
67 }
68 let EventInterface;
64 - switch (topLevelType) {
65 - case DOMTopLevelEventTypes.TOP_KEY_PRESS:
69 + switch (domEventName) {
70 + case 'keypress':
71 // Firefox creates a keypress event for function keys too. This removes
72 // the unwanted keypress events. Enter is however both printable and
73 // non-printable. One would expect Tab to be as well (but it isn't).
@@ -70,78 +75,78 @@ function extractEvents(
75 return;
76 }
77 /* falls through */
73 - case DOMTopLevelEventTypes.TOP_KEY_DOWN:
74 - case DOMTopLevelEventTypes.TOP_KEY_UP:
78 + case 'keydown':
79 + case 'keyup':
80 EventInterface = KeyboardEventInterface;
81 break;
77 - case DOMTopLevelEventTypes.TOP_FOCUS_IN:
78 - case DOMTopLevelEventTypes.TOP_FOCUS_OUT:
79 - case DOMTopLevelEventTypes.TOP_BEFORE_BLUR:
80 - case DOMTopLevelEventTypes.TOP_AFTER_BLUR:
82 + case 'focusin':
83 + case 'focusout':
84 + case 'beforeblur':
85 + case 'afterblur':
86 EventInterface = FocusEventInterface;
87 break;
83 - case DOMTopLevelEventTypes.TOP_CLICK:
88 + case 'click':
89 // Firefox creates a click event on right mouse clicks. This removes the
90 // unwanted click events.
91 if (nativeEvent.button === 2) {
92 return;
93 }
94 /* falls through */
90 - case DOMTopLevelEventTypes.TOP_AUX_CLICK:
91 - case DOMTopLevelEventTypes.TOP_DOUBLE_CLICK:
92 - case DOMTopLevelEventTypes.TOP_MOUSE_DOWN:
93 - case DOMTopLevelEventTypes.TOP_MOUSE_MOVE:
94 - case DOMTopLevelEventTypes.TOP_MOUSE_UP:
95 + case 'auxclick':
96 + case 'dblclick':
97 + case 'mousedown':
98 + case 'mousemove':
99 + case 'mouseup':
100 // TODO: Disabled elements should not respond to mouse events
101 /* falls through */
97 - case DOMTopLevelEventTypes.TOP_MOUSE_OUT:
98 - case DOMTopLevelEventTypes.TOP_MOUSE_OVER:
99 - case DOMTopLevelEventTypes.TOP_CONTEXT_MENU:
102 + case 'mouseout':
103 + case 'mouseover':
104 + case 'contextmenu':
105 EventInterface = MouseEventInterface;
106 break;
102 - case DOMTopLevelEventTypes.TOP_DRAG:
103 - case DOMTopLevelEventTypes.TOP_DRAG_END:
104 - case DOMTopLevelEventTypes.TOP_DRAG_ENTER:
105 - case DOMTopLevelEventTypes.TOP_DRAG_EXIT:
106 - case DOMTopLevelEventTypes.TOP_DRAG_LEAVE:
107 - case DOMTopLevelEventTypes.TOP_DRAG_OVER:
108 - case DOMTopLevelEventTypes.TOP_DRAG_START:
109 - case DOMTopLevelEventTypes.TOP_DROP:
107 + case 'drag':
108 + case 'dragend':
109 + case 'dragenter':
110 + case 'dragexit':
111 + case 'dragleave':
112 + case 'dragover':
113 + case 'dragstart':
114 + case 'drop':
115 EventInterface = DragEventInterface;
116 break;
112 - case DOMTopLevelEventTypes.TOP_TOUCH_CANCEL:
113 - case DOMTopLevelEventTypes.TOP_TOUCH_END:
114 - case DOMTopLevelEventTypes.TOP_TOUCH_MOVE:
115 - case DOMTopLevelEventTypes.TOP_TOUCH_START:
117 + case 'touchcancel':
118 + case 'touchend':
119 + case 'touchmove':
120 + case 'touchstart':
121 EventInterface = TouchEventInterface;
122 break;
118 - case DOMTopLevelEventTypes.TOP_ANIMATION_END:
119 - case DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION:
120 - case DOMTopLevelEventTypes.TOP_ANIMATION_START:
123 + case ANIMATION_END:
124 + case ANIMATION_ITERATION:
125 + case ANIMATION_START:
126 EventInterface = AnimationEventInterface;
127 break;
123 - case DOMTopLevelEventTypes.TOP_TRANSITION_END:
128 + case TRANSITION_END:
129 EventInterface = TransitionEventInterface;
130 break;
126 - case DOMTopLevelEventTypes.TOP_SCROLL:
131 + case 'scroll':
132 EventInterface = UIEventInterface;
133 break;
129 - case DOMTopLevelEventTypes.TOP_WHEEL:
134 + case 'wheel':
135 EventInterface = WheelEventInterface;
136 break;
132 - case DOMTopLevelEventTypes.TOP_COPY:
133 - case DOMTopLevelEventTypes.TOP_CUT:
134 - case DOMTopLevelEventTypes.TOP_PASTE:
137 + case 'copy':
138 + case 'cut':
139 + case 'paste':
140 EventInterface = ClipboardEventInterface;
141 break;
137 - case DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE:
138 - case DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE:
139 - case DOMTopLevelEventTypes.TOP_POINTER_CANCEL:
140 - case DOMTopLevelEventTypes.TOP_POINTER_DOWN:
141 - case DOMTopLevelEventTypes.TOP_POINTER_MOVE:
142 - case DOMTopLevelEventTypes.TOP_POINTER_OUT:
143 - case DOMTopLevelEventTypes.TOP_POINTER_OVER:
144 - case DOMTopLevelEventTypes.TOP_POINTER_UP:
142 + case 'gotpointercapture':
143 + case 'lostpointercapture':
144 + case 'pointercancel':
145 + case 'pointerdown':
146 + case 'pointermove':
147 + case 'pointerout':
148 + case 'pointerover':
149 + case 'pointerup':
150 EventInterface = PointerEventInterface;
151 break;
152 default:
@@ -179,7 +184,7 @@ function extractEvents(
184 // TODO: ideally, we'd eventually add all events from
185 // nonDelegatedEvents list in DOMPluginEventSystem.
186 // Then we can remove this special list.
182 - topLevelType === DOMTopLevelEventTypes.TOP_SCROLL;
187 + domEventName === 'scroll';
188 }
189
190 accumulateSinglePhaseListeners(
packages/react-dom/src/shared/ReactDOMTypes.js
+2 -2
@@ -14,7 +14,7 @@ import type {
14 EventPriority,
15 ReactScopeInstance,
16 } from 'shared/ReactTypes';
17 -import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
17 +import type {DOMEventName} from '../events/DOMEventNames';
18
19 type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | Touch;
20
@@ -86,5 +86,5 @@ export type ReactDOMEventHandle = (
86 export type ReactDOMEventHandleListener = {|
87 callback: (SyntheticEvent<EventTarget>) => void,
88 capture: boolean,
89 - type: DOMTopLevelEventType,
89 + type: DOMEventName,
90 |};