Initial commit

Examples/UIExplorer/NavigatorIOSExample.js

@@ -0,0 +1,211 @@
+/**
+ * Copyright 2004-present Facebook. All Rights Reserved.
+ *
+ * @providesModule NavigatorIOSExample
+ */
+'use strict';
+
+var React = require('react-native/addons');
+var ViewExample = require('./ViewExample');
+var {
+  PixelRatio,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} = React;
+
+var EmptyPage = React.createClass({
+
+  render: function() {
+    return (
+      <View style={styles.emptyPage}>
+        <Text style={styles.emptyPageText}>
+          {this.props.text}
+        </Text>
+      </View>
+    );
+  },
+
+});
+
+var NavigatorIOSExample = React.createClass({
+
+  statics: {
+    title: '<NavigatorIOS>',
+    description: 'iOS navigation capabilities',
+  },
+
+  render: function() {
+    var recurseTitle = 'Recurse Navigation';
+    if (!this.props.topExampleRoute) {
+      recurseTitle += ' - more examples here';
+    }
+    return (
+      <ScrollView style={styles.list}>
+        <View style={styles.line}/>
+        <View style={styles.group}>
+          <View style={styles.row}>
+            <Text style={styles.rowNote}>
+              See &lt;UIExplorerApp&gt; for top-level usage.
+            </Text>
+          </View>
+        </View>
+        <View style={styles.line}/>
+        <View style={styles.group}>
+          {this._renderRow(recurseTitle, () => {
+            this.props.navigator.push({
+              title: NavigatorIOSExample.title,
+              component: NavigatorIOSExample,
+              passProps: {topExampleRoute: this.props.topExampleRoute || this.props.route},
+            });
+          })}
+          {this._renderRow('Push View Example', () => {
+            this.props.navigator.push({
+              title: 'Very Long Custom View Example Title',
+              component: ViewExample,
+            });
+          })}
+          {this._renderRow('Custom Right Button', () => {
+            this.props.navigator.push({
+              title: NavigatorIOSExample.title,
+              component: EmptyPage,
+              rightButtonTitle: 'Cancel',
+              onRightButtonPress: () => this.props.navigator.pop(),
+              passProps: {
+                text: 'This page has a right button in the nav bar',
+              }
+            });
+          })}
+          {this._renderRow('Pop', () => {
+            this.props.navigator.pop();
+          })}
+          {this._renderRow('Pop to top', () => {
+            this.props.navigator.popToTop();
+          })}
+          {this._renderRow('Replace here', () => {
+            var prevRoute = this.props.route;
+            this.props.navigator.replace({
+              title: 'New Navigation',
+              component: EmptyPage,
+              rightButtonTitle: 'Undo',
+              onRightButtonPress: () => this.props.navigator.replace(prevRoute),
+              passProps: {
+                text: 'The component is replaced, but there is currently no ' +
+                  'way to change the right button or title of the current route',
+              }
+            });
+          })}
+          {this._renderReplacePrevious()}
+          {this._renderReplacePreviousAndPop()}
+          {this._renderPopToTopNavExample()}
+        </View>
+        <View style={styles.line}/>
+      </ScrollView>
+    );
+  },
+
+  _renderPopToTopNavExample: function() {
+    if (!this.props.topExampleRoute) {
+      return null;
+    }
+    return this._renderRow('Pop to top NavigatorIOSExample', () => {
+      this.props.navigator.popToRoute(this.props.topExampleRoute);
+    });
+  },
+
+  _renderReplacePrevious: function() {
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
+      return null;
+    }
+    return this._renderRow('Replace previous', () => {
+      this.props.navigator.replacePrevious({
+        title: 'Replaced',
+        component: EmptyPage,
+        passProps: {
+          text: 'This is a replaced "previous" page',
+        },
+        wrapperStyle: styles.customWrapperStyle,
+      });
+    });
+  },
+
+  _renderReplacePreviousAndPop: function() {
+    if (!this.props.topExampleRoute) {
+      // this is to avoid replacing the UIExplorerList at the top of the stack
+      return null;
+    }
+    return this._renderRow('Replace previous and pop', () => {
+      this.props.navigator.replacePreviousAndPop({
+        title: 'Replaced and Popped',
+        component: EmptyPage,
+        passProps: {
+          text: 'This is a replaced "previous" page',
+        },
+        wrapperStyle: styles.customWrapperStyle,
+      });
+    });
+  },
+
+  _renderRow: function(title, onPress) {
+    return (
+      <View>
+        <TouchableHighlight onPress={onPress}>
+          <View style={styles.row}>
+            <Text style={styles.rowText}>
+              {title}
+            </Text>
+          </View>
+        </TouchableHighlight>
+        <View style={styles.separator} />
+      </View>
+    );
+  },
+});
+
+var styles = StyleSheet.create({
+  customWrapperStyle: {
+    backgroundColor: '#bbdddd',
+  },
+  emptyPage: {
+    flex: 1,
+    paddingTop: 64,
+  },
+  emptyPageText: {
+    margin: 10,
+  },
+  list: {
+    backgroundColor: '#eeeeee',
+    marginTop: 10,
+  },
+  group: {
+    backgroundColor: 'white',
+    paddingVertical: 10,
+  },
+  line: {
+    backgroundColor: '#bbbbbb',
+    height: 1 / PixelRatio.get(),
+  },
+  row: {
+    backgroundColor: 'white',
+    justifyContent: 'center',
+    paddingHorizontal: 15,
+    paddingVertical: 8,
+  },
+  separator: {
+    height: 1 / PixelRatio.get(),
+    backgroundColor: '#bbbbbb',
+    marginLeft: 15,
+  },
+  rowNote: {
+    fontSize: 17,
+  },
+  rowText: {
+    fontSize: 17,
+    fontWeight: 'bold',
+  },
+});
+
+module.exports = NavigatorIOSExample;