Skip to content

Instantly share code, notes, and snippets.

@williamwa

williamwa/gist:8de6b06c48282d6ce57f

Last active August 29, 2015 14:17
Show Gist options
  • Save williamwa/8de6b06c48282d6ce57f to your computer and use it in GitHub Desktop.
Save williamwa/8de6b06c48282d6ce57f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. williamwa renamed this gist Mar 27, 2015. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → gistfile1.js
    View file
    File renamed without changes.
  2. williamwa created this gist Mar 27, 2015.
    133 changes: 133 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,133 @@
    /**
    * Sample React Native App
    * https://github.com/facebook/react-native
    */
    'use strict';

    var React = require('react-native');
    var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    TextInput,
    TouchableOpacity,
    } = React;

    var MyApp = React.createClass({

    todos: [],

    getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => true});
    //for(var i = 0; i<=10; i++){this.todos.push({text: 'I Will do:'+i, done: Math.random() > 0.5})}
    return {
    dataSource: ds.cloneWithRows(this.todos),
    input: ''
    };
    },

    editTodo: function(text){
    this.setState({input:text});
    },

    submitTodo: function(){
    this.todos.unshift({text: this.state.input, done: false});
    this.setState({
    dataSource: this.state.dataSource.cloneWithRows(this.todos),
    input: '',
    });
    },

    toggleTodo: function(i){
    this.todos[i].done = !this.todos[i].done;
    this.setState({
    dataSource: this.state.dataSource.cloneWithRows(this.todos),
    });
    },

    renderTodoItem: function(item, si, i){
    return (
    <View style={styles.row}>
    <View style={styles.rowLeft}>
    <Text>{item.text}</Text>
    </View>
    <View style={styles.rowRight}>
    <TouchableOpacity onPress={this.toggleTodo.bind(this, i)}>
    <Text style={[styles.todoText, item.done?styles.todoTextDone:null]}>√</Text>
    </TouchableOpacity>
    </View>
    </View>
    );
    },

    render: function() {
    return (
    <View style={styles.container}>
    <View style={styles.titleBar}>
    <Text style={styles.title}>Todo List</Text>
    </View>
    <View style={styles.listArea}>
    <ListView
    dataSource={this.state.dataSource}
    renderRow={this.renderTodoItem} />
    </View>
    <TextInput
    style={styles.input}
    value={this.state.input}
    onChangeText={this.editTodo}
    onSubmitEditing={this.submitTodo} />
    </View>
    );
    }
    });

    var styles = StyleSheet.create({
    container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    },
    titleBar:{
    height: 55,
    padding: 20,
    backgroundColor: 'white',
    flex: 0,
    },
    title: {
    fontSize: 22,
    textAlign: 'center',
    },
    listArea: {
    flex: 1,
    },
    row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
    },
    rowLeft:{
    flex: 1
    },
    rowRight:{
    flex: 0,
    width: 20,
    },
    todoText: {
    textAlign: 'center',
    color: '#DDDDDD',
    },
    todoTextDone: {
    color: 'green',
    },
    input:{
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    padding: 5,
    flex: 0,
    },
    });

    AppRegistry.registerComponent('MyApp', () => MyApp);