diff --git a/ReactNativeClient/package.json b/ReactNativeClient/package.json index 67eef6ea14..2b3387c00d 100644 --- a/ReactNativeClient/package.json +++ b/ReactNativeClient/package.json @@ -9,6 +9,8 @@ "dependencies": { "react": "16.0.0-alpha.6", "react-native": "0.44.0", + "react-native-checkbox": "^1.1.0", + "react-native-vector-icons": "^2.0.3", "react-navigation": "^1.0.0-beta.9", "uuid": "^3.0.1" }, diff --git a/ReactNativeClient/src/components/checkbox.js b/ReactNativeClient/src/components/checkbox.js new file mode 100644 index 0000000000..cec9b1677b --- /dev/null +++ b/ReactNativeClient/src/components/checkbox.js @@ -0,0 +1,36 @@ +// https://hellokoding.com/todo-app-with-react-native/ + +import React, { Component } from 'react'; +import Icon from 'react-native-vector-icons/MaterialIcons'; + +class Checkbox extends Component { + constructor(props) { + super(props); + this.state = { + data: this.props.data + }; + } + + render() { + let iconName = 'check-box'; //this.state.data.completed ? 'check-box' : 'check-box-outline-blank'; + let color = this.props.color || '#000'; + + return ( + + + ); + } +} + +export { Checkbox } \ No newline at end of file diff --git a/ReactNativeClient/src/components/item-list.js b/ReactNativeClient/src/components/item-list.js index d121c7f00d..afd8b586ed 100644 --- a/ReactNativeClient/src/components/item-list.js +++ b/ReactNativeClient/src/components/item-list.js @@ -1,7 +1,8 @@ import React, { Component } from 'react'; import { connect } from 'react-redux' -import { ListView, Text, TouchableHighlight } from 'react-native'; +import { ListView, Text, TouchableHighlight, Switch, View } from 'react-native'; import { Log } from 'src/log.js'; +import Checkbox from 'react-native-checkbox'; import { _ } from 'src/locale.js'; class ItemListComponent extends Component { @@ -19,6 +20,11 @@ class ItemListComponent extends Component { }; } + componentWillMount() { + const newDataSource = this.state.dataSource.cloneWithRows(this.props.items); + this.state = { dataSource: newDataSource }; + } + componentWillReceiveProps(newProps) { // When the items have changed, we just pass this to the data source. However, // when the list mode change, we need to clone the items to make sure the whole @@ -61,10 +67,13 @@ class ItemListComponent extends Component { let onLongPress = () => { this.listView_itemLongPress(item.id); } - let editable = this.props.listMode == 'edit' ? ' [X] ' : ''; + let isEditable = this.props.listMode == 'edit'; return ( - {item.title}{editable} + + { isEditable && } + { !isEditable && {item.title} } + ); }