Reduce some constant duplication (#20761)
* Reduce some constant duplication * Alphabetize
Dan Abramov committed
Feb 8, 2021 at 22:30 UTC
b4658f2daa4990ef8057335cd7202b479bd8d41a
1 file changed
+94
-102
packages/react-dom/src/events/DOMEventProperties.js
+94
-102
@@ -24,84 +24,83 @@ export const topLevelEventsToReactNames: Map<
24
string | null,
25
> = new Map();
26
27
+// NOTE: Capitalization is important in this list!
28
+//
29
+// E.g. it needs "pointerDown", not "pointerdown".
30
+// This is because we derive both React name ("onPointerDown")
31
+// and DOM name ("pointerdown") from the same list.
32
+//
33
+// Exceptions that don't match this convention are listed separately.
34
+//
35
// prettier-ignore
28
-const simpleEventPluginNames = [
29
- ('cancel': DOMEventName), 'cancel',
30
- ('click': DOMEventName), 'click',
31
- ('close': DOMEventName), 'close',
32
- ('contextmenu': DOMEventName), 'contextMenu',
33
- ('copy': DOMEventName), 'copy',
34
- ('cut': DOMEventName), 'cut',
35
- ('auxclick': DOMEventName), 'auxClick',
36
- ('dblclick': DOMEventName), 'doubleClick', // Careful!
37
- ('dragend': DOMEventName), 'dragEnd',
38
- ('dragstart': DOMEventName), 'dragStart',
39
- ('drop': DOMEventName), 'drop',
40
- ('focusin': DOMEventName), 'focus', // Careful!
41
- ('focusout': DOMEventName), 'blur', // Careful!
42
- ('input': DOMEventName), 'input',
43
- ('invalid': DOMEventName), 'invalid',
44
- ('keydown': DOMEventName), 'keyDown',
45
- ('keypress': DOMEventName), 'keyPress',
46
- ('keyup': DOMEventName), 'keyUp',
47
- ('mousedown': DOMEventName), 'mouseDown',
48
- ('mouseup': DOMEventName), 'mouseUp',
49
- ('paste': DOMEventName), 'paste',
50
- ('pause': DOMEventName), 'pause',
51
- ('play': DOMEventName), 'play',
52
- ('pointercancel': DOMEventName), 'pointerCancel',
53
- ('pointerdown': DOMEventName), 'pointerDown',
54
- ('pointerup': DOMEventName), 'pointerUp',
55
- ('ratechange': DOMEventName), 'rateChange',
56
- ('reset': DOMEventName), 'reset',
57
- ('seeked': DOMEventName), 'seeked',
58
- ('submit': DOMEventName), 'submit',
59
- ('touchcancel': DOMEventName), 'touchCancel',
60
- ('touchend': DOMEventName), 'touchEnd',
61
- ('touchstart': DOMEventName), 'touchStart',
62
- ('volumechange': DOMEventName), 'volumeChange',
63
-
64
- ('drag': DOMEventName), 'drag',
65
- ('dragenter': DOMEventName), 'dragEnter',
66
- ('dragexit': DOMEventName), 'dragExit',
67
- ('dragleave': DOMEventName), 'dragLeave',
68
- ('dragover': DOMEventName), 'dragOver',
69
- ('mousemove': DOMEventName), 'mouseMove',
70
- ('mouseout': DOMEventName), 'mouseOut',
71
- ('mouseover': DOMEventName), 'mouseOver',
72
- ('pointermove': DOMEventName), 'pointerMove',
73
- ('pointerout': DOMEventName), 'pointerOut',
74
- ('pointerover': DOMEventName), 'pointerOver',
75
- ('scroll': DOMEventName), 'scroll',
76
- ('toggle': DOMEventName), 'toggle',
77
- ('touchmove': DOMEventName), 'touchMove',
78
- ('wheel': DOMEventName), 'wheel',
79
-
80
- ('abort': DOMEventName), 'abort',
81
- (ANIMATION_END: DOMEventName), 'animationEnd',
82
- (ANIMATION_ITERATION: DOMEventName), 'animationIteration',
83
- (ANIMATION_START: DOMEventName), 'animationStart',
84
- ('canplay': DOMEventName), 'canPlay',
85
- ('canplaythrough': DOMEventName), 'canPlayThrough',
86
- ('durationchange': DOMEventName), 'durationChange',
87
- ('emptied': DOMEventName), 'emptied',
88
- ('encrypted': DOMEventName), 'encrypted',
89
- ('ended': DOMEventName), 'ended',
90
- ('error': DOMEventName), 'error',
91
- ('gotpointercapture': DOMEventName), 'gotPointerCapture',
92
- ('load': DOMEventName), 'load',
93
- ('loadeddata': DOMEventName), 'loadedData',
94
- ('loadedmetadata': DOMEventName), 'loadedMetadata',
95
- ('loadstart': DOMEventName), 'loadStart',
96
- ('lostpointercapture': DOMEventName), 'lostPointerCapture',
97
- ('playing': DOMEventName), 'playing',
98
- ('progress': DOMEventName), 'progress',
99
- ('seeking': DOMEventName), 'seeking',
100
- ('stalled': DOMEventName), 'stalled',
101
- ('suspend': DOMEventName), 'suspend',
102
- ('timeupdate': DOMEventName), 'timeUpdate',
103
- (TRANSITION_END: DOMEventName), 'transitionEnd',
104
- ('waiting': DOMEventName), 'waiting',
36
+const simpleEventPluginEvents = [
37
+ 'abort',
38
+ 'auxClick',
39
+ 'cancel',
40
+ 'canPlay',
41
+ 'canPlayThrough',
42
+ 'click',
43
+ 'close',
44
+ 'contextMenu',
45
+ 'copy',
46
+ 'cut',
47
+ 'drag',
48
+ 'dragEnd',
49
+ 'dragEnter',
50
+ 'dragExit',
51
+ 'dragLeave',
52
+ 'dragOver',
53
+ 'dragStart',
54
+ 'drop',
55
+ 'durationChange',
56
+ 'emptied',
57
+ 'encrypted',
58
+ 'ended',
59
+ 'error',
60
+ 'gotPointerCapture',
61
+ 'input',
62
+ 'invalid',
63
+ 'keyDown',
64
+ 'keyPress',
65
+ 'keyUp',
66
+ 'load',
67
+ 'loadedData',
68
+ 'loadedMetadata',
69
+ 'loadStart',
70
+ 'lostPointerCapture',
71
+ 'mouseDown',
72
+ 'mouseMove',
73
+ 'mouseOut',
74
+ 'mouseOver',
75
+ 'mouseUp',
76
+ 'paste',
77
+ 'pause',
78
+ 'play',
79
+ 'playing',
80
+ 'pointerCancel',
81
+ 'pointerDown',
82
+ 'pointerMove',
83
+ 'pointerOut',
84
+ 'pointerOver',
85
+ 'pointerUp',
86
+ 'progress',
87
+ 'rateChange',
88
+ 'reset',
89
+ 'seeked',
90
+ 'seeking',
91
+ 'stalled',
92
+ 'submit',
93
+ 'suspend',
94
+ 'timeUpdate',
95
+ 'touchCancel',
96
+ 'touchEnd',
97
+ 'touchStart',
98
+ 'volumeChange',
99
+ 'scroll',
100
+ 'toggle',
101
+ 'touchMove',
102
+ 'waiting',
103
+ 'wheel',
104
];
105
106
if (enableCreateEventHandleAPI) {
@@ -111,31 +110,24 @@ if (enableCreateEventHandleAPI) {
110
topLevelEventsToReactNames.set('afterblur', null);
111
}
112
114
-/**
115
- * Turns
116
- * ['abort', ...]
117
- *
118
- * into
119
- *
120
- * topLevelEventsToReactNames = new Map([
121
- * ['abort', 'onAbort'],
122
- * ]);
123
- *
124
- * and registers them.
125
- */
113
+function registerSimpleEvent(domEventName, reactName) {
114
+ topLevelEventsToReactNames.set(domEventName, reactName);
115
+ registerTwoPhaseEvent(reactName, [domEventName]);
116
+}
117
+
118
export function registerSimpleEvents() {
127
- // As the event types are in pairs of two, we need to iterate
128
- // through in twos. The events are in pairs of two to save code
129
- // and improve init perf of processing this array, as it will
130
- // result in far fewer object allocations and property accesses
131
- // if we only use three arrays to process all the categories of
132
- // instead of tuples.
133
- for (let i = 0; i < simpleEventPluginNames.length; i += 2) {
134
- const topEvent = ((simpleEventPluginNames[i]: any): DOMEventName);
135
- const event = ((simpleEventPluginNames[i + 1]: any): string);
136
- const capitalizedEvent = event[0].toUpperCase() + event.slice(1);
137
- const reactName = 'on' + capitalizedEvent;
138
- topLevelEventsToReactNames.set(topEvent, reactName);
139
- registerTwoPhaseEvent(reactName, [topEvent]);
119
+ for (let i = 0; i < simpleEventPluginEvents.length; i++) {
120
+ const eventName = ((simpleEventPluginEvents[i]: any): string);
121
+ const domEventName = ((eventName.toLowerCase(): any): DOMEventName);
122
+ const capitalizedEvent = eventName[0].toUpperCase() + eventName.slice(1);
123
+ registerSimpleEvent(domEventName, 'on' + capitalizedEvent);
124
}
125
+ // Special cases where event names don't match.
126
+ registerSimpleEvent(ANIMATION_END, 'onAnimationEnd');
127
+ registerSimpleEvent(ANIMATION_ITERATION, 'onAnimationIteration');
128
+ registerSimpleEvent(ANIMATION_START, 'onAnimationStart');
129
+ registerSimpleEvent('dblclick', 'onDoubleClick');
130
+ registerSimpleEvent('focusin', 'onFocus');
131
+ registerSimpleEvent('focusout', 'onBlur');
132
+ registerSimpleEvent(TRANSITION_END, 'onTransitionEnd');
133
}