[ReactNative] rename navigationOperations to navigator

This commit is contained in:
Eric Vicenti 2015-03-24 15:40:48 -07:00
parent 40d71e6c5b
commit 9b03bec662
7 changed files with 52 additions and 52 deletions

View File

@ -32,7 +32,7 @@ var _getRandomRoute = function() {
var SampleNavigationBarRouteMapper = {
rightContentForRoute: function(route, navigationOperations) {
rightContentForRoute: function(route, navigator) {
if (route.rightButtonTitle) {
return (
<Text style={[styles.titleText, styles.filterText]}>
@ -43,28 +43,28 @@ var SampleNavigationBarRouteMapper = {
return null;
}
},
titleContentForRoute: function(route, navigationOperations) {
titleContentForRoute: function(route, navigator) {
return (
<TouchableBounce
onPress={() => navigationOperations.push(_getRandomRoute())}>
onPress={() => navigator.push(_getRandomRoute())}>
<View>
<Text style={styles.titleText}>{route.title}</Text>
</View>
</TouchableBounce>
);
},
iconForRoute: function(route, navigationOperations) {
iconForRoute: function(route, navigator) {
var onPress =
navigationOperations.popToRoute.bind(navigationOperations, route);
navigator.popToRoute.bind(navigator, route);
return (
<TouchableBounce onPress={onPress}>
<View style={styles.crumbIconPlaceholder} />
</TouchableBounce>
);
},
separatorForRoute: function(route, navigationOperations) {
separatorForRoute: function(route, navigator) {
return (
<TouchableBounce onPress={navigationOperations.pop}>
<TouchableBounce onPress={navigator.pop}>
<View style={styles.crumbSeparatorPlaceholder} />
</TouchableBounce>
);
@ -73,49 +73,49 @@ var SampleNavigationBarRouteMapper = {
var _delay = 400; // Just to test for race conditions with native nav.
var renderScene = function(route, navigationOperations) {
var renderScene = function(route, navigator) {
var content = route.content;
return (
<ScrollView>
<View style={styles.scene}>
<TouchableBounce
onPress={_pushRouteLater(navigationOperations.push)}>
onPress={_pushRouteLater(navigator.push)}>
<View style={styles.button}>
<Text style={styles.buttonText}>request push soon</Text>
</View>
</TouchableBounce>
<TouchableBounce
onPress={_pushRouteLater(navigationOperations.replace)}>
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableBounce>
<TouchableBounce
onPress={_pushRouteLater(navigationOperations.replace)}>
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableBounce>
<TouchableBounce
onPress={_pushRouteLater(navigationOperations.replace)}>
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableBounce>
<TouchableBounce
onPress={_pushRouteLater(navigationOperations.replace)}>
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableBounce>
<TouchableBounce
onPress={_pushRouteLater(navigationOperations.replace)}>
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableBounce>
<TouchableBounce
onPress={_popRouteLater(navigationOperations.pop)}>
onPress={_popRouteLater(navigator.pop)}>
<View style={styles.button}>
<Text style={styles.buttonText}>request pop soon</Text>
</View>
@ -123,7 +123,7 @@ var renderScene = function(route, navigationOperations) {
<TouchableBounce
onPress={
_immediatelySetTwoItemsLater(
navigationOperations.immediatelyResetRouteStack
navigator.immediatelyResetRouteStack
)
}>
<View style={styles.button}>
@ -131,7 +131,7 @@ var renderScene = function(route, navigationOperations) {
</View>
</TouchableBounce>
<TouchableBounce
onPress={_popToTopLater(navigationOperations.popToTop)}>
onPress={_popToTopLater(navigator.popToTop)}>
<View style={styles.button}>
<Text style={styles.buttonText}>pop to top soon</Text>
</View>

View File

@ -27,14 +27,14 @@ var ROUTE_STACK = [
_getRandomRoute(),
_getRandomRoute(),
];
var renderScene = function(route, navigationOperations) {
var renderScene = function(route, navigator) {
return (
<ScrollView style={styles.scene}>
<View style={styles.scroll}>
<Text>{route.randNumber}</Text>
<TouchableBounce
onPress={() => {
navigationOperations.jumpBack();
navigator.jumpBack();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>jumpBack</Text>
@ -42,7 +42,7 @@ var renderScene = function(route, navigationOperations) {
</TouchableBounce>
<TouchableBounce
onPress={() => {
navigationOperations.jumpForward();
navigator.jumpForward();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>jumpForward</Text>
@ -50,7 +50,7 @@ var renderScene = function(route, navigationOperations) {
</TouchableBounce>
<TouchableBounce
onPress={() => {
navigationOperations.jumpTo(INIT_ROUTE);
navigator.jumpTo(INIT_ROUTE);
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>jumpTo initial route</Text>
@ -58,7 +58,7 @@ var renderScene = function(route, navigationOperations) {
</TouchableBounce>
<TouchableBounce
onPress={() => {
navigationOperations.push(_getRandomRoute());
navigator.push(_getRandomRoute());
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: push</Text>
@ -66,7 +66,7 @@ var renderScene = function(route, navigationOperations) {
</TouchableBounce>
<TouchableBounce
onPress={() => {
navigationOperations.replace(_getRandomRoute());
navigator.replace(_getRandomRoute());
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: replace</Text>
@ -74,7 +74,7 @@ var renderScene = function(route, navigationOperations) {
</TouchableBounce>
<TouchableBounce
onPress={() => {
navigationOperations.pop();
navigator.pop();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: pop</Text>
@ -82,7 +82,7 @@ var renderScene = function(route, navigationOperations) {
</TouchableBounce>
<TouchableBounce
onPress={() => {
navigationOperations.immediatelyResetRouteStack([
navigator.immediatelyResetRouteStack([
_getRandomRoute(),
_getRandomRoute(),
]);
@ -93,7 +93,7 @@ var renderScene = function(route, navigationOperations) {
</TouchableBounce>
<TouchableBounce
onPress={() => {
navigationOperations.popToTop();
navigator.popToTop();
}}>
<View style={styles.button}>
<Text style={styles.buttonText}>destructive: pop to top</Text>
@ -110,7 +110,7 @@ class JumpingNavBar extends React.Component {
<View style={styles.navBar}>
{this.props.routeStack.map((route, index) => (
<TouchableBounce onPress={() => {
this.props.navigationOperations.jumpTo(route);
this.props.navigator.jumpTo(route);
}}>
<View style={styles.navButton}>
<Text

View File

@ -18,14 +18,14 @@ var cssVar = require('cssVar');
var NavigationBarRouteMapper = {
LeftButton: function(route, navigationOperations, index, navState) {
LeftButton: function(route, navigator, index, navState) {
if (index === 0) {
return null;
}
var previousRoute = navState.routeStack[index - 1];
return (
<TouchableOpacity onPress={() => navigationOperations.pop()}>
<TouchableOpacity onPress={() => navigator.pop()}>
<View>
<Text style={[styles.navBarText, styles.navBarButtonText]}>
{previousRoute.title}
@ -35,10 +35,10 @@ var NavigationBarRouteMapper = {
);
},
RightButton: function(route, navigationOperations, index, navState) {
RightButton: function(route, navigator, index, navState) {
return (
<TouchableOpacity
onPress={() => navigationOperations.push(newRandomRoute())}>
onPress={() => navigator.push(newRandomRoute())}>
<View>
<Text style={[styles.navBarText, styles.navBarButtonText]}>
Next
@ -48,7 +48,7 @@ var NavigationBarRouteMapper = {
);
},
Title: function(route, navigationOperations, index, navState) {
Title: function(route, navigator, index, navState) {
return (
<Text style={[styles.navBarText, styles.navBarTitleText]}>
{route.title} [{index}]
@ -74,7 +74,7 @@ var NavigationBarSample = React.createClass({
debugOverlay={false}
style={styles.appContainer}
initialRoute={newRandomRoute()}
renderScene={(route, navigationOperations) => (
renderScene={(route, navigator) => (
<View style={styles.scene}>
<Text>{route.content}</Text>
</View>

View File

@ -28,7 +28,7 @@ var _getRandomRoute = function() {
var HorizontalNavigationBarRouteMapper = {
rightContentForRoute: function(route, navigationOperations) {
rightContentForRoute: function(route, navigator) {
if (route.rightButtonTitle) {
return (
<Text style={[styles.titleText, styles.filterText]}>
@ -39,40 +39,40 @@ var HorizontalNavigationBarRouteMapper = {
return null;
}
},
titleContentForRoute: function(route, navigationOperations) {
titleContentForRoute: function(route, navigator) {
return (
<TouchableBounce
onPress={() => () => { navigationOperations.push(_getRandomRoute()); }}>
onPress={() => () => { navigator.push(_getRandomRoute()); }}>
<View>
<Text style={styles.titleText}>{route.title}</Text>
</View>
</TouchableBounce>
);
},
iconForRoute: function(route, navigationOperations) {
iconForRoute: function(route, navigator) {
var onPress =
navigationOperations.popToRoute.bind(navigationOperations, route);
navigator.popToRoute.bind(navigator, route);
return (
<TouchableBounce onPress={onPress}>
<View style={styles.crumbIconPlaceholder} />
</TouchableBounce>
);
},
separatorForRoute: function(route, navigationOperations) {
separatorForRoute: function(route, navigator) {
return (
<TouchableBounce onPress={navigationOperations.pop}>
<TouchableBounce onPress={navigator.pop}>
<View style={styles.crumbSeparatorPlaceholder} />
</TouchableBounce>
);
}
};
var ThirdDeepRouteMapper = (route, navigationOperations) => (
var ThirdDeepRouteMapper = (route, navigator) => (
<View style={styles.navigationItem}>
<ScrollView>
<View style={styles.thirdDeepScrollContent}>
<TouchableBounce
onPress={() => { navigationOperations.push(_getRandomRoute()); }}>
onPress={() => { navigator.push(_getRandomRoute()); }}>
<View style={styles.button}>
<Text style={styles.buttonText}>request push soon</Text>
</View>
@ -82,10 +82,10 @@ var ThirdDeepRouteMapper = (route, navigationOperations) => (
</View>
);
var SecondDeepRouteMapper = (route, navigationOperations) => (
var SecondDeepRouteMapper = (route, navigator) => (
<View style={styles.navigationItem}>
<TouchableBounce
onPress={() => { navigationOperations.push(_getRandomRoute()); }}>
onPress={() => { navigator.push(_getRandomRoute()); }}>
<View style={styles.button}>
<Text style={styles.buttonText}>Push Horizontal</Text>
</View>
@ -103,10 +103,10 @@ var SecondDeepRouteMapper = (route, navigationOperations) => (
</View>
);
var FirstDeepRouteMapper = (route, navigationOperations) => (
var FirstDeepRouteMapper = (route, navigator) => (
<View style={styles.navigationItem}>
<TouchableBounce
onPress={() => { navigationOperations.push(_getRandomRoute()); }}>
onPress={() => { navigator.push(_getRandomRoute()); }}>
<View style={styles.button}>
<Text style={styles.buttonText}>Push Outer Vertical Stack</Text>
</View>

View File

@ -839,7 +839,7 @@ var JSNavigationStack = React.createClass({
}
return React.cloneElement(this.props.navigationBar, {
ref: NAVIGATION_BAR_REF,
navigationOperations: this.memoizedNavigationOperations,
navigator: this.memoizedNavigationOperations,
navState: this.state,
});
},

View File

@ -53,7 +53,7 @@ var initStyle = function(index, presentedIndex) {
var BreadcrumbNavigationBar = React.createClass({
propTypes: {
navigationOperations: PropTypes.shape({
navigator: PropTypes.shape({
push: PropTypes.func,
pop: PropTypes.func,
replace: PropTypes.func,
@ -129,7 +129,7 @@ var BreadcrumbNavigationBar = React.createClass({
_renderOrReturnBreadcrumb: function(route, index) {
var uid = this.props.navState.idStack[index];
var navBarRouteMapper = this.props.navigationBarRouteMapper;
var navOps = this.props.navigationOperations;
var navOps = this.props.navigator;
var alreadyRendered = this.refs['crumbContainer' + uid];
if (alreadyRendered) {
// Don't bother re-calculating the children
@ -176,7 +176,7 @@ var BreadcrumbNavigationBar = React.createClass({
var navBarRouteMapper = this.props.navigationBarRouteMapper;
var titleContent = navBarRouteMapper.titleContentForRoute(
navState.routeStack[index],
this.props.navigationOperations
this.props.navigator
);
var firstStyles = initStyle(index, navStatePresentedIndex(this.props.navState));
return (
@ -208,7 +208,7 @@ var BreadcrumbNavigationBar = React.createClass({
}
var rightContent = navBarRouteMapper.rightContentForRoute(
navState.routeStack[index],
this.props.navigationOperations
this.props.navigator
);
if (!rightContent) {
return null;

View File

@ -125,7 +125,7 @@ var NavigationBar = React.createClass({
var content = navBarRouteMapper[componentName](
navState.routeStack[index],
this.props.navigationOperations,
this.props.navigator,
index,
this.props.navState
);