[ReactNative] Update core RN modules to work with React 0.14-beta1

This commit is contained in:
Ben Alpert 2015-07-23 17:50:16 -07:00
parent 710d29efae
commit e01f90784f
9 changed files with 78 additions and 56 deletions

View File

@ -9,11 +9,13 @@
# Ignore react-tools where there are overlaps, but don't ignore anything that # Ignore react-tools where there are overlaps, but don't ignore anything that
# react-native relies on # react-native relies on
.*/node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js .*/node_modules/react-tools/src/React.js
.*/node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js .*/node_modules/react-tools/src/renderers/shared/reconciler/ReactInstanceHandles.js
.*/node_modules/react-tools/src/browser/ui/React.js .*/node_modules/react-tools/src/renderers/shared/event/EventPropagators.js
.*/node_modules/react-tools/src/core/ReactInstanceHandles.js .*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js
.*/node_modules/react-tools/src/event/EventPropagators.js .*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js
.*/node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js
.*/node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js
# Ignore commoner tests # Ignore commoner tests
.*/node_modules/commoner/test/.* .*/node_modules/commoner/test/.*

View File

@ -54,8 +54,9 @@ var createExamplePage = function(title: ?string, exampleModule: ExampleModule)
}; };
var result = example.render(null); var result = example.render(null);
if (result) { if (result) {
renderedComponent = result; renderedComponent = React.cloneElement(result, {
result.props.navigator = this.props.navigator; navigator: this.props.navigator,
});
} }
(React: Object).render = originalRender; (React: Object).render = originalRender;
(React: Object).renderComponent = originalRenderComponent; (React: Object).renderComponent = originalRenderComponent;

View File

