Consolidate events between EventConstants and BrowserEventEmitter

src/renderers/dom/shared/ReactBrowserEventEmitter.js

@@ -14,8 +14,8 @@
 var EventPluginRegistry = require('EventPluginRegistry');
 var ReactEventEmitterMixin = require('ReactEventEmitterMixin');
 
-var getVendorPrefixedEventName = require('getVendorPrefixedEventName');
 var isEventSupported = require('isEventSupported');
+var {topLevelTypes} = require('BrowserEventConstants');
 
 /**
  * Summary of `ReactBrowserEventEmitter` event handling:
@@ -75,82 +75,6 @@ var isEventSupported = require('isEventSupported');
 var alreadyListeningTo = {};
 var reactTopListenersCounter = 0;
 
-// For events like 'submit' which don't consistently bubble (which we trap at a
-// lower node than `document`), binding at `document` would cause duplicate
-// events so we don't include them here
-var topEventMapping = {
-  topAbort: 'abort',
-  topAnimationEnd: getVendorPrefixedEventName('animationend') || 'animationend',
-  topAnimationIteration: getVendorPrefixedEventName('animationiteration') ||
-    'animationiteration',
-  topAnimationStart: getVendorPrefixedEventName('animationstart') ||
-    'animationstart',
-  topBlur: 'blur',
-  topCancel: 'cancel',
-  topCanPlay: 'canplay',
-  topCanPlayThrough: 'canplaythrough',
-  topChange: 'change',
-  topClick: 'click',
-  topClose: 'close',
-  topCompositionEnd: 'compositionend',
-  topCompositionStart: 'compositionstart',
-  topCompositionUpdate: 'compositionupdate',
-  topContextMenu: 'contextmenu',
-  topCopy: 'copy',
-  topCut: 'cut',
-  topDoubleClick: 'dblclick',
-  topDrag: 'drag',
-  topDragEnd: 'dragend',
-  topDragEnter: 'dragenter',
-  topDragExit: 'dragexit',
-  topDragLeave: 'dragleave',
-  topDragOver: 'dragover',
-  topDragStart: 'dragstart',
-  topDrop: 'drop',
-  topDurationChange: 'durationchange',
-  topEmptied: 'emptied',
-  topEncrypted: 'encrypted',
-  topEnded: 'ended',
-  topError: 'error',
-  topFocus: 'focus',
-  topInput: 'input',
-  topKeyDown: 'keydown',
-  topKeyPress: 'keypress',
-  topKeyUp: 'keyup',
-  topLoadedData: 'loadeddata',
-  topLoadedMetadata: 'loadedmetadata',
-  topLoadStart: 'loadstart',
-  topMouseDown: 'mousedown',
-  topMouseMove: 'mousemove',
-  topMouseOut: 'mouseout',
-  topMouseOver: 'mouseover',
-  topMouseUp: 'mouseup',
-  topPaste: 'paste',
-  topPause: 'pause',
-  topPlay: 'play',
-  topPlaying: 'playing',
-  topProgress: 'progress',
-  topRateChange: 'ratechange',
-  topScroll: 'scroll',
-  topSeeked: 'seeked',
-  topSeeking: 'seeking',
-  topSelectionChange: 'selectionchange',
-  topStalled: 'stalled',
-  topSuspend: 'suspend',
-  topTextInput: 'textInput',
-  topTimeUpdate: 'timeupdate',
-  topToggle: 'toggle',
-  topTouchCancel: 'touchcancel',
-  topTouchEnd: 'touchend',
-  topTouchMove: 'touchmove',
-  topTouchStart: 'touchstart',
-  topTransitionEnd: getVendorPrefixedEventName('transitionend') ||
-    'transitionend',
-  topVolumeChange: 'volumechange',
-  topWaiting: 'waiting',
-  topWheel: 'wheel',
-};
-
 /**
  * To ensure no conflicts with other potential React instances on the page
  */
@@ -296,10 +220,10 @@ var ReactBrowserEventEmitter = Object.assign({}, ReactEventEmitterMixin, {
             );
           }
           isListening.topClose = true;
-        } else if (topEventMapping.hasOwnProperty(dependency)) {
+        } else if (topLevelTypes.hasOwnProperty(dependency)) {
           ReactBrowserEventEmitter.ReactEventListener.trapBubbledEvent(
             dependency,
-            topEventMapping[dependency],
+            topLevelTypes[dependency],
             mountAt,
           );
         }

