Add some Flow types to inputValueTracking
Not perfect but better.
Sebastian Markbage committed
Nov 18, 2016 at 17:49 UTC
e06b335588beade38ac834c9f2453554ffcc9140
2 files changed
+33
-15
src/renderers/dom/fiber/ReactDOMFiberComponent.js
+2
-2
@@ -554,7 +554,7 @@ var ReactDOMFiberComponent = {
554
props = ReactDOMFiberInput.getHostProps(domElement, rawProps);
555
// TODO: Make sure we check if this is still unmounted or do any clean
556
// up necessary since we never stop tracking anymore.
557
- inputValueTracking.trackNode(domElement);
557
+ inputValueTracking.trackNode((domElement : any));
558
trapBubbledEventsLocal(domElement, tag);
559
// For controlled components we always need to ensure we're listening
560
// to onChange. Even if there is no listener.
@@ -575,7 +575,7 @@ var ReactDOMFiberComponent = {
575
case 'textarea':
576
ReactDOMFiberTextarea.mountWrapper(domElement, rawProps);
577
props = ReactDOMFiberTextarea.getHostProps(domElement, rawProps);
578
- inputValueTracking.trackNode(domElement);
578
+ inputValueTracking.trackNode((domElement : any));
579
trapBubbledEventsLocal(domElement, tag);
580
// For controlled components we always need to ensure we're listening
581
// to onChange. Even if there is no listener.
src/renderers/dom/shared/inputValueTracking.js
+31
-13
@@ -7,12 +7,26 @@
7
* of patent rights can be found in the PATENTS file in the same directory.
8
*
9
* @providesModule inputValueTracking
10
+ * @flow
11
*/
12
13
'use strict';
14
+
15
+import type { Fiber } from 'ReactFiber';
16
+import type { ReactInstance } from 'ReactInstanceType';
17
+
18
+type ValueTracker = {
19
+ getValue() : string,
20
+ setValue(value : string) : void,
21
+ stopTracking() : void
22
+};
23
+type WrapperState = { _wrapperState: { valueTracker: ?ValueTracker } };
24
+type ElementWithWrapperState = Element & WrapperState;
25
+type InstanceWithWrapperState = ReactInstance & WrapperState;
26
+
27
var ReactDOMComponentTree = require('ReactDOMComponentTree');
28
15
-function isCheckable(elem) {
29
+function isCheckable(elem : any) {
30
var type = elem.type;
31
var nodeName = elem.nodeName;
32
return (
@@ -21,18 +35,18 @@ function isCheckable(elem) {
35
);
36
}
37
24
-function getTracker(inst) {
38
+function getTracker(inst : any) {
39
if (typeof inst.tag === 'number') {
40
inst = inst.stateNode;
41
}
42
return inst._wrapperState.valueTracker;
43
}
44
31
-function attachTracker(inst, tracker) {
45
+function attachTracker(inst : InstanceWithWrapperState, tracker : ?ValueTracker) {
46
inst._wrapperState.valueTracker = tracker;
47
}
48
35
-function detachTracker(inst) {
49
+function detachTracker(inst : InstanceWithWrapperState) {
50
delete inst._wrapperState.valueTracker;
51
}
52
@@ -46,7 +60,7 @@ function getValueFromNode(node) {
60
return value;
61
}
62
49
-function trackValueOnNode(node) {
63
+function trackValueOnNode(node : any, inst : any) : ?ValueTracker {
64
var valueField = isCheckable(node) ? 'checked' : 'value';
65
var descriptor = Object.getOwnPropertyDescriptor(
66
node.constructor.prototype,
@@ -96,35 +110,39 @@ function trackValueOnNode(node) {
110
111
var inputValueTracking = {
112
// exposed for testing
99
- _getTrackerFromNode(node) {
113
+ _getTrackerFromNode(node : ElementWithWrapperState) {
114
return getTracker(
115
ReactDOMComponentTree.getInstanceFromNode(node)
116
);
117
},
118
105
- trackNode: function(node) {
119
+ trackNode: function(node : ElementWithWrapperState) {
120
if (node._wrapperState.valueTracker) {
121
return;
122
}
109
- node._wrapperState.valueTracker = trackValueOnNode(node);
123
+ node._wrapperState.valueTracker = trackValueOnNode(node, node);
124
},
125
112
- track: function(inst) {
126
+ track: function(inst : InstanceWithWrapperState) {
127
if (getTracker(inst)) {
128
return;
129
}
130
var node = ReactDOMComponentTree.getNodeFromInstance(inst);
117
- attachTracker(inst, trackValueOnNode(node));
131
+ attachTracker(inst, trackValueOnNode(node, inst));
132
},
133
120
- updateValueIfChanged(inst) {
134
+ updateValueIfChanged(inst : InstanceWithWrapperState | Fiber) {
135
if (!inst) {
136
return false;
137
}
138
var tracker = getTracker(inst);
139
140
if (!tracker) {
127
- inputValueTracking.track(inst);
141
+ if (typeof (inst : any).tag === 'number') {
142
+ inputValueTracking.trackNode((inst : any).stateNode);
143
+ } else {
144
+ inputValueTracking.track((inst : any));
145
+ }
146
return true;
147
}
148
@@ -141,7 +159,7 @@ var inputValueTracking = {
159
return false;
160
},
161
144
- stopTracking(inst) {
162
+ stopTracking(inst : InstanceWithWrapperState | Fiber) {
163
var tracker = getTracker(inst);
164
if (tracker) {
165
tracker.stopTracking();