index.android.js

/**
 * WIP Simple Todo app
 * https://github.com/facebook/react-native
 */
'use strict';

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

// Had to fabricate this, there's no checkbox.
var FakeCheck = React.createClass({
    propTypes: {
        checked: React.PropTypes.bool.isRequired,  
    },
    getCheckedChar() {
        if (this.props.checked) {
            return '✓';
        } else {
            return ' ';
        }
    },
    render() {
        return (
            <View style={styles.checkbox}>
                <Text style={styles.checktext}>{this.getCheckedChar()}</Text>
            </View>
        )
    }
})

var todo = React.createClass({
    getInitialState: function() {
        return {
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => row1 !== row2,
            }),
            loaded: false,
        };
    },
    tasks: [],
    taskId: 0,
    componentDidMount() {
        this.addTask("Monster Madness 9");
        this.addTask("Eat Cake");
    },
    // this was not easy to understand. there's a need to duplicate the data.
    genTasksDataForListView() {
        return this.tasks.map(function(t) { return {
            id: t.id,
            done: t.done,
            description: t.description
        }});
    },
    updateTasksListView() {
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(this.genTasksDataForListView())
        })
    },
    addTask(description) {
        this.tasks.push({
            id: this.taskId++,
            done: false,
            description,
        });
        this.updateTasksListView();
    },
    handleTaskClick(id, e) {
        for (var i = 0; i < this.tasks.length; i++) {
            var task = this.tasks[i];
            if (task.id == id) {
                task.done = !task.done;
                break;
            }
        }
        this.updateTasksListView();
    },
    renderTask(task) {
         return (
             <TouchableOpacity onPress={this.handleTaskClick.bind(null, task.id)}>
                 <View style={styles.container}>
                   <FakeCheck checked={task.done}/>
                   <View style={styles.rightContainer}>
                     <Text style={styles.title}>{task.description}</Text>
                   </View>
                 </View>
             </TouchableOpacity>
         );
    },
    render: function() {
        return (
            <ListView
                dataSource={this.state.dataSource}
                renderRow={this.renderTask}
                style={styles.listView}
            />
        );
    }
});

var styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },
    rightContainer: {
      flex: 1,
    },
    checkbox: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        width: 15,
        height: 15,
        borderWidth: 1,
        borderColor: '#eee',
    },
    checktext: {
        fontSize: 16,
    },
    title: {
      fontSize: 20,
      marginBottom: 8,
      textAlign: 'center',
    },
    year: {
      textAlign: 'center',
    },
    thumbnail: {
      width: 53,
      height: 81,
    },
    listView: {
      paddingTop: 20,
      backgroundColor: '#F5FCFF',
    },
});
 
AppRegistry.registerComponent('todo', () => todo);