src/renderers/dom/shared/ReactEventListener.js

@@ -125,7 +125,7 @@ var ReactEventListener = {
   /**
    * Traps top-level events by using event bubbling.
    *
-   * @param {string} topLevelType Record from `EventConstants`.
+   * @param {string} topLevelType Record from `BrowserEventConstants`.
    * @param {string} handlerBaseName Event name (e.g. "click").
    * @param {object} element Element on which to attach listener.
    * @return {?object} An object with a remove function which will forcefully
@@ -146,7 +146,7 @@ var ReactEventListener = {
   /**
    * Traps a top-level event by using event capturing.
    *
-   * @param {string} topLevelType Record from `EventConstants`.
+   * @param {string} topLevelType Record from `BrowserEventConstants`.
    * @param {string} handlerBaseName Event name (e.g. "click").
    * @param {object} element Element on which to attach listener.
    * @return {?object} An object with a remove function which will forcefully

src/renderers/dom/shared/eventPlugins/BeforeInputEventPlugin.js

@@ -17,7 +17,7 @@ var FallbackCompositionState = require('FallbackCompositionState');
 var SyntheticCompositionEvent = require('SyntheticCompositionEvent');
 var SyntheticInputEvent = require('SyntheticInputEvent');
 
-import type {TopLevelTypes} from 'EventConstants';
+import type {TopLevelTypes} from 'BrowserEventConstants';
 
 var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
 var START_KEYCODE = 229;
@@ -275,7 +275,7 @@ function extractCompositionEvent(
 }
 
 /**
- * @param {string} topLevelType Record from `EventConstants`.
+ * @param {string} topLevelType Record from `BrowserEventConstants`.
  * @param {object} nativeEvent Native browser event.
  * @return {?string} The string corresponding to this `beforeInput` event.
  */
@@ -329,7 +329,7 @@ function getNativeBeforeInputChars(topLevelType: TopLevelTypes, nativeEvent) {
  * For browsers that do not provide the `textInput` event, extract the
  * appropriate string to use for SyntheticInputEvent.
  *
- * @param {string} topLevelType Record from `EventConstants`.
+ * @param {string} topLevelType Record from `BrowserEventConstants`.
  * @param {object} nativeEvent Native browser event.
  * @return {?string} The fallback string for this `beforeInput` event.
  */

src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js

@@ -28,7 +28,7 @@ var SyntheticWheelEvent = require('SyntheticWheelEvent');
 var getEventCharCode = require('getEventCharCode');
 var invariant = require('fbjs/lib/invariant');
 
-import type {TopLevelTypes} from 'EventConstants';
+import type {TopLevelTypes} from 'BrowserEventConstants';
 import type {
   DispatchConfig,
   ReactSyntheticEvent,

src/renderers/dom/test/ReactTestUtils.js

@@ -11,7 +11,7 @@
 
 'use strict';
 
-var EventConstants = require('EventConstants');
+var BrowserEventConstants = require('BrowserEventConstants');
 var React = require('react');
 var ReactDOM = require('react-dom');
 var ReactFiberTreeReflection = require('ReactFiberTreeReflection');
@@ -33,7 +33,7 @@ var {
   ReactDOMComponentTree,
 } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-var topLevelTypes = EventConstants.topLevelTypes;
+var topLevelTypes = BrowserEventConstants.topLevelTypes;
 var {
   ClassComponent,
   FunctionalComponent,
@@ -389,7 +389,7 @@ var ReactTestUtils = {
   /**
    * Simulates a top level event being dispatched from a raw event that occurred
    * on an `Element` node.
-   * @param {Object} topLevelType A type from `EventConstants.topLevelTypes`
+   * @param {Object} topLevelType A type from `BrowserEventConstants.topLevelTypes`
    * @param {!Element} node The dom to simulate an event occurring on.
    * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
    */
@@ -404,7 +404,7 @@ var ReactTestUtils = {
   /**
    * Simulates a top level event being dispatched from a raw event that occurred
    * on the `ReactDOMComponent` `comp`.
-   * @param {Object} topLevelType A type from `EventConstants.topLevelTypes`.
+   * @param {Object} topLevelType A type from `BrowserEventConstants.topLevelTypes`.
    * @param {!ReactDOMComponent} comp
    * @param {?Event} fakeNativeEvent Fake native event to use in SyntheticEvent.
    */
@@ -529,7 +529,7 @@ buildSimulators();
  * - `ReactTestUtils.SimulateNative.mouseMove(Element/ReactDOMComponent)`
  * - `ReactTestUtils.SimulateNative.mouseIn/ReactDOMComponent)`
  * - `ReactTestUtils.SimulateNative.mouseOut(Element/ReactDOMComponent)`
- * - ... (All keys from `EventConstants.topLevelTypes`)
+ * - ... (All keys from `BrowserEventConstants.topLevelTypes`)
  *
  * Note: Top level event types are a subset of the entire set of handler types
  * (which include a broader set of "synthetic" events). For example, onDragDone

src/renderers/shared/shared/event/BrowserEventConstants.js

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule BrowserEventConstants
+ */
+
+'use strict';
+
+var getVendorPrefixedEventName = require('getVendorPrefixedEventName');
+
+/**
+ * Types of raw signals from the browser caught at the top level.
+ *
+ * For events like 'submit' which don't consistently bubble (which we
+ * trap at a lower node than `document`), binding at `document` would
+ * cause duplicate events so we don't include them here.
+ */
+var topLevelTypes = {
+  topAbort: 'abort',
+  topAnimationEnd: getVendorPrefixedEventName('animationend') || 'animationend',
+  topAnimationIteration: getVendorPrefixedEventName('animationiteration') ||
+    'animationiteration',
+  topAnimationStart: getVendorPrefixedEventName('animationstart') ||
+    'animationstart',
+  topBlur: 'blur',
+  topCancel: 'cancel',
+  topCanPlay: 'canplay',
+  topCanPlayThrough: 'canplaythrough',
+  topChange: 'change',
+  topClick: 'click',
+  topClose: 'close',
+  topCompositionEnd: 'compositionend',
+  topCompositionStart: 'compositionstart',
+  topCompositionUpdate: 'compositionupdate',
+  topContextMenu: 'contextmenu',
+  topCopy: 'copy',
+  topCut: 'cut',
+  topDoubleClick: 'dblclick',
+  topDrag: 'drag',
+  topDragEnd: 'dragend',
+  topDragEnter: 'dragenter',
+  topDragExit: 'dragexit',
+  topDragLeave: 'dragleave',
+  topDragOver: 'dragover',
+  topDragStart: 'dragstart',
+  topDrop: 'drop',
+  topDurationChange: 'durationchange',
+  topEmptied: 'emptied',
+  topEncrypted: 'encrypted',
+  topEnded: 'ended',
+  topError: 'error',
+  topFocus: 'focus',
+  topInput: 'input',
+  topKeyDown: 'keydown',
+  topKeyPress: 'keypress',
+  topKeyUp: 'keyup',
+  topLoadedData: 'loadeddata',
+  topLoad: 'load',
+  topLoadedMetadata: 'loadedmetadata',
+  topLoadStart: 'loadstart',
+  topMouseDown: 'mousedown',
+  topMouseMove: 'mousemove',
+  topMouseOut: 'mouseout',
+  topMouseOver: 'mouseover',
+  topMouseUp: 'mouseup',
+  topPaste: 'paste',
+  topPause: 'pause',
+  topPlay: 'play',
+  topPlaying: 'playing',
+  topProgress: 'progress',
+  topRateChange: 'ratechange',
+  topScroll: 'scroll',
+  topSeeked: 'seeked',
+  topSeeking: 'seeking',
+  topSelectionChange: 'selectionchange',
+  topStalled: 'stalled',
+  topSuspend: 'suspend',
+  topTextInput: 'textInput',
+  topTimeUpdate: 'timeupdate',
+  topToggle: 'toggle',
+  topTouchCancel: 'touchcancel',
+  topTouchEnd: 'touchend',
+  topTouchMove: 'touchmove',
+  topTouchStart: 'touchstart',
+  topTransitionEnd: getVendorPrefixedEventName('transitionend') ||
+    'transitionend',
+  topVolumeChange: 'volumechange',
+  topWaiting: 'waiting',
+  topWheel: 'wheel',
+};
+
+export type TopLevelTypes = $Enum<typeof topLevelTypes>;
+
+var BrowserEventConstants = {
+  topLevelTypes,
+};
+
+module.exports = BrowserEventConstants;