Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Uladzimir Havenchyk
2016-09-16 09:24:56 +03:00
committed by Ben Alpert
parent c78464f8ea
commit 65870dcaee
5 changed files with 35 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderers/dom/client/ReactDOMTreeTraversal.js
+4 -4
View File
@@ -90,10 +90,10 @@ function traverseTwoPhase(inst, fn, arg) {
}
var i;
for (i = path.length; i-- > 0;) {
fn(path[i], false, arg);
fn(path[i], 'captured', arg);
}
for (i = 0; i < path.length; i++) {
fn(path[i], true, arg);
fn(path[i], 'bubbled', arg);
}
}
@@ -118,10 +118,10 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
}
var i;
for (i = 0; i < pathFrom.length; i++) {
fn(pathFrom[i], true, argFrom);
fn(pathFrom[i], 'bubbled', argFrom);
}
for (i = pathTo.length; i-- > 0;) {
fn(pathTo[i], false, argTo);
fn(pathTo[i], 'captured', argTo);
}
}
src/renderers/dom/client/__tests__/ReactDOMTreeTraversal-test.js
+25 -25
View File
@@ -54,10 +54,10 @@ describe('ReactDOMTreeTraversal', () => {
var ReactDOMTreeTraversal;
var aggregatedArgs;
function argAggregator(inst, isUp, arg) {
function argAggregator(inst, phase, arg) {
aggregatedArgs.push({
node: ReactDOMComponentTree.getNodeFromInstance(inst),
isUp: isUp,
phase: phase,
arg: arg,
});
}
@@ -82,15 +82,15 @@ describe('ReactDOMTreeTraversal', () => {
var parent = renderParentIntoDocument();
var target = getInst(parent.refs.P_P1_C1.refs.DIV_1);
var expectedAggregation = [
{node: parent.refs.P, isUp: false, arg: ARG},
{node: parent.refs.P_P1, isUp: false, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV, isUp: false, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV_1, isUp: false, arg: ARG},
{node: parent.refs.P, phase: 'captured', arg: ARG},
{node: parent.refs.P_P1, phase: 'captured', arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV, phase: 'captured', arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'captured', arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},
{node: parent.refs.P_P1, isUp: true, arg: ARG},
{node: parent.refs.P, isUp: true, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'bubbled', arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV, phase: 'bubbled', arg: ARG},
{node: parent.refs.P_P1, phase: 'bubbled', arg: ARG},
{node: parent.refs.P, phase: 'bubbled', arg: ARG},
];
ReactDOMTreeTraversal.traverseTwoPhase(target, argAggregator, ARG);
expect(aggregatedArgs).toEqual(expectedAggregation);
@@ -100,8 +100,8 @@ describe('ReactDOMTreeTraversal', () => {
var parent = renderParentIntoDocument();
var target = getInst(parent.refs.P);
var expectedAggregation = [
{node: parent.refs.P, isUp: false, arg: ARG},
{node: parent.refs.P, isUp: true, arg: ARG},
{node: parent.refs.P, phase: 'captured', arg: ARG},
{node: parent.refs.P, phase: 'bubbled', arg: ARG},
];
ReactDOMTreeTraversal.traverseTwoPhase(target, argAggregator, ARG);
expect(aggregatedArgs).toEqual(expectedAggregation);
@@ -134,9 +134,9 @@ describe('ReactDOMTreeTraversal', () => {
var leave = getInst(parent.refs.P_P1_C1.refs.DIV_1);
var enter = getInst(parent.refs.P_P1_C1.refs.DIV_2);
var expectedAggregation = [
{node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'bubbled', arg: ARG},
// enter/leave shouldn't fire anything on the parent
{node: parent.refs.P_P1_C1.refs.DIV_2, isUp: false, arg: ARG2},
{node: parent.refs.P_P1_C1.refs.DIV_2, phase: 'captured', arg: ARG2},
];
ReactDOMTreeTraversal.traverseEnterLeave(
leave, enter, argAggregator, ARG, ARG2
@@ -149,7 +149,7 @@ describe('ReactDOMTreeTraversal', () => {
var leave = getInst(parent.refs.P_P1_C1.refs.DIV_1);
var enter = getInst(parent.refs.P_P1_C1.refs.DIV);
var expectedAggregation = [
{node: parent.refs.P_P1_C1.refs.DIV_1, isUp: true, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV_1, phase: 'bubbled', arg: ARG},
];
ReactDOMTreeTraversal.traverseEnterLeave(
leave, enter, argAggregator, ARG, ARG2
@@ -162,9 +162,9 @@ describe('ReactDOMTreeTraversal', () => {
var leave = null; // From the window or outside of the React sandbox.
var enter = getInst(parent.refs.P_P1_C1.refs.DIV);
var expectedAggregation = [
{node: parent.refs.P, isUp: false, arg: ARG2},
{node: parent.refs.P_P1, isUp: false, arg: ARG2},
{node: parent.refs.P_P1_C1.refs.DIV, isUp: false, arg: ARG2},
{node: parent.refs.P, phase: 'captured', arg: ARG2},
{node: parent.refs.P_P1, phase: 'captured', arg: ARG2},
{node: parent.refs.P_P1_C1.refs.DIV, phase: 'captured', arg: ARG2},
];
ReactDOMTreeTraversal.traverseEnterLeave(
leave, enter, argAggregator, ARG, ARG2
@@ -177,7 +177,7 @@ describe('ReactDOMTreeTraversal', () => {
var leave = null; // From the window or outside of the React sandbox.
var enter = getInst(parent.refs.P);
var expectedAggregation = [
{node: parent.refs.P, isUp: false, arg: ARG2},
{node: parent.refs.P, phase: 'captured', arg: ARG2},
];
ReactDOMTreeTraversal.traverseEnterLeave(
leave, enter, argAggregator, ARG, ARG2
@@ -190,9 +190,9 @@ describe('ReactDOMTreeTraversal', () => {
var enter = null; // From the window or outside of the React sandbox.
var leave = getInst(parent.refs.P_P1_C1.refs.DIV);
var expectedAggregation = [
{node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},
{node: parent.refs.P_P1, isUp: true, arg: ARG},
{node: parent.refs.P, isUp: true, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV, phase: 'bubbled', arg: ARG},
{node: parent.refs.P_P1, phase: 'bubbled', arg: ARG},
{node: parent.refs.P, phase: 'bubbled', arg: ARG},
];
ReactDOMTreeTraversal.traverseEnterLeave(
leave, enter, argAggregator, ARG, ARG2
@@ -205,9 +205,9 @@ describe('ReactDOMTreeTraversal', () => {
var enter = null; // From the window or outside of the React sandbox.
var leave = getInst(parent.refs.P_P1_C1.refs.DIV);
var expectedAggregation = [
{node: parent.refs.P_P1_C1.refs.DIV, isUp: true, arg: ARG},
{node: parent.refs.P_P1, isUp: true, arg: ARG},
{node: parent.refs.P, isUp: true, arg: ARG},
{node: parent.refs.P_P1_C1.refs.DIV, phase: 'bubbled', arg: ARG},
{node: parent.refs.P_P1, phase: 'bubbled', arg: ARG},
{node: parent.refs.P, phase: 'bubbled', arg: ARG},
];
ReactDOMTreeTraversal.traverseEnterLeave(
leave, enter, argAggregator, ARG, ARG2
src/renderers/native/ReactNativeTreeTraversal.js
+2 -2
View File
@@ -110,10 +110,10 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
}
var i;
for (i = 0; i < pathFrom.length; i++) {
fn(pathFrom[i], true, argFrom);
fn(pathFrom[i], 'bubbled', argFrom);
}
for (i = pathTo.length; i-- > 0;) {
fn(pathTo[i], false, argTo);
fn(pathTo[i], 'captured', argTo);
}
}
src/renderers/shared/stack/event/EventPropagators.js
+1 -2
View File
@@ -38,14 +38,13 @@ function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
* Mutating the event's members allows us to not have to create a wrapping
* "dispatch" object that pairs the event with the listener.
*/
function accumulateDirectionalDispatches(inst, upwards, event) {
function accumulateDirectionalDispatches(inst, phase, event) {
if (__DEV__) {
warning(
inst,
'Dispatching inst must not be null'
);
}
var phase = upwards ? 'bubbled' : 'captured';
var listener = listenerAtPhase(inst, event, phase);
if (listener) {
event._dispatchListeners =
src/renderers/shared/stack/event/eventPlugins/__tests__/ResponderEventPlugin-test.js
+3 -3
View File
@@ -389,7 +389,7 @@ describe('ResponderEventPlugin', () => {
for (var id = start; /* until break */; id = traverse(id, stop)) {
var ret;
if ((!skipFirst || id !== start) && (!skipLast || id !== stop)) {
ret = cb(id, traverseUp, arg);
ret = cb(id, traverseUp ? 'bubbled': 'captured', arg);
}
if (ret === false || id === stop) {
// Only break //after// visiting `stop`.
@@ -437,8 +437,8 @@ describe('ResponderEventPlugin', () => {
traverseTwoPhase: function(target, fn, arg) {
traverseTwoPhase(
target._rootNodeID,
function(id, upwards) {
fn(idToInstance[id], upwards, arg);
function(id, phase) {
fn(idToInstance[id], phase, arg);
}
);
},