Add Flow to ModernChangeEventPlugin (#19232)
Dominic Gannaway committed
Jul 1, 2020 at 21:49 UTC
67eb6ff4a84204271232506aea77155507a32b17
2 files changed
+33
-25
packages/react-dom/src/events/ReactSyntheticEventType.js
+1
-1
@@ -19,7 +19,7 @@ export type DispatchConfig = {|
19
captured: null | string,
20
|},
21
registrationName?: string,
22
- eventPriority: EventPriority,
22
+ eventPriority?: EventPriority,
23
|};
24
25
export type CustomDispatchConfig = {|
packages/react-dom/src/events/plugins/ModernChangeEventPlugin.js
+32
-24
@@ -3,9 +3,15 @@
3
*
4
* This source code is licensed under the MIT license found in the
5
* LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow
8
*/
9
8
-import SyntheticEvent from '../../events/SyntheticEvent';
10
+import type {TopLevelType} from '../TopLevelEventTypes';
11
+import type {DispatchQueue} from '../PluginModuleType';
12
+import type {EventSystemFlags} from '../EventSystemFlags';
13
+
14
+import SyntheticEvent from '../SyntheticEvent';
15
import isTextInputElement from '../isTextInputElement';
16
import {canUseDOM} from 'shared/ExecutionEnvironment';
17
@@ -66,9 +72,8 @@ function createAndAccumulateChangeEvent(
72
);
73
event.type = 'change';
74
// Flag this event loop as needing state restore.
69
- enqueueStateRestore(target);
75
+ enqueueStateRestore(((target: any): Node));
76
accumulateTwoPhaseListeners(inst, dispatchQueue, event);
71
- return event;
77
}
78
/**
79
* For IE shims
@@ -82,12 +87,15 @@ let activeElementInst = null;
87
function shouldUseChangeEvent(elem) {
88
const nodeName = elem.nodeName && elem.nodeName.toLowerCase();
89
return (
85
- nodeName === 'select' || (nodeName === 'input' && elem.type === 'file')
90
+ nodeName === 'select' ||
91
+ (nodeName === 'input' && (elem: any).type === 'file')
92
);
93
}
94
95
function manualDispatchChangeEvent(nativeEvent) {
90
- const event = createAndAccumulateChangeEvent(
96
+ const dispatchQueue = [];
97
+ createAndAccumulateChangeEvent(
98
+ dispatchQueue,
99
activeElementInst,
100
nativeEvent,
101
getEventTarget(nativeEvent),
@@ -104,16 +112,16 @@ function manualDispatchChangeEvent(nativeEvent) {
112
// components don't work properly in conjunction with event bubbling because
113
// the component is rerendered and the value reverted before all the event
114
// handlers can run. See https://github.com/facebook/react/issues/708.
107
- batchedUpdates(runEventInBatch, event);
115
+ batchedUpdates(runEventInBatch, dispatchQueue);
116
}
117
110
-function runEventInBatch(event) {
111
- dispatchEventsInBatch([event]);
118
+function runEventInBatch(dispatchQueue) {
119
+ dispatchEventsInBatch(dispatchQueue);
120
}
121
114
-function getInstIfValueChanged(targetInst) {
122
+function getInstIfValueChanged(targetInst: Object) {
123
const targetNode = getNodeFromInstance(targetInst);
116
- if (updateValueIfChanged(targetNode)) {
124
+ if (updateValueIfChanged(((targetNode: any): HTMLInputElement))) {
125
return targetInst;
126
}
127
}
@@ -144,7 +152,7 @@ if (canUseDOM) {
152
function startWatchingForValueChange(target, targetInst) {
153
activeElement = target;
154
activeElementInst = targetInst;
147
- activeElement.attachEvent('onpropertychange', handlePropertyChange);
155
+ (activeElement: any).attachEvent('onpropertychange', handlePropertyChange);
156
}
157
158
/**
@@ -155,7 +163,7 @@ function stopWatchingForValueChange() {
163
if (!activeElement) {
164
return;
165
}
158
- activeElement.detachEvent('onpropertychange', handlePropertyChange);
166
+ (activeElement: any).detachEvent('onpropertychange', handlePropertyChange);
167
activeElement = null;
168
activeElementInst = null;
169
}
@@ -240,8 +248,8 @@ function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
248
}
249
}
250
243
-function handleControlledInputBlur(node) {
244
- const state = node._wrapperState;
251
+function handleControlledInputBlur(node: HTMLInputElement) {
252
+ const state = (node: any)._wrapperState;
253
254
if (!state || !state.controlled || node.type !== 'number') {
255
return;
@@ -249,7 +257,7 @@ function handleControlledInputBlur(node) {
257
258
if (!disableInputAttributeSyncing) {
259
// If controlled, assign the value attribute to the current value on blur
252
- setDefaultValue(node, 'number', node.value);
260
+ setDefaultValue((node: any), 'number', (node: any).value);
261
}
262
}
263
@@ -269,20 +277,20 @@ const ChangeEventPlugin = {
277
_isInputEventSupported: isInputEventSupported,
278
279
extractEvents: function(
272
- dispatchQueue,
273
- topLevelType,
274
- targetInst,
275
- nativeEvent,
276
- nativeEventTarget,
277
- eventSystemFlags,
278
- container,
280
+ dispatchQueue: DispatchQueue,
281
+ topLevelType: TopLevelType,
282
+ targetInst: null | Fiber,
283
+ nativeEvent: MouseEvent,
284
+ nativeEventTarget: null | EventTarget,
285
+ eventSystemFlags: EventSystemFlags,
286
+ targetContainer: null | EventTarget,
287
) {
288
const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
289
290
let getTargetInstFunc, handleEventFunc;
291
if (shouldUseChangeEvent(targetNode)) {
292
getTargetInstFunc = getTargetInstForChangeEvent;
285
- } else if (isTextInputElement(targetNode)) {
293
+ } else if (isTextInputElement(((targetNode: any): HTMLElement))) {
294
if (isInputEventSupported) {
295
getTargetInstFunc = getTargetInstForInputOrChangeEvent;
296
} else {
@@ -312,7 +320,7 @@ const ChangeEventPlugin = {
320
321
// When blurring, set the value attribute for number inputs
322
if (topLevelType === TOP_BLUR) {
315
- handleControlledInputBlur(targetNode);
323
+ handleControlledInputBlur(((targetNode: any): HTMLInputElement));
324
}
325
},
326
};