@samitouri / QOS-React / commits / 2f9a9dc4c5

Remove keyMirror in TopLevelTypes (#7597)

This is the last callsite of keyMirror! It removes 0.5k gzipped :) The only trick with this one is that ReactTestUtils actually iterates over the list of all the events. Instead of duplicating the logic, I used the $Enum feature of flow that lets us statically extract out the type from the dynamic value. Inside of react-dom we're no longer requiring the file directly so it doesn't bloat the file size, and we still get to have static typing, best of both worlds!

Christopher Chedeau committed Aug 30, 2016 at 09:50 UTC 2f9a9dc4c56c1caee250626c54c587c5f233fcab
16 files changed +208 -253
src/renderers/dom/client/ReactBrowserEventEmitter.js
+15 -17
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPluginRegistry = require('EventPluginRegistry');
15 var ReactEventEmitterMixin = require('ReactEventEmitterMixin');
16 var ViewportMetrics = require('ViewportMetrics');
@@ -241,23 +240,22 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, {
240 var dependencies =
241 EventPluginRegistry.registrationNameDependencies[registrationName];
242
244 - var topLevelTypes = EventConstants.topLevelTypes;
243 for (var i = 0; i < dependencies.length; i++) {
244 var dependency = dependencies[i];
245 if (!(
246 isListening.hasOwnProperty(dependency) &&
247 isListening[dependency]
248 )) {
251 - if (dependency === topLevelTypes.topWheel) {
249 + if (dependency === 'topWheel') {
250 if (isEventSupported('wheel')) {
251 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
254 - topLevelTypes.topWheel,
252 + 'topWheel',
253 'wheel',
254 mountAt
255 );
256 } else if (isEventSupported('mousewheel')) {
257 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
260 - topLevelTypes.topWheel,
258 + 'topWheel',
259 'mousewheel',
260 mountAt
261 );
@@ -265,37 +263,37 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, {
263 // Firefox needs to capture a different mouse scroll event.
264 // @see http://www.quirksmode.org/dom/events/tests/scroll.html
265 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
268 - topLevelTypes.topWheel,
266 + 'topWheel',
267 'DOMMouseScroll',
268 mountAt
269 );
270 }
273 - } else if (dependency === topLevelTypes.topScroll) {
271 + } else if (dependency === 'topScroll') {
272
273 if (isEventSupported('scroll', true)) {
274 ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
277 - topLevelTypes.topScroll,
275 + 'topScroll',
276 'scroll',
277 mountAt
278 );
279 } else {
280 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
283 - topLevelTypes.topScroll,
281 + 'topScroll',
282 'scroll',
283 ReactBrowserEventEmitter.ReactEventListener.WINDOW_HANDLE
284 );
285 }
288 - } else if (dependency === topLevelTypes.topFocus ||
289 - dependency === topLevelTypes.topBlur) {
286 + } else if (dependency === 'topFocus' ||
287 + dependency === 'topBlur') {
288
289 if (isEventSupported('focus', true)) {
290 ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
293 - topLevelTypes.topFocus,
291 + 'topFocus',
292 'focus',
293 mountAt
294 );
295 ReactBrowserEventEmitter.ReactEventListener.trapCapturedEvent(
298 - topLevelTypes.topBlur,
296 + 'topBlur',
297 'blur',
298 mountAt
299 );
@@ -303,20 +301,20 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, {
301 // IE has `focusin` and `focusout` events which bubble.
302 // @see http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html
303 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
306 - topLevelTypes.topFocus,
304 + 'topFocus',
305 'focusin',
306 mountAt
307 );
308 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
311 - topLevelTypes.topBlur,
309 + 'topBlur',
310 'focusout',
311 mountAt
312 );
313 }
314
315 // to make sure blur and focus event listeners are only attached once
318 - isListening[topLevelTypes.topBlur] = true;
319 - isListening[topLevelTypes.topFocus] = true;
316 + isListening.topBlur = true;
317 + isListening.topFocus = true;
318 } else if (topEventMapping.hasOwnProperty(dependency)) {
319 ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
320 dependency,
src/renderers/dom/client/eventPlugins/BeforeInputEventPlugin.js
+42 -43
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPropagators = require('EventPropagators');
15 var ExecutionEnvironment = require('ExecutionEnvironment');
16 var FallbackCompositionState = require('FallbackCompositionState');
@@ -20,6 +19,8 @@ var SyntheticInputEvent = require('SyntheticInputEvent');
19
20 var keyOf = require('keyOf');
21
22 +import type { TopLevelTypes } from 'EventConstants';
23 +
24 var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
25 var START_KEYCODE = 229;
26
@@ -70,8 +71,6 @@ function isPresto() {
71 var SPACEBAR_CODE = 32;
72 var SPACEBAR_CHAR = String.fromCharCode(SPACEBAR_CODE);
73
73 -var topLevelTypes = EventConstants.topLevelTypes;
74 -
74 // Events and their corresponding property names.
75 var eventTypes = {
76 beforeInput: {
@@ -80,10 +79,10 @@ var eventTypes = {
79 captured: keyOf({onBeforeInputCapture: null}),
80 },
81 dependencies: [
83 - topLevelTypes.topCompositionEnd,
84 - topLevelTypes.topKeyPress,
85 - topLevelTypes.topTextInput,
86 - topLevelTypes.topPaste,
82 + 'topCompositionEnd',
83 + 'topKeyPress',
84 + 'topTextInput',
85 + 'topPaste',
86 ],
87 },
88 compositionEnd: {
@@ -92,12 +91,12 @@ var eventTypes = {
91 captured: keyOf({onCompositionEndCapture: null}),
92 },
93 dependencies: [
95 - topLevelTypes.topBlur,
96 - topLevelTypes.topCompositionEnd,
97 - topLevelTypes.topKeyDown,
98 - topLevelTypes.topKeyPress,
99 - topLevelTypes.topKeyUp,
100 - topLevelTypes.topMouseDown,
94 + 'topBlur',
95 + 'topCompositionEnd',
96 + 'topKeyDown',
97 + 'topKeyPress',
98 + 'topKeyUp',
99 + 'topMouseDown',
100 ],
101 },
102 compositionStart: {
@@ -106,12 +105,12 @@ var eventTypes = {
105 captured: keyOf({onCompositionStartCapture: null}),
106 },
107 dependencies: [
109 - topLevelTypes.topBlur,
110 - topLevelTypes.topCompositionStart,
111 - topLevelTypes.topKeyDown,
112 - topLevelTypes.topKeyPress,
113 - topLevelTypes.topKeyUp,
114 - topLevelTypes.topMouseDown,
108 + 'topBlur',
109 + 'topCompositionStart',
110 + 'topKeyDown',
111 + 'topKeyPress',
112 + 'topKeyUp',
113 + 'topMouseDown',
114 ],
115 },
116 compositionUpdate: {
@@ -120,12 +119,12 @@ var eventTypes = {
119 captured: keyOf({onCompositionUpdateCapture: null}),
120 },
121 dependencies: [
123 - topLevelTypes.topBlur,
124 - topLevelTypes.topCompositionUpdate,
125 - topLevelTypes.topKeyDown,
126 - topLevelTypes.topKeyPress,
127 - topLevelTypes.topKeyUp,
128 - topLevelTypes.topMouseDown,
122 + 'topBlur',
123 + 'topCompositionUpdate',
124 + 'topKeyDown',
125 + 'topKeyPress',
126 + 'topKeyUp',
127 + 'topMouseDown',
128 ],
129 },
130 };
@@ -155,11 +154,11 @@ function isKeypressCommand(nativeEvent) {
154 */
155 function getCompositionEventType(topLevelType) {
156 switch (topLevelType) {
158 - case topLevelTypes.topCompositionStart:
157 + case 'topCompositionStart':
158 return eventTypes.compositionStart;
160 - case topLevelTypes.topCompositionEnd:
159 + case 'topCompositionEnd':
160 return eventTypes.compositionEnd;
162 - case topLevelTypes.topCompositionUpdate:
161 + case 'topCompositionUpdate':
162 return eventTypes.compositionUpdate;
163 }
164 }
@@ -174,7 +173,7 @@ function getCompositionEventType(topLevelType) {
173 */
174 function isFallbackCompositionStart(topLevelType, nativeEvent) {
175 return (
177 - topLevelType === topLevelTypes.topKeyDown &&
176 + topLevelType === 'topKeyDown' &&
177 nativeEvent.keyCode === START_KEYCODE
178 );
179 }
@@ -188,16 +187,16 @@ function isFallbackCompositionStart(topLevelType, nativeEvent) {
187 */
188 function isFallbackCompositionEnd(topLevelType, nativeEvent) {
189 switch (topLevelType) {
191 - case topLevelTypes.topKeyUp:
190 + case 'topKeyUp':
191 // Command keys insert or clear IME input.
192 return (END_KEYCODES.indexOf(nativeEvent.keyCode) !== -1);
194 - case topLevelTypes.topKeyDown:
193 + case 'topKeyDown':
194 // Expect IME keyCode on each keydown. If we get any other
195 // code we must have exited earlier.
196 return (nativeEvent.keyCode !== START_KEYCODE);
198 - case topLevelTypes.topKeyPress:
199 - case topLevelTypes.topMouseDown:
200 - case topLevelTypes.topBlur:
197 + case 'topKeyPress':
198 + case 'topMouseDown':
199 + case 'topBlur':
200 // Events are not possible without cancelling IME.
201 return true;
202 default:
@@ -291,11 +290,11 @@ function extractCompositionEvent(
290 * @param {object} nativeEvent Native browser event.
291 * @return {?string} The string corresponding to this `beforeInput` event.
292 */
294 -function getNativeBeforeInputChars(topLevelType, nativeEvent) {
293 +function getNativeBeforeInputChars(topLevelType: TopLevelTypes, nativeEvent) {
294 switch (topLevelType) {
296 - case topLevelTypes.topCompositionEnd:
295 + case 'topCompositionEnd':
296 return getDataFromCustomEvent(nativeEvent);
298 - case topLevelTypes.topKeyPress:
297 + case 'topKeyPress':
298 /**
299 * If native `textInput` events are available, our goal is to make
300 * use of them. However, there is a special case: the spacebar key.
@@ -318,7 +317,7 @@ function getNativeBeforeInputChars(topLevelType, nativeEvent) {
317 hasSpaceKeypress = true;
318 return SPACEBAR_CHAR;
319
321 - case topLevelTypes.topTextInput:
320 + case 'topTextInput':
321 // Record the characters to be added to the DOM.
322 var chars = nativeEvent.data;
323
@@ -345,12 +344,12 @@ function getNativeBeforeInputChars(topLevelType, nativeEvent) {
344 * @param {object} nativeEvent Native browser event.
345 * @return {?string} The fallback string for this `beforeInput` event.
346 */
348 -function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
347 +function getFallbackBeforeInputChars(topLevelType: TopLevelTypes, nativeEvent) {
348 // If we are currently composing (IME) and using a fallback to do so,
349 // try to extract the composed characters from the fallback object.
350 if (currentComposition) {
351 if (
353 - topLevelType === topLevelTypes.topCompositionEnd ||
352 + topLevelType === 'topCompositionEnd' ||
353 isFallbackCompositionEnd(topLevelType, nativeEvent)
354 ) {
355 var chars = currentComposition.getData();
@@ -362,11 +361,11 @@ function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
361 }
362
363 switch (topLevelType) {
365 - case topLevelTypes.topPaste:
364 + case 'topPaste':
365 // If a paste event occurs after a keypress, throw out the input
366 // chars. Paste events should not lead to BeforeInput events.
367 return null;
369 - case topLevelTypes.topKeyPress:
368 + case 'topKeyPress':
369 /**
370 * As of v27, Firefox may fire keypress events even when no character
371 * will be inserted. A few possibilities:
@@ -387,7 +386,7 @@ function getFallbackBeforeInputChars(topLevelType, nativeEvent) {
386 return String.fromCharCode(nativeEvent.which);
387 }
388 return null;
390 - case topLevelTypes.topCompositionEnd:
389 + case 'topCompositionEnd':
390 return useFallbackCompositionData ? null : nativeEvent.data;
391 default:
392 return null;
src/renderers/dom/client/eventPlugins/ChangeEventPlugin.js
+19 -22
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPluginHub = require('EventPluginHub');
15 var EventPropagators = require('EventPropagators');
16 var ExecutionEnvironment = require('ExecutionEnvironment');
@@ -25,8 +24,6 @@ var isEventSupported = require('isEventSupported');
24 var isTextInputElement = require('isTextInputElement');
25 var keyOf = require('keyOf');
26
28 -var topLevelTypes = EventConstants.topLevelTypes;
29 -
27
28 var eventTypes = {
29 change: {
@@ -35,14 +32,14 @@ var eventTypes = {
32 captured: keyOf({onChangeCapture: null}),
33 },
34 dependencies: [
38 - topLevelTypes.topBlur,
39 - topLevelTypes.topChange,
40 - topLevelTypes.topClick,
41 - topLevelTypes.topFocus,
42 - topLevelTypes.topInput,
43 - topLevelTypes.topKeyDown,
44 - topLevelTypes.topKeyUp,
45 - topLevelTypes.topSelectionChange,
35 + 'topBlur',
36 + 'topChange',
37 + 'topClick',
38 + 'topFocus',
39 + 'topInput',
40 + 'topKeyDown',
41 + 'topKeyUp',
42 + 'topSelectionChange',
43 ],
44 },
45 };
@@ -136,7 +133,7 @@ function getTargetInstForChangeEvent(
133 topLevelType,
134 targetInst
135 ) {
139 - if (topLevelType === topLevelTypes.topChange) {
136 + if (topLevelType === 'topChange') {
137 return targetInst;
138 }
139 }
@@ -146,12 +143,12 @@ function handleEventsForChangeEventIE8(
143 target,
144 targetInst
145 ) {
149 - if (topLevelType === topLevelTypes.topFocus) {
146 + if (topLevelType === 'topFocus') {
147 // stopWatching() should be a noop here but we call it just in case we
148 // missed a blur event somehow.
149 stopWatchingForChangeEventIE8();
150 startWatchingForChangeEventIE8(target, targetInst);
154 - } else if (topLevelType === topLevelTypes.topBlur) {
151 + } else if (topLevelType === 'topBlur') {
152 stopWatchingForChangeEventIE8();
153 }
154 }
@@ -212,7 +209,7 @@ function handleEventsForInputEventPolyfill(
209 target,
210 targetInst
211 ) {
215 - if (topLevelType === topLevelTypes.topFocus) {
212 + if (topLevelType === 'topFocus') {
213 // In IE8, we can capture almost all .value changes by adding a
214 // propertychange handler and looking for events with propertyName
215 // equal to 'value'
@@ -228,7 +225,7 @@ function handleEventsForInputEventPolyfill(
225 // missed a blur event somehow.
226 stopWatchingForValueChange();
227 startWatchingForValueChange(target, targetInst);
231 - } else if (topLevelType === topLevelTypes.topBlur) {
228 + } else if (topLevelType === 'topBlur') {
229 stopWatchingForValueChange();
230 }
231 }
@@ -238,9 +235,9 @@ function getTargetInstForInputEventPolyfill(
235 topLevelType,
236 targetInst
237 ) {
241 - if (topLevelType === topLevelTypes.topSelectionChange ||
242 - topLevelType === topLevelTypes.topKeyUp ||
243 - topLevelType === topLevelTypes.topKeyDown) {
238 + if (topLevelType === 'topSelectionChange' ||
239 + topLevelType === 'topKeyUp' ||
240 + topLevelType === 'topKeyDown') {
241 // On the selectionchange event, the target is just document which isn't
242 // helpful for us so just check activeElement instead.
243 //
@@ -274,7 +271,7 @@ function getTargetInstForClickEvent(
271 topLevelType,
272 targetInst
273 ) {
277 - if (topLevelType === topLevelTypes.topClick) {
274 + if (topLevelType === 'topClick') {
275 return getInstIfValueChanged(targetInst);
276 }
277 }
@@ -284,8 +281,8 @@ function getTargetInstForInputOrChangeEvent(
281 targetInst
282 ) {
283 if (
287 - topLevelType === topLevelTypes.topInput ||
288 - topLevelType === topLevelTypes.topChange
284 + topLevelType === 'topInput' ||
285 + topLevelType === 'topChange'
286 ) {
287 return getInstIfValueChanged(targetInst);
288 }
src/renderers/dom/client/eventPlugins/EnterLeaveEventPlugin.js
+8 -11
@@ -11,28 +11,25 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPropagators = require('EventPropagators');
15 var ReactDOMComponentTree = require('ReactDOMComponentTree');
16 var SyntheticMouseEvent = require('SyntheticMouseEvent');
17
18 var keyOf = require('keyOf');
19
21 -var topLevelTypes = EventConstants.topLevelTypes;
22 -
20 var eventTypes = {
21 mouseEnter: {
22 registrationName: keyOf({onMouseEnter: null}),
23 dependencies: [
27 - topLevelTypes.topMouseOut,
28 - topLevelTypes.topMouseOver,
24 + 'topMouseOut',
25 + 'topMouseOver',
26 ],
27 },
28 mouseLeave: {
29 registrationName: keyOf({onMouseLeave: null}),
30 dependencies: [
34 - topLevelTypes.topMouseOut,
35 - topLevelTypes.topMouseOver,
31 + 'topMouseOut',
32 + 'topMouseOver',
33 ],
34 },
35 };
@@ -54,12 +51,12 @@ var EnterLeaveEventPlugin = {
51 nativeEvent,
52 nativeEventTarget
53 ) {
57 - if (topLevelType === topLevelTypes.topMouseOver &&
54 + if (topLevelType === 'topMouseOver' &&
55 (nativeEvent.relatedTarget || nativeEvent.fromElement)) {
56 return null;
57 }
61 - if (topLevelType !== topLevelTypes.topMouseOut &&
62 - topLevelType !== topLevelTypes.topMouseOver) {
58 + if (topLevelType !== 'topMouseOut' &&
59 + topLevelType !== 'topMouseOver') {
60 // Must not be a mouse in or mouse out - ignoring.
61 return null;
62 }
@@ -80,7 +77,7 @@ var EnterLeaveEventPlugin = {
77
78 var from;
79 var to;
83 - if (topLevelType === topLevelTypes.topMouseOut) {
80 + if (topLevelType === 'topMouseOut') {
81 from = targetInst;
82 var related = nativeEvent.relatedTarget || nativeEvent.toElement;
83 to = related ?
src/renderers/dom/client/eventPlugins/SelectEventPlugin.js
+16 -19
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPropagators = require('EventPropagators');
15 var ExecutionEnvironment = require('ExecutionEnvironment');
16 var ReactDOMComponentTree = require('ReactDOMComponentTree');
@@ -23,8 +22,6 @@ var isTextInputElement = require('isTextInputElement');
22 var keyOf = require('keyOf');
23 var shallowEqual = require('shallowEqual');
24
26 -var topLevelTypes = EventConstants.topLevelTypes;
27 -
25 var skipSelectionChangeEvent = (
26 ExecutionEnvironment.canUseDOM &&
27 'documentMode' in document &&
@@ -38,14 +35,14 @@ var eventTypes = {
35 captured: keyOf({onSelectCapture: null}),
36 },
37 dependencies: [
41 - topLevelTypes.topBlur,
42 - topLevelTypes.topContextMenu,
43 - topLevelTypes.topFocus,
44 - topLevelTypes.topKeyDown,
45 - topLevelTypes.topKeyUp,
46 - topLevelTypes.topMouseDown,
47 - topLevelTypes.topMouseUp,
48 - topLevelTypes.topSelectionChange,
38 + 'topBlur',
39 + 'topContextMenu',
40 + 'topFocus',
41 + 'topKeyDown',
42 + 'topKeyUp',
43 + 'topMouseDown',
44 + 'topMouseUp',
45 + 'topSelectionChange',
46 ],
47 },
48 };
@@ -168,7 +165,7 @@ var SelectEventPlugin = {
165
166 switch (topLevelType) {
167 // Track the input node that has focus.
171 - case topLevelTypes.topFocus:
168 + case 'topFocus':
169 if (isTextInputElement(targetNode) ||
170 targetNode.contentEditable === 'true') {
171 activeElement = targetNode;
@@ -176,7 +173,7 @@ var SelectEventPlugin = {
173 lastSelection = null;
174 }
175 break;
179 - case topLevelTypes.topBlur:
176 + case 'topBlur':
177 activeElement = null;
178 activeElementInst = null;
179 lastSelection = null;
@@ -184,11 +181,11 @@ var SelectEventPlugin = {
181
182 // Don't fire the event while the user is dragging. This matches the
183 // semantics of the native select event.
187 - case topLevelTypes.topMouseDown:
184 + case 'topMouseDown':
185 mouseDown = true;
186 break;
190 - case topLevelTypes.topContextMenu:
191 - case topLevelTypes.topMouseUp:
187 + case 'topContextMenu':
188 + case 'topMouseUp':
189 mouseDown = false;
190 return constructSelectEvent(nativeEvent, nativeEventTarget);
191
@@ -201,13 +198,13 @@ var SelectEventPlugin = {
198 // keyup, but we check on keydown as well in the case of holding down a
199 // key, when multiple keydown events are fired but only one keyup is.
200 // This is also our approach for IE handling, for the reason above.
204 - case topLevelTypes.topSelectionChange:
201 + case 'topSelectionChange':
202 if (skipSelectionChangeEvent) {
203 break;
204 }
205 // falls through
209 - case topLevelTypes.topKeyDown:
210 - case topLevelTypes.topKeyUp:
206 + case 'topKeyDown':
207 + case 'topKeyUp':
208 return constructSelectEvent(nativeEvent, nativeEventTarget);
209 }
210
src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js
+62 -65
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventListener = require('EventListener');
15 var EventPropagators = require('EventPropagators');
16 var ReactDOMComponentTree = require('ReactDOMComponentTree');
@@ -32,8 +31,6 @@ var getEventCharCode = require('getEventCharCode');
31 var invariant = require('invariant');
32 var keyOf = require('keyOf');
33
35 -var topLevelTypes = EventConstants.topLevelTypes;
36 -
34 var eventTypes = {
35 abort: {
36 phasedRegistrationNames: {
@@ -505,39 +502,39 @@ var SimpleEventPlugin = {
502 }
503 var EventConstructor;
504 switch (topLevelType) {
508 - case topLevelTypes.topAbort:
509 - case topLevelTypes.topCanPlay:
510 - case topLevelTypes.topCanPlayThrough:
511 - case topLevelTypes.topDurationChange:
512 - case topLevelTypes.topEmptied:
513 - case topLevelTypes.topEncrypted:
514 - case topLevelTypes.topEnded:
515 - case topLevelTypes.topError:
516 - case topLevelTypes.topInput:
517 - case topLevelTypes.topInvalid:
518 - case topLevelTypes.topLoad:
519 - case topLevelTypes.topLoadedData:
520 - case topLevelTypes.topLoadedMetadata:
521 - case topLevelTypes.topLoadStart:
522 - case topLevelTypes.topPause:
523 - case topLevelTypes.topPlay:
524 - case topLevelTypes.topPlaying:
525 - case topLevelTypes.topProgress:
526 - case topLevelTypes.topRateChange:
527 - case topLevelTypes.topReset:
528 - case topLevelTypes.topSeeked:
529 - case topLevelTypes.topSeeking:
530 - case topLevelTypes.topStalled:
531 - case topLevelTypes.topSubmit:
532 - case topLevelTypes.topSuspend:
533 - case topLevelTypes.topTimeUpdate:
534 - case topLevelTypes.topVolumeChange:
535 - case topLevelTypes.topWaiting:
505 + case 'topAbort':
506 + case 'topCanPlay':
507 + case 'topCanPlayThrough':
508 + case 'topDurationChange':
509 + case 'topEmptied':
510 + case 'topEncrypted':
511 + case 'topEnded':
512 + case 'topError':
513 + case 'topInput':
514 + case 'topInvalid':
515 + case 'topLoad':
516 + case 'topLoadedData':
517 + case 'topLoadedMetadata':
518 + case 'topLoadStart':
519 + case 'topPause':
520 + case 'topPlay':
521 + case 'topPlaying':
522 + case 'topProgress':
523 + case 'topRateChange':
524 + case 'topReset':
525 + case 'topSeeked':
526 + case 'topSeeking':
527 + case 'topStalled':
528 + case 'topSubmit':
529 + case 'topSuspend':
530 + case 'topTimeUpdate':
531 + case 'topVolumeChange':
532 + case 'topWaiting':
533 // HTML Events
534 // @see http://www.w3.org/TR/html5/index.html#events-0
535 EventConstructor = SyntheticEvent;
536 break;
540 - case topLevelTypes.topKeyPress:
537 + case 'topKeyPress':
538 // Firefox creates a keypress event for function keys too. This removes
539 // the unwanted keypress events. Enter is however both printable and
540 // non-printable. One would expect Tab to be as well (but it isn't).
@@ -545,63 +542,63 @@ var SimpleEventPlugin = {
542 return null;
543 }
544 /* falls through */
548 - case topLevelTypes.topKeyDown:
549 - case topLevelTypes.topKeyUp:
545 + case 'topKeyDown':
546 + case 'topKeyUp':
547 EventConstructor = SyntheticKeyboardEvent;
548 break;
552 - case topLevelTypes.topBlur:
553 - case topLevelTypes.topFocus:
549 + case 'topBlur':
550 + case 'topFocus':
551 EventConstructor = SyntheticFocusEvent;
552 break;
556 - case topLevelTypes.topClick:
553 + case 'topClick':
554 // Firefox creates a click event on right mouse clicks. This removes the
555 // unwanted click events.
556 if (nativeEvent.button === 2) {
557 return null;
558 }
559 /* falls through */
563 - case topLevelTypes.topContextMenu:
564 - case topLevelTypes.topDoubleClick:
565 - case topLevelTypes.topMouseDown:
566 - case topLevelTypes.topMouseMove:
567 - case topLevelTypes.topMouseOut:
568 - case topLevelTypes.topMouseOver:
569 - case topLevelTypes.topMouseUp:
560 + case 'topContextMenu':
561 + case 'topDoubleClick':
562 + case 'topMouseDown':
563 + case 'topMouseMove':
564 + case 'topMouseOut':
565 + case 'topMouseOver':
566 + case 'topMouseUp':
567 EventConstructor = SyntheticMouseEvent;
568 break;
572 - case topLevelTypes.topDrag:
573 - case topLevelTypes.topDragEnd:
574 - case topLevelTypes.topDragEnter:
575 - case topLevelTypes.topDragExit:
576 - case topLevelTypes.topDragLeave:
577 - case topLevelTypes.topDragOver:
578 - case topLevelTypes.topDragStart:
579 - case topLevelTypes.topDrop:
569 + case 'topDrag':
570 + case 'topDragEnd':
571 + case 'topDragEnter':
572 + case 'topDragExit':
573 + case 'topDragLeave':
574 + case 'topDragOver':
575 + case 'topDragStart':
576 + case 'topDrop':
577 EventConstructor = SyntheticDragEvent;
578 break;
582 - case topLevelTypes.topTouchCancel:
583 - case topLevelTypes.topTouchEnd:
584 - case topLevelTypes.topTouchMove:
585 - case topLevelTypes.topTouchStart:
579 + case 'topTouchCancel':
580 + case 'topTouchEnd':
581 + case 'topTouchMove':
582 + case 'topTouchStart':
583 EventConstructor = SyntheticTouchEvent;
584 break;
588 - case topLevelTypes.topAnimationEnd:
589 - case topLevelTypes.topAnimationIteration:
590 - case topLevelTypes.topAnimationStart:
585 + case 'topAnimationEnd':
586 + case 'topAnimationIteration':
587 + case 'topAnimationStart':
588 EventConstructor = SyntheticAnimationEvent;
589 break;
593 - case topLevelTypes.topTransitionEnd:
590 + case 'topTransitionEnd':
591 EventConstructor = SyntheticTransitionEvent;
592 break;
596 - case topLevelTypes.topScroll:
593 + case 'topScroll':
594 EventConstructor = SyntheticUIEvent;
595 break;
599 - case topLevelTypes.topWheel:
596 + case 'topWheel':
597 EventConstructor = SyntheticWheelEvent;
598 break;
602 - case topLevelTypes.topCopy:
603 - case topLevelTypes.topCut:
604 - case topLevelTypes.topPaste:
599 + case 'topCopy':
600 + case 'topCut':
601 + case 'topPaste':
602 EventConstructor = SyntheticClipboardEvent;
603 break;
604 }
src/renderers/dom/client/eventPlugins/TapEventPlugin.js
+7 -9
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPluginUtils = require('EventPluginUtils');
15 var EventPropagators = require('EventPropagators');
16 var SyntheticUIEvent = require('SyntheticUIEvent');
@@ -19,7 +18,6 @@ var TouchEventUtils = require('TouchEventUtils');
18 var ViewportMetrics = require('ViewportMetrics');
19
20 var keyOf = require('keyOf');
22 -var topLevelTypes = EventConstants.topLevelTypes;
21
22 var isStartish = EventPluginUtils.isStartish;
23 var isEndish = EventPluginUtils.isEndish;
@@ -56,16 +54,16 @@ function getDistance(coords, nativeEvent) {
54 }
55
56 var touchEvents = [
59 - topLevelTypes.topTouchStart,
60 - topLevelTypes.topTouchCancel,
61 - topLevelTypes.topTouchEnd,
62 - topLevelTypes.topTouchMove,
57 + 'topTouchStart',
58 + 'topTouchCancel',
59 + 'topTouchEnd',
60 + 'topTouchMove',
61 ];
62
63 var dependencies = [
66 - topLevelTypes.topMouseDown,
67 - topLevelTypes.topMouseMove,
68 - topLevelTypes.topMouseUp,
64 + 'topMouseDown',
65 + 'topMouseMove',
66 + 'topMouseUp',
67 ].concat(touchEvents);
68
69 var eventTypes = {
src/renderers/dom/client/eventPlugins/__tests__/EnterLeaveEventPlugin-test.js
+1 -7
@@ -12,24 +12,18 @@
12 'use strict';
13
14 var EnterLeaveEventPlugin;
15 -var EventConstants;
15 var React;
16 var ReactDOM;
17 var ReactDOMComponentTree;
18
20 -var topLevelTypes;
21 -
19 describe('EnterLeaveEventPlugin', function() {
20 beforeEach(function() {
21 jest.resetModuleRegistry();
22
23 EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
27 - EventConstants = require('EventConstants');
24 React = require('React');
25 ReactDOM = require('ReactDOM');
26 ReactDOMComponentTree = require('ReactDOMComponentTree');
31 -
32 - topLevelTypes = EventConstants.topLevelTypes;
27 });
28
29 it('should set relatedTarget properly in iframe', function() {
@@ -47,7 +41,7 @@ describe('EnterLeaveEventPlugin', function() {
41 var div = ReactDOM.findDOMNode(component);
42
43 var extracted = EnterLeaveEventPlugin.extractEvents(
50 - topLevelTypes.topMouseOver,
44 + 'topMouseOver',
45 ReactDOMComponentTree.getInstanceFromNode(div),
46 {target: div},
47 div
src/renderers/dom/client/eventPlugins/__tests__/SelectEventPlugin-test.js
+5 -11
@@ -11,15 +11,12 @@
11
12 'use strict';
13
14 -var EventConstants;
14 var React;
15 var ReactDOM;
16 var ReactDOMComponentTree;
17 var ReactTestUtils;
18 var SelectEventPlugin;
19
21 -var topLevelTypes;
22 -
20 describe('SelectEventPlugin', function() {
21 function extract(node, topLevelEvent) {
22 return SelectEventPlugin.extractEvents(
@@ -31,14 +28,11 @@ describe('SelectEventPlugin', function() {
28 }
29
30 beforeEach(function() {
34 - EventConstants = require('EventConstants');
31 React = require('React');
32 ReactDOM = require('ReactDOM');
33 ReactDOMComponentTree = require('ReactDOMComponentTree');
34 ReactTestUtils = require('ReactTestUtils');
35 SelectEventPlugin = require('SelectEventPlugin');
40 -
41 - topLevelTypes = EventConstants.topLevelTypes;
36 });
37
38 it('should skip extraction if no listeners are present', function() {
@@ -52,10 +46,10 @@ describe('SelectEventPlugin', function() {
46 var node = ReactDOM.findDOMNode(rendered);
47 node.focus();
48
55 - var mousedown = extract(node, topLevelTypes.topMouseDown);
49 + var mousedown = extract(node, 'topMouseDown');
50 expect(mousedown).toBe(null);
51
58 - var mouseup = extract(node, topLevelTypes.topMouseUp);
52 + var mouseup = extract(node, 'topMouseUp');
53 expect(mouseup).toBe(null);
54 });
55
@@ -77,13 +71,13 @@ describe('SelectEventPlugin', function() {
71 node.selectionEnd = 0;
72 node.focus();
73
80 - var focus = extract(node, topLevelTypes.topFocus);
74 + var focus = extract(node, 'topFocus');
75 expect(focus).toBe(null);
76
83 - var mousedown = extract(node, topLevelTypes.topMouseDown);
77 + var mousedown = extract(node, 'topMouseDown');
78 expect(mousedown).toBe(null);
79
86 - var mouseup = extract(node, topLevelTypes.topMouseUp);
80 + var mouseup = extract(node, 'topMouseUp');
81 expect(mouseup).not.toBe(null);
82 expect(typeof mouseup).toBe('object');
83 expect(mouseup.type).toBe('select');
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+1 -3
@@ -15,7 +15,6 @@
15 var emptyFunction = require('emptyFunction');
16
17 describe('ReactDOMInput', function() {
18 - var EventConstants;
18 var React;
19 var ReactDOM;
20 var ReactDOMServer;
@@ -33,7 +32,6 @@ describe('ReactDOMInput', function() {
32
33 beforeEach(function() {
34 jest.resetModuleRegistry();
36 - EventConstants = require('EventConstants');
35 React = require('React');
36 ReactDOM = require('ReactDOM');
37 ReactDOMServer = require('ReactDOMServer');
@@ -273,7 +271,7 @@ describe('ReactDOMInput', function() {
271 fakeNativeEvent.target = node;
272 fakeNativeEvent.path = [node, container];
273 ReactTestUtils.simulateNativeEventOnNode(
276 - EventConstants.topLevelTypes.topInput,
274 + 'topInput',
275 node,
276 fakeNativeEvent
277 );
src/renderers/dom/shared/ReactDOMComponent.js
+8 -9
@@ -19,7 +19,6 @@ var DOMLazyTree = require('DOMLazyTree');
19 var DOMNamespaces = require('DOMNamespaces');
20 var DOMProperty = require('DOMProperty');
21 var DOMPropertyOperations = require('DOMPropertyOperations');
22 -var EventConstants = require('EventConstants');
22 var EventPluginHub = require('EventPluginHub');
23 var EventPluginRegistry = require('EventPluginRegistry');
24 var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
@@ -331,7 +330,7 @@ function trapBubbledEventsLocal() {
330 case 'object':
331 inst._wrapperState.listeners = [
332 ReactBrowserEventEmitter.trapBubbledEvent(
334 - EventConstants.topLevelTypes.topLoad,
333 + 'topLoad',
334 'load',
335 node
336 ),
@@ -346,7 +345,7 @@ function trapBubbledEventsLocal() {
345 if (mediaEvents.hasOwnProperty(event)) {
346 inst._wrapperState.listeners.push(
347 ReactBrowserEventEmitter.trapBubbledEvent(
349 - EventConstants.topLevelTypes[event],
348 + event,
349 mediaEvents[event],
350 node
351 )
@@ -357,7 +356,7 @@ function trapBubbledEventsLocal() {
356 case 'source':
357 inst._wrapperState.listeners = [
358 ReactBrowserEventEmitter.trapBubbledEvent(
360 - EventConstants.topLevelTypes.topError,
359 + 'topError',
360 'error',
361 node
362 ),
@@ -366,12 +365,12 @@ function trapBubbledEventsLocal() {
365 case 'img':
366 inst._wrapperState.listeners = [
367 ReactBrowserEventEmitter.trapBubbledEvent(
369 - EventConstants.topLevelTypes.topError,
368 + 'topError',
369 'error',
370 node
371 ),
372 ReactBrowserEventEmitter.trapBubbledEvent(
374 - EventConstants.topLevelTypes.topLoad,
373 + 'topLoad',
374 'load',
375 node
376 ),
@@ -380,12 +379,12 @@ function trapBubbledEventsLocal() {
379 case 'form':
380 inst._wrapperState.listeners = [
381 ReactBrowserEventEmitter.trapBubbledEvent(
383 - EventConstants.topLevelTypes.topReset,
382 + 'topReset',
383 'reset',
384 node
385 ),
386 ReactBrowserEventEmitter.trapBubbledEvent(
388 - EventConstants.topLevelTypes.topSubmit,
387 + 'topSubmit',
388 'submit',
389 node
390 ),
@@ -396,7 +395,7 @@ function trapBubbledEventsLocal() {
395 case 'textarea':
396 inst._wrapperState.listeners = [
397 ReactBrowserEventEmitter.trapBubbledEvent(
399 - EventConstants.topLevelTypes.topInvalid,
398 + 'topInvalid',
399 'invalid',
400 node
401 ),
src/renderers/native/ReactNativeEventEmitter.js
+2 -5
@@ -11,7 +11,6 @@
11 */
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPluginHub = require('EventPluginHub');
15 var EventPluginRegistry = require('EventPluginRegistry');
16 var ReactEventEmitterMixin = require('ReactEventEmitterMixin');
@@ -21,8 +20,6 @@ var ReactUpdates = require('ReactUpdates');
20
21 var warning = require('warning');
22
24 -var topLevelTypes = EventConstants.topLevelTypes;
25 -
23 /**
24 * Version of `ReactBrowserEventEmitter` that works on the receiving side of a
25 * serialized worker boundary.
@@ -186,8 +183,8 @@ var ReactNativeEventEmitter = {
183 changedIndices: Array<number>
184 ) {
185 var changedTouches =
189 - eventTopLevelType === topLevelTypes.topTouchEnd ||
190 - eventTopLevelType === topLevelTypes.topTouchCancel ?
186 + eventTopLevelType === 'topTouchEnd' ||
187 + eventTopLevelType === 'topTouchCancel' ?
188 removeTouchesAtIndices(touches, changedIndices) :
189 touchSubsequence(touches, changedIndices);
190
src/renderers/shared/stack/event/EventConstants.js
+5 -5
@@ -11,14 +11,12 @@
11
12 'use strict';
13
14 -var keyMirror = require('keyMirror');
15 -
14 export type PropagationPhases = 'bubbled' | 'captured';
15
16 /**
17 * Types of raw signals from the browser caught at the top level.
18 */
21 -var topLevelTypes = keyMirror({
19 +var topLevelTypes = {
20 topAbort: null,
21 topAnimationEnd: null,
22 topAnimationIteration: null,
@@ -87,10 +85,12 @@ var topLevelTypes = keyMirror({
85 topVolumeChange: null,
86 topWaiting: null,
87 topWheel: null,
90 -});
88 +};
89 +
90 +export type TopLevelTypes = $Enum<typeof topLevelTypes>;
91
92 var EventConstants = {
93 - topLevelTypes: topLevelTypes,
93 + topLevelTypes,
94 };
95
96 module.exports = EventConstants;
src/renderers/shared/stack/event/EventPluginUtils.js
+7 -10
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var ReactErrorUtils = require('ReactErrorUtils');
15
16 var invariant = require('invariant');
@@ -52,21 +51,19 @@ var injection = {
51 },
52 };
53
55 -var topLevelTypes = EventConstants.topLevelTypes;
56 -
54 function isEndish(topLevelType) {
58 - return topLevelType === topLevelTypes.topMouseUp ||
59 - topLevelType === topLevelTypes.topTouchEnd ||
60 - topLevelType === topLevelTypes.topTouchCancel;
55 + return topLevelType === 'topMouseUp' ||
56 + topLevelType === 'topTouchEnd' ||
57 + topLevelType === 'topTouchCancel';
58 }
59
60 function isMoveish(topLevelType) {
64 - return topLevelType === topLevelTypes.topMouseMove ||
65 - topLevelType === topLevelTypes.topTouchMove;
61 + return topLevelType === 'topMouseMove' ||
62 + topLevelType === 'topTouchMove';
63 }
64 function isStartish(topLevelType) {
68 - return topLevelType === topLevelTypes.topMouseDown ||
69 - topLevelType === topLevelTypes.topTouchStart;
65 + return topLevelType === 'topMouseDown' ||
66 + topLevelType === 'topTouchStart';
67 }
68
69
src/renderers/shared/stack/event/eventPlugins/ResponderEventPlugin.js
+4 -5
@@ -11,7 +11,6 @@
11
12 'use strict';
13
14 -var EventConstants = require('EventConstants');
14 var EventPluginUtils = require('EventPluginUtils');
15 var EventPropagators = require('EventPropagators');
16 var ResponderSyntheticEvent = require('ResponderSyntheticEvent');
@@ -326,7 +325,7 @@ function setResponderAndExtractTransfer(
325 var shouldSetEventType =
326 isStartish(topLevelType) ? eventTypes.startShouldSetResponder :
327 isMoveish(topLevelType) ? eventTypes.moveShouldSetResponder :
329 - topLevelType === EventConstants.topLevelTypes.topSelectionChange ?
328 + topLevelType === 'topSelectionChange' ?
329 eventTypes.selectionChangeShouldSetResponder :
330 eventTypes.scrollShouldSetResponder;
331
@@ -429,10 +428,10 @@ function canTriggerTransfer(topLevelType, topLevelInst, nativeEvent) {
428 // responderIgnoreScroll: We are trying to migrate away from specifically
429 // tracking native scroll events here and responderIgnoreScroll indicates we
430 // will send topTouchCancel to handle canceling touch events instead
432 - (topLevelType === EventConstants.topLevelTypes.topScroll &&
431 + (topLevelType === 'topScroll' &&
432 !nativeEvent.responderIgnoreScroll) ||
433 (trackedTouchCount > 0 &&
435 - topLevelType === EventConstants.topLevelTypes.topSelectionChange) ||
434 + topLevelType === 'topSelectionChange') ||
435 isStartish(topLevelType) ||
436 isMoveish(topLevelType)
437 );
@@ -541,7 +540,7 @@ var ResponderEventPlugin = {
540
541 var isResponderTerminate =
542 responderInst &&
544 - topLevelType === EventConstants.topLevelTypes.topTouchCancel;
543 + topLevelType === 'topTouchCancel';
544 var isResponderRelease =
545 responderInst &&
546 !isResponderTerminate &&
src/renderers/shared/stack/event/eventPlugins/__tests__/ResponderEventPlugin-test.js
+6 -12
@@ -12,13 +12,10 @@
12 'use strict';
13
14 var EventPluginHub;
15 -var EventConstants;
15 var ReactInstanceHandles;
16 var ResponderEventPlugin;
17 var EventPluginUtils;
18
20 -var topLevelTypes;
21 -
19 var touch = function(nodeHandle, i) {
20 return {target: nodeHandle, identifier: i};
21 };
@@ -108,7 +105,7 @@ var _touchConfig = function(
105 */
106 var startConfig = function(nodeHandle, allTouchHandles, changedIndices) {
107 return _touchConfig(
111 - topLevelTypes.topTouchStart,
108 + 'topTouchStart',
109 nodeHandle,
110 allTouchHandles,
111 changedIndices,
@@ -121,7 +118,7 @@ var startConfig = function(nodeHandle, allTouchHandles, changedIndices) {
118 */
119 var moveConfig = function(nodeHandle, allTouchHandles, changedIndices) {
120 return _touchConfig(
124 - topLevelTypes.topTouchMove,
121 + 'topTouchMove',
122 nodeHandle,
123 allTouchHandles,
124 changedIndices,
@@ -134,7 +131,7 @@ var moveConfig = function(nodeHandle, allTouchHandles, changedIndices) {
131 */
132 var endConfig = function(nodeHandle, allTouchHandles, changedIndices) {
133 return _touchConfig(
137 - topLevelTypes.topTouchEnd,
134 + 'topTouchEnd',
135 nodeHandle,
136 allTouchHandles,
137 changedIndices,
@@ -334,7 +331,6 @@ describe('ResponderEventPlugin', function() {
331 beforeEach(function() {
332 jest.resetModuleRegistry();
333
337 - EventConstants = require('EventConstants');
334 EventPluginHub = require('EventPluginHub');
335 EventPluginUtils = require('EventPluginUtils');
336 ReactInstanceHandles = require('ReactInstanceHandles');
@@ -380,8 +376,6 @@ describe('ResponderEventPlugin', function() {
376 );
377 },
378 });
383 -
384 - topLevelTypes = EventConstants.topLevelTypes;
379 });
380
381 it('should do nothing when no one wants to respond', function() {
@@ -953,7 +947,7 @@ describe('ResponderEventPlugin', function() {
947 config.responderReject.parent = {order: 5};
948
949 run(config, three, {
956 - topLevelType: topLevelTypes.topScroll,
950 + topLevelType: 'topScroll',
951 targetInst: idToInstance[three.parent],
952 nativeEvent: {},
953 });
@@ -970,7 +964,7 @@ describe('ResponderEventPlugin', function() {
964 config.responderTerminate.child = {order: 5};
965
966 run(config, three, {
973 - topLevelType: topLevelTypes.topScroll,
967 + topLevelType: 'topScroll',
968 targetInst: idToInstance[three.parent],
969 nativeEvent: {},
970 });
@@ -997,7 +991,7 @@ describe('ResponderEventPlugin', function() {
991 config.responderTerminate.child = {order: 1};
992
993 var nativeEvent = _touchConfig(
1000 - topLevelTypes.topTouchCancel,
994 + 'topTouchCancel',
995 three.child,
996 [three.child],
997 [0]