Skip to content

Commit

Permalink
Merge pull request #357 from facebook/updates-mar-27
Browse files Browse the repository at this point in the history 
Update from Friday March 27
  • Loading branch information
@amasad
amasad committed Mar 27, 2015
2 parents 3b7bd74 + 31c4ff0 commit 0c83766
Show file tree
Hide file tree
Showing 37 changed files with 750 additions and 672 deletions.
2 changes: 1 addition & 1 deletion Examples/SampleApp/SampleApp.xcodeproj/project.pbxproj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@
/* Begin PBXFileReference section */
00481BDB1AC0C7FA00671115 /* RCTWebSocketDebugger.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebSocketDebugger.xcodeproj; path = ../../Libraries/RCTWebSocketDebugger/RCTWebSocketDebugger.xcodeproj; sourceTree = "<group>"; };
00481BE91AC0C89D00671115 /* libicucore.dylib */ = {isa = PBXFileReference; lastKnownFileType = "compiled.mach-o.dylib"; name = libicucore.dylib; path = usr/lib/libicucore.dylib; sourceTree = SDKROOT; };
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<absolute>"; };
00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = ../../Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj; sourceTree = "<group>"; };
00C302AF1ABCB8E700DB3ED1 /* RCTAdSupport.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAdSupport.xcodeproj; path = ../../Libraries/AdSupport/RCTAdSupport.xcodeproj; sourceTree = "<group>"; };
00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTGeolocation.xcodeproj; path = ../../Libraries/Geolocation/RCTGeolocation.xcodeproj; sourceTree = "<group>"; };
00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = ../../Libraries/Image/RCTImage.xcodeproj; sourceTree = "<group>"; };
Expand Down
292 changes: 88 additions & 204 deletions Examples/UIExplorer/Navigator/BreadcrumbNavSample.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,245 +15,133 @@

var React = require('react-native');
var {
PixelRatio,
Navigator,
ScrollView,
StyleSheet,
TabBarIOS,
ScrollView,
Text,
View,
TouchableHighlight,
TouchableOpacity,
View,
} = React;

var SAMPLE_TEXT = 'Top Pushes. Middle Replaces. Bottom Pops.';

var _getRandomRoute = function() {
return {
backButtonTitle: 'Back' + ('' + 10 * Math.random()).substr(0, 1),
content:
SAMPLE_TEXT + '\nHere\'s a random number ' + Math.random(),
title: Math.random() > 0.5 ? 'Hello' : 'There',
rightButtonTitle: Math.random() > 0.5 ? 'Right' : 'Button',
title: '#' + Math.ceil(Math.random() * 1000),
};
};


var SampleNavigationBarRouteMapper = {
rightContentForRoute: function(route, navigator) {
if (route.rightButtonTitle) {
return (
<Text style={[styles.titleText, styles.filterText]}>
{route.rightButtonTitle}
</Text>
);
} else {
return null;
}
},
titleContentForRoute: function(route, navigator) {
class NavButton extends React.Component {
render() {
return (
<TouchableHighlight
onPress={() => navigator.push(_getRandomRoute())}>
<View>
<Text style={styles.titleText}>{route.title}</Text>
</View>
</TouchableHighlight>
);
},
iconForRoute: function(route, navigator) {
var onPress =
navigator.popToRoute.bind(navigator, route);
return (
<TouchableHighlight onPress={onPress}>
<View style={styles.crumbIconPlaceholder} />
</TouchableHighlight>
);
},
separatorForRoute: function(route, navigator) {
return (
<TouchableHighlight onPress={navigator.pop}>
<View style={styles.crumbSeparatorPlaceholder} />
style={styles.button}
underlayColor="#B5B5B5"
onPress={this.props.onPress}>
<Text style={styles.buttonText}>{this.props.text}</Text>
</TouchableHighlight>
);
}
};

var _delay = 400; // Just to test for race conditions with native nav.

var renderScene = function(route, navigator) {
var content = route.content;
return (
<ScrollView>
<View style={styles.scene}>
<TouchableHighlight
onPress={_pushRouteLater(navigator.push)}>
<View style={styles.button}>
<Text style={styles.buttonText}>request push soon</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_pushRouteLater(navigator.replace)}>
<View style={styles.button}>
<Text>{content}</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_popRouteLater(navigator.pop)}>
<View style={styles.button}>
<Text style={styles.buttonText}>request pop soon</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={
_immediatelySetTwoItemsLater(
navigator.immediatelyResetRouteStack
)
}>
<View style={styles.button}>
<Text style={styles.buttonText}>Immediate set two routes</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
onPress={_popToTopLater(navigator.popToTop)}>
<View style={styles.button}>
<Text style={styles.buttonText}>pop to top soon</Text>
</View>
</TouchableHighlight>
</View>
</ScrollView>
);
};

var _popToTopLater = function(popToTop) {
return () => setTimeout(popToTop, _delay);
};

var _pushRouteLater = function(push) {
return () => setTimeout(
() => push(_getRandomRoute()),
_delay
);
};

var _immediatelySetTwoItemsLater = function(immediatelyResetRouteStack) {
return () => setTimeout(
() => immediatelyResetRouteStack([
_getRandomRoute(),
_getRandomRoute(),
])
);
};

var _popRouteLater = function(pop) {
return () => setTimeout(pop, _delay);
};
}

var BreadcrumbNavSample = React.createClass({

getInitialState: function() {
return {
selectedTab: 0,
componentWillMount: function() {
this._navBarRouteMapper = {
rightContentForRoute: function(route, navigator) {
return null;
},
titleContentForRoute: function(route, navigator) {
return (
<TouchableOpacity
onPress={() => navigator.push(_getRandomRoute())}>
<View>
<Text style={styles.titleText}>{route.title}</Text>
</View>
</TouchableOpacity>
);
},
iconForRoute: function(route, navigator) {
return (
<TouchableOpacity onPress={() => {
navigator.popToRoute(route);
}}>
<View style={styles.crumbIconPlaceholder} />
</TouchableOpacity>
);
},
separatorForRoute: function(route, navigator) {
return (
<TouchableOpacity onPress={navigator.pop}>
<View style={styles.crumbSeparatorPlaceholder} />
</TouchableOpacity>
);
}
};
},

_renderScene: function(route, navigator) {
return (
<ScrollView style={styles.scene}>
<NavButton
onPress={() => { navigator.push(_getRandomRoute()) }}
text="Push"
/>
<NavButton
onPress={() => { navigator.immediatelyResetRouteStack([_getRandomRoute(), _getRandomRoute()]) }}
text="Reset w/ 2 scenes"
/>
<NavButton
onPress={() => { navigator.popToTop() }}
text="Pop to top"
/>
<NavButton
onPress={() => { navigator.replace(_getRandomRoute()) }}
text="Replace"
/>
<NavButton
onPress={() => { this.props.navigator.pop(); }}
text="Close breadcrumb example"
/>
</ScrollView>
);
},

render: function() {
var initialRoute = {
backButtonTitle: 'Start', // no back button for initial scene
content: SAMPLE_TEXT,
title: 'Campaigns',
rightButtonTitle: 'Filter',
};
return (
<TabBarIOS>
<TabBarIOS.Item
selected={this.state.selectedTab === 0}
onPress={this.onTabSelect.bind(this, 0)}
icon={require('image!tabnav_list')}
title="One">
<Navigator
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}
renderScene={renderScene}
navigationBar={
<Navigator.BreadcrumbNavigationBar
navigationBarRouteMapper={SampleNavigationBarRouteMapper}
/>
}
/>
</TabBarIOS.Item>
<TabBarIOS.Item
selected={this.state.selectedTab === 1}
onPress={this.onTabSelect.bind(this, 1)}
icon={require('image!tabnav_notification')}
title="Two">
<Navigator
configureScene={() => Navigator.SceneConfigs.FloatFromBottom}
debugOverlay={false}
style={[styles.appContainer]}
initialRoute={initialRoute}
renderScene={renderScene}
navigationBar={
<Navigator.BreadcrumbNavigationBar
navigationBarRouteMapper={SampleNavigationBarRouteMapper}
/>
}
<Navigator
style={styles.container}
initialRoute={_getRandomRoute()}
renderScene={this._renderScene}
navigationBar={
<Navigator.BreadcrumbNavigationBar
navigationBarRouteMapper={this._navBarRouteMapper}
/>
</TabBarIOS.Item>
</TabBarIOS>
}
/>
);
},

onTabSelect: function(tab, event) {
if (this.state.selectedTab !== tab) {
this.setState({selectedTab: tab});
}
},


});

var styles = StyleSheet.create({
navigationItem: {
backgroundColor: '#eeeeee',
},
scene: {
paddingTop: 50,
flex: 1,
},
button: {
backgroundColor: '#cccccc',
margin: 50,
marginTop: 26,
padding: 10,
backgroundColor: 'white',
padding: 15,
borderBottomWidth: 1 / PixelRatio.get(),
borderBottomColor: '#CDCDCD',
},
buttonText: {
fontSize: 12,
textAlign: 'center',
fontSize: 17,
fontWeight: '500',
},
appContainer: {
container: {
overflow: 'hidden',
backgroundColor: '#dddddd',
flex: 1,
Expand All @@ -262,13 +150,9 @@ var styles = StyleSheet.create({
fontSize: 18,
color: '#666666',
textAlign: 'center',
fontWeight: '500',
fontWeight: 'bold',
lineHeight: 32,
},
filterText: {
color: '#5577ff',
},
// TODO: Accept icons from route.
crumbIconPlaceholder: {
flex: 1,
backgroundColor: '#666666',
Expand Down
Loading

0 comments on commit 0c83766

Please sign in to comment.