2017-07-22 17:55:09 +02:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { TouchableOpacity , Button, Text, Image, StyleSheet, ScrollView, View } from 'react-native';
|
2017-05-24 21:27:13 +02:00
|
|
|
import { connect } from 'react-redux'
|
2017-07-22 17:55:09 +02:00
|
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
2017-06-24 20:06:28 +02:00
|
|
|
import { Log } from 'lib/log.js';
|
2017-07-25 20:36:52 +02:00
|
|
|
import { Tag } from 'lib/models/tag.js';
|
2017-06-24 20:06:28 +02:00
|
|
|
import { Note } from 'lib/models/note.js';
|
2017-07-24 23:52:30 +02:00
|
|
|
import { Setting } from 'lib/models/setting.js';
|
2017-07-15 18:14:15 +02:00
|
|
|
import { FoldersScreenUtils } from 'lib/components/screens/folders-utils.js'
|
2017-07-18 00:43:29 +02:00
|
|
|
import { Synchronizer } from 'lib/synchronizer.js';
|
2017-07-06 21:48:17 +02:00
|
|
|
import { reg } from 'lib/registry.js';
|
|
|
|
import { _ } from 'lib/locale.js';
|
2017-07-21 23:40:02 +02:00
|
|
|
import { globalStyle } from 'lib/components/global-style.js';
|
2017-05-24 21:27:13 +02:00
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
let styles = {
|
2017-05-24 21:27:13 +02:00
|
|
|
menu: {
|
|
|
|
flex: 1,
|
2017-07-21 23:40:02 +02:00
|
|
|
backgroundColor: globalStyle.backgroundColor,
|
2017-07-22 17:55:09 +02:00
|
|
|
},
|
2017-05-24 21:27:13 +02:00
|
|
|
name: {
|
|
|
|
position: 'absolute',
|
|
|
|
left: 70,
|
|
|
|
top: 20,
|
|
|
|
},
|
|
|
|
item: {
|
|
|
|
fontSize: 14,
|
|
|
|
fontWeight: '300',
|
|
|
|
},
|
2017-07-22 17:55:09 +02:00
|
|
|
button: {
|
2017-07-15 20:56:24 +02:00
|
|
|
flex: 1,
|
2017-07-22 17:55:09 +02:00
|
|
|
flexDirection: 'row',
|
2017-07-21 23:40:02 +02:00
|
|
|
height: 36,
|
2017-07-22 17:55:09 +02:00
|
|
|
alignItems: 'center',
|
|
|
|
paddingLeft: globalStyle.marginLeft,
|
|
|
|
paddingRight: globalStyle.marginRight,
|
2017-07-15 20:56:24 +02:00
|
|
|
},
|
2017-07-22 17:55:09 +02:00
|
|
|
buttonText: {
|
2017-07-21 23:40:02 +02:00
|
|
|
flex: 1,
|
2017-07-22 17:55:09 +02:00
|
|
|
color: globalStyle.color,
|
|
|
|
paddingLeft: 10,
|
2017-07-15 20:56:24 +02:00
|
|
|
},
|
2017-07-22 17:55:09 +02:00
|
|
|
syncStatus: {
|
|
|
|
paddingLeft: globalStyle.marginLeft,
|
|
|
|
paddingRight: globalStyle.marginRight,
|
|
|
|
color: globalStyle.colorFaded,
|
|
|
|
},
|
2017-07-25 20:36:52 +02:00
|
|
|
tagItemList: {
|
|
|
|
flex: 1,
|
|
|
|
flexDirection: 'row',
|
|
|
|
flexWrap: 'wrap'
|
|
|
|
},
|
2017-07-22 17:55:09 +02:00
|
|
|
};
|
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
styles.folderButton = Object.assign({}, styles.button);
|
|
|
|
styles.folderButtonText = Object.assign({}, styles.buttonText);
|
|
|
|
styles.folderButtonSelected = Object.assign({}, styles.folderButton);
|
|
|
|
styles.folderButtonSelected.backgroundColor = globalStyle.selectedColor;
|
|
|
|
styles.folderIcon = Object.assign({}, globalStyle.icon);
|
|
|
|
styles.folderIcon.color = '#0072d5';
|
|
|
|
|
|
|
|
styles.tagButton = Object.assign({}, styles.button);
|
|
|
|
styles.tagButtonSelected = Object.assign({}, styles.tagButton);
|
|
|
|
styles.tagButtonSelected.backgroundColor = globalStyle.selectedColor;
|
|
|
|
styles.tagButtonSelected.borderRadius = 1000;
|
|
|
|
styles.tagButtonText = Object.assign({}, styles.buttonText);
|
|
|
|
styles.tagButtonText.flex = 0;
|
2017-07-22 17:55:09 +02:00
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
styles.syncButton = Object.assign({}, styles.button);
|
|
|
|
styles.syncButtonText = Object.assign({}, styles.buttonText);
|
|
|
|
|
|
|
|
styles = StyleSheet.create(styles);
|
2017-05-24 21:27:13 +02:00
|
|
|
|
|
|
|
class SideMenuContentComponent extends Component {
|
|
|
|
|
2017-07-06 21:48:17 +02:00
|
|
|
constructor() {
|
|
|
|
super();
|
2017-07-25 20:36:52 +02:00
|
|
|
this.state = { syncReportText: '',
|
|
|
|
//width: 0,
|
|
|
|
};
|
2017-07-06 21:48:17 +02:00
|
|
|
}
|
|
|
|
|
2017-05-24 21:27:13 +02:00
|
|
|
folder_press(folder) {
|
2017-07-08 00:25:03 +02:00
|
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
2017-05-24 22:11:37 +02:00
|
|
|
|
2017-07-25 20:09:01 +02:00
|
|
|
this.props.dispatch({
|
2017-07-25 20:41:53 +02:00
|
|
|
type: 'NAV_GO',
|
2017-07-25 20:09:01 +02:00
|
|
|
routeName: 'Notes',
|
|
|
|
folderId: folder.id,
|
|
|
|
});
|
2017-05-24 21:27:13 +02:00
|
|
|
}
|
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
tag_press(tag) {
|
|
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
|
|
|
|
|
|
this.props.dispatch({
|
|
|
|
type: 'NAV_GO',
|
|
|
|
routeName: 'Notes',
|
|
|
|
tagId: tag.id,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2017-07-06 21:48:17 +02:00
|
|
|
async synchronize_press() {
|
2017-07-24 23:52:30 +02:00
|
|
|
if (Setting.value('sync.target') == Setting.SYNC_TARGET_ONEDRIVE && !reg.oneDriveApi().auth()) {
|
|
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
|
|
|
|
|
|
this.props.dispatch({
|
2017-07-25 20:41:53 +02:00
|
|
|
type: 'NAV_GO',
|
2017-07-24 23:52:30 +02:00
|
|
|
routeName: 'OneDriveLogin',
|
|
|
|
});
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-07-24 20:01:40 +02:00
|
|
|
const sync = await reg.synchronizer(Setting.value('sync.target'))
|
2017-07-18 00:43:29 +02:00
|
|
|
|
|
|
|
if (this.props.syncStarted) {
|
|
|
|
sync.cancel();
|
2017-07-06 21:48:17 +02:00
|
|
|
} else {
|
2017-07-24 23:52:30 +02:00
|
|
|
reg.scheduleSync(0);
|
2017-07-06 21:48:17 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-07-22 17:55:09 +02:00
|
|
|
folderItem(folder, selected) {
|
2017-07-22 18:36:55 +02:00
|
|
|
const iconComp = selected ? <Icon name='md-folder-open' style={styles.folderIcon} /> : <Icon name='md-folder' style={styles.folderIcon} />;
|
2017-07-22 17:55:09 +02:00
|
|
|
const folderButtonStyle = selected ? styles.folderButtonSelected : styles.folderButton;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<TouchableOpacity key={folder.id} onPress={() => { this.folder_press(folder) }}>
|
|
|
|
<View style={folderButtonStyle}>
|
|
|
|
{ iconComp }
|
|
|
|
<Text numberOfLines={1} style={styles.folderButtonText}>{folder.title}</Text>
|
|
|
|
</View>
|
|
|
|
</TouchableOpacity>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
tagItem(tag, selected) {
|
|
|
|
const iconComp = <Icon name='md-pricetag' style={styles.folderIcon} />
|
|
|
|
const tagButtonStyle = selected ? styles.tagButtonSelected : styles.tagButton;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<TouchableOpacity key={tag.id} onPress={() => { this.tag_press(tag) }}>
|
|
|
|
<View style={tagButtonStyle}>
|
|
|
|
{ iconComp }
|
|
|
|
<Text numberOfLines={1} style={styles.tagButtonText}>{tag.title}</Text>
|
|
|
|
</View>
|
|
|
|
</TouchableOpacity>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-07-22 17:55:09 +02:00
|
|
|
synchronizeButton(state) {
|
|
|
|
const title = state == 'sync' ? _('Synchronize') : _('Cancel synchronization');
|
2017-07-22 18:36:55 +02:00
|
|
|
const iconComp = state == 'sync' ? <Icon name='md-sync' style={globalStyle.icon} /> : <Icon name='md-close' style={globalStyle.icon} />;
|
2017-07-22 17:55:09 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<TouchableOpacity key={'synchronize_button'} onPress={() => { this.synchronize_press() }}>
|
|
|
|
<View style={styles.syncButton}>
|
|
|
|
{ iconComp }
|
|
|
|
<Text style={styles.syncButtonText}>{title}</Text>
|
|
|
|
</View>
|
|
|
|
</TouchableOpacity>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
makeDivider(key) {
|
|
|
|
return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>
|
|
|
|
}
|
|
|
|
|
|
|
|
// onLayout(event) {
|
|
|
|
// const newWidth = event.nativeEvent.layout.width;
|
|
|
|
// if (this.state.width == newWidth) return;
|
|
|
|
// this.setState({ width: newWidth });
|
|
|
|
// }
|
|
|
|
|
2017-05-24 21:27:13 +02:00
|
|
|
render() {
|
2017-07-06 21:48:17 +02:00
|
|
|
let items = [];
|
2017-07-22 17:55:09 +02:00
|
|
|
|
|
|
|
// HACK: inner height of ScrollView doesn't appear to be calculated correctly when
|
|
|
|
// using padding. So instead creating blank elements for padding bottom and top.
|
|
|
|
items.push(<View style={{ height: globalStyle.marginTop }} key='bottom_top_hack'/>);
|
|
|
|
|
2017-05-24 21:27:13 +02:00
|
|
|
for (let i = 0; i < this.props.folders.length; i++) {
|
2017-07-22 17:55:09 +02:00
|
|
|
let folder = this.props.folders[i];
|
2017-07-25 20:36:52 +02:00
|
|
|
items.push(this.folderItem(folder, this.props.selectedFolderId == folder.id && this.props.notesParentType == 'Folder'));
|
|
|
|
}
|
|
|
|
|
|
|
|
if (items.length) items.push(this.makeDivider('divider_1'));
|
|
|
|
|
|
|
|
let tagItems = [];
|
|
|
|
for (let i = 0; i < this.props.tags.length; i++) {
|
|
|
|
const tag = this.props.tags[i];
|
|
|
|
tagItems.push(this.tagItem(tag, this.props.selectedTagId == tag.id && this.props.notesParentType == 'Tag'));
|
2017-05-24 21:27:13 +02:00
|
|
|
}
|
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
items.push(
|
|
|
|
<View style={styles.tagItemList} key="tag_items">
|
|
|
|
{tagItems}
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
|
|
|
|
if (items.length) items.push(this.makeDivider('divider_2'));
|
2017-07-06 21:48:17 +02:00
|
|
|
|
2017-07-18 00:43:29 +02:00
|
|
|
let lines = Synchronizer.reportToLines(this.props.syncReport);
|
|
|
|
const syncReportText = lines.join("\n");
|
|
|
|
|
2017-07-22 17:55:09 +02:00
|
|
|
items.push(this.synchronizeButton(this.props.syncStarted ? 'cancel' : 'sync'));
|
|
|
|
|
|
|
|
items.push(<Text key='sync_report' style={styles.syncStatus}>{syncReportText}</Text>);
|
2017-07-06 21:48:17 +02:00
|
|
|
|
2017-07-22 17:55:09 +02:00
|
|
|
items.push(<View style={{ height: globalStyle.marginBottom }} key='bottom_padding_hack'/>);
|
2017-07-06 21:48:17 +02:00
|
|
|
|
2017-05-24 21:27:13 +02:00
|
|
|
return (
|
2017-07-25 22:24:30 +02:00
|
|
|
<View style={{flex:1, borderRightWidth: 1, borderRightColor: globalStyle.dividerColor }}>
|
2017-07-22 17:55:09 +02:00
|
|
|
<View style={{flexDirection:'row'}}>
|
|
|
|
<Image style={{flex:1, height: 150}} source={require('../images/SideMenuHeader.png')} />
|
|
|
|
</View>
|
|
|
|
<ScrollView scrollsToTop={false} style={styles.menu}>
|
|
|
|
{ items }
|
|
|
|
</ScrollView>
|
|
|
|
</View>
|
2017-05-24 21:27:13 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
const SideMenuContent = connect(
|
|
|
|
(state) => {
|
|
|
|
return {
|
|
|
|
folders: state.folders,
|
2017-07-25 20:36:52 +02:00
|
|
|
tags: state.tags,
|
2017-07-18 00:43:29 +02:00
|
|
|
syncStarted: state.syncStarted,
|
|
|
|
syncReport: state.syncReport,
|
2017-07-22 17:55:09 +02:00
|
|
|
selectedFolderId: state.selectedFolderId,
|
2017-07-25 20:36:52 +02:00
|
|
|
selectedTagId: state.selectedTagId,
|
|
|
|
notesParentType: state.notesParentType,
|
2017-05-24 21:27:13 +02:00
|
|
|
};
|
|
|
|
}
|
|
|
|
)(SideMenuContentComponent)
|
|
|
|
|
|
|
|
export { SideMenuContent };
|