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 };