diff --git a/examples/ReactExample/components/styles.js b/examples/ReactExample/components/styles.js index 798b9eef..47bab8a4 100644 --- a/examples/ReactExample/components/styles.js +++ b/examples/ReactExample/components/styles.js @@ -10,7 +10,6 @@ module.exports = React.StyleSheet.create({ backgroundColor: '#ffffff', }, listItem: { - paddingRight: 12, borderColor: "#c8c7cc", borderBottomWidth: 0.5, alignItems: 'stretch', @@ -45,6 +44,12 @@ module.exports = React.StyleSheet.create({ flex: 1, lineHeight: 30, }, + listItemDelete: { + paddingLeft: 12, + paddingRight: 12, + flexDirection: 'column', + justifyContent: 'center', + }, instructions: { textAlign: 'center', color: '#333333', diff --git a/examples/ReactExample/components/todo-item-delete.js b/examples/ReactExample/components/todo-item-delete.js new file mode 100644 index 00000000..4a260d4b --- /dev/null +++ b/examples/ReactExample/components/todo-item-delete.js @@ -0,0 +1,20 @@ +'use strict'; + +const React = require('react-native'); +const styles = require('./styles'); + +const { Text, TouchableWithoutFeedback, View } = React; + +class TodoItemDelete extends React.Component { + render() { + return ( + + + 𐄂 + + + ); + } +} + +module.exports = TodoItemDelete; diff --git a/examples/ReactExample/components/todo-item.js b/examples/ReactExample/components/todo-item.js index 710fd537..988b7240 100644 --- a/examples/ReactExample/components/todo-item.js +++ b/examples/ReactExample/components/todo-item.js @@ -2,6 +2,7 @@ const React = require('react-native'); const TodoItemCheckbox = require('./todo-item-checkbox'); +const TodoItemDelete = require('./todo-item-delete'); const realm = require('./realm'); const styles = require('./styles'); @@ -26,6 +27,7 @@ class TodoItem extends React.Component { render() { let item = this.props.item; + let deleteButton; let contents; if (this.props.editing) { @@ -48,12 +50,17 @@ class TodoItem extends React.Component { {item.text} ); + + deleteButton = ( + + ); } return ( {contents} + {deleteButton} ); } diff --git a/examples/ReactExample/components/todo-list.js b/examples/ReactExample/components/todo-list.js index c292f2d9..af06dacc 100644 --- a/examples/ReactExample/components/todo-list.js +++ b/examples/ReactExample/components/todo-list.js @@ -39,6 +39,7 @@ class TodoList extends React.Component { item={item} editing={this.state.editingRow == rowIndex} onPress={() => this._onPressRow(rowIndex)} + onPressDelete={() => this._onPressDeleteRow(rowIndex)} onEndEditing={() => this._onEndEditingRow(rowIndex)} /> ); } @@ -53,6 +54,14 @@ class TodoList extends React.Component { this.setState({editingRow: rowIndex}); } + _onPressDeleteRow(rowIndex) { + let items = this.props.list.items; + + realm.write(() => items.splice(rowIndex, 1)); + + this.forceUpdate(); + } + _onEndEditingRow(rowIndex) { let items = this.props.list.items;