MeteorListView Component

README.md

@@ -12,7 +12,7 @@
 
 # react-native-meteor
 
-Meteor-like methods for React Native. **Currently in v1.0.0-beta7** ! For old docs, see [v0.6.2 documentation](https://github.com/inProgress-team/react-native-meteor/tree/0.6.2) (classic ddp interface).
+Meteor-like methods for React Native. **Currently in v1.0.0-beta8** ! For old docs, see [v0.6.2 documentation](https://github.com/inProgress-team/react-native-meteor/tree/0.6.2) (classic ddp interface).
 
 ## What is it for ?
 
@@ -32,7 +32,7 @@ The purpose of this library is :
 ```javascript
 
 import { View, Text, Component } from 'react-native';
-import Meteor, { connectMeteor } from 'react-native-meteor';
+import Meteor, { connectMeteor, MeteorListView } from 'react-native-meteor';
 
 /*
 * Uses decorators (see detailed installation to activate it)
@@ -54,22 +54,30 @@ export default class App extends Component {
   }
   startMeteorSubscriptions() {
     Meteor.subscribe('todos');
+    Meteor.subscribe('settings');
   }
   getMeteorData() {
     return {
-      todos: Meteor.collection('todos').find()
+      settings: Meteor.collection('settings').findOne()
     };
   }
+  renderRow(todo) {
+    return (
+      <Text>{todo.title}</Text>
+    );
+  }
   render() {
-    const { todos } = this.data;
-
-    {todos.map(todo=>{
-      return (
-        <View key={todo._id}>
-          <Text>{todo.title}</Text>
-        </View>
-      )
-    })}
+    const { settings } = this.data;
+
+    <View>
+      <Text>{settings.title}</Text>
+        <MeteorListView
+          collection="todos"
+          selector={{done: true}}
+          options={{sort: {createdAt: -1}}}
+          renderItem={this.renderItem}
+        />
+    </View>
 
   }
 }
@@ -111,6 +119,25 @@ Inside getMeteorData, you can access any Meteor reactive data source, which mean
 * [Meteor.status()](http://docs.meteor.com/#/full/meteor_status)
 * [Meteor.loggingIn()](http://docs.meteor.com/#/full/meteor_loggingin)
 
+# MeteorListView Component
+
+Same as [ListView](https://facebook.github.io/react-native/docs/listview.html) Component but does not need dataSource and accepts three arguments :
+
+- `collection` **string** *required*
+- `selector` [**string** / **object**]
+- `url` **object**
+
+### Example usage
+
+```javascript
+<MeteorListView
+  collection="todos"
+  selector={{done: true}}
+  options={{sort: {createdAt: -1}}}
+  renderItem={this.renderItem}
+/>
+```
+
 # API
 
 ## Meteor.connect(endpoint, options)

example/mobile/app/Routes/TodosListView.js

@@ -12,24 +12,10 @@ import React, {
   TabBarIOS
 } from 'react-native';
 
-import Meteor, { connectMeteor } from 'react-native-meteor';
+import Meteor, { connectMeteor, MeteorListView } from 'react-native-meteor';
 
 @connectMeteor
 export default class TodosListView extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ds: new ListView.DataSource({
-        rowHasChanged: (row1, row2) => !_.isEqual(row1, row2),
-      })
-    };
-  }
-  getMeteorData() {
-    return {
-      todos: Meteor.collection('todos').find()
-    };
-  }
   startMeteorSubscriptions() {
     Meteor.subscribe('todos', {
        createdAt: {$gt: new Date()}
@@ -43,14 +29,11 @@ export default class TodosListView extends Component {
     )
   }
   render() {
-    const { todos } = this.data;
-    const { ds } = this.state;
-    console.log(todos);
     return (
       <View style={styles.container}>
         <View style={styles.header} />
-        <ListView
-          dataSource={ds.cloneWithRows(todos)}
+        <MeteorListView
+          collection="todos"
           renderRow={this.renderItem}
         />
       </View>
@@ -62,5 +45,8 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center'
+  },
+  header: {
+    height: 24
   }
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-meteor",
-  "version": "1.0.0-beta7",
+  "version": "1.0.0-beta8",
   "description": "DDP React-native Client",
   "main": "src/Meteor.js",
   "scripts": {

src/ListView.js

@@ -0,0 +1,59 @@
+'use strict';
+
+import React, {
+  Component,
+  PropTypes,
+  ListView
+} from 'react-native';
+
+
+import Data from './Data';
+
+
+export default class MeteorListView extends Component {
+  static propTypes = {
+    collection: PropTypes.string.isRequired,
+    selector: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
+    options: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),
+    renderRow: PropTypes.func.isRequired
+  };
+  static defaultProps = {
+    selector: {}
+  };
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ds: new ListView.DataSource({
+        rowHasChanged: (row1, row2) => row1!==row2,
+      })
+    };
+  }
+  componentWillMount() {
+    const { collection, selector, options } = this.props;
+
+    if(!Data.db[collection]) {
+      Data.db.addCollection(collection)
+    }
+
+    const items = Data.db.observe(() => {
+      return Data.db.todos.find(selector, options);
+    });
+
+    items.subscribe(results=>{
+      this.setState({
+        ds: this.state.ds.cloneWithRows(results)
+      });
+    });
+  }
+  render() {
+    const { ds } = this.state;
+
+    return (
+      <ListView
+        {...this.props}
+        dataSource={ds}
+      />
+    );
+  }
+}

src/Meteor.js

@@ -7,8 +7,10 @@ import DDP from '../lib/ddp.js';
 import Data from './Data';
 import Mixin from './Mixin';
 import User from './User';
+import ListView from './ListView';
 
 module.exports = {
+  MeteorListView: ListView,
   connectMeteor(reactClass) {
     return reactMixin.onClass(reactClass, Mixin);
   },