mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
366 lines
11 KiB
JavaScript
366 lines
11 KiB
JavaScript
const React = require('react'); const Component = React.Component;
|
|
const { TouchableOpacity , Button, Text, Image, StyleSheet, ScrollView, View, Alert } = require('react-native');
|
|
const { connect } = require('react-redux');
|
|
const Icon = require('react-native-vector-icons/Ionicons').default;
|
|
const Tag = require('lib/models/Tag.js');
|
|
const Note = require('lib/models/Note.js');
|
|
const Folder = require('lib/models/Folder.js');
|
|
const Setting = require('lib/models/Setting.js');
|
|
const { FoldersScreenUtils } = require('lib/folders-screen-utils.js');
|
|
const { Synchronizer } = require('lib/synchronizer.js');
|
|
const NavService = require('lib/services/NavService.js');
|
|
const { reg } = require('lib/registry.js');
|
|
const { _ } = require('lib/locale.js');
|
|
const { globalStyle, themeStyle } = require('lib/components/global-style.js');
|
|
const shared = require('lib/components/shared/side-menu-shared.js');
|
|
const { ActionButton } = require('lib/components/action-button.js');
|
|
|
|
class SideMenuContentComponent extends Component {
|
|
|
|
constructor() {
|
|
super();
|
|
this.state = {
|
|
syncReportText: '',
|
|
};
|
|
this.styles_ = {};
|
|
|
|
this.tagButton_press = this.tagButton_press.bind(this);
|
|
this.newFolderButton_press = this.newFolderButton_press.bind(this);
|
|
this.synchronize_press = this.synchronize_press.bind(this);
|
|
this.configButton_press = this.configButton_press.bind(this);
|
|
this.renderFolderItem = this.renderFolderItem.bind(this);
|
|
}
|
|
|
|
styles() {
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
if (this.styles_[this.props.theme]) return this.styles_[this.props.theme];
|
|
this.styles_ = {};
|
|
|
|
let styles = {
|
|
menu: {
|
|
flex: 1,
|
|
backgroundColor: theme.backgroundColor
|
|
},
|
|
button: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
height: 36,
|
|
alignItems: 'center',
|
|
paddingLeft: theme.marginLeft,
|
|
paddingRight: theme.marginRight,
|
|
},
|
|
buttonText: {
|
|
flex: 1,
|
|
color: theme.color,
|
|
paddingLeft: 10,
|
|
fontSize: theme.fontSize,
|
|
},
|
|
syncStatus: {
|
|
paddingLeft: theme.marginLeft,
|
|
paddingRight: theme.marginRight,
|
|
color: theme.colorFaded,
|
|
fontSize: theme.fontSizeSmaller,
|
|
flex: 0,
|
|
},
|
|
sidebarIcon: {
|
|
fontSize: 22,
|
|
color: theme.color,
|
|
},
|
|
};
|
|
|
|
styles.folderButton = Object.assign({}, styles.button);
|
|
styles.folderButton.paddingLeft = 0;
|
|
styles.folderButtonText = Object.assign({}, styles.buttonText);
|
|
styles.folderButtonSelected = Object.assign({}, styles.folderButton);
|
|
styles.folderButtonSelected.backgroundColor = theme.selectedColor;
|
|
styles.folderIcon = Object.assign({}, theme.icon);
|
|
styles.folderIcon.color = theme.colorFaded;//'#0072d5';
|
|
styles.folderIcon.paddingTop = 3;
|
|
|
|
styles.sideButton = Object.assign({}, styles.button, { flex: 0 });
|
|
styles.sideButtonText = Object.assign({}, styles.buttonText);
|
|
|
|
this.styles_[this.props.theme] = StyleSheet.create(styles);
|
|
return this.styles_[this.props.theme];
|
|
}
|
|
|
|
folder_press(folder) {
|
|
if (folder === 'all') {
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
|
|
this.props.dispatch({
|
|
type: 'NAV_GO',
|
|
routeName: 'Notes',
|
|
smartFilterId: 'c3176726992c11e9ac940492261af972',
|
|
});
|
|
} else {
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
|
|
this.props.dispatch({
|
|
type: 'NAV_GO',
|
|
routeName: 'Notes',
|
|
folderId: folder.id,
|
|
});
|
|
}
|
|
}
|
|
|
|
async folder_longPress(folder) {
|
|
if (folder === 'all') return;
|
|
|
|
const buttons = [];
|
|
|
|
Alert.alert(
|
|
'',
|
|
_('Notebook: %s', folder.title), [
|
|
{
|
|
text: _('Rename'),
|
|
onPress: () => {
|
|
if (folder.encryption_applied) {
|
|
alert(_('Encrypted notebooks cannot be renamed'));
|
|
return;
|
|
}
|
|
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
|
|
this.props.dispatch({
|
|
type: 'NAV_GO',
|
|
routeName: 'Folder',
|
|
folderId: folder.id,
|
|
});
|
|
}
|
|
},
|
|
{
|
|
text: _('Delete'),
|
|
onPress: () => {
|
|
Alert.alert('', _('Delete notebook "%s"?\n\nAll notes and sub-notebooks within this notebook will also be deleted.', folder.title), [
|
|
{
|
|
text: _('OK'),
|
|
onPress: () => {
|
|
Folder.delete(folder.id);
|
|
},
|
|
},
|
|
{
|
|
text: _('Cancel'),
|
|
onPress: () => {},
|
|
style: 'cancel',
|
|
},
|
|
]);
|
|
},
|
|
style: 'destructive',
|
|
},
|
|
{
|
|
text: _('Cancel'),
|
|
onPress: () => {},
|
|
style: 'cancel',
|
|
}
|
|
], {
|
|
cancelable: false
|
|
}
|
|
);
|
|
}
|
|
|
|
folder_togglePress(folder) {
|
|
this.props.dispatch({
|
|
type: 'FOLDER_TOGGLE',
|
|
id: folder.id,
|
|
});
|
|
}
|
|
|
|
tagButton_press() {
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
|
|
this.props.dispatch({
|
|
type: 'NAV_GO',
|
|
routeName: 'Tags',
|
|
});
|
|
}
|
|
|
|
configButton_press() {
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
NavService.go('Config');
|
|
}
|
|
|
|
newFolderButton_press() {
|
|
this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
|
|
this.props.dispatch({
|
|
type: 'NAV_GO',
|
|
routeName: 'Folder',
|
|
folderId: null,
|
|
});
|
|
}
|
|
|
|
async synchronize_press() {
|
|
const actionDone = await shared.synchronize_press(this);
|
|
if (actionDone === 'auth') this.props.dispatch({ type: 'SIDE_MENU_CLOSE' });
|
|
}
|
|
|
|
renderFolderItem(folder, selected, hasChildren, depth) {
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
const folderButtonStyle = {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
height: 36,
|
|
alignItems: 'center',
|
|
paddingLeft: theme.marginLeft,
|
|
paddingRight: theme.marginRight,
|
|
};
|
|
if (selected) folderButtonStyle.backgroundColor = theme.selectedColor;
|
|
folderButtonStyle.paddingLeft = depth * 10;
|
|
|
|
const iconWrapperStyle = { paddingLeft: 10, paddingRight: 10 };
|
|
if (selected) iconWrapperStyle.backgroundColor = theme.selectedColor;
|
|
|
|
let iconWrapper = null;
|
|
|
|
if (folder !== 'all') {
|
|
const iconName = this.props.collapsedFolderIds.indexOf(folder.id) >= 0 ? 'md-arrow-dropdown' : 'md-arrow-dropup';
|
|
const iconComp = <Icon name={iconName} style={this.styles().folderIcon} />
|
|
|
|
iconWrapper = !hasChildren ? null : (
|
|
<TouchableOpacity style={iconWrapperStyle} folderid={folder.id} onPress={() => { if (hasChildren) this.folder_togglePress(folder) }}>
|
|
{ iconComp }
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View key={folder === 'all' ? folder : folder.id} style={{ flex: 1, flexDirection: 'row' }}>
|
|
<TouchableOpacity style={{ flex: 1 }} onPress={() => { this.folder_press(folder) }} onLongPress={() => { this.folder_longPress(folder) }}>
|
|
<View style={folderButtonStyle}>
|
|
<Text numberOfLines={1} style={this.styles().folderButtonText}>{folder === 'all' ? _('All notes') : Folder.displayTitle(folder)}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
{ iconWrapper }
|
|
</View>
|
|
);
|
|
}
|
|
|
|
renderSideBarButton(key, title, iconName, onPressHandler) {
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
return (
|
|
<TouchableOpacity key={key} onPress={onPressHandler}>
|
|
<View style={this.styles().sideButton}>
|
|
<Icon name={iconName} style={this.styles().sidebarIcon} />
|
|
<Text style={this.styles().sideButtonText}>{title}</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
makeDivider(key) {
|
|
return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>
|
|
}
|
|
|
|
renderBottomPanel() {
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
const items = [];
|
|
|
|
items.push(this.makeDivider('divider_1'));
|
|
|
|
items.push(this.renderSideBarButton('newFolder_button', _('New Notebook'), 'md-folder-open', this.newFolderButton_press));
|
|
|
|
items.push(this.renderSideBarButton('tag_button', _('Tags'), 'md-pricetag', this.tagButton_press));
|
|
|
|
items.push(this.renderSideBarButton('config_button', _('Configuration'), 'md-settings', this.configButton_press));
|
|
|
|
items.push(this.makeDivider('divider_2'));
|
|
|
|
let lines = Synchronizer.reportToLines(this.props.syncReport);
|
|
const syncReportText = lines.join("\n");
|
|
|
|
let decryptionReportText = '';
|
|
if (this.props.decryptionWorker && this.props.decryptionWorker.state !== 'idle' && this.props.decryptionWorker.itemCount) {
|
|
decryptionReportText = _('Decrypting items: %d/%d', this.props.decryptionWorker.itemIndex + 1, this.props.decryptionWorker.itemCount);
|
|
}
|
|
|
|
let resourceFetcherText = '';
|
|
if (this.props.resourceFetcher && this.props.resourceFetcher.toFetchCount) {
|
|
resourceFetcherText = _('Fetching resources: %d/%d', this.props.resourceFetcher.fetchingCount, this.props.resourceFetcher.toFetchCount);
|
|
}
|
|
|
|
let fullReport = [];
|
|
if (syncReportText) fullReport.push(syncReportText);
|
|
if (resourceFetcherText) fullReport.push(resourceFetcherText);
|
|
if (decryptionReportText) fullReport.push(decryptionReportText);
|
|
|
|
items.push(this.renderSideBarButton(
|
|
'synchronize_button',
|
|
!this.props.syncStarted ? _('Synchronise') : _('Cancel synchronisation'),
|
|
!this.props.syncStarted ? 'md-sync' : 'md-close',
|
|
this.synchronize_press
|
|
));
|
|
|
|
if (fullReport.length) items.push(<Text key='sync_report' style={this.styles().syncStatus}>{fullReport.join('\n')}</Text>);
|
|
|
|
return (
|
|
<View style={{ flex: 0, flexDirection: 'column', paddingBottom: theme.marginBottom }}>
|
|
{ items }
|
|
</View>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
let items = [];
|
|
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
// 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'/>);
|
|
|
|
items.push(this.renderFolderItem('all', this.props.notesParentType === 'SmartFilter', false, 0));
|
|
|
|
items.push(this.makeDivider('divider_all'));
|
|
|
|
if (this.props.folders.length) {
|
|
const result = shared.renderFolders(this.props, this.renderFolderItem);
|
|
const folderItems = result.items;
|
|
items = items.concat(folderItems);
|
|
}
|
|
|
|
let style = {
|
|
flex:1,
|
|
borderRightWidth: 1,
|
|
borderRightColor: globalStyle.dividerColor,
|
|
backgroundColor: theme.backgroundColor,
|
|
};
|
|
|
|
return (
|
|
<View style={style}>
|
|
<View style={{flex:1, opacity: this.props.opacity}}>
|
|
<ScrollView scrollsToTop={false} style={this.styles().menu}>
|
|
{ items }
|
|
</ScrollView>
|
|
{ this.renderBottomPanel() }
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
};
|
|
|
|
const SideMenuContent = connect(
|
|
(state) => {
|
|
return {
|
|
folders: state.folders,
|
|
syncStarted: state.syncStarted,
|
|
syncReport: state.syncReport,
|
|
selectedFolderId: state.selectedFolderId,
|
|
selectedTagId: state.selectedTagId,
|
|
notesParentType: state.notesParentType,
|
|
locale: state.settings.locale,
|
|
theme: state.settings.theme,
|
|
// Don't do the opacity animation as it means re-rendering the list multiple times
|
|
// opacity: state.sideMenuOpenPercent,
|
|
collapsedFolderIds: state.collapsedFolderIds,
|
|
decryptionWorker: state.decryptionWorker,
|
|
resourceFetcher: state.resourceFetcher,
|
|
};
|
|
}
|
|
)(SideMenuContentComponent)
|
|
|
|
module.exports = { SideMenuContent }; |