Drop some top-level events from the list (#11912)
* Drop some top-level events from the list * Put both whitelists in one file
Dan Abramov committed
Jan 11, 2018 at 23:38 UTC
73fa26a88b68bca77fb234fc405649d0f33a3815
4 files changed
+42
-70
packages/react-dom/src/client/ReactDOMFiberComponent.js
+7
-34
@@ -22,6 +22,7 @@ import * as inputValueTracking from './inputValueTracking';
22
import setInnerHTML from './setInnerHTML';
23
import setTextContent from './setTextContent';
24
import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter';
25
+import {mediaEventTypes} from '../events/BrowserEventConstants';
26
import * as CSSPropertyOperations from '../shared/CSSPropertyOperations';
27
import {Namespaces, getIntrinsicNamespace} from '../shared/DOMNamespaces';
28
import {
@@ -223,34 +224,6 @@ function getOwnerDocumentFromRootContainer(
224
: rootContainerElement.ownerDocument;
225
}
226
226
-// There are so many media events, it makes sense to just
227
-// maintain a list rather than create a `trapBubbledEvent` for each
228
-const mediaEvents = {
229
- topAbort: 'abort',
230
- topCanPlay: 'canplay',
231
- topCanPlayThrough: 'canplaythrough',
232
- topDurationChange: 'durationchange',
233
- topEmptied: 'emptied',
234
- topEncrypted: 'encrypted',
235
- topEnded: 'ended',
236
- topError: 'error',
237
- topLoadedData: 'loadeddata',
238
- topLoadedMetadata: 'loadedmetadata',
239
- topLoadStart: 'loadstart',
240
- topPause: 'pause',
241
- topPlay: 'play',
242
- topPlaying: 'playing',
243
- topProgress: 'progress',
244
- topRateChange: 'ratechange',
245
- topSeeked: 'seeked',
246
- topSeeking: 'seeking',
247
- topStalled: 'stalled',
248
- topSuspend: 'suspend',
249
- topTimeUpdate: 'timeupdate',
250
- topVolumeChange: 'volumechange',
251
- topWaiting: 'waiting',
252
-};
253
-
227
function trapClickOnNonInteractiveElement(node: HTMLElement) {
228
// Mobile Safari does not fire properly bubble click events on
229
// non-interactive elements, which means delegated click listeners do not
@@ -472,9 +445,9 @@ export function setInitialProperties(
445
case 'video':
446
case 'audio':
447
// Create listener for each media event
475
- for (const event in mediaEvents) {
476
- if (mediaEvents.hasOwnProperty(event)) {
477
- trapBubbledEvent(event, mediaEvents[event], domElement);
448
+ for (const event in mediaEventTypes) {
449
+ if (mediaEventTypes.hasOwnProperty(event)) {
450
+ trapBubbledEvent(event, mediaEventTypes[event], domElement);
451
}
452
}
453
props = rawProps;
@@ -860,9 +833,9 @@ export function diffHydratedProperties(
833
case 'video':
834
case 'audio':
835
// Create listener for each media event
863
- for (const event in mediaEvents) {
864
- if (mediaEvents.hasOwnProperty(event)) {
865
- trapBubbledEvent(event, mediaEvents[event], domElement);
836
+ for (const event in mediaEventTypes) {
837
+ if (mediaEventTypes.hasOwnProperty(event)) {
838
+ trapBubbledEvent(event, mediaEventTypes[event], domElement);
839
}
840
}
841
break;
packages/react-dom/src/events/BrowserEventConstants.js
+33
-30
@@ -10,19 +10,16 @@ import getVendorPrefixedEventName from './getVendorPrefixedEventName';
10
/**
11
* Types of raw signals from the browser caught at the top level.
12
*
13
- * For events like 'submit' which don't consistently bubble (which we
14
- * trap at a lower node than `document`), binding at `document` would
15
- * cause duplicate events so we don't include them here.
13
+ * For events like 'submit' or audio/video events which don't consistently
14
+ * bubble (which we trap at a lower node than `document`), binding
15
+ * at `document` would cause duplicate events so we don't include them here.
16
*/
17
-const topLevelTypes = {
18
- topAbort: 'abort',
17
+export const topLevelTypes = {
18
topAnimationEnd: getVendorPrefixedEventName('animationend'),
19
topAnimationIteration: getVendorPrefixedEventName('animationiteration'),
20
topAnimationStart: getVendorPrefixedEventName('animationstart'),
21
topBlur: 'blur',
22
topCancel: 'cancel',
24
- topCanPlay: 'canplay',
25
- topCanPlayThrough: 'canplaythrough',
23
topChange: 'change',
24
topClick: 'click',
25
topClose: 'close',
@@ -41,19 +38,12 @@ const topLevelTypes = {
38
topDragOver: 'dragover',
39
topDragStart: 'dragstart',
40
topDrop: 'drop',
44
- topDurationChange: 'durationchange',
45
- topEmptied: 'emptied',
46
- topEncrypted: 'encrypted',
47
- topEnded: 'ended',
48
- topError: 'error',
41
topFocus: 'focus',
42
topInput: 'input',
43
topKeyDown: 'keydown',
44
topKeyPress: 'keypress',
45
topKeyUp: 'keyup',
54
- topLoadedData: 'loadeddata',
46
topLoad: 'load',
56
- topLoadedMetadata: 'loadedmetadata',
47
topLoadStart: 'loadstart',
48
topMouseDown: 'mousedown',
49
topMouseMove: 'mousemove',
@@ -61,34 +51,47 @@ const topLevelTypes = {
51
topMouseOver: 'mouseover',
52
topMouseUp: 'mouseup',
53
topPaste: 'paste',
54
+ topScroll: 'scroll',
55
+ topSelectionChange: 'selectionchange',
56
+ topTextInput: 'textInput',
57
+ topToggle: 'toggle',
58
+ topTouchCancel: 'touchcancel',
59
+ topTouchEnd: 'touchend',
60
+ topTouchMove: 'touchmove',
61
+ topTouchStart: 'touchstart',
62
+ topTransitionEnd: getVendorPrefixedEventName('transitionend'),
63
+ topWheel: 'wheel',
64
+};
65
+
66
+// There are so many media events, it makes sense to just
67
+// maintain a list of them. Note these aren't technically
68
+// "top-level" since they don't bubble. We should come up
69
+// with a better naming convention if we come to refactoring
70
+// the event system.
71
+export const mediaEventTypes = {
72
+ topAbort: 'abort',
73
+ topCanPlay: 'canplay',
74
+ topCanPlayThrough: 'canplaythrough',
75
+ topDurationChange: 'durationchange',
76
+ topEmptied: 'emptied',
77
+ topEncrypted: 'encrypted',
78
+ topEnded: 'ended',
79
+ topError: 'error',
80
+ topLoadedData: 'loadeddata',
81
+ topLoadedMetadata: 'loadedmetadata',
82
+ topLoadStart: 'loadstart',
83
topPause: 'pause',
84
topPlay: 'play',
85
topPlaying: 'playing',
86
topProgress: 'progress',
87
topRateChange: 'ratechange',
69
- topScroll: 'scroll',
88
topSeeked: 'seeked',
89
topSeeking: 'seeking',
72
- topSelectionChange: 'selectionchange',
90
topStalled: 'stalled',
91
topSuspend: 'suspend',
75
- topTextInput: 'textInput',
92
topTimeUpdate: 'timeupdate',
77
- topToggle: 'toggle',
78
- topTouchCancel: 'touchcancel',
79
- topTouchEnd: 'touchend',
80
- topTouchMove: 'touchmove',
81
- topTouchStart: 'touchstart',
82
- topTransitionEnd: getVendorPrefixedEventName('transitionend'),
93
topVolumeChange: 'volumechange',
94
topWaiting: 'waiting',
85
- topWheel: 'wheel',
95
};
96
97
export type TopLevelTypes = $Enum<typeof topLevelTypes>;
89
-
90
-const BrowserEventConstants = {
91
- topLevelTypes,
92
-};
93
-
94
-export default BrowserEventConstants;
packages/react-dom/src/events/ReactBrowserEventEmitter.js
+1
-3
@@ -13,9 +13,7 @@ import {
13
trapCapturedEvent,
14
} from './ReactDOMEventListener';
15
import isEventSupported from './isEventSupported';
16
-import BrowserEventConstants from './BrowserEventConstants';
17
-
18
-const {topLevelTypes} = BrowserEventConstants;
16
+import {topLevelTypes} from './BrowserEventConstants';
17
18
/**
19
* Summary of `ReactBrowserEventEmitter` event handling:
packages/react-dom/src/test-utils/ReactTestUtils.js
+1
-3
@@ -18,7 +18,7 @@ import {
18
import SyntheticEvent from 'events/SyntheticEvent';
19
import invariant from 'fbjs/lib/invariant';
20
21
-import BrowserEventConstants from '../events/BrowserEventConstants';
21
+import {topLevelTypes} from '../events/BrowserEventConstants';
22
23
const {findDOMNode} = ReactDOM;
24
const {
@@ -30,8 +30,6 @@ const {
30
ReactDOMEventListener,
31
} = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
32
33
-const topLevelTypes = BrowserEventConstants.topLevelTypes;
34
-
33
function Event(suffix) {}
34
35
/**