Skip to content

Commit

Permalink
Consolidate events between EventConstants and BrowserEventEmitter
Browse files Browse the repository at this point in the history
This is a follow up to
facebook#9333. This commit removes some
duplication of event names and renames the EventConstants module to
BrowserEventConstants.
  • Loading branch information
nhunzaker committed Apr 25, 2017
1 parent d12c41c commit 91468ca
Show file tree
Hide file tree
Showing 9 changed files with 121 additions and 191 deletions.
82 changes: 3 additions & 79 deletions src/renderers/dom/shared/ReactBrowserEventEmitter.js
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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
*/
Expand Down Expand Up @@ -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,
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/renderers/dom/shared/ReactEventListener.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand Down
2 changes: 1 addition & 1 deletion src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
10 changes: 5 additions & 5 deletions src/renderers/dom/test/ReactTestUtils.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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,
Expand Down Expand Up @@ -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.
*/
Expand All @@ -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.
*/
Expand Down Expand Up @@ -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
Expand Down
105 changes: 105 additions & 0 deletions src/renderers/shared/shared/event/BrowserEventConstants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
/**
* 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');

export type PropagationPhases = 'bubbled' | 'captured';

/**
* 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;
Loading

0 comments on commit 91468ca

Please sign in to comment.