From b3af02a3cdca6865d3bbd3346b7f12afd2a57b0d Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Wed, 16 Nov 2016 15:43:55 +0000 Subject: [PATCH] Add Fibers to ReactTreeTraversal This traverses parent based on the type of internal instance it is passed. If it is a Fiber it may have to traverse multiple steps until it finds a HostComponent. This will allow us to use the event system with Fiber. --- scripts/fiber/tests-failing.txt | 18 --------- scripts/fiber/tests-passing.txt | 14 +++++++ src/renderers/dom/fiber/ReactDOMFiber.js | 6 +++ .../shared/shared/ReactTreeTraversal.js | 40 ++++++++++++++----- 4 files changed, 49 insertions(+), 29 deletions(-) diff --git a/scripts/fiber/tests-failing.txt b/scripts/fiber/tests-failing.txt index 787f200407..8f5c60c510 100644 --- a/scripts/fiber/tests-failing.txt +++ b/scripts/fiber/tests-failing.txt @@ -11,13 +11,6 @@ src/addons/__tests__/renderSubtreeIntoContainer-test.js * should update context if it changes due to setState * should update context if it changes due to re-render -src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js -* should clean-up silently after the timeout elapses -* should keep both sets of DOM nodes around -* should switch transitionLeave from false to true -* should transition from one to null -* should transition from false to one - src/isomorphic/classic/__tests__/ReactContextValidator-test.js * should pass previous context to lifecycles @@ -388,17 +381,6 @@ src/renderers/shared/hooks/__tests__/ReactHostOperationHistoryHook-test.js * gets reported when a child is inserted * gets reported when a child is removed -src/renderers/shared/shared/__tests__/ReactTreeTraversal-test.js -* should traverse two phase across component boundary -* should traverse two phase at shallowest node -* should traverse enter/leave to sibling - avoids parent -* should traverse enter/leave to parent - avoids parent -* should enter from the window -* should enter from the window to the shallowest -* should leave to the window -* should leave to the window from the shallowest -* should determine the first common ancestor correctly - src/renderers/shared/shared/event/__tests__/EventPluginHub-test.js * should prevent non-function listeners, at dispatch * should not prevent null listeners, at dispatch diff --git a/scripts/fiber/tests-passing.txt b/scripts/fiber/tests-passing.txt index 91ea3b01cb..8330f2a9f3 100644 --- a/scripts/fiber/tests-passing.txt +++ b/scripts/fiber/tests-passing.txt @@ -75,8 +75,13 @@ src/addons/__tests__/update-test.js src/addons/transitions/__tests__/ReactCSSTransitionGroup-test.js * should warn if timeouts aren't specified * should not warn if timeouts is zero +* should clean-up silently after the timeout elapses +* should keep both sets of DOM nodes around +* should switch transitionLeave from false to true * should work with no children * should work with a null child +* should transition from one to null +* should transition from false to one * should use transition-type specific names when they're provided * should clear transition timeouts when unmounted * should handle unmounted elements properly @@ -963,8 +968,17 @@ src/renderers/shared/hooks/__tests__/ReactHostOperationHistoryHook-test.js src/renderers/shared/shared/__tests__/ReactTreeTraversal-test.js * should not traverse when traversing outside DOM +* should traverse two phase across component boundary +* should traverse two phase at shallowest node * should not traverse when enter/leaving outside DOM * should not traverse if enter/leave the same node +* should traverse enter/leave to sibling - avoids parent +* should traverse enter/leave to parent - avoids parent +* should enter from the window +* should enter from the window to the shallowest +* should leave to the window +* should leave to the window from the shallowest +* should determine the first common ancestor correctly src/renderers/shared/shared/event/__tests__/EventPluginRegistry-test.js * should be able to inject ordering before plugins diff --git a/src/renderers/dom/fiber/ReactDOMFiber.js b/src/renderers/dom/fiber/ReactDOMFiber.js index 25075bb415..da281a222f 100644 --- a/src/renderers/dom/fiber/ReactDOMFiber.js +++ b/src/renderers/dom/fiber/ReactDOMFiber.js @@ -75,6 +75,9 @@ var DOMRenderer = ReactFiberReconciler({ typeof props.dangerouslySetInnerHTML.__html === 'string') { domElement.innerHTML = props.dangerouslySetInnerHTML.__html; } + if (typeof props.id === 'string') { + domElement.id = props.id; + } return domElement; }, @@ -99,6 +102,9 @@ var DOMRenderer = ReactFiberReconciler({ typeof newProps.dangerouslySetInnerHTML.__html === 'string') { domElement.innerHTML = newProps.dangerouslySetInnerHTML.__html; } + if (typeof newProps.id === 'string') { + domElement.id = newProps.id; + } }, createTextInstance(text : string, internalInstanceHandle : Object) : TextInstance { diff --git a/src/renderers/shared/shared/ReactTreeTraversal.js b/src/renderers/shared/shared/ReactTreeTraversal.js index 6a2f8b7b8a..fe4e7f24d9 100644 --- a/src/renderers/shared/shared/ReactTreeTraversal.js +++ b/src/renderers/shared/shared/ReactTreeTraversal.js @@ -11,29 +11,47 @@ 'use strict'; +var { HostComponent } = require('ReactTypeOfWork'); + +function getParent(inst) { + if (inst._hostParent !== undefined) { + return inst._hostParent; + } + if (typeof inst.tag === 'number') { + do { + inst = inst.return; + // TODO: If this is a HostContainer we might want to bail out. + // That is depending on if we want nested subtrees (layers) to bubble + // events to their parent. + } while (inst && inst.tag !== HostComponent); + return inst; + } + return null; +} + /** * Return the lowest common ancestor of A and B, or null if they are in * different trees. */ function getLowestCommonAncestor(instA, instB) { var depthA = 0; - for (var tempA = instA; tempA; tempA = tempA._hostParent) { + for (var tempA = instA; tempA; tempA = getParent(tempA)) { depthA++; } var depthB = 0; - for (var tempB = instB; tempB; tempB = tempB._hostParent) { + for (var tempB = instB; tempB; tempB = getParent(tempB)) { depthB++; } // If A is deeper, crawl up. while (depthA - depthB > 0) { - instA = instA._hostParent; + instA = getParent(instA); depthA--; } // If B is deeper, crawl up. while (depthB - depthA > 0) { - instB = instB._hostParent; + instB = getParent(instB); depthB--; } @@ -43,8 +61,8 @@ function getLowestCommonAncestor(instA, instB) { if (instA === instB) { return instA; } - instA = instA._hostParent; - instB = instB._hostParent; + instA = getParent(instA); + instB = getParent(instB); } return null; } @@ -57,7 +75,7 @@ function isAncestor(instA, instB) { if (instB === instA) { return true; } - instB = instB._hostParent; + instB = getParent(instB); } return false; } @@ -66,7 +84,7 @@ function isAncestor(instA, instB) { * Return the parent instance of the passed-in instance. */ function getParentInstance(inst) { - return inst._hostParent; + return getParent(inst); } /** @@ -76,7 +94,7 @@ function traverseTwoPhase(inst, fn, arg) { var path = []; while (inst) { path.push(inst); - inst = inst._hostParent; + inst = getParent(inst); } var i; for (i = path.length; i-- > 0;) { @@ -99,12 +117,12 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) { var pathFrom = []; while (from && from !== common) { pathFrom.push(from); - from = from._hostParent; + from = getParent(from); } var pathTo = []; while (to && to !== common) { pathTo.push(to); - to = to._hostParent; + to = getParent(to); } var i; for (i = 0; i < pathFrom.length; i++) {