@ -309,6 +309,21 @@ var ScrollView = React.createClass({
); );
}, },
handleScroll: function(e: Event) {
if (__DEV__) {
if (this.props.onScroll && !this.props.scrollEventThrottle) {
console.log(
'You specified `onScroll` on a <ScrollView> but not ' +
'`scrollEventThrottle`. You will only receive one event. ' +
'Using `16` you get all the events but be aware that it may ' +
'cause frame drops, use a bigger number if you don\'t need as ' +
'much precision.'
);
}
}
this.scrollResponderHandleScroll(e);
},
render: function() { render: function() {
var contentContainerStyle = [ var contentContainerStyle = [
this.props.horizontal && styles.contentContainerHorizontal, this.props.horizontal && styles.contentContainerHorizontal,
@ -324,21 +339,6 @@ var ScrollView = React.createClass({
') must by applied through the contentContainerStyle prop.' ') must by applied through the contentContainerStyle prop.'
); );
} }
if (__DEV__) {
if (this.props.onScroll && !this.props.scrollEventThrottle) {
var onScroll = this.props.onScroll;
this.props.onScroll = function() {
console.log(
'You specified `onScroll` on a <ScrollView> but not ' +
'`scrollEventThrottle`. You will only receive one event. ' +
'Using `16` you get all the events but be aware that it may ' +
'cause frame drops, use a bigger number if you don\'t need as ' +
'much precision.'
);
onScroll.apply(this, arguments);
};
}
}
var contentContainer = var contentContainer =
<View <View
@ -373,7 +373,7 @@ var ScrollView = React.createClass({
onStartShouldSetResponder: this.scrollResponderHandleStartShouldSetResponder, onStartShouldSetResponder: this.scrollResponderHandleStartShouldSetResponder,
onStartShouldSetResponderCapture: this.scrollResponderHandleStartShouldSetResponderCapture, onStartShouldSetResponderCapture: this.scrollResponderHandleStartShouldSetResponderCapture,
onScrollShouldSetResponder: this.scrollResponderHandleScrollShouldSetResponder, onScrollShouldSetResponder: this.scrollResponderHandleScrollShouldSetResponder,
onScroll: this.scrollResponderHandleScroll, onScroll: this.handleScroll,
onResponderGrant: this.scrollResponderHandleResponderGrant, onResponderGrant: this.scrollResponderHandleResponderGrant,
onResponderTerminationRequest: this.scrollResponderHandleTerminationRequest, onResponderTerminationRequest: this.scrollResponderHandleTerminationRequest,
onResponderTerminate: this.scrollResponderHandleTerminate, onResponderTerminate: this.scrollResponderHandleTerminate,

View File

@ -386,14 +386,13 @@ var ListView = React.createClass({
Object.assign(props, { Object.assign(props, {
onScroll: this._onScroll, onScroll: this._onScroll,
stickyHeaderIndices: sectionHeaderIndices, stickyHeaderIndices: sectionHeaderIndices,
children: [header, bodyComponents, footer],
}); });
// TODO(ide): Use function refs so we can compose with the scroll // TODO(ide): Use function refs so we can compose with the scroll
// component's original ref instead of clobbering it // component's original ref instead of clobbering it
return React.cloneElement(renderScrollComponent(props), { return React.cloneElement(renderScrollComponent(props), {
ref: SCROLLVIEW_REF, ref: SCROLLVIEW_REF,
}); }, header, bodyComponents, footer);
}, },
/** /**

View File

@ -85,6 +85,11 @@ function installConsoleErrorReporter() {
return; return;
} }
var str = Array.prototype.map.call(arguments, stringifySafe).join(', '); var str = Array.prototype.map.call(arguments, stringifySafe).join(', ');
if (str.slice(0, 10) === '"Warning: ') {
// React warnings use console.error so that a stack trace is shown, but
// we don't (currently) want these to show a redbox
return;
}
var error: any = new Error('console.error: ' + str); var error: any = new Error('console.error: ' + str);
error.framesToPop = 1; error.framesToPop = 1;
reportException(error, /* isFatal */ false); reportException(error, /* isFatal */ false);

View File

@ -14,7 +14,6 @@
var ReactChildren = require('ReactChildren'); var ReactChildren = require('ReactChildren');
var ReactClass = require('ReactClass'); var ReactClass = require('ReactClass');
var ReactComponent = require('ReactComponent'); var ReactComponent = require('ReactComponent');
var ReactContext = require('ReactContext');
var ReactCurrentOwner = require('ReactCurrentOwner'); var ReactCurrentOwner = require('ReactCurrentOwner');
var ReactElement = require('ReactElement'); var ReactElement = require('ReactElement');
var ReactElementValidator = require('ReactElementValidator'); var ReactElementValidator = require('ReactElementValidator');
@ -27,6 +26,7 @@ var deprecated = require('deprecated');
var findNodeHandle = require('findNodeHandle'); var findNodeHandle = require('findNodeHandle');
var invariant = require('invariant'); var invariant = require('invariant');
var onlyChild = require('onlyChild'); var onlyChild = require('onlyChild');
var warning = require('warning');
ReactNativeDefaultInjection.inject(); ReactNativeDefaultInjection.inject();
@ -61,7 +61,6 @@ var augmentElement = function(element: ReactElement) {
); );
} }
element._owner = ReactCurrentOwner.current; element._owner = ReactCurrentOwner.current;
element._context = ReactContext.current;
if (element.type.defaultProps) { if (element.type.defaultProps) {
resolveDefaultProps(element); resolveDefaultProps(element);
} }
@ -103,20 +102,14 @@ var ReactNative = {
isValidElement: ReactElement.isValidElement, isValidElement: ReactElement.isValidElement,
// Deprecations (remove for 0.13) // Deprecations (remove for 0.13)
renderComponent: deprecated( renderComponent: function(
'React', element: ReactElement,
'renderComponent', mountInto: number,
'render', callback?: ?(() => void)
this, ): ?ReactComponent {
render warning('Use React.render instead of React.renderComponent');
), return ReactNative.render(element, mountInto, callback);
isValidComponent: deprecated( },
'React',
'isValidComponent',
'isValidElement',
this,
ReactElement.isValidElement
)
}; };
// Inject the runtime into a devtools global hook regardless of browser. // Inject the runtime into a devtools global hook regardless of browser.

View File

