status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
Examples/UIExplorer/JSNavigationStack/BreadcrumbNavSample.js
View File

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

20
Examples/UIExplorer/JSNavigationStack/JumpingNavSample.js
View File

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

12
Examples/UIExplorer/JSNavigationStack/NavigationBarSample.js
View File

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

26
Examples/UIExplorer/JSNavigationStack/NestedBreadcrumbNavSample.js
View File

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

2
Libraries/CustomComponents/JSNavigationStack.js
View File

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

8
Libraries/CustomComponents/JSNavigationStack/BreadcrumbNavigationBar.js
View File

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

2
Libraries/CustomComponents/JSNavigationStack/NavigationBar.js
View File

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