From a9d0deb8e13e9f0b1ee7d2f28a6eec0e7ad2e41d Mon Sep 17 00:00:00 2001 From: Nathan Hunzaker Date: Tue, 25 Apr 2017 12:24:10 -0400 Subject: [PATCH] Consolidate events between EventConstants and BrowserEventEmitter (#9512) --- .../dom/shared/ReactBrowserEventEmitter.js | 82 +------------- .../dom/shared/ReactEventListener.js | 4 +- .../eventPlugins/BeforeInputEventPlugin.js | 6 +- .../shared/eventPlugins/SimpleEventPlugin.js | 2 +- src/renderers/dom/test/ReactTestUtils.js | 10 +- .../shared/event/BrowserEventConstants.js | 103 ++++++++++++++++++ .../shared/shared/event/EventConstants.js | 99 ----------------- .../shared/shared/event/EventPropagators.js | 2 +- .../eventPlugins/ResponderEventPlugin.js | 2 +- .../event}/getVendorPrefixedEventName.js | 0 10 files changed, 119 insertions(+), 191 deletions(-) create mode 100644 src/renderers/shared/shared/event/BrowserEventConstants.js delete mode 100644 src/renderers/shared/shared/event/EventConstants.js rename src/renderers/{dom/shared/utils => shared/shared/event}/getVendorPrefixedEventName.js (100%) diff --git a/src/renderers/dom/shared/ReactBrowserEventEmitter.js b/src/renderers/dom/shared/ReactBrowserEventEmitter.js index a57d70846fa7b..f683fa9eae54f 100644 --- a/src/renderers/dom/shared/ReactBrowserEventEmitter.js +++ b/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, ); } diff --git a/src/renderers/dom/shared/ReactEventListener.js b/src/renderers/dom/shared/ReactEventListener.js index 64a72b381f53e..9e861c8f4c580 100644 --- a/src/renderers/dom/shared/ReactEventListener.js +++ b/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 diff --git a/src/renderers/dom/shared/eventPlugins/BeforeInputEventPlugin.js b/src/renderers/dom/shared/eventPlugins/BeforeInputEventPlugin.js index 8bcd30782adae..9b97cfda6ef11 100644 --- a/src/renderers/dom/shared/eventPlugins/BeforeInputEventPlugin.js +++ b/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. */ diff --git a/src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js b/src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js index 26a4561789211..7acdeaca06c3b 100644 --- a/src/renderers/dom/shared/eventPlugins/SimpleEventPlugin.js +++ b/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, diff --git a/src/renderers/dom/test/ReactTestUtils.js b/src/renderers/dom/test/ReactTestUtils.js index f88e8ce929986..6034f641de2b9 100644 --- a/src/renderers/dom/test/ReactTestUtils.js +++ b/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 diff --git a/src/renderers/shared/shared/event/BrowserEventConstants.js b/src/renderers/shared/shared/event/BrowserEventConstants.js new file mode 100644 index 0000000000000..0f460486be72c --- /dev/null +++ b/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; + +var BrowserEventConstants = { + topLevelTypes, +}; + +module.exports = BrowserEventConstants; diff --git a/src/renderers/shared/shared/event/EventConstants.js b/src/renderers/shared/shared/event/EventConstants.js deleted file mode 100644 index 0b7837aad94ef..0000000000000 --- a/src/renderers/shared/shared/event/EventConstants.js +++ /dev/null @@ -1,99 +0,0 @@ -/** - * 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 EventConstants - */ - -'use strict'; - -export type PropagationPhases = 'bubbled' | 'captured'; - -/** - * Types of raw signals from the browser caught at the top level. - */ -var topLevelTypes = { - topAbort: null, - topAnimationEnd: null, - topAnimationIteration: null, - topAnimationStart: null, - topBlur: null, - topCancel: null, - topCanPlay: null, - topCanPlayThrough: null, - topChange: null, - topClick: null, - topClose: null, - topCompositionEnd: null, - topCompositionStart: null, - topCompositionUpdate: null, - topContextMenu: null, - topCopy: null, - topCut: null, - topDoubleClick: null, - topDrag: null, - topDragEnd: null, - topDragEnter: null, - topDragExit: null, - topDragLeave: null, - topDragOver: null, - topDragStart: null, - topDrop: null, - topDurationChange: null, - topEmptied: null, - topEncrypted: null, - topEnded: null, - topError: null, - topFocus: null, - topInput: null, - topInvalid: null, - topKeyDown: null, - topKeyPress: null, - topKeyUp: null, - topLoad: null, - topLoadedData: null, - topLoadedMetadata: null, - topLoadStart: null, - topMouseDown: null, - topMouseMove: null, - topMouseOut: null, - topMouseOver: null, - topMouseUp: null, - topPaste: null, - topPause: null, - topPlay: null, - topPlaying: null, - topProgress: null, - topRateChange: null, - topReset: null, - topScroll: null, - topSeeked: null, - topSeeking: null, - topSelectionChange: null, - topStalled: null, - topSubmit: null, - topSuspend: null, - topTextInput: null, - topTimeUpdate: null, - topToggle: null, - topTouchCancel: null, - topTouchEnd: null, - topTouchMove: null, - topTouchStart: null, - topTransitionEnd: null, - topVolumeChange: null, - topWaiting: null, - topWheel: null, -}; - -export type TopLevelTypes = $Enum; - -var EventConstants = { - topLevelTypes, -}; - -module.exports = EventConstants; diff --git a/src/renderers/shared/shared/event/EventPropagators.js b/src/renderers/shared/shared/event/EventPropagators.js index 43bfaaa4a6353..755dd79d428a2 100644 --- a/src/renderers/shared/shared/event/EventPropagators.js +++ b/src/renderers/shared/shared/event/EventPropagators.js @@ -18,7 +18,7 @@ var accumulateInto = require('accumulateInto'); var forEachAccumulated = require('forEachAccumulated'); var warning = require('fbjs/lib/warning'); -import type {PropagationPhases} from 'EventConstants'; +type PropagationPhases = 'bubbled' | 'captured'; var getListener = EventPluginHub.getListener; diff --git a/src/renderers/shared/shared/event/eventPlugins/ResponderEventPlugin.js b/src/renderers/shared/shared/event/eventPlugins/ResponderEventPlugin.js index 54ffe58bb9866..6fb3e4a6f0ce3 100644 --- a/src/renderers/shared/shared/event/eventPlugins/ResponderEventPlugin.js +++ b/src/renderers/shared/shared/event/eventPlugins/ResponderEventPlugin.js @@ -420,7 +420,7 @@ function setResponderAndExtractTransfer( * element to claim responder status. Any start event could trigger a transfer * of responderInst. Any move event could trigger a transfer. * - * @param {string} topLevelType Record from `EventConstants`. + * @param {string} topLevelType Record from `BrowserEventConstants`. * @return {boolean} True if a transfer of responder could possibly occur. */ function canTriggerTransfer(topLevelType, topLevelInst, nativeEvent) { diff --git a/src/renderers/dom/shared/utils/getVendorPrefixedEventName.js b/src/renderers/shared/shared/event/getVendorPrefixedEventName.js similarity index 100% rename from src/renderers/dom/shared/utils/getVendorPrefixedEventName.js rename to src/renderers/shared/shared/event/getVendorPrefixedEventName.js