add more complex example

lenaten · Nov 26, 2015 · 587aeb2 · 587aeb2
1 parent dd16c52
commit 587aeb2
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 14 deletions.
diff --git a/src/components/Back.js b/src/components/Back.js
@@ -0,0 +1,26 @@
+import React from 'react-native';
+
+var {
+  Text,
+  TouchableHighlight,
+  StyleSheet,
+} = React;
+
+var Back = React.createClass ({
+  render() {
+      return (
+        <TouchableHighlight
+          onPress={() => this.props.navigator.jumpBack()}>
+          <Text style={styles.link}>back</Text>
+        </TouchableHighlight>
+      )
+    }
+})
+
+var styles = StyleSheet.create({
+  link: {
+    color: 'blue',
+  }
+});
+
+module.exports = Back;
diff --git a/src/components/Collection.js b/src/components/Collection.js
@@ -1,10 +1,14 @@
 import React from 'react-native';
 import Relay from 'react-relay';
+import Back from './Back';
 
 var {
   ListView,
   View,
   Text,
+  TextInput,
+  TouchableHighlight,
+  StyleSheet,
 } = React;
 
 var Collection = React.createClass ({
@@ -18,42 +22,90 @@ var Collection = React.createClass ({
     }});
     return {
       dataSource: ds.cloneWithRows([]),
+      first: 0,
     };
   },
 
   componentWillMount() {
+    if (this.state.first > 0) {
+      this.setState({
+        dataSource: this.state.dataSource.cloneWithRows(this.props.viewer.widgets.edges),
+      });
+    }
+  },
+
+  componentWillReceiveProps(nextProps) {
     this.setState({
-      dataSource: this.state.dataSource.cloneWithRows(this.props.viewer.widgets.edges),
+      dataSource: this.state.dataSource.cloneWithRows(nextProps.viewer.widgets.edges),
     });
   },
 
-  renderRow(edge) {
+  renderRow(edge,b, id) {
     return (
       <View>
-        <Text>ID: {edge.node.id}</Text>
-        <Text>NAME: {edge.node.name}</Text>
+        <Text>---{++id}---</Text>
+        <Text style={styles.key}>ID:</Text>
+        <Text style={styles.value}>{edge.node.id}</Text>
+        <Text style={styles.key}>NAME:</Text>
+        <Text style={styles.value}>{edge.node.name}</Text>
       </View>
     );
   },
 
+  onChangeText(first) {
+    first = first || 0;
+
+    if (first > 0) {
+      this.props.relay.setVariables({
+        first: +first
+      });
+    }
+
+    if ( first === 0 ) {
+      this.setState({
+        dataSource: this.state.dataSource.cloneWithRows([]),
+      });
+    }
+
+    this.setState({first});
+  },
+
   render() {
       return (
-      <View>
-        <Text>Collection Example:</Text>
+      <View style={styles.view}>
+        <TextInput
+          autoFocus={true}
+          onChangeText={this.onChangeText}
+          text={this.state.first}
+          placeholder="number of items"
+          keyboardType="number-pad"
+        />
+        <Text style={styles.key}>Has Previous Page:</Text>
+        <Text style={styles.value}>{this.props.viewer.widgets.pageInfo.hasPreviousPage ? "true":"false"}</Text>
+        <Text style={styles.key}>Has Next Page:</Text>
+        <Text style={styles.value}>{this.props.viewer.widgets.pageInfo.hasNextPage ? "true":"false"}</Text>
         <ListView
           dataSource={this.state.dataSource}
           renderRow={this.renderRow}
         />
+        <Back navigator={this.props.navigator}/>
       </View>
     );
   }
 });
 
 export default Relay.createContainer(Collection, {
+  initialVariables: {
+    first: 1,
+  },
   fragments: {
     viewer: () => Relay.QL`
       fragment on User {
-        widgets(first: 10) {
+        widgets(first: $first) {
+          pageInfo {
+            hasNextPage
+            hasPreviousPage
+          }
           edges {
             node {
               id
@@ -65,3 +117,17 @@ export default Relay.createContainer(Collection, {
     `,
   },
 });
+
+var styles = StyleSheet.create({
+  key: {
+    color: 'red',
+  },
+  value: {
+    color: 'green',
+  },
+  view: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+});
diff --git a/src/components/FixApp.js b/src/components/FixApp.js
@@ -4,21 +4,69 @@ import Simple from './Simple';
 import Collection from './Collection';
 
 var {
+  Navigator,
+  TouchableHighlight,
+  StyleSheet,
+  BackAndroid,
+  Text,
   View,
 } = React;
 
+var _navigator;
+BackAndroid.addEventListener('hardwareBackPress', () => {
+  if (_navigator && _navigator.getCurrentRoutes().length > 1) {
+    _navigator.pop();
+    return true;
+  }
+  return false;
+});
+
+
 var FixApp = React.createClass({
-  render() {
-    return (
-        <View>
+  renderScene(route, navigator) {
+    _navigator = navigator;
+    switch (route.id) {
+      case 'Simple':
+        return (
           <Simple
             viewer={this.props.viewer}
+            navigator={navigator}
           />
+        )
+      case 'Collection':
+        return (
           <Collection
             viewer={this.props.viewer}
+            navigator={navigator}
           />
-        </View>
-    )
+        )
+      default:
+        return (
+          <View style={styles.view}>
+            <TouchableHighlight onPress={() => _navigator.push({id: 'Simple'})}>
+              <Text style={styles.link}>Simple Example</Text>
+            </TouchableHighlight>
+            <TouchableHighlight onPress={() => _navigator.push({id: 'Collection'})}>
+              <Text style={styles.link}>Collection Example</Text>
+            </TouchableHighlight>
+          </View>
+        )
+    }
+  },
+
+  render() {
+    return (
+      <Navigator
+        initialRoute={{ id: '' }}
+        renderScene={this.renderScene}
+        configureScene={(route) => {
+          if (route.sceneConfig) {
+            return route.sceneConfig;
+          }
+          return Navigator.SceneConfigs.FloatFromBottom;
+        }}
+      />
+    );
   }
 });
 
@@ -32,3 +80,14 @@ export default Relay.createContainer(FixApp, {
     `,
   },
 });
+
+var styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  link: {
+    color: 'blue',
+  },
+});
diff --git a/src/components/Simple.js b/src/components/Simple.js
@@ -1,18 +1,20 @@
 import React from 'react-native';
 import Relay from 'react-relay';
+import Back from './Back';
 
 var {
   View,
   Text,
+  StyleSheet,
 } = React;
 
 var Simple = React.createClass ({
 
   render() {
       return (
-        <View>
-          <Text>Simple Example</Text>
+        <View style={styles.view}>
           <Text>Viewer ID: {this.props.viewer.id}</Text>
+          <Back navigator={this.props.navigator}/>
         </View>
     );
   }
@@ -27,3 +29,11 @@ export default Relay.createContainer(Simple, {
     `,
   },
 });
+
+var styles = StyleSheet.create({
+  view: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});