@samitouri / QOS-React / commits / 65870dcaee

Simplify event phases. Use explicitly 'captured' and 'bubbled'. (#7741)

Uladzimir Havenchyk committed Sep 16, 2016 at 09:24 UTC 65870dcaee6a3fac0932c284f720275812bb358f
5 files changed +35 -36
src/renderers/dom/client/ReactDOMTreeTraversal.js
+4 -4
@@ -90,10 +90,10 @@ function traverseTwoPhase(inst, fn, arg) {
90 }
91 var i;
92 for (i = path.length; i-- > 0;) {
93 - fn(path[i], false, arg);
93 + fn(path[i], 'captured', arg);
94 }
95 for (i = 0; i < path.length; i++) {
96 - fn(path[i], true, arg);
96 + fn(path[i], 'bubbled', arg);
97 }
98 }
99
@@ -118,10 +118,10 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
118 }
119 var i;
120 for (i = 0; i < pathFrom.length; i++) {
121 - fn(pathFrom[i], true, argFrom);
121 + fn(pathFrom[i], 'bubbled', argFrom);
122 }
123 for (i = pathTo.length; i-- > 0;) {
124 - fn(pathTo[i], false, argTo);
124 + fn(pathTo[i], 'captured', argTo);
125 }
126 }
127
src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js
+25 -25
@@ -54,10 +54,10 @@ describe('ReactDOMTreeTraversal', () => {
54 var ReactDOMTreeTraversal;
55
56 var aggregatedArgs;
57 - function argAggregator(inst, isUp, arg) {
57 + function argAggregator(inst, phase, arg) {
58 aggregatedArgs.push({
59 node: ReactDOMComponentTree.getNodeFromInstance(inst),
60 - isUp: isUp,
60 + phase: phase,
61 arg: arg,
62 });
63 }
@@ -82,15 +82,15 @@ describe('ReactDOMTreeTraversal', () => {
82 var parent = renderParentIntoDocument();
83 var target = getInst(parent.refs.P_P1_C1.refs.DIV_1);
84 var expectedAggregation = [
85 - {node: parent.refs.P, isUp: false, arg: ARG},
86 - {node: parent.refs.P_P1, isUp: false, arg: ARG},
87 - {node: parent.refs.P_P1_C1.refs.DIV, isUp: false, arg: ARG},
88 - {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: false, arg: ARG},
85 + {node: parent.refs.P, phase: 'captured', arg: ARG},
86 + {node: parent.refs.P_P1, phase: 'captured', arg: ARG},
87 + {node: parent.refs.P_P1_C1.refs.DIV, phase: 'captured', arg: ARG},
88 + {node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'captured', arg: ARG},
89
90 - {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},
91 - {node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},
92 - {node: parent.refs.P_P1, isUp: true, arg: ARG},
93 - {node: parent.refs.P, isUp: true, arg: ARG},
90 + {node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'bubbled', arg: ARG},
91 + {node: parent.refs.P_P1_C1.refs.DIV, phase: 'bubbled', arg: ARG},
92 + {node: parent.refs.P_P1, phase: 'bubbled', arg: ARG},
93 + {node: parent.refs.P, phase: 'bubbled', arg: ARG},
94 ];
95 ReactDOMTreeTraversal.traverseTwoPhase(target, argAggregator, ARG);
96 expect(aggregatedArgs).toEqual(expectedAggregation);
@@ -100,8 +100,8 @@ describe('ReactDOMTreeTraversal', () => {
100 var parent = renderParentIntoDocument();
101 var target = getInst(parent.refs.P);
102 var expectedAggregation = [
103 - {node: parent.refs.P, isUp: false, arg: ARG},
104 - {node: parent.refs.P, isUp: true, arg: ARG},
103 + {node: parent.refs.P, phase: 'captured', arg: ARG},
104 + {node: parent.refs.P, phase: 'bubbled', arg: ARG},
105 ];
106 ReactDOMTreeTraversal.traverseTwoPhase(target, argAggregator, ARG);
107 expect(aggregatedArgs).toEqual(expectedAggregation);
@@ -134,9 +134,9 @@ describe('ReactDOMTreeTraversal', () => {
134 var leave = getInst(parent.refs.P_P1_C1.refs.DIV_1);
135 var enter = getInst(parent.refs.P_P1_C1.refs.DIV_2);
136 var expectedAggregation = [
137 - {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},
137 + {node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'bubbled', arg: ARG},
138 // enter/leave shouldn't fire anything on the parent
139 - {node: parent.refs.P_P1_C1.refs.DIV_2, isUp: false, arg: ARG2},
139 + {node: parent.refs.P_P1_C1.refs.DIV_2, phase: 'captured', arg: ARG2},
140 ];
141 ReactDOMTreeTraversal.traverseEnterLeave(
142 leave, enter, argAggregator, ARG, ARG2
@@ -149,7 +149,7 @@ describe('ReactDOMTreeTraversal', () => {
149 var leave = getInst(parent.refs.P_P1_C1.refs.DIV_1);
150 var enter = getInst(parent.refs.P_P1_C1.refs.DIV);
151 var expectedAggregation = [
152 - {node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},
152 + {node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'bubbled', arg: ARG},
153 ];
154 ReactDOMTreeTraversal.traverseEnterLeave(
155 leave, enter, argAggregator, ARG, ARG2
@@ -162,9 +162,9 @@ describe('ReactDOMTreeTraversal', () => {
162 var leave = null; // From the window or outside of the React sandbox.
163 var enter = getInst(parent.refs.P_P1_C1.refs.DIV);
164 var expectedAggregation = [
165 - {node: parent.refs.P, isUp: false, arg: ARG2},
166 - {node: parent.refs.P_P1, isUp: false, arg: ARG2},
167 - {node: parent.refs.P_P1_C1.refs.DIV, isUp: false, arg: ARG2},
165 + {node: parent.refs.P, phase: 'captured', arg: ARG2},
166 + {node: parent.refs.P_P1, phase: 'captured', arg: ARG2},
167 + {node: parent.refs.P_P1_C1.refs.DIV, phase: 'captured', arg: ARG2},
168 ];
169 ReactDOMTreeTraversal.traverseEnterLeave(
170 leave, enter, argAggregator, ARG, ARG2
@@ -177,7 +177,7 @@ describe('ReactDOMTreeTraversal', () => {
177 var leave = null; // From the window or outside of the React sandbox.
178 var enter = getInst(parent.refs.P);
179 var expectedAggregation = [
180 - {node: parent.refs.P, isUp: false, arg: ARG2},
180 + {node: parent.refs.P, phase: 'captured', arg: ARG2},
181 ];
182 ReactDOMTreeTraversal.traverseEnterLeave(
183 leave, enter, argAggregator, ARG, ARG2
@@ -190,9 +190,9 @@ describe('ReactDOMTreeTraversal', () => {
190 var enter = null; // From the window or outside of the React sandbox.
191 var leave = getInst(parent.refs.P_P1_C1.refs.DIV);
192 var expectedAggregation = [
193 - {node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},
194 - {node: parent.refs.P_P1, isUp: true, arg: ARG},
195 - {node: parent.refs.P, isUp: true, arg: ARG},
193 + {node: parent.refs.P_P1_C1.refs.DIV, phase: 'bubbled', arg: ARG},
194 + {node: parent.refs.P_P1, phase: 'bubbled', arg: ARG},
195 + {node: parent.refs.P, phase: 'bubbled', arg: ARG},
196 ];
197 ReactDOMTreeTraversal.traverseEnterLeave(
198 leave, enter, argAggregator, ARG, ARG2
@@ -205,9 +205,9 @@ describe('ReactDOMTreeTraversal', () => {
205 var enter = null; // From the window or outside of the React sandbox.
206 var leave = getInst(parent.refs.P_P1_C1.refs.DIV);
207 var expectedAggregation = [
208 - {node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},
209 - {node: parent.refs.P_P1, isUp: true, arg: ARG},
210 - {node: parent.refs.P, isUp: true, arg: ARG},
208 + {node: parent.refs.P_P1_C1.refs.DIV, phase: 'bubbled', arg: ARG},
209 + {node: parent.refs.P_P1, phase: 'bubbled', arg: ARG},
210 + {node: parent.refs.P, phase: 'bubbled', arg: ARG},
211 ];
212 ReactDOMTreeTraversal.traverseEnterLeave(
213 leave, enter, argAggregator, ARG, ARG2
src/renderers/native/ReactNativeTreeTraversal.js
+2 -2
@@ -110,10 +110,10 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
110 }
111 var i;
112 for (i = 0; i < pathFrom.length; i++) {
113 - fn(pathFrom[i], true, argFrom);
113 + fn(pathFrom[i], 'bubbled', argFrom);
114 }
115 for (i = pathTo.length; i-- > 0;) {
116 - fn(pathTo[i], false, argTo);
116 + fn(pathTo[i], 'captured', argTo);
117 }
118 }
119
src/renderers/shared/stack/event/EventPropagators.js
+1 -2
@@ -38,14 +38,13 @@ function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
38 * Mutating the event's members allows us to not have to create a wrapping
39 * "dispatch" object that pairs the event with the listener.
40 */
41 -function accumulateDirectionalDispatches(inst, upwards, event) {
41 +function accumulateDirectionalDispatches(inst, phase, event) {
42 if (__DEV__) {
43 warning(
44 inst,
45 'Dispatching inst must not be null'
46 );
47 }
48 - var phase = upwards ? 'bubbled' : 'captured';
48 var listener = listenerAtPhase(inst, event, phase);
49 if (listener) {
50 event._dispatchListeners =
src/renderers/shared/stack/event/eventPlugins/__tests__/ResponderEventPlugin-test.js
+3 -3
@@ -389,7 +389,7 @@ describe('ResponderEventPlugin', () => {
389 for (var id = start; /* until break */; id = traverse(id, stop)) {
390 var ret;
391 if ((!skipFirst || id !== start) && (!skipLast || id !== stop)) {
392 - ret = cb(id, traverseUp, arg);
392 + ret = cb(id, traverseUp ? 'bubbled': 'captured', arg);
393 }
394 if (ret === false || id === stop) {
395 // Only break //after// visiting `stop`.
@@ -437,8 +437,8 @@ describe('ResponderEventPlugin', () => {
437 traverseTwoPhase: function(target, fn, arg) {
438 traverseTwoPhase(
439 target._rootNodeID,
440 - function(id, upwards) {
441 - fn(idToInstance[id], upwards, arg);
440 + function(id, phase) {
441 + fn(idToInstance[id], phase, arg);
442 }
443 );
444 },