Change list mode

ReactNativeClient/src/components/folder-list.js

@@ -8,8 +8,7 @@ import { _ } from 'src/locale.js';
 
 class FolderListComponent extends ItemListComponent {
 
-	listView_itemClick = (folderId) => {
-
+	listView_itemPress = (folderId) => {
 		Note.previews(folderId).then((notes) => {
 			this.props.dispatch({
 				type: 'NOTES_UPDATE_ALL',
@@ -30,7 +29,10 @@ class FolderListComponent extends ItemListComponent {
 
 const FolderList = connect(
 	(state) => {
-		return { items: state.folders };
+		return {
+			items: state.folders,
+			listMode: state.listMode,
+		};
 	}
 )(FolderListComponent)
 

ReactNativeClient/src/components/item-list.js

@@ -8,33 +8,63 @@ class ItemListComponent extends Component {
 
 	constructor() {
 		super();
-		const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
-		this.state = { dataSource: ds };
-	}
-
-	componentWillMount() {
-		const newDataSource = this.state.dataSource.cloneWithRows(this.props.items);
-		this.state = { dataSource: newDataSource };
+		this.previousListMode = 'view';
+		const ds = new ListView.DataSource({
+			rowHasChanged: (r1, r2) => { return r1 !== r2; }
+		});
+		this.state = {
+			dataSource: ds,
+			items: [],
+			selectedItemIds: [],
+		};
 	}
 
 	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
+		// list is updated (so that the checkbox can be added or removed).
+
+		let items = newProps.items;
+
+		if (newProps.listMode != this.previousListMode) {
+			items = newProps.items.slice();
+			for (let i = 0; i < items.length; i++) {
+				items[i] = Object.assign({}, items[i]);
+			}
+			this.previousListMode = newProps.listMode;
+		}
+
 		// https://stackoverflow.com/questions/38186114/react-native-redux-and-listview
-		this.setState({ dataSource: this.state.dataSource.cloneWithRows(newProps.items) });
+		this.setState({
+			dataSource: this.state.dataSource.cloneWithRows(items),
+		});
 	}
 
-	listView_itemClick = (itemId) => {
+	setListMode = (mode) => {
+		this.props.dispatch({
+			type: 'SET_LIST_MODE',
+			listMode: mode,
+		});
+	}
 
+	listView_itemPress = (itemId) => {}
+
+	listView_itemLongPress = (itemId) => {
+		this.setListMode('edit');
 	}
 
 	render() {
-		let renderRow = (rowData) => {
+		let renderRow = (item) => {
 			let onPress = () => {
-				this.listView_itemClick(rowData.id);
-				//this.props.onItemClick(rowData.id)
+				this.listView_itemPress(item.id);
 			}
+			let onLongPress = () => {
+				this.listView_itemLongPress(item.id);
+			}
+			let editable = this.props.listMode == 'edit' ? ' [X] ' : '';
 			return (
-				<TouchableHighlight onPress={onPress}>
-					<Text>{rowData.title}</Text>
+				<TouchableHighlight onPress={onPress} onLongPress={onLongPress}>
+					<Text>{item.title}<Text>{editable}</Text></Text>
 				</TouchableHighlight>
 			);
 		}

ReactNativeClient/src/components/note-list.js

@@ -7,7 +7,7 @@ import { _ } from 'src/locale.js';
 
 class NoteListComponent extends ItemListComponent {
 
-	listView_itemClick = (noteId) => {
+	listView_itemPress = (noteId) => {
 		this.props.dispatch({
 			type: 'Navigation/NAVIGATE',
 			routeName: 'Note',

ReactNativeClient/src/components/screens/folders.js

@@ -1,24 +1,28 @@
 import React, { Component } from 'react';
-import { View, Button, Picker } from 'react-native';
+import { View, Button, Picker, Text } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'src/log.js'
 import { FolderList } from 'src/components/folder-list.js'
 
 class FoldersScreenComponent extends React.Component {
 	
-	static navigationOptions = {
-		title: 'Folders',
-	};
+	static navigationOptions = (options) => {
+		return { title: 'Folders' };
+		// const nav = options.navigation;
+		// Log.info('ici', nav);
+		// //return { title: "Folders: " + nav.state.params.listMode };
+		// return { title: <Text>Folders: {nav.state.params.listMode}</Text> };
+	}
 
 	createFolderButton_press = () => {
 		this.props.dispatch({
 			type: 'Navigation/NAVIGATE',
 			routeName: 'Folder',
+			folderId: null,
 		});
 	}
 
 	render() {
-		const { navigate } = this.props.navigation;
 		return (
 			<View style={{flex: 1}}>
 				<FolderList style={{flex: 1}}/>
@@ -31,7 +35,7 @@ class FoldersScreenComponent extends React.Component {
 const FoldersScreen = connect(
 	(state) => {
 		return {
-			folders: state.folders
+			folders: state.folders,
 		};
 	}
 )(FoldersScreenComponent)

ReactNativeClient/src/root.js

@@ -20,16 +20,11 @@ import { LoginScreen } from 'src/components/screens/login.js'
 import { Setting } from 'src/models/setting.js'
 
 let defaultState = {
-	defaultText: 'bla',
 	notes: [],
-	folders: [
-		// { id: 'abcdabcdabcdabcdabcdabcdabcdab01', title: "un" },
-		// { id: 'abcdabcdabcdabcdabcdabcdabcdab02', title: "deux" },
-		// { id: 'abcdabcdabcdabcdabcdabcdabcdab03', title: "trois" },
-		// { id: 'abcdabcdabcdabcdabcdabcdabcdab04', title: "quatre" },
-	],
+	folders: [],
 	selectedNoteId: null,
 	selectedFolderId: null,
+	listMode: 'view',
 };
 
 const reducer = (state = defaultState, action) => {
@@ -48,17 +43,20 @@ const reducer = (state = defaultState, action) => {
 				return state
 			}
 
+			action.params = { listMode: 'view' };
+
 			const nextStateNav = AppNavigator.router.getStateForAction(action, state.nav);			
+			//Log.info('nextStateNavnextStateNavnextStateNavnextStateNavnextStateNav', nextStateNav);
 			newState = Object.assign({}, state);
 			if (nextStateNav) {
 				newState.nav = nextStateNav;
 			}
 
-			if (action.noteId) {
+			if ('noteId' in action) {
 				newState.selectedNoteId = action.noteId;
 			}
 
-			if (action.folderId) {
+			if ('folderId' in action) {
 				newState.selectedFolderId = action.folderId;
 			}
 
@@ -117,6 +115,14 @@ const reducer = (state = defaultState, action) => {
 			newState.folders = newFolders;
 			break;
 
+		case 'SET_LIST_MODE':
+
+			newState = Object.assign({}, state);
+			newState.listMode = action.listMode;
+			newState.nav = Object.assign({}, state.nav);
+			//newState.nav
+			break;
+
 	}
 
 	return newState;
@@ -156,16 +162,6 @@ class AppComponent extends React.Component {
 			}).catch((error) => {
 				Log.warn('Cannot load folders', error);
 			});
-		// }).then(() => {
-		// 	Log.info('Loading notes...');
-		// 	Note.previews().then((notes) => {
-		// 		this.props.dispatch({
-		// 			type: 'NOTES_UPDATE_ALL',
-		// 			notes: notes,
-		// 		});
-		// 	}).catch((error) => {
-		// 		Log.warn('Cannot load notes', error);
-		// 	});
 		}).catch((error) => {
 			Log.error('Cannot initialize database:', error);
 		});
@@ -181,7 +177,11 @@ class AppComponent extends React.Component {
 	}
 }
 
-defaultState.nav = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Folders'));
+defaultState.nav = AppNavigator.router.getStateForAction({
+	type: 'Navigation/NAVIGATE',
+	routeName: 'Folders',
+	params: {listMode: 'view'}
+});
 
 const mapStateToProps = (state) => {
 	return {
@@ -193,6 +193,8 @@ const App = connect(mapStateToProps)(AppComponent);
 
 class Root extends React.Component {
 	render() {
+		Log.info('TTTTTTTTTTTTTTTTTTT', defaultState.nav);
+
 		return (
 			<Provider store={store}>
 				<App />