Skip to content

Commit 67eb6ff

Browse files
authored
Add Flow to ModernChangeEventPlugin (facebook#19232)
1 parent 75b6921 commit 67eb6ff

File tree

2 files changed

+33
-25
lines changed

2 files changed

+33
-25
lines changed

packages/react-dom/src/events/ReactSyntheticEventType.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export type DispatchConfig = {|
1919
captured: null | string,
2020
|},
2121
registrationName?: string,
22-
eventPriority: EventPriority,
22+
eventPriority?: EventPriority,
2323
|};
2424

2525
export type CustomDispatchConfig = {|

packages/react-dom/src/events/plugins/ModernChangeEventPlugin.js

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,15 @@
33
*
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
68
*/
79

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';
915
import isTextInputElement from '../isTextInputElement';
1016
import {canUseDOM} from 'shared/ExecutionEnvironment';
1117

@@ -66,9 +72,8 @@ function createAndAccumulateChangeEvent(
6672
);
6773
event.type = 'change';
6874
// Flag this event loop as needing state restore.
69-
enqueueStateRestore(target);
75+
enqueueStateRestore(((target: any): Node));
7076
accumulateTwoPhaseListeners(inst, dispatchQueue, event);
71-
return event;
7277
}
7378
/**
7479
* For IE shims
@@ -82,12 +87,15 @@ let activeElementInst = null;
8287
function shouldUseChangeEvent(elem) {
8388
const nodeName = elem.nodeName && elem.nodeName.toLowerCase();
8489
return (
85-
nodeName === 'select' || (nodeName === 'input' && elem.type === 'file')
90+
nodeName === 'select' ||
91+
(nodeName === 'input' && (elem: any).type === 'file')
8692
);
8793
}
8894

8995
function manualDispatchChangeEvent(nativeEvent) {
90-
const event = createAndAccumulateChangeEvent(
96+
const dispatchQueue = [];
97+
createAndAccumulateChangeEvent(
98+
dispatchQueue,
9199
activeElementInst,
92100
nativeEvent,
93101
getEventTarget(nativeEvent),
@@ -104,16 +112,16 @@ function manualDispatchChangeEvent(nativeEvent) {
104112
// components don't work properly in conjunction with event bubbling because
105113
// the component is rerendered and the value reverted before all the event
106114
// handlers can run. See https://github.com/facebook/react/issues/708.
107-
batchedUpdates(runEventInBatch, event);
115+
batchedUpdates(runEventInBatch, dispatchQueue);
108116
}
109117

110-
function runEventInBatch(event) {
111-
dispatchEventsInBatch([event]);
118+
function runEventInBatch(dispatchQueue) {
119+
dispatchEventsInBatch(dispatchQueue);
112120
}
113121

114-
function getInstIfValueChanged(targetInst) {
122+
function getInstIfValueChanged(targetInst: Object) {
115123
const targetNode = getNodeFromInstance(targetInst);
116-
if (updateValueIfChanged(targetNode)) {
124+
if (updateValueIfChanged(((targetNode: any): HTMLInputElement))) {
117125
return targetInst;
118126
}
119127
}
@@ -144,7 +152,7 @@ if (canUseDOM) {
144152
function startWatchingForValueChange(target, targetInst) {
145153
activeElement = target;
146154
activeElementInst = targetInst;
147-
activeElement.attachEvent('onpropertychange', handlePropertyChange);
155+
(activeElement: any).attachEvent('onpropertychange', handlePropertyChange);
148156
}
149157

150158
/**
@@ -155,7 +163,7 @@ function stopWatchingForValueChange() {
155163
if (!activeElement) {
156164
return;
157165
}
158-
activeElement.detachEvent('onpropertychange', handlePropertyChange);
166+
(activeElement: any).detachEvent('onpropertychange', handlePropertyChange);
159167
activeElement = null;
160168
activeElementInst = null;
161169
}
@@ -240,16 +248,16 @@ function getTargetInstForInputOrChangeEvent(topLevelType, targetInst) {
240248
}
241249
}
242250

243-
function handleControlledInputBlur(node) {
244-
const state = node._wrapperState;
251+
function handleControlledInputBlur(node: HTMLInputElement) {
252+
const state = (node: any)._wrapperState;
245253

246254
if (!state || !state.controlled || node.type !== 'number') {
247255
return;
248256
}
249257

250258
if (!disableInputAttributeSyncing) {
251259
// 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);
253261
}
254262
}
255263

@@ -269,20 +277,20 @@ const ChangeEventPlugin = {
269277
_isInputEventSupported: isInputEventSupported,
270278

271279
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,
279287
) {
280288
const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
281289

282290
let getTargetInstFunc, handleEventFunc;
283291
if (shouldUseChangeEvent(targetNode)) {
284292
getTargetInstFunc = getTargetInstForChangeEvent;
285-
} else if (isTextInputElement(targetNode)) {
293+
} else if (isTextInputElement(((targetNode: any): HTMLElement))) {
286294
if (isInputEventSupported) {
287295
getTargetInstFunc = getTargetInstForInputOrChangeEvent;
288296
} else {
@@ -312,7 +320,7 @@ const ChangeEventPlugin = {
312320

313321
// When blurring, set the value attribute for number inputs
314322
if (topLevelType === TOP_BLUR) {
315-
handleControlledInputBlur(targetNode);
323+
handleControlledInputBlur(((targetNode: any): HTMLInputElement));
316324
}
317325
},
318326
};

0 commit comments

Comments
 (0)