import React, { Component } from 'react';
import { TouchableOpacity , Button, Text, Image, StyleSheet, ScrollView, View } from 'react-native';
import { connect } from 'react-redux'
import Icon from 'react-native-vector-icons/Ionicons';
import { Log } from 'lib/log.js';
import { Tag } from 'lib/models/tag.js';
import { Note } from 'lib/models/note.js';
import { Setting } from 'lib/models/setting.js';
import { FoldersScreenUtils } from 'lib/components/screens/folders-utils.js'
import { Synchronizer } from 'lib/synchronizer.js';
import { reg } from 'lib/registry.js';
import { _ } from 'lib/locale.js';
import { globalStyle } from 'lib/components/global-style.js';
let styles = {
menu: {
flex: 1,
backgroundColor: globalStyle.backgroundColor,
borderTopWidth: 1,
borderTopColor: globalStyle.dividerColor,
},
name: {
position: 'absolute',
left: 70,
top: 20,
},
item: {
fontSize: 14,
fontWeight: '300',
},
button: {
flex: 1,
flexDirection: 'row',
height: 36,
alignItems: 'center',
paddingLeft: globalStyle.marginLeft,
paddingRight: globalStyle.marginRight,
},
buttonText: {
flex: 1,
color: globalStyle.color,
paddingLeft: 10,
},
syncStatus: {
paddingLeft: globalStyle.marginLeft,
paddingRight: globalStyle.marginRight,
color: globalStyle.colorFaded,
},
tagItemList: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap'
},
};
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;
styles.syncButton = Object.assign({}, styles.button);
styles.syncButtonText = Object.assign({}, styles.buttonText);
styles = StyleSheet.create(styles);
class SideMenuContentComponent extends Component {
constructor() {
super();
this.state = { syncReportText: '',
//width: 0,
};
}
folder_press(folder) {
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Notes',
folderId: folder.id,
});
}
tag_press(tag) {
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Notes',
tagId: tag.id,
});
}
async synchronize_press() {
if (Setting.value('sync.target') == Setting.SYNC_TARGET_ONEDRIVE && !reg.oneDriveApi().auth()) {
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
this.props.dispatch({
type: 'NAV_GO',
routeName: 'OneDriveLogin',
});
return;
}
let sync = null;
try {
sync = await reg.synchronizer(Setting.value('sync.target'))
} catch (error) {
reg.logger().info('Could not acquire synchroniser:');
reg.logger().info(error);
return;
}
if (this.props.syncStarted) {
sync.cancel();
} else {
reg.scheduleSync(0);
}
}
folderItem(folder, selected) {
const iconComp = selected ? : ;
const folderButtonStyle = selected ? styles.folderButtonSelected : styles.folderButton;
return (
{ this.folder_press(folder) }}>
{ iconComp }
{folder.title}
);
}
tagItem(tag, selected) {
const iconComp =
const tagButtonStyle = selected ? styles.tagButtonSelected : styles.tagButton;
return (
{ this.tag_press(tag) }}>
{ iconComp }
{tag.title}
);
}
synchronizeButton(state) {
const title = state == 'sync' ? _('Synchronise') : _('Cancel synchronisation');
const iconComp = state == 'sync' ? : ;
return (
{ this.synchronize_press() }}>
{ iconComp }
{title}
);
}
makeDivider(key) {
return
}
render() {
let items = [];
// 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();
if (this.props.folders.length) {
for (let i = 0; i < this.props.folders.length; i++) {
let folder = this.props.folders[i];
items.push(this.folderItem(folder, this.props.selectedFolderId == folder.id && this.props.notesParentType == 'Folder'));
}
if (items.length) items.push(this.makeDivider('divider_1'));
}
if (this.props.tags.length) {
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'));
}
items.push(
{tagItems}
);
if (tagItems.length) items.push(this.makeDivider('divider_2'));
}
let lines = Synchronizer.reportToLines(this.props.syncReport);
while (lines.length < 10) lines.push(''); // Add blank lines so that height of report text is fixed and doesn't affect scrolling
const syncReportText = lines.join("\n");
items.push(this.synchronizeButton(this.props.syncStarted ? 'cancel' : 'sync'));
items.push({syncReportText});
items.push();
return (
{ items }
);
}
};
const SideMenuContent = connect(
(state) => {
return {
folders: state.folders,
tags: state.tags,
syncStarted: state.syncStarted,
syncReport: state.syncReport,
selectedFolderId: state.selectedFolderId,
selectedTagId: state.selectedTagId,
notesParentType: state.notesParentType,
locale: state.settings.locale,
};
}
)(SideMenuContentComponent)
export { SideMenuContent };