@ -90,7 +90,7 @@ function inject() {
ReactNativeComponent.injection.injectTextComponentClass( ReactNativeComponent.injection.injectTextComponentClass(
ReactNativeTextComponent ReactNativeTextComponent
); );
ReactNativeComponent.injection.injectAutoWrapper(function(tag) { ReactNativeComponent.injection.injectGenericComponentClass(function(tag) {
// Show a nicer error message for non-function tags // Show a nicer error message for non-function tags
var info = ''; var info = '';
if (typeof tag === 'string' && /^[a-z]/.test(tag)) { if (typeof tag === 'string' && /^[a-z]/.test(tag)) {

View File

@ -13,6 +13,7 @@
var RCTUIManager = require('NativeModules').UIManager; var RCTUIManager = require('NativeModules').UIManager;
var ReactElement = require('ReactElement');
var ReactNativeTagHandles = require('ReactNativeTagHandles'); var ReactNativeTagHandles = require('ReactNativeTagHandles');
var ReactPerf = require('ReactPerf'); var ReactPerf = require('ReactPerf');
var ReactReconciler = require('ReactReconciler'); var ReactReconciler = require('ReactReconciler');
@ -27,6 +28,17 @@ function instanceNumberToChildRootID(rootNodeID, instanceNumber) {
return rootNodeID + '[' + instanceNumber + ']'; return rootNodeID + '[' + instanceNumber + ']';
} }
/**
* Temporary (?) hack so that we can store all top-level pending updates on
* composites instead of having to worry about different types of components
* here.
*/
var TopLevelWrapper = function() {};
TopLevelWrapper.prototype.render = function() {
// this.props is actually a ReactElement
return this.props;
};
/** /**
* Mounts this component and inserts it into the DOM. * Mounts this component and inserts it into the DOM.
* *
@ -43,7 +55,7 @@ function mountComponentIntoNode(
var markup = ReactReconciler.mountComponent( var markup = ReactReconciler.mountComponent(
componentInstance, rootID, transaction, emptyObject componentInstance, rootID, transaction, emptyObject
); );
componentInstance._isTopLevel = true; componentInstance._renderedComponent._topLevelWrapper = componentInstance;
ReactNativeMount._mountImageIntoNode(markup, container); ReactNativeMount._mountImageIntoNode(markup, container);
} }
@ -94,13 +106,22 @@ var ReactNativeMount = {
containerTag: number, containerTag: number,
callback?: ?(() => void) callback?: ?(() => void)
): ?ReactComponent { ): ?ReactComponent {
var nextWrappedElement = new ReactElement(
TopLevelWrapper,
null,
null,
null,
nextElement
);
var topRootNodeID = ReactNativeTagHandles.tagToRootNodeID[containerTag]; var topRootNodeID = ReactNativeTagHandles.tagToRootNodeID[containerTag];
if (topRootNodeID) { if (topRootNodeID) {
var prevComponent = ReactNativeMount._instancesByContainerID[topRootNodeID]; var prevComponent = ReactNativeMount._instancesByContainerID[topRootNodeID];
if (prevComponent) { if (prevComponent) {
var prevElement = prevComponent._currentElement; var prevWrappedElement = prevComponent._currentElement;
var prevElement = prevWrappedElement.props;
if (shouldUpdateReactComponent(prevElement, nextElement)) { if (shouldUpdateReactComponent(prevElement, nextElement)) {
ReactUpdateQueue.enqueueElementInternal(prevComponent, nextElement); ReactUpdateQueue.enqueueElementInternal(prevComponent, nextWrappedElement);
if (callback) { if (callback) {
ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback); ReactUpdateQueue.enqueueCallbackInternal(prevComponent, callback);
} }
@ -122,7 +143,7 @@ var ReactNativeMount = {
containerTag containerTag
); );
var instance = instantiateReactComponent(nextElement); var instance = instantiateReactComponent(nextWrappedElement);
ReactNativeMount._instancesByContainerID[topRootNodeID] = instance; ReactNativeMount._instancesByContainerID[topRootNodeID] = instance;
var childRootNodeID = instanceNumberToChildRootID( var childRootNodeID = instanceNumberToChildRootID(
@ -234,6 +255,10 @@ var ReactNativeMount = {
getNode: function<T>(id: T): T { getNode: function<T>(id: T): T {
return id; return id;
},
getID: function<T>(id: T): T {
return id;
} }
}; };

View File

@ -14,9 +14,13 @@ var path = require('path');
// modulePathIgnorePatterns. // modulePathIgnorePatterns.
var sharedBlacklist = [ var sharedBlacklist = [
'website', 'website',
'node_modules/react-tools/src/utils/ImmutableObject.js', 'node_modules/react-tools/src/React.js',
'node_modules/react-tools/src/core/ReactInstanceHandles.js', 'node_modules/react-tools/src/renderers/shared/event/EventPropagators.js',
'node_modules/react-tools/src/event/EventPropagators.js' 'node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderEventPlugin.js',
'node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderSyntheticEvent.js',
'node_modules/react-tools/src/renderers/shared/event/eventPlugins/ResponderTouchHistoryStore.js',
'node_modules/react-tools/src/renderers/shared/reconciler/ReactInstanceHandles.js',
'node_modules/react-tools/src/shared/vendor/core/ExecutionEnvironment.js',
]; ];
var platformBlacklists = { var platformBlacklists = {
@ -24,17 +28,10 @@ var platformBlacklists = {
'.ios.js' '.ios.js'
], ],
ios: [ ios: [
'node_modules/react-tools/src/browser/ui/React.js',
'node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js',
'node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js',
'.web.js', '.web.js',
'.android.js', '.android.js',
], ],
android: [ android: [
'node_modules/react-tools/src/browser/ui/React.js',
'node_modules/react-tools/src/browser/eventPlugins/ResponderEventPlugin.js',
'node_modules/react-tools/src/browser/ReactTextComponent.js',
'node_modules/react-tools/src/vendor/core/ExecutionEnvironment.js',
'.web.js', '.web.js',
'.ios.js', '.ios.js',
], ],