mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Rename host-y things to be "host" not "native" (#6754)
For clarity.
I left "native event" as-is because there's a lot of it, it's not particularly ambiguous, and SimulateNative/nativeTouchData are public API in ReactTestUtils.
(cherry picked from commit ba9b985406)
This commit is contained in:
committed by
Paul O’Shannessy
parent
69208fc62a
commit
5d3920f5ab
@@ -50,7 +50,7 @@ var currentTimerType = null;
|
||||
|
||||
function clearHistory() {
|
||||
ReactComponentTreeDevtool.purgeUnmountedComponents();
|
||||
ReactNativeOperationHistoryDevtool.clearHistory();
|
||||
ReactHostOperationHistoryDevtool.clearHistory();
|
||||
}
|
||||
|
||||
function getTreeSnapshot(registeredIDs) {
|
||||
@@ -74,7 +74,7 @@ function resetMeasurements() {
|
||||
if (__DEV__) {
|
||||
var previousStartTime = currentFlushStartTime;
|
||||
var previousMeasurements = currentFlushMeasurements || [];
|
||||
var previousOperations = ReactNativeOperationHistoryDevtool.getHistory();
|
||||
var previousOperations = ReactHostOperationHistoryDevtool.getHistory();
|
||||
|
||||
if (!isProfiling || currentFlushNesting === 0) {
|
||||
currentFlushStartTime = null;
|
||||
@@ -214,9 +214,9 @@ var ReactDebugTool = {
|
||||
onEndProcessingChildContext() {
|
||||
emitEvent('onEndProcessingChildContext');
|
||||
},
|
||||
onNativeOperation(debugID, type, payload) {
|
||||
onHostOperation(debugID, type, payload) {
|
||||
checkDebugID(debugID);
|
||||
emitEvent('onNativeOperation', debugID, type, payload);
|
||||
emitEvent('onHostOperation', debugID, type, payload);
|
||||
},
|
||||
onSetState() {
|
||||
emitEvent('onSetState');
|
||||
@@ -260,11 +260,11 @@ var ReactDebugTool = {
|
||||
|
||||
if (__DEV__) {
|
||||
var ReactInvalidSetStateWarningDevTool = require('ReactInvalidSetStateWarningDevTool');
|
||||
var ReactNativeOperationHistoryDevtool = require('ReactNativeOperationHistoryDevtool');
|
||||
var ReactHostOperationHistoryDevtool = require('ReactHostOperationHistoryDevtool');
|
||||
var ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
|
||||
ReactDebugTool.addDevtool(ReactInvalidSetStateWarningDevTool);
|
||||
ReactDebugTool.addDevtool(ReactComponentTreeDevtool);
|
||||
ReactDebugTool.addDevtool(ReactNativeOperationHistoryDevtool);
|
||||
ReactDebugTool.addDevtool(ReactHostOperationHistoryDevtool);
|
||||
var url = (ExecutionEnvironment.canUseDOM && window.location.href) || '';
|
||||
if ((/[?&]react_perf\b/).test(url)) {
|
||||
ReactDebugTool.beginProfiling();
|
||||
|
||||
@@ -167,7 +167,7 @@ function getWasted(flushHistory = getFlushHistory()) {
|
||||
var {measurements, treeSnapshot, operations} = flush;
|
||||
var isDefinitelyNotWastedByID = {};
|
||||
|
||||
// Find native components associated with an operation in this batch.
|
||||
// Find host components associated with an operation in this batch.
|
||||
// Mark all components in their parent tree as definitely not wasted.
|
||||
operations.forEach(operation => {
|
||||
var {instanceID} = operation;
|
||||
|
||||
@@ -55,7 +55,7 @@ var injectedMixins = [];
|
||||
|
||||
/**
|
||||
* Composite components are higher-level components that compose other composite
|
||||
* or native components.
|
||||
* or host components.
|
||||
*
|
||||
* To create a new type of `ReactClass`, pass a specification of
|
||||
* your new class to `React.createClass`. The only requirement of your class
|
||||
|
||||
+5
-5
@@ -6,15 +6,15 @@
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule ReactNativeOperationHistoryDevtool
|
||||
* @providesModule ReactHostOperationHistoryDevtool
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var history = [];
|
||||
|
||||
var ReactNativeOperationHistoryDevtool = {
|
||||
onNativeOperation(debugID, type, payload) {
|
||||
var ReactHostOperationHistoryDevtool = {
|
||||
onHostOperation(debugID, type, payload) {
|
||||
history.push({
|
||||
instanceID: debugID,
|
||||
type,
|
||||
@@ -23,7 +23,7 @@ var ReactNativeOperationHistoryDevtool = {
|
||||
},
|
||||
|
||||
clearHistory() {
|
||||
if (ReactNativeOperationHistoryDevtool._preventClearing) {
|
||||
if (ReactHostOperationHistoryDevtool._preventClearing) {
|
||||
// Should only be used for tests.
|
||||
return;
|
||||
}
|
||||
@@ -36,4 +36,4 @@ var ReactNativeOperationHistoryDevtool = {
|
||||
},
|
||||
};
|
||||
|
||||
module.exports = ReactNativeOperationHistoryDevtool;
|
||||
module.exports = ReactHostOperationHistoryDevtool;
|
||||
@@ -289,7 +289,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
assertTreeMatches([element, tree]);
|
||||
});
|
||||
|
||||
it('reports a native tree correctly', () => {
|
||||
it('reports a host tree correctly', () => {
|
||||
var element = (
|
||||
<div>
|
||||
<p>
|
||||
@@ -532,7 +532,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
});
|
||||
|
||||
describe('update', () => {
|
||||
describe('native component', () => {
|
||||
describe('host component', () => {
|
||||
it('updates text of a single text child', () => {
|
||||
var elementBefore = <div>Hi.</div>;
|
||||
var treeBefore = {
|
||||
@@ -869,7 +869,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates native nodes when reordering with keys', () => {
|
||||
it('updates host nodes when reordering with keys', () => {
|
||||
var elementBefore = (
|
||||
<div>
|
||||
<div key="a">Hi.</div>
|
||||
@@ -922,7 +922,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates native nodes when reordering without keys', () => {
|
||||
it('updates host nodes when reordering without keys', () => {
|
||||
var elementBefore = (
|
||||
<div>
|
||||
<div>Hi.</div>
|
||||
@@ -1172,7 +1172,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
});
|
||||
|
||||
describe('functional component', () => {
|
||||
it('updates with a native child', () => {
|
||||
it('updates with a host child', () => {
|
||||
function Foo({ children }) {
|
||||
return children;
|
||||
}
|
||||
@@ -1201,7 +1201,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from null to a native child', () => {
|
||||
it('updates from null to a host child', () => {
|
||||
function Foo({ children }) {
|
||||
return children;
|
||||
}
|
||||
@@ -1227,7 +1227,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to null', () => {
|
||||
it('updates from a host child to null', () => {
|
||||
function Foo({ children }) {
|
||||
return children;
|
||||
}
|
||||
@@ -1253,7 +1253,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to a composite child', () => {
|
||||
it('updates from a host child to a composite child', () => {
|
||||
function Bar() {
|
||||
return null;
|
||||
}
|
||||
@@ -1286,7 +1286,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a composite child to a native child', () => {
|
||||
it('updates from a composite child to a host child', () => {
|
||||
function Bar() {
|
||||
return null;
|
||||
}
|
||||
@@ -1381,7 +1381,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
});
|
||||
|
||||
describe('class component', () => {
|
||||
it('updates with a native child', () => {
|
||||
it('updates with a host child', () => {
|
||||
var Foo = React.createClass({
|
||||
render() {
|
||||
return this.props.children;
|
||||
@@ -1412,7 +1412,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from null to a native child', () => {
|
||||
it('updates from null to a host child', () => {
|
||||
var Foo = React.createClass({
|
||||
render() {
|
||||
return this.props.children;
|
||||
@@ -1440,7 +1440,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to null', () => {
|
||||
it('updates from a host child to null', () => {
|
||||
var Foo = React.createClass({
|
||||
render() {
|
||||
return this.props.children;
|
||||
@@ -1468,7 +1468,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to a composite child', () => {
|
||||
it('updates from a host child to a composite child', () => {
|
||||
var Bar = React.createClass({
|
||||
render() {
|
||||
return null;
|
||||
@@ -1505,7 +1505,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a composite child to a native child', () => {
|
||||
it('updates from a composite child to a host child', () => {
|
||||
var Bar = React.createClass({
|
||||
render() {
|
||||
return null;
|
||||
|
||||
@@ -300,7 +300,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
assertTreeMatches([element, tree]);
|
||||
});
|
||||
|
||||
it('reports a native tree correctly', () => {
|
||||
it('reports a host tree correctly', () => {
|
||||
var element = (
|
||||
<View>
|
||||
<View>
|
||||
@@ -540,7 +540,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
});
|
||||
|
||||
describe('update', () => {
|
||||
describe('native component', () => {
|
||||
describe('host component', () => {
|
||||
it('updates text of a single text child', () => {
|
||||
var elementBefore = <Text>Hi.</Text>;
|
||||
var treeBefore = {
|
||||
@@ -792,7 +792,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates native nodes when reordering with keys', () => {
|
||||
it('updates host nodes when reordering with keys', () => {
|
||||
var elementBefore = (
|
||||
<View>
|
||||
<Text key="a">Hi.</Text>
|
||||
@@ -857,7 +857,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates native nodes when reordering with keys', () => {
|
||||
it('updates host nodes when reordering with keys', () => {
|
||||
var elementBefore = (
|
||||
<View>
|
||||
<Text>Hi.</Text>
|
||||
@@ -1137,7 +1137,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
});
|
||||
|
||||
describe('functional component', () => {
|
||||
it('updates with a native child', () => {
|
||||
it('updates with a host child', () => {
|
||||
function Foo({ children }) {
|
||||
return children;
|
||||
}
|
||||
@@ -1166,7 +1166,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from null to a native child', () => {
|
||||
it('updates from null to a host child', () => {
|
||||
function Foo({ children }) {
|
||||
return children;
|
||||
}
|
||||
@@ -1192,7 +1192,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to null', () => {
|
||||
it('updates from a host child to null', () => {
|
||||
function Foo({ children }) {
|
||||
return children;
|
||||
}
|
||||
@@ -1218,7 +1218,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to a composite child', () => {
|
||||
it('updates from a host child to a composite child', () => {
|
||||
function Bar() {
|
||||
return null;
|
||||
}
|
||||
@@ -1251,7 +1251,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a composite child to a native child', () => {
|
||||
it('updates from a composite child to a host child', () => {
|
||||
function Bar() {
|
||||
return null;
|
||||
}
|
||||
@@ -1346,7 +1346,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
});
|
||||
|
||||
describe('class component', () => {
|
||||
it('updates with a native child', () => {
|
||||
it('updates with a host child', () => {
|
||||
var Foo = React.createClass({
|
||||
render() {
|
||||
return this.props.children;
|
||||
@@ -1377,7 +1377,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from null to a native child', () => {
|
||||
it('updates from null to a host child', () => {
|
||||
var Foo = React.createClass({
|
||||
render() {
|
||||
return this.props.children;
|
||||
@@ -1405,7 +1405,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to null', () => {
|
||||
it('updates from a host child to null', () => {
|
||||
var Foo = React.createClass({
|
||||
render() {
|
||||
return this.props.children;
|
||||
@@ -1433,7 +1433,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a native child to a composite child', () => {
|
||||
it('updates from a host child to a composite child', () => {
|
||||
var Bar = React.createClass({
|
||||
render() {
|
||||
return null;
|
||||
@@ -1470,7 +1470,7 @@ describe('ReactComponentTreeDevtool', () => {
|
||||
]);
|
||||
});
|
||||
|
||||
it('updates from a composite child to a native child', () => {
|
||||
it('updates from a composite child to a host child', () => {
|
||||
var Bar = React.createClass({
|
||||
render() {
|
||||
return null;
|
||||
|
||||
+35
-35
@@ -11,12 +11,12 @@
|
||||
|
||||
'use strict';
|
||||
|
||||
describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
describe('ReactHostOperationHistoryDevtool', () => {
|
||||
var React;
|
||||
var ReactDOM;
|
||||
var ReactDOMComponentTree;
|
||||
var ReactDOMFeatureFlags;
|
||||
var ReactNativeOperationHistoryDevtool;
|
||||
var ReactHostOperationHistoryDevtool;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.resetModuleRegistry();
|
||||
@@ -25,18 +25,18 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM = require('ReactDOM');
|
||||
ReactDOMComponentTree = require('ReactDOMComponentTree');
|
||||
ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
|
||||
ReactNativeOperationHistoryDevtool = require('ReactNativeOperationHistoryDevtool');
|
||||
ReactHostOperationHistoryDevtool = require('ReactHostOperationHistoryDevtool');
|
||||
});
|
||||
|
||||
function assertHistoryMatches(expectedHistory) {
|
||||
var actualHistory = ReactNativeOperationHistoryDevtool.getHistory();
|
||||
var actualHistory = ReactHostOperationHistoryDevtool.getHistory();
|
||||
expect(actualHistory).toEqual(expectedHistory);
|
||||
}
|
||||
|
||||
describe('mount', () => {
|
||||
it('gets recorded for native roots', () => {
|
||||
it('gets recorded for host roots', () => {
|
||||
var node = document.createElement('div');
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div><p>Hi.</p></div>, node);
|
||||
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
@@ -55,7 +55,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
}
|
||||
var node = document.createElement('div');
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<Foo />, node);
|
||||
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
@@ -75,7 +75,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
}
|
||||
var node = document.createElement('div');
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<Foo />, node);
|
||||
|
||||
// Empty DOM components should be invisible to devtools.
|
||||
@@ -88,7 +88,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
return element;
|
||||
}
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
|
||||
var node = document.createElement('div');
|
||||
element = null;
|
||||
@@ -112,7 +112,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
it('gets recorded during mount', () => {
|
||||
var node = document.createElement('div');
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div style={{
|
||||
color: 'red',
|
||||
backgroundColor: 'yellow',
|
||||
@@ -147,7 +147,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div />, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div style={{ color: 'red' }} />, node);
|
||||
ReactDOM.render(<div style={{
|
||||
color: 'blue',
|
||||
@@ -180,7 +180,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div />, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div style={{
|
||||
color: 'red',
|
||||
backgroundColor: 'yellow',
|
||||
@@ -206,7 +206,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
it('gets recorded during mount', () => {
|
||||
var node = document.createElement('div');
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div className="rad" tabIndex={42} />, node);
|
||||
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
@@ -239,7 +239,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div />, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div className="rad" />, node);
|
||||
ReactDOM.render(<div className="mad" tabIndex={42} />, node);
|
||||
ReactDOM.render(<div tabIndex={43} />, node);
|
||||
@@ -274,7 +274,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div />, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div disabled={true} />, node);
|
||||
ReactDOM.render(<div disabled={false} />, node);
|
||||
|
||||
@@ -294,7 +294,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
it('gets recorded during mount', () => {
|
||||
var node = document.createElement('div');
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div data-x="rad" data-y={42} />, node);
|
||||
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
@@ -327,7 +327,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div />, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div data-x="rad" />, node);
|
||||
ReactDOM.render(<div data-x="mad" data-y={42} />, node);
|
||||
ReactDOM.render(<div data-y={43} />, node);
|
||||
@@ -360,7 +360,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
it('gets recorded during mount', () => {
|
||||
var node = document.createElement('div');
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<my-component className="rad" tabIndex={42} />, node);
|
||||
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
@@ -393,7 +393,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<my-component />, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<my-component className="rad" />, node);
|
||||
ReactDOM.render(<my-component className="mad" tabIndex={42} />, node);
|
||||
ReactDOM.render(<my-component tabIndex={43} />, node);
|
||||
@@ -430,7 +430,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div>Hi.</div>, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div>Bye.</div>, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -445,7 +445,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div>Bye.</div>, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -460,7 +460,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div><span /><p /></div>, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div>Bye.</div>, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -482,7 +482,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
var node = document.createElement('div');
|
||||
ReactDOM.render(<div>Hi.</div>, node);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div>Hi.</div>, node);
|
||||
|
||||
assertHistoryMatches([]);
|
||||
@@ -496,7 +496,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
var inst1 = ReactDOMComponentTree.getInstanceFromNode(node.firstChild.childNodes[0]);
|
||||
var inst2 = ReactDOMComponentTree.getInstanceFromNode(node.firstChild.childNodes[3]);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div>{'Bye.'}{43}</div>, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -514,7 +514,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
var node = document.createElement('div');
|
||||
ReactDOM.render(<div>{'Hi.'}{42}</div>, node);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div>{'Hi.'}{42}</div>, node);
|
||||
|
||||
assertHistoryMatches([]);
|
||||
@@ -536,7 +536,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
|
||||
element = <span />;
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<Foo />, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -559,7 +559,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
element = null;
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<Foo />, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -581,7 +581,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
|
||||
element = <div />;
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<Foo />, node);
|
||||
|
||||
assertHistoryMatches([]);
|
||||
@@ -594,7 +594,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div>Hi.</div>, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(
|
||||
<div dangerouslySetInnerHTML={{__html: 'Bye.'}} />,
|
||||
node
|
||||
@@ -615,7 +615,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(
|
||||
<div dangerouslySetInnerHTML={{__html: 'Bye.'}} />,
|
||||
node
|
||||
@@ -633,7 +633,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div><span /><p /></div>, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(
|
||||
<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />,
|
||||
node
|
||||
@@ -661,7 +661,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
node
|
||||
);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(
|
||||
<div dangerouslySetInnerHTML={{__html: 'Hi.'}} />,
|
||||
node
|
||||
@@ -677,7 +677,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div><span /></div>, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div><span /><p /></div>, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -694,7 +694,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div><span key="a" /><p key="b" /></div>, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div><p key="b" /><span key="a" /></div>, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -711,7 +711,7 @@ describe('ReactNativeOperationHistoryDevtool', () => {
|
||||
ReactDOM.render(<div><span key="a" /><p key="b" /></div>, node);
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(node.firstChild);
|
||||
|
||||
ReactNativeOperationHistoryDevtool._preventClearing = true;
|
||||
ReactHostOperationHistoryDevtool._preventClearing = true;
|
||||
ReactDOM.render(<div><span key="a" /></div>, node);
|
||||
|
||||
assertHistoryMatches([{
|
||||
@@ -21,7 +21,7 @@ var ReactUpdates = require('ReactUpdates');
|
||||
var ReactVersion = require('ReactVersion');
|
||||
|
||||
var findDOMNode = require('findDOMNode');
|
||||
var getNativeComponentFromComposite = require('getNativeComponentFromComposite');
|
||||
var getHostComponentFromComposite = require('getHostComponentFromComposite');
|
||||
var renderSubtreeIntoContainer = require('renderSubtreeIntoContainer');
|
||||
var warning = require('warning');
|
||||
|
||||
@@ -51,7 +51,7 @@ if (
|
||||
getNodeFromInstance: function(inst) {
|
||||
// inst is an internal instance (but could be a composite)
|
||||
if (inst._renderedComponent) {
|
||||
inst = getNativeComponentFromComposite(inst);
|
||||
inst = getHostComponentFromComposite(inst);
|
||||
}
|
||||
if (inst) {
|
||||
return ReactDOMComponentTree.getNodeFromInstance(inst);
|
||||
|
||||
@@ -23,13 +23,13 @@ var internalInstanceKey =
|
||||
'__reactInternalInstance$' + Math.random().toString(36).slice(2);
|
||||
|
||||
/**
|
||||
* Drill down (through composites and empty components) until we get a native or
|
||||
* native text component.
|
||||
* Drill down (through composites and empty components) until we get a host or
|
||||
* host text component.
|
||||
*
|
||||
* This is pretty polymorphic but unavoidable with the current structure we have
|
||||
* for `_renderedChildren`.
|
||||
*/
|
||||
function getRenderedNativeOrTextFromComponent(component) {
|
||||
function getRenderedHostOrTextFromComponent(component) {
|
||||
var rendered;
|
||||
while ((rendered = component._renderedComponent)) {
|
||||
component = rendered;
|
||||
@@ -38,25 +38,25 @@ function getRenderedNativeOrTextFromComponent(component) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate `_nativeNode` on the rendered native/text component with the given
|
||||
* Populate `_hostNode` on the rendered host/text component with the given
|
||||
* DOM node. The passed `inst` can be a composite.
|
||||
*/
|
||||
function precacheNode(inst, node) {
|
||||
var nativeInst = getRenderedNativeOrTextFromComponent(inst);
|
||||
nativeInst._nativeNode = node;
|
||||
node[internalInstanceKey] = nativeInst;
|
||||
var hostInst = getRenderedHostOrTextFromComponent(inst);
|
||||
hostInst._hostNode = node;
|
||||
node[internalInstanceKey] = hostInst;
|
||||
}
|
||||
|
||||
function uncacheNode(inst) {
|
||||
var node = inst._nativeNode;
|
||||
var node = inst._hostNode;
|
||||
if (node) {
|
||||
delete node[internalInstanceKey];
|
||||
inst._nativeNode = null;
|
||||
inst._hostNode = null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate `_nativeNode` on each child of `inst`, assuming that the children
|
||||
* Populate `_hostNode` on each child of `inst`, assuming that the children
|
||||
* match up with the DOM (element) children of `node`.
|
||||
*
|
||||
* We cache entire levels at once to avoid an n^2 problem where we access the
|
||||
@@ -80,7 +80,7 @@ function precacheChildNodes(inst, node) {
|
||||
continue;
|
||||
}
|
||||
var childInst = children[name];
|
||||
var childID = getRenderedNativeOrTextFromComponent(childInst)._domID;
|
||||
var childID = getRenderedHostOrTextFromComponent(childInst)._domID;
|
||||
if (childID == null) {
|
||||
// We're currently unmounting this child in ReactMultiChild; skip it.
|
||||
continue;
|
||||
@@ -143,7 +143,7 @@ function getClosestInstanceFromNode(node) {
|
||||
*/
|
||||
function getInstanceFromNode(node) {
|
||||
var inst = getClosestInstanceFromNode(node);
|
||||
if (inst != null && inst._nativeNode === node) {
|
||||
if (inst != null && inst._hostNode === node) {
|
||||
return inst;
|
||||
} else {
|
||||
return null;
|
||||
@@ -158,32 +158,32 @@ function getNodeFromInstance(inst) {
|
||||
// Without this first invariant, passing a non-DOM-component triggers the next
|
||||
// invariant for a missing parent, which is super confusing.
|
||||
invariant(
|
||||
inst._nativeNode !== undefined,
|
||||
inst._hostNode !== undefined,
|
||||
'getNodeFromInstance: Invalid argument.'
|
||||
);
|
||||
|
||||
if (inst._nativeNode) {
|
||||
return inst._nativeNode;
|
||||
if (inst._hostNode) {
|
||||
return inst._hostNode;
|
||||
}
|
||||
|
||||
// Walk up the tree until we find an ancestor whose DOM node we have cached.
|
||||
var parents = [];
|
||||
while (!inst._nativeNode) {
|
||||
while (!inst._hostNode) {
|
||||
parents.push(inst);
|
||||
invariant(
|
||||
inst._nativeParent,
|
||||
inst._hostParent,
|
||||
'React DOM tree root should always have a node reference.'
|
||||
);
|
||||
inst = inst._nativeParent;
|
||||
inst = inst._hostParent;
|
||||
}
|
||||
|
||||
// Now parents contains each ancestor that does *not* have a cached native
|
||||
// node, and `inst` is the deepest ancestor that does.
|
||||
for (; parents.length; inst = parents.pop()) {
|
||||
precacheChildNodes(inst, inst._nativeNode);
|
||||
precacheChildNodes(inst, inst._hostNode);
|
||||
}
|
||||
|
||||
return inst._nativeNode;
|
||||
return inst._hostNode;
|
||||
}
|
||||
|
||||
var ReactDOMComponentTree = {
|
||||
|
||||
@@ -18,27 +18,27 @@ var invariant = require('invariant');
|
||||
* different trees.
|
||||
*/
|
||||
function getLowestCommonAncestor(instA, instB) {
|
||||
invariant('_nativeNode' in instA, 'getNodeFromInstance: Invalid argument.');
|
||||
invariant('_nativeNode' in instB, 'getNodeFromInstance: Invalid argument.');
|
||||
invariant('_hostNode' in instA, 'getNodeFromInstance: Invalid argument.');
|
||||
invariant('_hostNode' in instB, 'getNodeFromInstance: Invalid argument.');
|
||||
|
||||
var depthA = 0;
|
||||
for (var tempA = instA; tempA; tempA = tempA._nativeParent) {
|
||||
for (var tempA = instA; tempA; tempA = tempA._hostParent) {
|
||||
depthA++;
|
||||
}
|
||||
var depthB = 0;
|
||||
for (var tempB = instB; tempB; tempB = tempB._nativeParent) {
|
||||
for (var tempB = instB; tempB; tempB = tempB._hostParent) {
|
||||
depthB++;
|
||||
}
|
||||
|
||||
// If A is deeper, crawl up.
|
||||
while (depthA - depthB > 0) {
|
||||
instA = instA._nativeParent;
|
||||
instA = instA._hostParent;
|
||||
depthA--;
|
||||
}
|
||||
|
||||
// If B is deeper, crawl up.
|
||||
while (depthB - depthA > 0) {
|
||||
instB = instB._nativeParent;
|
||||
instB = instB._hostParent;
|
||||
depthB--;
|
||||
}
|
||||
|
||||
@@ -48,8 +48,8 @@ function getLowestCommonAncestor(instA, instB) {
|
||||
if (instA === instB) {
|
||||
return instA;
|
||||
}
|
||||
instA = instA._nativeParent;
|
||||
instB = instB._nativeParent;
|
||||
instA = instA._hostParent;
|
||||
instB = instB._hostParent;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -58,14 +58,14 @@ function getLowestCommonAncestor(instA, instB) {
|
||||
* Return if A is an ancestor of B.
|
||||
*/
|
||||
function isAncestor(instA, instB) {
|
||||
invariant('_nativeNode' in instA, 'isAncestor: Invalid argument.');
|
||||
invariant('_nativeNode' in instB, 'isAncestor: Invalid argument.');
|
||||
invariant('_hostNode' in instA, 'isAncestor: Invalid argument.');
|
||||
invariant('_hostNode' in instB, 'isAncestor: Invalid argument.');
|
||||
|
||||
while (instB) {
|
||||
if (instB === instA) {
|
||||
return true;
|
||||
}
|
||||
instB = instB._nativeParent;
|
||||
instB = instB._hostParent;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -74,9 +74,9 @@ function isAncestor(instA, instB) {
|
||||
* Return the parent instance of the passed-in instance.
|
||||
*/
|
||||
function getParentInstance(inst) {
|
||||
invariant('_nativeNode' in inst, 'getParentInstance: Invalid argument.');
|
||||
invariant('_hostNode' in inst, 'getParentInstance: Invalid argument.');
|
||||
|
||||
return inst._nativeParent;
|
||||
return inst._hostParent;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -86,7 +86,7 @@ function traverseTwoPhase(inst, fn, arg) {
|
||||
var path = [];
|
||||
while (inst) {
|
||||
path.push(inst);
|
||||
inst = inst._nativeParent;
|
||||
inst = inst._hostParent;
|
||||
}
|
||||
var i;
|
||||
for (i = path.length; i-- > 0;) {
|
||||
@@ -109,12 +109,12 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
|
||||
var pathFrom = [];
|
||||
while (from && from !== common) {
|
||||
pathFrom.push(from);
|
||||
from = from._nativeParent;
|
||||
from = from._hostParent;
|
||||
}
|
||||
var pathTo = [];
|
||||
while (to && to !== common) {
|
||||
pathTo.push(to);
|
||||
to = to._nativeParent;
|
||||
to = to._hostParent;
|
||||
}
|
||||
var i;
|
||||
for (i = 0; i < pathFrom.length; i++) {
|
||||
|
||||
@@ -29,8 +29,8 @@ function findParent(inst) {
|
||||
// TODO: It may be a good idea to cache this to prevent unnecessary DOM
|
||||
// traversal, but caching is difficult to do correctly without using a
|
||||
// mutation observer to listen for all DOM changes.
|
||||
while (inst._nativeParent) {
|
||||
inst = inst._nativeParent;
|
||||
while (inst._hostParent) {
|
||||
inst = inst._hostParent;
|
||||
}
|
||||
var rootNode = ReactDOMComponentTree.getNodeFromInstance(inst);
|
||||
var container = rootNode.parentNode;
|
||||
|
||||
@@ -195,23 +195,23 @@ function hasNonRootReactChild(container) {
|
||||
var rootEl = getReactRootElementInContainer(container);
|
||||
if (rootEl) {
|
||||
var inst = ReactDOMComponentTree.getInstanceFromNode(rootEl);
|
||||
return !!(inst && inst._nativeParent);
|
||||
return !!(inst && inst._hostParent);
|
||||
}
|
||||
}
|
||||
|
||||
function getNativeRootInstanceInContainer(container) {
|
||||
function getHostRootInstanceInContainer(container) {
|
||||
var rootEl = getReactRootElementInContainer(container);
|
||||
var prevNativeInstance =
|
||||
var prevHostInstance =
|
||||
rootEl && ReactDOMComponentTree.getInstanceFromNode(rootEl);
|
||||
return (
|
||||
prevNativeInstance && !prevNativeInstance._nativeParent ?
|
||||
prevNativeInstance : null
|
||||
prevHostInstance && !prevHostInstance._hostParent ?
|
||||
prevHostInstance : null
|
||||
);
|
||||
}
|
||||
|
||||
function getTopLevelWrapperInContainer(container) {
|
||||
var root = getNativeRootInstanceInContainer(container);
|
||||
return root ? root._nativeContainerInfo._topLevelWrapper : null;
|
||||
var root = getHostRootInstanceInContainer(container);
|
||||
return root ? root._hostContainerInfo._topLevelWrapper : null;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -701,10 +701,10 @@ var ReactMount = {
|
||||
}
|
||||
|
||||
if (__DEV__) {
|
||||
var nativeNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
|
||||
if (nativeNode._debugID !== 0) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
nativeNode._debugID,
|
||||
var hostNode = ReactDOMComponentTree.getInstanceFromNode(container.firstChild);
|
||||
if (hostNode._debugID !== 0) {
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
hostNode._debugID,
|
||||
'mount',
|
||||
markup.toString()
|
||||
);
|
||||
|
||||
@@ -15,7 +15,7 @@ var ReactCurrentOwner = require('ReactCurrentOwner');
|
||||
var ReactDOMComponentTree = require('ReactDOMComponentTree');
|
||||
var ReactInstanceMap = require('ReactInstanceMap');
|
||||
|
||||
var getNativeComponentFromComposite = require('getNativeComponentFromComposite');
|
||||
var getHostComponentFromComposite = require('getHostComponentFromComposite');
|
||||
var invariant = require('invariant');
|
||||
var warning = require('warning');
|
||||
|
||||
@@ -52,7 +52,7 @@ function findDOMNode(componentOrElement) {
|
||||
|
||||
var inst = ReactInstanceMap.get(componentOrElement);
|
||||
if (inst) {
|
||||
inst = getNativeComponentFromComposite(inst);
|
||||
inst = getHostComponentFromComposite(inst);
|
||||
return inst ? ReactDOMComponentTree.getNodeFromInstance(inst) : null;
|
||||
}
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ var setTextContent = require('setTextContent');
|
||||
|
||||
function getNodeAfter(parentNode, node) {
|
||||
// Special case for text components, which return [open, close] comments
|
||||
// from getNativeNode.
|
||||
// from getHostNode.
|
||||
if (Array.isArray(node)) {
|
||||
node = node[1];
|
||||
}
|
||||
@@ -123,7 +123,7 @@ function replaceDelimitedText(openingComment, closingComment, stringText) {
|
||||
}
|
||||
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
ReactDOMComponentTree.getInstanceFromNode(openingComment)._debugID,
|
||||
'replace text',
|
||||
stringText
|
||||
@@ -136,7 +136,7 @@ if (__DEV__) {
|
||||
dangerouslyReplaceNodeWithMarkup = function(oldChild, markup, prevInstance) {
|
||||
Danger.dangerouslyReplaceNodeWithMarkup(oldChild, markup);
|
||||
if (prevInstance._debugID !== 0) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
prevInstance._debugID,
|
||||
'replace with',
|
||||
markup.toString()
|
||||
@@ -144,7 +144,7 @@ if (__DEV__) {
|
||||
} else {
|
||||
var nextInstance = ReactDOMComponentTree.getInstanceFromNode(markup.node);
|
||||
if (nextInstance._debugID !== 0) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
nextInstance._debugID,
|
||||
'mount',
|
||||
markup.toString()
|
||||
@@ -186,7 +186,7 @@ var DOMChildrenOperations = {
|
||||
getNodeAfter(parentNode, update.afterNode)
|
||||
);
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
parentNodeDebugID,
|
||||
'insert child',
|
||||
{toIndex: update.toIndex, content: update.content.toString()}
|
||||
@@ -200,7 +200,7 @@ var DOMChildrenOperations = {
|
||||
getNodeAfter(parentNode, update.afterNode)
|
||||
);
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
parentNodeDebugID,
|
||||
'move child',
|
||||
{fromIndex: update.fromIndex, toIndex: update.toIndex}
|
||||
@@ -213,7 +213,7 @@ var DOMChildrenOperations = {
|
||||
update.content
|
||||
);
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
parentNodeDebugID,
|
||||
'replace children',
|
||||
update.content.toString()
|
||||
@@ -226,7 +226,7 @@ var DOMChildrenOperations = {
|
||||
update.content
|
||||
);
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
parentNodeDebugID,
|
||||
'replace text',
|
||||
update.content.toString()
|
||||
@@ -236,7 +236,7 @@ var DOMChildrenOperations = {
|
||||
case ReactMultiChildUpdateTypes.REMOVE_NODE:
|
||||
removeChild(parentNode, update.fromNode);
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
parentNodeDebugID,
|
||||
'remove child',
|
||||
{fromIndex: update.fromIndex}
|
||||
|
||||
@@ -26,24 +26,24 @@ var disableableMouseListenerNames = {
|
||||
};
|
||||
|
||||
/**
|
||||
* Implements a native component that does not receive mouse events
|
||||
* Implements a host component that does not receive mouse events
|
||||
* when `disabled` is set.
|
||||
*/
|
||||
var DisabledInputUtils = {
|
||||
getNativeProps: function(inst, props) {
|
||||
getHostProps: function(inst, props) {
|
||||
if (!props.disabled) {
|
||||
return props;
|
||||
}
|
||||
|
||||
// Copy the props, except the mouse listeners
|
||||
var nativeProps = {};
|
||||
var hostProps = {};
|
||||
for (var key in props) {
|
||||
if (!disableableMouseListenerNames[key] && props.hasOwnProperty(key)) {
|
||||
nativeProps[key] = props[key];
|
||||
hostProps[key] = props[key];
|
||||
}
|
||||
}
|
||||
|
||||
return nativeProps;
|
||||
return hostProps;
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -14,11 +14,11 @@
|
||||
var DisabledInputUtils = require('DisabledInputUtils');
|
||||
|
||||
/**
|
||||
* Implements a <button> native component that does not receive mouse events
|
||||
* Implements a <button> host component that does not receive mouse events
|
||||
* when `disabled` is set.
|
||||
*/
|
||||
var ReactDOMButton = {
|
||||
getNativeProps: DisabledInputUtils.getNativeProps,
|
||||
getHostProps: DisabledInputUtils.getHostProps,
|
||||
};
|
||||
|
||||
module.exports = ReactDOMButton;
|
||||
|
||||
@@ -49,7 +49,7 @@ function warnIfValueIsNull(props) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements an <input> native component that allows setting these optional
|
||||
* Implements an <input> host component that allows setting these optional
|
||||
* props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
|
||||
*
|
||||
* If `checked` or `value` are not supplied (or null/undefined), user actions
|
||||
@@ -65,15 +65,15 @@ function warnIfValueIsNull(props) {
|
||||
* @see http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html
|
||||
*/
|
||||
var ReactDOMInput = {
|
||||
getNativeProps: function(inst, props) {
|
||||
getHostProps: function(inst, props) {
|
||||
var value = LinkedValueUtils.getValue(props);
|
||||
var checked = LinkedValueUtils.getChecked(props);
|
||||
|
||||
var nativeProps = Object.assign({
|
||||
var hostProps = Object.assign({
|
||||
// Make sure we set .type before any other properties (setting .value
|
||||
// before .type means .value is lost in IE11 and below)
|
||||
type: undefined,
|
||||
}, DisabledInputUtils.getNativeProps(inst, props), {
|
||||
}, DisabledInputUtils.getHostProps(inst, props), {
|
||||
defaultChecked: undefined,
|
||||
defaultValue: undefined,
|
||||
value: value != null ? value : inst._wrapperState.initialValue,
|
||||
@@ -81,7 +81,7 @@ var ReactDOMInput = {
|
||||
onChange: inst._wrapperState.onChange,
|
||||
});
|
||||
|
||||
return nativeProps;
|
||||
return hostProps;
|
||||
},
|
||||
|
||||
mountWrapper: function(inst, props) {
|
||||
|
||||
@@ -37,15 +37,15 @@ function flattenChildren(children) {
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements an <option> native component that warns when `selected` is set.
|
||||
* Implements an <option> host component that warns when `selected` is set.
|
||||
*/
|
||||
var ReactDOMOption = {
|
||||
mountWrapper: function(inst, props, nativeParent) {
|
||||
mountWrapper: function(inst, props, hostParent) {
|
||||
// TODO (yungsters): Remove support for `selected` in <option>.
|
||||
if (__DEV__) {
|
||||
warning(
|
||||
@@ -57,11 +57,11 @@ var ReactDOMOption = {
|
||||
|
||||
// Look up whether this option is 'selected'
|
||||
var selectValue = null;
|
||||
if (nativeParent != null) {
|
||||
var selectParent = nativeParent;
|
||||
if (hostParent != null) {
|
||||
var selectParent = hostParent;
|
||||
|
||||
if (selectParent._tag === 'optgroup') {
|
||||
selectParent = selectParent._nativeParent;
|
||||
selectParent = selectParent._hostParent;
|
||||
}
|
||||
|
||||
if (selectParent != null && selectParent._tag === 'select') {
|
||||
@@ -105,22 +105,22 @@ var ReactDOMOption = {
|
||||
}
|
||||
},
|
||||
|
||||
getNativeProps: function(inst, props) {
|
||||
var nativeProps = Object.assign({selected: undefined, children: undefined}, props);
|
||||
getHostProps: function(inst, props) {
|
||||
var hostProps = Object.assign({selected: undefined, children: undefined}, props);
|
||||
|
||||
// Read state only from initial mount because <select> updates value
|
||||
// manually; we need the initial state only for server rendering
|
||||
if (inst._wrapperState.selected != null) {
|
||||
nativeProps.selected = inst._wrapperState.selected;
|
||||
hostProps.selected = inst._wrapperState.selected;
|
||||
}
|
||||
|
||||
var content = flattenChildren(props.children);
|
||||
|
||||
if (content) {
|
||||
nativeProps.children = content;
|
||||
hostProps.children = content;
|
||||
}
|
||||
|
||||
return nativeProps;
|
||||
return hostProps;
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
@@ -143,7 +143,7 @@ function updateOptions(inst, multiple, propValue) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements a <select> native component that allows optionally setting the
|
||||
* Implements a <select> host component that allows optionally setting the
|
||||
* props `value` and `defaultValue`. If `multiple` is false, the prop must be a
|
||||
* stringable. If `multiple` is true, the prop must be an array of stringables.
|
||||
*
|
||||
@@ -158,8 +158,8 @@ function updateOptions(inst, multiple, propValue) {
|
||||
* selected.
|
||||
*/
|
||||
var ReactDOMSelect = {
|
||||
getNativeProps: function(inst, props) {
|
||||
return Object.assign({}, DisabledInputUtils.getNativeProps(inst, props), {
|
||||
getHostProps: function(inst, props) {
|
||||
return Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
|
||||
onChange: inst._wrapperState.onChange,
|
||||
value: undefined,
|
||||
});
|
||||
|
||||
@@ -45,7 +45,7 @@ function warnIfValueIsNull(props) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements a <textarea> native component that allows setting `value`, and
|
||||
* Implements a <textarea> host component that allows setting `value`, and
|
||||
* `defaultValue`. This differs from the traditional DOM API because value is
|
||||
* usually set as PCDATA children.
|
||||
*
|
||||
@@ -60,7 +60,7 @@ function warnIfValueIsNull(props) {
|
||||
* `defaultValue` if specified, or the children content (deprecated).
|
||||
*/
|
||||
var ReactDOMTextarea = {
|
||||
getNativeProps: function(inst, props) {
|
||||
getHostProps: function(inst, props) {
|
||||
invariant(
|
||||
props.dangerouslySetInnerHTML == null,
|
||||
'`dangerouslySetInnerHTML` does not make sense on <textarea>.'
|
||||
@@ -68,14 +68,14 @@ var ReactDOMTextarea = {
|
||||
|
||||
// Always set children to the same thing. In IE9, the selection range will
|
||||
// get reset if `textContent` is mutated.
|
||||
var nativeProps = Object.assign({}, DisabledInputUtils.getNativeProps(inst, props), {
|
||||
var hostProps = Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
|
||||
defaultValue: undefined,
|
||||
value: undefined,
|
||||
children: inst._wrapperState.initialValue,
|
||||
onChange: inst._wrapperState.onChange,
|
||||
});
|
||||
|
||||
return nativeProps;
|
||||
return hostProps;
|
||||
},
|
||||
|
||||
mountWrapper: function(inst, props) {
|
||||
|
||||
@@ -193,7 +193,7 @@ var CSSPropertyOperations = {
|
||||
*/
|
||||
setValueForStyles: function(node, styles, component) {
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
component._debugID,
|
||||
'update styles',
|
||||
styles
|
||||
|
||||
@@ -177,7 +177,7 @@ var DOMPropertyOperations = {
|
||||
ReactDOMInstrumentation.debugTool.onSetValueForProperty(node, name, value);
|
||||
var payload = {};
|
||||
payload[name] = value;
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
|
||||
'update attribute',
|
||||
payload
|
||||
@@ -198,7 +198,7 @@ var DOMPropertyOperations = {
|
||||
if (__DEV__) {
|
||||
var payload = {};
|
||||
payload[name] = value;
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
|
||||
'update attribute',
|
||||
payload
|
||||
@@ -239,7 +239,7 @@ var DOMPropertyOperations = {
|
||||
|
||||
if (__DEV__) {
|
||||
ReactDOMInstrumentation.debugTool.onDeleteValueForProperty(node, name);
|
||||
ReactInstrumentation.debugTool.onNativeOperation(
|
||||
ReactInstrumentation.debugTool.onHostOperation(
|
||||
ReactDOMComponentTree.getInstanceFromNode(node)._debugID,
|
||||
'remove attribute',
|
||||
name
|
||||
|
||||
@@ -221,7 +221,7 @@ function enqueuePutListener(inst, registrationName, listener, transaction) {
|
||||
'This browser doesn\'t support the `onScroll` event'
|
||||
);
|
||||
}
|
||||
var containerInfo = inst._nativeContainerInfo;
|
||||
var containerInfo = inst._hostContainerInfo;
|
||||
var isDocumentFragment = containerInfo._node && containerInfo._node.nodeType === DOC_FRAGMENT_TYPE;
|
||||
var doc = isDocumentFragment ? containerInfo._node : containerInfo._ownerDocument;
|
||||
listenTo(registrationName, doc);
|
||||
@@ -452,11 +452,11 @@ function ReactDOMComponent(element) {
|
||||
this._renderedChildren = null;
|
||||
this._previousStyle = null;
|
||||
this._previousStyleCopy = null;
|
||||
this._nativeNode = null;
|
||||
this._nativeParent = null;
|
||||
this._hostNode = null;
|
||||
this._hostParent = null;
|
||||
this._rootNodeID = null;
|
||||
this._domID = null;
|
||||
this._nativeContainerInfo = null;
|
||||
this._hostContainerInfo = null;
|
||||
this._wrapperState = null;
|
||||
this._topLevelWrapper = null;
|
||||
this._flags = 0;
|
||||
@@ -477,20 +477,20 @@ ReactDOMComponent.Mixin = {
|
||||
* @internal
|
||||
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
|
||||
* @param {?ReactDOMComponent} the containing DOM component instance
|
||||
* @param {?object} info about the native container
|
||||
* @param {?object} info about the host container
|
||||
* @param {object} context
|
||||
* @return {string} The computed markup.
|
||||
*/
|
||||
mountComponent: function(
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
) {
|
||||
this._rootNodeID = globalIdCounter++;
|
||||
this._domID = nativeContainerInfo._idCounter++;
|
||||
this._nativeParent = nativeParent;
|
||||
this._nativeContainerInfo = nativeContainerInfo;
|
||||
this._domID = hostContainerInfo._idCounter++;
|
||||
this._hostParent = hostParent;
|
||||
this._hostContainerInfo = hostContainerInfo;
|
||||
|
||||
var props = this._currentElement.props;
|
||||
|
||||
@@ -507,25 +507,25 @@ ReactDOMComponent.Mixin = {
|
||||
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
|
||||
break;
|
||||
case 'button':
|
||||
props = ReactDOMButton.getNativeProps(this, props, nativeParent);
|
||||
props = ReactDOMButton.getHostProps(this, props, hostParent);
|
||||
break;
|
||||
case 'input':
|
||||
ReactDOMInput.mountWrapper(this, props, nativeParent);
|
||||
props = ReactDOMInput.getNativeProps(this, props);
|
||||
ReactDOMInput.mountWrapper(this, props, hostParent);
|
||||
props = ReactDOMInput.getHostProps(this, props);
|
||||
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
|
||||
break;
|
||||
case 'option':
|
||||
ReactDOMOption.mountWrapper(this, props, nativeParent);
|
||||
props = ReactDOMOption.getNativeProps(this, props);
|
||||
ReactDOMOption.mountWrapper(this, props, hostParent);
|
||||
props = ReactDOMOption.getHostProps(this, props);
|
||||
break;
|
||||
case 'select':
|
||||
ReactDOMSelect.mountWrapper(this, props, nativeParent);
|
||||
props = ReactDOMSelect.getNativeProps(this, props);
|
||||
ReactDOMSelect.mountWrapper(this, props, hostParent);
|
||||
props = ReactDOMSelect.getHostProps(this, props);
|
||||
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
|
||||
break;
|
||||
case 'textarea':
|
||||
ReactDOMTextarea.mountWrapper(this, props, nativeParent);
|
||||
props = ReactDOMTextarea.getNativeProps(this, props);
|
||||
ReactDOMTextarea.mountWrapper(this, props, hostParent);
|
||||
props = ReactDOMTextarea.getHostProps(this, props);
|
||||
transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
|
||||
break;
|
||||
}
|
||||
@@ -536,12 +536,12 @@ ReactDOMComponent.Mixin = {
|
||||
// tags get no namespace.
|
||||
var namespaceURI;
|
||||
var parentTag;
|
||||
if (nativeParent != null) {
|
||||
namespaceURI = nativeParent._namespaceURI;
|
||||
parentTag = nativeParent._tag;
|
||||
} else if (nativeContainerInfo._tag) {
|
||||
namespaceURI = nativeContainerInfo._namespaceURI;
|
||||
parentTag = nativeContainerInfo._tag;
|
||||
if (hostParent != null) {
|
||||
namespaceURI = hostParent._namespaceURI;
|
||||
parentTag = hostParent._tag;
|
||||
} else if (hostContainerInfo._tag) {
|
||||
namespaceURI = hostContainerInfo._namespaceURI;
|
||||
parentTag = hostContainerInfo._tag;
|
||||
}
|
||||
if (namespaceURI == null ||
|
||||
namespaceURI === DOMNamespaces.svg && parentTag === 'foreignobject') {
|
||||
@@ -558,10 +558,10 @@ ReactDOMComponent.Mixin = {
|
||||
|
||||
if (__DEV__) {
|
||||
var parentInfo;
|
||||
if (nativeParent != null) {
|
||||
parentInfo = nativeParent._ancestorInfo;
|
||||
} else if (nativeContainerInfo._tag) {
|
||||
parentInfo = nativeContainerInfo._ancestorInfo;
|
||||
if (hostParent != null) {
|
||||
parentInfo = hostParent._ancestorInfo;
|
||||
} else if (hostContainerInfo._tag) {
|
||||
parentInfo = hostContainerInfo._ancestorInfo;
|
||||
}
|
||||
if (parentInfo) {
|
||||
// parentInfo should always be present except for the top-level
|
||||
@@ -578,7 +578,7 @@ ReactDOMComponent.Mixin = {
|
||||
|
||||
var mountImage;
|
||||
if (transaction.useCreateElement) {
|
||||
var ownerDocument = nativeContainerInfo._ownerDocument;
|
||||
var ownerDocument = hostContainerInfo._ownerDocument;
|
||||
var el;
|
||||
if (namespaceURI === DOMNamespaces.html) {
|
||||
if (this._tag === 'script') {
|
||||
@@ -599,7 +599,7 @@ ReactDOMComponent.Mixin = {
|
||||
}
|
||||
ReactDOMComponentTree.precacheNode(this, el);
|
||||
this._flags |= Flags.hasCachedChildNodes;
|
||||
if (!this._nativeParent) {
|
||||
if (!this._hostParent) {
|
||||
DOMPropertyOperations.setAttributeForRoot(el);
|
||||
}
|
||||
this._updateDOMProperties(null, props, transaction);
|
||||
@@ -698,7 +698,7 @@ ReactDOMComponent.Mixin = {
|
||||
return ret;
|
||||
}
|
||||
|
||||
if (!this._nativeParent) {
|
||||
if (!this._hostParent) {
|
||||
ret += ' ' + DOMPropertyOperations.createMarkupForRoot();
|
||||
}
|
||||
ret += ' ' + DOMPropertyOperations.createMarkupForID(this._domID);
|
||||
@@ -804,7 +804,7 @@ ReactDOMComponent.Mixin = {
|
||||
},
|
||||
|
||||
/**
|
||||
* Updates a native DOM component after it has already been allocated and
|
||||
* Updates a DOM component after it has already been allocated and
|
||||
* attached to the DOM. Reconciles the root DOM node, then recurses.
|
||||
*
|
||||
* @param {ReactReconcileTransaction} transaction
|
||||
@@ -819,26 +819,26 @@ ReactDOMComponent.Mixin = {
|
||||
|
||||
switch (this._tag) {
|
||||
case 'button':
|
||||
lastProps = ReactDOMButton.getNativeProps(this, lastProps);
|
||||
nextProps = ReactDOMButton.getNativeProps(this, nextProps);
|
||||
lastProps = ReactDOMButton.getHostProps(this, lastProps);
|
||||
nextProps = ReactDOMButton.getHostProps(this, nextProps);
|
||||
break;
|
||||
case 'input':
|
||||
ReactDOMInput.updateWrapper(this);
|
||||
lastProps = ReactDOMInput.getNativeProps(this, lastProps);
|
||||
nextProps = ReactDOMInput.getNativeProps(this, nextProps);
|
||||
lastProps = ReactDOMInput.getHostProps(this, lastProps);
|
||||
nextProps = ReactDOMInput.getHostProps(this, nextProps);
|
||||
break;
|
||||
case 'option':
|
||||
lastProps = ReactDOMOption.getNativeProps(this, lastProps);
|
||||
nextProps = ReactDOMOption.getNativeProps(this, nextProps);
|
||||
lastProps = ReactDOMOption.getHostProps(this, lastProps);
|
||||
nextProps = ReactDOMOption.getHostProps(this, nextProps);
|
||||
break;
|
||||
case 'select':
|
||||
lastProps = ReactDOMSelect.getNativeProps(this, lastProps);
|
||||
nextProps = ReactDOMSelect.getNativeProps(this, nextProps);
|
||||
lastProps = ReactDOMSelect.getHostProps(this, lastProps);
|
||||
nextProps = ReactDOMSelect.getHostProps(this, nextProps);
|
||||
break;
|
||||
case 'textarea':
|
||||
ReactDOMTextarea.updateWrapper(this);
|
||||
lastProps = ReactDOMTextarea.getNativeProps(this, lastProps);
|
||||
nextProps = ReactDOMTextarea.getNativeProps(this, nextProps);
|
||||
lastProps = ReactDOMTextarea.getHostProps(this, lastProps);
|
||||
nextProps = ReactDOMTextarea.getHostProps(this, nextProps);
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -1058,7 +1058,7 @@ ReactDOMComponent.Mixin = {
|
||||
}
|
||||
},
|
||||
|
||||
getNativeNode: function() {
|
||||
getHostNode: function() {
|
||||
return getNode(this);
|
||||
},
|
||||
|
||||
|
||||
@@ -19,26 +19,26 @@ var ReactDOMEmptyComponent = function(instantiate) {
|
||||
// ReactCompositeComponent uses this:
|
||||
this._currentElement = null;
|
||||
// ReactDOMComponentTree uses these:
|
||||
this._nativeNode = null;
|
||||
this._nativeParent = null;
|
||||
this._nativeContainerInfo = null;
|
||||
this._hostNode = null;
|
||||
this._hostParent = null;
|
||||
this._hostContainerInfo = null;
|
||||
this._domID = null;
|
||||
};
|
||||
Object.assign(ReactDOMEmptyComponent.prototype, {
|
||||
mountComponent: function(
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
) {
|
||||
var domID = nativeContainerInfo._idCounter++;
|
||||
var domID = hostContainerInfo._idCounter++;
|
||||
this._domID = domID;
|
||||
this._nativeParent = nativeParent;
|
||||
this._nativeContainerInfo = nativeContainerInfo;
|
||||
this._hostParent = hostParent;
|
||||
this._hostContainerInfo = hostContainerInfo;
|
||||
|
||||
var nodeValue = ' react-empty: ' + this._domID + ' ';
|
||||
if (transaction.useCreateElement) {
|
||||
var ownerDocument = nativeContainerInfo._ownerDocument;
|
||||
var ownerDocument = hostContainerInfo._ownerDocument;
|
||||
var node = ownerDocument.createComment(nodeValue);
|
||||
ReactDOMComponentTree.precacheNode(this, node);
|
||||
return DOMLazyTree(node);
|
||||
@@ -54,7 +54,7 @@ Object.assign(ReactDOMEmptyComponent.prototype, {
|
||||
},
|
||||
receiveComponent: function() {
|
||||
},
|
||||
getNativeNode: function() {
|
||||
getHostNode: function() {
|
||||
return ReactDOMComponentTree.getNodeFromInstance(this);
|
||||
},
|
||||
unmountComponent: function() {
|
||||
|
||||
@@ -40,8 +40,8 @@ var ReactDOMTextComponent = function(text) {
|
||||
this._currentElement = text;
|
||||
this._stringText = '' + text;
|
||||
// ReactDOMComponentTree uses these:
|
||||
this._nativeNode = null;
|
||||
this._nativeParent = null;
|
||||
this._hostNode = null;
|
||||
this._hostParent = null;
|
||||
|
||||
// Properties
|
||||
this._domID = null;
|
||||
@@ -62,18 +62,18 @@ Object.assign(ReactDOMTextComponent.prototype, {
|
||||
*/
|
||||
mountComponent: function(
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
) {
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onSetText(this._debugID, this._stringText);
|
||||
|
||||
var parentInfo;
|
||||
if (nativeParent != null) {
|
||||
parentInfo = nativeParent._ancestorInfo;
|
||||
} else if (nativeContainerInfo != null) {
|
||||
parentInfo = nativeContainerInfo._ancestorInfo;
|
||||
if (hostParent != null) {
|
||||
parentInfo = hostParent._ancestorInfo;
|
||||
} else if (hostContainerInfo != null) {
|
||||
parentInfo = hostContainerInfo._ancestorInfo;
|
||||
}
|
||||
if (parentInfo) {
|
||||
// parentInfo should always be present except for the top-level
|
||||
@@ -82,13 +82,13 @@ Object.assign(ReactDOMTextComponent.prototype, {
|
||||
}
|
||||
}
|
||||
|
||||
var domID = nativeContainerInfo._idCounter++;
|
||||
var domID = hostContainerInfo._idCounter++;
|
||||
var openingValue = ' react-text: ' + domID + ' ';
|
||||
var closingValue = ' /react-text ';
|
||||
this._domID = domID;
|
||||
this._nativeParent = nativeParent;
|
||||
this._hostParent = hostParent;
|
||||
if (transaction.useCreateElement) {
|
||||
var ownerDocument = nativeContainerInfo._ownerDocument;
|
||||
var ownerDocument = hostContainerInfo._ownerDocument;
|
||||
var openingComment = ownerDocument.createComment(openingValue);
|
||||
var closingComment = ownerDocument.createComment(closingValue);
|
||||
var lazyTree = DOMLazyTree(ownerDocument.createDocumentFragment());
|
||||
@@ -136,7 +136,7 @@ Object.assign(ReactDOMTextComponent.prototype, {
|
||||
// and/or updateComponent to do the actual update for consistency with
|
||||
// other component types?
|
||||
this._stringText = nextStringText;
|
||||
var commentNodes = this.getNativeNode();
|
||||
var commentNodes = this.getHostNode();
|
||||
DOMChildrenOperations.replaceDelimitedText(
|
||||
commentNodes[0],
|
||||
commentNodes[1],
|
||||
@@ -153,10 +153,10 @@ Object.assign(ReactDOMTextComponent.prototype, {
|
||||
}
|
||||
},
|
||||
|
||||
getNativeNode: function() {
|
||||
var nativeNode = this._commentNodes;
|
||||
if (nativeNode) {
|
||||
return nativeNode;
|
||||
getHostNode: function() {
|
||||
var hostNode = this._commentNodes;
|
||||
if (hostNode) {
|
||||
return hostNode;
|
||||
}
|
||||
if (!this._closingComment) {
|
||||
var openingComment = ReactDOMComponentTree.getNodeFromInstance(this);
|
||||
@@ -174,9 +174,9 @@ Object.assign(ReactDOMTextComponent.prototype, {
|
||||
node = node.nextSibling;
|
||||
}
|
||||
}
|
||||
nativeNode = [this._nativeNode, this._closingComment];
|
||||
this._commentNodes = nativeNode;
|
||||
return nativeNode;
|
||||
hostNode = [this._hostNode, this._closingComment];
|
||||
this._commentNodes = hostNode;
|
||||
return hostNode;
|
||||
},
|
||||
|
||||
unmountComponent: function() {
|
||||
|
||||
@@ -65,11 +65,11 @@ function inject() {
|
||||
BeforeInputEventPlugin: BeforeInputEventPlugin,
|
||||
});
|
||||
|
||||
ReactInjection.NativeComponent.injectGenericComponentClass(
|
||||
ReactInjection.HostComponent.injectGenericComponentClass(
|
||||
ReactDOMComponent
|
||||
);
|
||||
|
||||
ReactInjection.NativeComponent.injectTextComponentClass(
|
||||
ReactInjection.HostComponent.injectTextComponentClass(
|
||||
ReactDOMTextComponent
|
||||
);
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ var ReactComponentEnvironment = require('ReactComponentEnvironment');
|
||||
var ReactClass = require('ReactClass');
|
||||
var ReactEmptyComponent = require('ReactEmptyComponent');
|
||||
var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
|
||||
var ReactNativeComponent = require('ReactNativeComponent');
|
||||
var ReactHostComponent = require('ReactHostComponent');
|
||||
var ReactUpdates = require('ReactUpdates');
|
||||
|
||||
var ReactInjection = {
|
||||
@@ -29,7 +29,7 @@ var ReactInjection = {
|
||||
EventPluginHub: EventPluginHub.injection,
|
||||
EventPluginUtils: EventPluginUtils.injection,
|
||||
EventEmitter: ReactBrowserEventEmitter.injection,
|
||||
NativeComponent: ReactNativeComponent.injection,
|
||||
HostComponent: ReactHostComponent.injection,
|
||||
Updates: ReactUpdates.injection,
|
||||
};
|
||||
|
||||
|
||||
@@ -166,7 +166,7 @@ ReactNativeBaseComponent.Mixin = {
|
||||
*
|
||||
* @return {null} Null.
|
||||
*/
|
||||
getNativeNode: function() {
|
||||
getHostNode: function() {
|
||||
return this._rootNodeID;
|
||||
},
|
||||
|
||||
@@ -175,12 +175,12 @@ ReactNativeBaseComponent.Mixin = {
|
||||
* @param {Transaction} transaction For creating/updating.
|
||||
* @return {string} Unique iOS view tag.
|
||||
*/
|
||||
mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
|
||||
mountComponent: function(transaction, hostParent, hostContainerInfo, context) {
|
||||
var tag = ReactNativeTagHandles.allocateTag();
|
||||
|
||||
this._rootNodeID = tag;
|
||||
this._nativeParent = nativeParent;
|
||||
this._nativeContainerInfo = nativeContainerInfo;
|
||||
this._hostParent = hostParent;
|
||||
this._hostContainerInfo = hostContainerInfo;
|
||||
|
||||
if (__DEV__) {
|
||||
for (var key in this.viewConfig.validAttributes) {
|
||||
@@ -195,7 +195,7 @@ ReactNativeBaseComponent.Mixin = {
|
||||
this.viewConfig.validAttributes
|
||||
);
|
||||
|
||||
var nativeTopRootTag = nativeContainerInfo._tag;
|
||||
var nativeTopRootTag = hostContainerInfo._tag;
|
||||
UIManager.createView(
|
||||
tag,
|
||||
this.viewConfig.uiViewClassName,
|
||||
|
||||
@@ -16,13 +16,13 @@ var invariant = require('invariant');
|
||||
var instanceCache = {};
|
||||
|
||||
/**
|
||||
* Drill down (through composites and empty components) until we get a native or
|
||||
* native text component.
|
||||
* Drill down (through composites and empty components) until we get a host or
|
||||
* host text component.
|
||||
*
|
||||
* This is pretty polymorphic but unavoidable with the current structure we have
|
||||
* for `_renderedChildren`.
|
||||
*/
|
||||
function getRenderedNativeOrTextFromComponent(component) {
|
||||
function getRenderedHostOrTextFromComponent(component) {
|
||||
var rendered;
|
||||
while ((rendered = component._renderedComponent)) {
|
||||
component = rendered;
|
||||
@@ -31,11 +31,11 @@ function getRenderedNativeOrTextFromComponent(component) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate `_nativeNode` on the rendered native/text component with the given
|
||||
* Populate `_hostNode` on the rendered host/text component with the given
|
||||
* DOM node. The passed `inst` can be a composite.
|
||||
*/
|
||||
function precacheNode(inst, tag) {
|
||||
var nativeInst = getRenderedNativeOrTextFromComponent(inst);
|
||||
var nativeInst = getRenderedHostOrTextFromComponent(inst);
|
||||
instanceCache[tag] = nativeInst;
|
||||
}
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ var ReactDefaultBatchingStrategy = require('ReactDefaultBatchingStrategy');
|
||||
var ReactElement = require('ReactElement');
|
||||
var ReactEmptyComponent = require('ReactEmptyComponent');
|
||||
var ReactNativeBridgeEventPlugin = require('ReactNativeBridgeEventPlugin');
|
||||
var ReactNativeComponent = require('ReactNativeComponent');
|
||||
var ReactHostComponent = require('ReactHostComponent');
|
||||
var ReactNativeComponentEnvironment = require('ReactNativeComponentEnvironment');
|
||||
var ReactNativeComponentTree = require('ReactNativeComponentTree');
|
||||
var ReactNativeEventEmitter = require('ReactNativeEventEmitter');
|
||||
@@ -93,10 +93,10 @@ function inject() {
|
||||
|
||||
ReactEmptyComponent.injection.injectEmptyComponentFactory(EmptyComponent);
|
||||
|
||||
ReactNativeComponent.injection.injectTextComponentClass(
|
||||
ReactHostComponent.injection.injectTextComponentClass(
|
||||
ReactNativeTextComponent
|
||||
);
|
||||
ReactNativeComponent.injection.injectGenericComponentClass(function(tag) {
|
||||
ReactHostComponent.injection.injectGenericComponentClass(function(tag) {
|
||||
// Show a nicer error message for non-function tags
|
||||
var info = '';
|
||||
if (typeof tag === 'string' && /^[a-z]/.test(tag)) {
|
||||
|
||||
@@ -22,27 +22,27 @@ var ReactNativeTextComponent = function(text) {
|
||||
// This is really a ReactText (ReactNode), not a ReactElement
|
||||
this._currentElement = text;
|
||||
this._stringText = '' + text;
|
||||
this._nativeParent = null;
|
||||
this._hostParent = null;
|
||||
this._rootNodeID = null;
|
||||
};
|
||||
|
||||
Object.assign(ReactNativeTextComponent.prototype, {
|
||||
|
||||
mountComponent: function(transaction, nativeParent, nativeContainerInfo, context) {
|
||||
mountComponent: function(transaction, hostParent, hostContainerInfo, context) {
|
||||
if (__DEV__) {
|
||||
ReactInstrumentation.debugTool.onSetText(this._debugID, this._stringText);
|
||||
}
|
||||
|
||||
// TODO: nativeParent should have this context already. Stop abusing context.
|
||||
// TODO: hostParent should have this context already. Stop abusing context.
|
||||
invariant(
|
||||
context.isInAParentText,
|
||||
'RawText "%s" must be wrapped in an explicit <Text> component.',
|
||||
this._stringText
|
||||
);
|
||||
this._nativeParent = nativeParent;
|
||||
this._hostParent = hostParent;
|
||||
var tag = ReactNativeTagHandles.allocateTag();
|
||||
this._rootNodeID = tag;
|
||||
var nativeTopRootTag = nativeContainerInfo._tag;
|
||||
var nativeTopRootTag = hostContainerInfo._tag;
|
||||
UIManager.createView(
|
||||
tag,
|
||||
'RCTRawText',
|
||||
@@ -55,7 +55,7 @@ Object.assign(ReactNativeTextComponent.prototype, {
|
||||
return tag;
|
||||
},
|
||||
|
||||
getNativeNode: function() {
|
||||
getHostNode: function() {
|
||||
return this._rootNodeID;
|
||||
},
|
||||
|
||||
|
||||
@@ -19,23 +19,23 @@
|
||||
*/
|
||||
function getLowestCommonAncestor(instA, instB) {
|
||||
var depthA = 0;
|
||||
for (var tempA = instA; tempA; tempA = tempA._nativeParent) {
|
||||
for (var tempA = instA; tempA; tempA = tempA._hostParent) {
|
||||
depthA++;
|
||||
}
|
||||
var depthB = 0;
|
||||
for (var tempB = instB; tempB; tempB = tempB._nativeParent) {
|
||||
for (var tempB = instB; tempB; tempB = tempB._hostParent) {
|
||||
depthB++;
|
||||
}
|
||||
|
||||
// If A is deeper, crawl up.
|
||||
while (depthA - depthB > 0) {
|
||||
instA = instA._nativeParent;
|
||||
instA = instA._hostParent;
|
||||
depthA--;
|
||||
}
|
||||
|
||||
// If B is deeper, crawl up.
|
||||
while (depthB - depthA > 0) {
|
||||
instB = instB._nativeParent;
|
||||
instB = instB._hostParent;
|
||||
depthB--;
|
||||
}
|
||||
|
||||
@@ -45,8 +45,8 @@ function getLowestCommonAncestor(instA, instB) {
|
||||
if (instA === instB) {
|
||||
return instA;
|
||||
}
|
||||
instA = instA._nativeParent;
|
||||
instB = instB._nativeParent;
|
||||
instA = instA._hostParent;
|
||||
instB = instB._hostParent;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@@ -59,7 +59,7 @@ function isAncestor(instA, instB) {
|
||||
if (instB === instA) {
|
||||
return true;
|
||||
}
|
||||
instB = instB._nativeParent;
|
||||
instB = instB._hostParent;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
@@ -68,7 +68,7 @@ function isAncestor(instA, instB) {
|
||||
* Return the parent instance of the passed-in instance.
|
||||
*/
|
||||
function getParentInstance(inst) {
|
||||
return inst._nativeParent;
|
||||
return inst._hostParent;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -78,7 +78,7 @@ function traverseTwoPhase(inst, fn, arg) {
|
||||
var path = [];
|
||||
while (inst) {
|
||||
path.push(inst);
|
||||
inst = inst._nativeParent;
|
||||
inst = inst._hostParent;
|
||||
}
|
||||
var i;
|
||||
for (i = path.length; i-- > 0;) {
|
||||
@@ -101,12 +101,12 @@ function traverseEnterLeave(from, to, fn, argFrom, argTo) {
|
||||
var pathFrom = [];
|
||||
while (from && from !== common) {
|
||||
pathFrom.push(from);
|
||||
from = from._nativeParent;
|
||||
from = from._hostParent;
|
||||
}
|
||||
var pathTo = [];
|
||||
while (to && to !== common) {
|
||||
pathTo.push(to);
|
||||
to = to._nativeParent;
|
||||
to = to._hostParent;
|
||||
}
|
||||
var i;
|
||||
for (i = 0; i < pathFrom.length; i++) {
|
||||
|
||||
@@ -31,8 +31,8 @@ var createReactNativeComponentClass = function(
|
||||
var Constructor = function(element) {
|
||||
this._currentElement = element;
|
||||
this._topLevelWrapper = null;
|
||||
this._nativeParent = null;
|
||||
this._nativeContainerInfo = null;
|
||||
this._hostParent = null;
|
||||
this._hostContainerInfo = null;
|
||||
this._rootNodeID = null;
|
||||
this._renderedChildren = null;
|
||||
};
|
||||
|
||||
@@ -78,7 +78,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
|
||||
// ReactInstanceMap.get here will always succeed for mounted components
|
||||
var internalInstance = ReactInstanceMap.get(component);
|
||||
if (internalInstance) {
|
||||
return internalInstance.getNativeNode();
|
||||
return internalInstance.getHostNode();
|
||||
} else {
|
||||
var rootNodeID = component._rootNodeID;
|
||||
if (rootNodeID) {
|
||||
|
||||
@@ -19,7 +19,7 @@ var ReactTypesOfWork = require('ReactTypesOfWork');
|
||||
var {
|
||||
FunctionalComponent,
|
||||
ClassComponent,
|
||||
NativeComponent,
|
||||
HostComponent,
|
||||
} = ReactTypesOfWork;
|
||||
|
||||
type ReactHostElement<T, P> = {
|
||||
@@ -60,7 +60,7 @@ module.exports = function<T, P, I>(config : HostConfig<T, P, I>) : Reconciler {
|
||||
return ReactFiberFunctionalComponent.performWork(unit);
|
||||
case ClassComponent:
|
||||
break;
|
||||
case NativeComponent:
|
||||
case HostComponent:
|
||||
break;
|
||||
}
|
||||
return null;
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
var TypesOfWork = {
|
||||
FunctionalComponent: 1,
|
||||
ClassComponent: 2,
|
||||
NativeComponent: 3,
|
||||
HostComponent: 3,
|
||||
};
|
||||
|
||||
module.exports = TypesOfWork;
|
||||
|
||||
@@ -46,14 +46,14 @@ var trackedTouchCount = 0;
|
||||
*/
|
||||
var previousActiveTouches = 0;
|
||||
|
||||
var changeResponder = function(nextResponderInst, blockNativeResponder) {
|
||||
var changeResponder = function(nextResponderInst, blockHostResponder) {
|
||||
var oldResponderInst = responderInst;
|
||||
responderInst = nextResponderInst;
|
||||
if (ResponderEventPlugin.GlobalResponderHandler !== null) {
|
||||
ResponderEventPlugin.GlobalResponderHandler.onChange(
|
||||
oldResponderInst,
|
||||
nextResponderInst,
|
||||
blockNativeResponder
|
||||
blockHostResponder
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -371,7 +371,7 @@ function setResponderAndExtractTransfer(
|
||||
grantEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
|
||||
|
||||
EventPropagators.accumulateDirectDispatches(grantEvent);
|
||||
var blockNativeResponder = executeDirectDispatch(grantEvent) === true;
|
||||
var blockHostResponder = executeDirectDispatch(grantEvent) === true;
|
||||
if (responderInst) {
|
||||
|
||||
var terminationRequestEvent = ResponderSyntheticEvent.getPooled(
|
||||
@@ -398,7 +398,7 @@ function setResponderAndExtractTransfer(
|
||||
terminateEvent.touchHistory = ResponderTouchHistoryStore.touchHistory;
|
||||
EventPropagators.accumulateDirectDispatches(terminateEvent);
|
||||
extracted = accumulate(extracted, [grantEvent, terminateEvent]);
|
||||
changeResponder(wantsResponderInst, blockNativeResponder);
|
||||
changeResponder(wantsResponderInst, blockHostResponder);
|
||||
} else {
|
||||
var rejectEvent = ResponderSyntheticEvent.getPooled(
|
||||
eventTypes.responderReject,
|
||||
@@ -412,7 +412,7 @@ function setResponderAndExtractTransfer(
|
||||
}
|
||||
} else {
|
||||
extracted = accumulate(extracted, grantEvent);
|
||||
changeResponder(wantsResponderInst, blockNativeResponder);
|
||||
changeResponder(wantsResponderInst, blockHostResponder);
|
||||
}
|
||||
return extracted;
|
||||
}
|
||||
|
||||
@@ -100,7 +100,7 @@ var ReactChildReconciler = {
|
||||
nextChildren[name] = prevChild;
|
||||
} else {
|
||||
if (prevChild) {
|
||||
removedNodes[name] = ReactReconciler.getNativeNode(prevChild);
|
||||
removedNodes[name] = ReactReconciler.getHostNode(prevChild);
|
||||
ReactReconciler.unmountComponent(prevChild, false);
|
||||
}
|
||||
// The child must be instantiated before it's mounted.
|
||||
@@ -113,7 +113,7 @@ var ReactChildReconciler = {
|
||||
if (prevChildren.hasOwnProperty(name) &&
|
||||
!(nextChildren && nextChildren.hasOwnProperty(name))) {
|
||||
prevChild = prevChildren[name];
|
||||
removedNodes[name] = ReactReconciler.getNativeNode(prevChild);
|
||||
removedNodes[name] = ReactReconciler.getHostNode(prevChild);
|
||||
ReactReconciler.unmountComponent(prevChild, false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,8 +148,8 @@ var ReactCompositeComponentMixin = {
|
||||
this._currentElement = element;
|
||||
this._rootNodeID = null;
|
||||
this._instance = null;
|
||||
this._nativeParent = null;
|
||||
this._nativeContainerInfo = null;
|
||||
this._hostParent = null;
|
||||
this._hostContainerInfo = null;
|
||||
|
||||
// See ReactUpdateQueue
|
||||
this._updateBatchNumber = null;
|
||||
@@ -179,8 +179,8 @@ var ReactCompositeComponentMixin = {
|
||||
* Initializes the component, renders markup, and registers event listeners.
|
||||
*
|
||||
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
|
||||
* @param {?object} nativeParent
|
||||
* @param {?object} nativeContainerInfo
|
||||
* @param {?object} hostParent
|
||||
* @param {?object} hostContainerInfo
|
||||
* @param {?object} context
|
||||
* @return {?string} Rendered markup to be inserted into the DOM.
|
||||
* @final
|
||||
@@ -188,14 +188,14 @@ var ReactCompositeComponentMixin = {
|
||||
*/
|
||||
mountComponent: function(
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
) {
|
||||
this._context = context;
|
||||
this._mountOrder = nextMountID++;
|
||||
this._nativeParent = nativeParent;
|
||||
this._nativeContainerInfo = nativeContainerInfo;
|
||||
this._hostParent = hostParent;
|
||||
this._hostContainerInfo = hostContainerInfo;
|
||||
|
||||
var publicProps = this._processProps(this._currentElement.props);
|
||||
var publicContext = this._processContext(context);
|
||||
@@ -330,13 +330,13 @@ var ReactCompositeComponentMixin = {
|
||||
if (inst.unstable_handleError) {
|
||||
markup = this.performInitialMountWithErrorHandling(
|
||||
renderedElement,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
transaction,
|
||||
context
|
||||
);
|
||||
} else {
|
||||
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
|
||||
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
|
||||
}
|
||||
|
||||
if (inst.componentDidMount) {
|
||||
@@ -410,15 +410,15 @@ var ReactCompositeComponentMixin = {
|
||||
|
||||
performInitialMountWithErrorHandling: function(
|
||||
renderedElement,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
transaction,
|
||||
context
|
||||
) {
|
||||
var markup;
|
||||
var checkpoint = transaction.checkpoint();
|
||||
try {
|
||||
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
|
||||
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
|
||||
} catch (e) {
|
||||
// Roll back to checkpoint, handle error (which may add items to the transaction), and take a new checkpoint
|
||||
transaction.rollback(checkpoint);
|
||||
@@ -433,12 +433,12 @@ var ReactCompositeComponentMixin = {
|
||||
|
||||
// Try again - we've informed the component about the error, so they can render an error message this time.
|
||||
// If this throws again, the error will bubble up (and can be caught by a higher error boundary).
|
||||
markup = this.performInitialMount(renderedElement, nativeParent, nativeContainerInfo, transaction, context);
|
||||
markup = this.performInitialMount(renderedElement, hostParent, hostContainerInfo, transaction, context);
|
||||
}
|
||||
return markup;
|
||||
},
|
||||
|
||||
performInitialMount: function(renderedElement, nativeParent, nativeContainerInfo, transaction, context) {
|
||||
performInitialMount: function(renderedElement, hostParent, hostContainerInfo, transaction, context) {
|
||||
var inst = this._instance;
|
||||
if (inst.componentWillMount) {
|
||||
if (__DEV__) {
|
||||
@@ -478,8 +478,8 @@ var ReactCompositeComponentMixin = {
|
||||
var markup = ReactReconciler.mountComponent(
|
||||
this._renderedComponent,
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
this._processChildContext(context)
|
||||
);
|
||||
|
||||
@@ -497,8 +497,8 @@ var ReactCompositeComponentMixin = {
|
||||
return markup;
|
||||
},
|
||||
|
||||
getNativeNode: function() {
|
||||
return ReactReconciler.getNativeNode(this._renderedComponent);
|
||||
getHostNode: function() {
|
||||
return ReactReconciler.getHostNode(this._renderedComponent);
|
||||
},
|
||||
|
||||
/**
|
||||
@@ -1027,7 +1027,7 @@ var ReactCompositeComponentMixin = {
|
||||
this._processChildContext(context)
|
||||
);
|
||||
} else {
|
||||
var oldNativeNode = ReactReconciler.getNativeNode(prevComponentInstance);
|
||||
var oldHostNode = ReactReconciler.getHostNode(prevComponentInstance);
|
||||
ReactReconciler.unmountComponent(prevComponentInstance, false);
|
||||
|
||||
this._renderedNodeType = ReactNodeTypes.getType(nextRenderedElement);
|
||||
@@ -1038,8 +1038,8 @@ var ReactCompositeComponentMixin = {
|
||||
var nextMarkup = ReactReconciler.mountComponent(
|
||||
this._renderedComponent,
|
||||
transaction,
|
||||
this._nativeParent,
|
||||
this._nativeContainerInfo,
|
||||
this._hostParent,
|
||||
this._hostContainerInfo,
|
||||
this._processChildContext(context)
|
||||
);
|
||||
|
||||
@@ -1055,7 +1055,7 @@ var ReactCompositeComponentMixin = {
|
||||
}
|
||||
|
||||
this._replaceNodeWithMarkup(
|
||||
oldNativeNode,
|
||||
oldHostNode,
|
||||
nextMarkup,
|
||||
prevComponentInstance
|
||||
);
|
||||
@@ -1067,9 +1067,9 @@ var ReactCompositeComponentMixin = {
|
||||
*
|
||||
* @protected
|
||||
*/
|
||||
_replaceNodeWithMarkup: function(oldNativeNode, nextMarkup, prevInstance) {
|
||||
_replaceNodeWithMarkup: function(oldHostNode, nextMarkup, prevInstance) {
|
||||
ReactComponentEnvironment.replaceNodeWithMarkup(
|
||||
oldNativeNode,
|
||||
oldHostNode,
|
||||
nextMarkup,
|
||||
prevInstance
|
||||
);
|
||||
|
||||
+7
-7
@@ -6,7 +6,7 @@
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule ReactNativeComponent
|
||||
* @providesModule ReactHostComponent
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
@@ -15,11 +15,11 @@ var invariant = require('invariant');
|
||||
|
||||
var autoGenerateWrapperClass = null;
|
||||
var genericComponentClass = null;
|
||||
// This registry keeps track of wrapper classes around native tags.
|
||||
// This registry keeps track of wrapper classes around host tags.
|
||||
var tagToComponentClass = {};
|
||||
var textComponentClass = null;
|
||||
|
||||
var ReactNativeComponentInjection = {
|
||||
var ReactHostComponentInjection = {
|
||||
// This accepts a class that receives the tag string. This is a catch all
|
||||
// that can render any kind of tag.
|
||||
injectGenericComponentClass: function(componentClass) {
|
||||
@@ -56,7 +56,7 @@ function getComponentClassForElement(element) {
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a native internal component class for a specific tag.
|
||||
* Get a host internal component class for a specific tag.
|
||||
*
|
||||
* @param {ReactElement} element The element to create.
|
||||
* @return {function} The internal class constructor function.
|
||||
@@ -86,12 +86,12 @@ function isTextComponent(component) {
|
||||
return component instanceof textComponentClass;
|
||||
}
|
||||
|
||||
var ReactNativeComponent = {
|
||||
var ReactHostComponent = {
|
||||
getComponentClassForElement: getComponentClassForElement,
|
||||
createInternalComponent: createInternalComponent,
|
||||
createInstanceForText: createInstanceForText,
|
||||
isTextComponent: isTextComponent,
|
||||
injection: ReactNativeComponentInjection,
|
||||
injection: ReactHostComponentInjection,
|
||||
};
|
||||
|
||||
module.exports = ReactNativeComponent;
|
||||
module.exports = ReactHostComponent;
|
||||
@@ -55,7 +55,7 @@ function makeMove(child, afterNode, toIndex) {
|
||||
type: ReactMultiChildUpdateTypes.MOVE_EXISTING,
|
||||
content: null,
|
||||
fromIndex: child._mountIndex,
|
||||
fromNode: ReactReconciler.getNativeNode(child),
|
||||
fromNode: ReactReconciler.getHostNode(child),
|
||||
toIndex: toIndex,
|
||||
afterNode: afterNode,
|
||||
};
|
||||
@@ -236,7 +236,7 @@ var ReactMultiChild = {
|
||||
child,
|
||||
transaction,
|
||||
this,
|
||||
this._nativeContainerInfo,
|
||||
this._hostContainerInfo,
|
||||
context
|
||||
);
|
||||
child._mountIndex = index++;
|
||||
@@ -360,7 +360,7 @@ var ReactMultiChild = {
|
||||
);
|
||||
}
|
||||
nextIndex++;
|
||||
lastPlacedNode = ReactReconciler.getNativeNode(nextChild);
|
||||
lastPlacedNode = ReactReconciler.getHostNode(nextChild);
|
||||
}
|
||||
// Remove children that are no longer present.
|
||||
for (name in removedNodes) {
|
||||
@@ -453,7 +453,7 @@ var ReactMultiChild = {
|
||||
child,
|
||||
transaction,
|
||||
this,
|
||||
this._nativeContainerInfo,
|
||||
this._hostContainerInfo,
|
||||
context
|
||||
);
|
||||
child._mountIndex = index;
|
||||
|
||||
@@ -31,8 +31,8 @@ var ReactReconciler = {
|
||||
*
|
||||
* @param {ReactComponent} internalInstance
|
||||
* @param {ReactReconcileTransaction|ReactServerRenderingTransaction} transaction
|
||||
* @param {?object} the containing native component instance
|
||||
* @param {?object} info about the native container
|
||||
* @param {?object} the containing host component instance
|
||||
* @param {?object} info about the host container
|
||||
* @return {?string} Rendered markup to be inserted into the DOM.
|
||||
* @final
|
||||
* @internal
|
||||
@@ -40,8 +40,8 @@ var ReactReconciler = {
|
||||
mountComponent: function(
|
||||
internalInstance,
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
) {
|
||||
if (__DEV__) {
|
||||
@@ -54,8 +54,8 @@ var ReactReconciler = {
|
||||
}
|
||||
var markup = internalInstance.mountComponent(
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
);
|
||||
if (internalInstance._currentElement &&
|
||||
@@ -80,8 +80,8 @@ var ReactReconciler = {
|
||||
* Returns a value that can be passed to
|
||||
* ReactComponentEnvironment.replaceNodeWithMarkup.
|
||||
*/
|
||||
getNativeNode: function(internalInstance) {
|
||||
return internalInstance.getNativeNode();
|
||||
getHostNode: function(internalInstance) {
|
||||
return internalInstance.getHostNode();
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
@@ -21,22 +21,22 @@ var ReactSimpleEmptyComponent = function(placeholderElement, instantiate) {
|
||||
Object.assign(ReactSimpleEmptyComponent.prototype, {
|
||||
mountComponent: function(
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
) {
|
||||
return ReactReconciler.mountComponent(
|
||||
this._renderedComponent,
|
||||
transaction,
|
||||
nativeParent,
|
||||
nativeContainerInfo,
|
||||
hostParent,
|
||||
hostContainerInfo,
|
||||
context
|
||||
);
|
||||
},
|
||||
receiveComponent: function() {
|
||||
},
|
||||
getNativeNode: function() {
|
||||
return ReactReconciler.getNativeNode(this._renderedComponent);
|
||||
getHostNode: function() {
|
||||
return ReactReconciler.getHostNode(this._renderedComponent);
|
||||
},
|
||||
unmountComponent: function() {
|
||||
ReactReconciler.unmountComponent(this._renderedComponent);
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
var ReactCompositeComponent = require('ReactCompositeComponent');
|
||||
var ReactEmptyComponent = require('ReactEmptyComponent');
|
||||
var ReactNativeComponent = require('ReactNativeComponent');
|
||||
var ReactHostComponent = require('ReactHostComponent');
|
||||
var ReactInstrumentation = require('ReactInstrumentation');
|
||||
|
||||
var invariant = require('invariant');
|
||||
@@ -100,7 +100,7 @@ function instantiateReactComponent(node) {
|
||||
|
||||
// Special case string values
|
||||
if (typeof element.type === 'string') {
|
||||
instance = ReactNativeComponent.createInternalComponent(element);
|
||||
instance = ReactHostComponent.createInternalComponent(element);
|
||||
} else if (isInternalComponentType(element.type)) {
|
||||
// This is temporarily available for custom components that are not string
|
||||
// representations. I.e. ART. Once those are updated to use the string
|
||||
@@ -110,7 +110,7 @@ function instantiateReactComponent(node) {
|
||||
instance = new ReactCompositeComponentWrapper(element);
|
||||
}
|
||||
} else if (typeof node === 'string' || typeof node === 'number') {
|
||||
instance = ReactNativeComponent.createInstanceForText(node);
|
||||
instance = ReactHostComponent.createInstanceForText(node);
|
||||
} else {
|
||||
invariant(
|
||||
false,
|
||||
@@ -123,7 +123,7 @@ function instantiateReactComponent(node) {
|
||||
warning(
|
||||
typeof instance.mountComponent === 'function' &&
|
||||
typeof instance.receiveComponent === 'function' &&
|
||||
typeof instance.getNativeNode === 'function' &&
|
||||
typeof instance.getHostNode === 'function' &&
|
||||
typeof instance.unmountComponent === 'function',
|
||||
'Only React Components can be mounted.'
|
||||
);
|
||||
|
||||
@@ -16,7 +16,7 @@ var ReactElement = require('ReactElement');
|
||||
var invariant = require('invariant');
|
||||
|
||||
var ReactNodeTypes = {
|
||||
NATIVE: 0,
|
||||
HOST: 0,
|
||||
COMPOSITE: 1,
|
||||
EMPTY: 2,
|
||||
|
||||
@@ -27,7 +27,7 @@ var ReactNodeTypes = {
|
||||
if (typeof node.type === 'function') {
|
||||
return ReactNodeTypes.COMPOSITE;
|
||||
} else {
|
||||
return ReactNodeTypes.NATIVE;
|
||||
return ReactNodeTypes.HOST;
|
||||
}
|
||||
}
|
||||
invariant(false, 'Unexpected node: %s', node);
|
||||
|
||||
+4
-4
@@ -6,25 +6,25 @@
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*
|
||||
* @providesModule getNativeComponentFromComposite
|
||||
* @providesModule getHostComponentFromComposite
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
|
||||
var ReactNodeTypes = require('ReactNodeTypes');
|
||||
|
||||
function getNativeComponentFromComposite(inst) {
|
||||
function getHostComponentFromComposite(inst) {
|
||||
var type;
|
||||
|
||||
while ((type = inst._renderedNodeType) === ReactNodeTypes.COMPOSITE) {
|
||||
inst = inst._renderedComponent;
|
||||
}
|
||||
|
||||
if (type === ReactNodeTypes.NATIVE) {
|
||||
if (type === ReactNodeTypes.HOST) {
|
||||
return inst._renderedComponent;
|
||||
} else if (type === ReactNodeTypes.EMPTY) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = getNativeComponentFromComposite;
|
||||
module.exports = getHostComponentFromComposite;
|
||||
@@ -394,7 +394,7 @@ NoopInternalComponent.prototype = {
|
||||
this._currentElement = element;
|
||||
},
|
||||
|
||||
getNativeNode: function() {
|
||||
getHostNode: function() {
|
||||
return undefined;
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user