diff --git a/examples/ReactExample/components/realm.js b/examples/ReactExample/components/realm.js index 7a62e345..d1b172b7 100644 --- a/examples/ReactExample/components/realm.js +++ b/examples/ReactExample/components/realm.js @@ -7,7 +7,8 @@ module.exports = new Realm({ { name: 'Todo', properties: [ - {name: 'text', type: Realm.Types.STRING}, + {name: 'done', type: Realm.Types.BOOL, default: false}, + {name: 'text', type: Realm.Types.STRING, default: ''}, ] }, { diff --git a/examples/ReactExample/components/styles.js b/examples/ReactExample/components/styles.js index d02ea704..798b9eef 100644 --- a/examples/ReactExample/components/styles.js +++ b/examples/ReactExample/components/styles.js @@ -10,21 +10,40 @@ module.exports = React.StyleSheet.create({ backgroundColor: '#ffffff', }, listItem: { - padding: 12, + paddingRight: 12, borderColor: "#c8c7cc", borderBottomWidth: 0.5, - alignItems: 'center', + alignItems: 'stretch', alignSelf: 'stretch', flexDirection: 'row', flex: 1, height: 44, }, + listItemCheckboxContainer: { + paddingLeft: 12, + paddingRight: 4, + flexDirection: 'column', + justifyContent: 'center', + }, + listItemCheckbox: { + borderColor: "#000", + borderWidth: 0.5, + marginRight: 8, + width: 16, + height: 16, + }, + listItemInput: { + fontFamily: 'System', + fontSize: 15, + flexDirection: 'column', + flex: 1, + }, listItemText: { fontFamily: 'System', fontSize: 15, flexDirection: 'column', flex: 1, - lineHeight: 16, + lineHeight: 30, }, instructions: { textAlign: 'center', diff --git a/examples/ReactExample/components/todo-item-checkbox.js b/examples/ReactExample/components/todo-item-checkbox.js new file mode 100644 index 00000000..6cfbd3cf --- /dev/null +++ b/examples/ReactExample/components/todo-item-checkbox.js @@ -0,0 +1,22 @@ +'use strict'; + +const React = require('react-native'); +const styles = require('./styles'); + +const { Text, TouchableWithoutFeedback, View } = React; + +class TodoItemCheckbox extends React.Component { + render() { + return ( + + + + {this.props.checked ? '✓' : ''} + + + + ); + } +} + +module.exports = TodoItemCheckbox; diff --git a/examples/ReactExample/components/todo-item.js b/examples/ReactExample/components/todo-item.js index 1ca68343..710fd537 100644 --- a/examples/ReactExample/components/todo-item.js +++ b/examples/ReactExample/components/todo-item.js @@ -1,6 +1,7 @@ 'use strict'; const React = require('react-native'); +const TodoItemCheckbox = require('./todo-item-checkbox'); const realm = require('./realm'); const styles = require('./styles'); @@ -11,6 +12,7 @@ class TodoItem extends React.Component { super(props); this._onChangeText = this._onChangeText.bind(this); + this._onPressCheckbox = this._onPressCheckbox.bind(this); } componentDidMount() { @@ -23,15 +25,16 @@ class TodoItem extends React.Component { } render() { + let item = this.props.item; let contents; if (this.props.editing) { contents = ( @@ -42,13 +45,14 @@ class TodoItem extends React.Component { style={styles.listItemText} onPress={this.props.onPress} suppressHighlighting={true}> - {this.props.item.text} + {item.text} ); } return ( + {contents} ); @@ -62,6 +66,15 @@ class TodoItem extends React.Component { this.forceUpdate(); } + _onPressCheckbox() { + let item = this.props.item; + realm.write(() => { + item.done = !item.done; + }); + + this.forceUpdate(); + } + _focusInputIfNecessary() { if (!this.props.editing) { return;