1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-15 09:04:04 +02:00
joplin/ReactNativeClient/lib/components/screen-header.js

453 lines
14 KiB
JavaScript
Raw Normal View History

2019-07-29 15:43:53 +02:00
const React = require('react');
2019-07-29 15:58:33 +02:00
const { connect } = require('react-redux');
2019-07-29 15:58:33 +02:00
const { Platform, View, Text, StyleSheet, TouchableOpacity, Image, ScrollView, Dimensions } = require('react-native');
const Icon = require('react-native-vector-icons/Ionicons').default;
const { BackButtonService } = require('lib/services/back-button.js');
const NavService = require('lib/services/NavService.js');
const { Menu, MenuOptions, MenuOption, MenuTrigger } = require('react-native-popup-menu');
const { _ } = require('lib/locale.js');
const Setting = require('lib/models/Setting.js');
const Note = require('lib/models/Note.js');
const Folder = require('lib/models/Folder.js');
const { themeStyle } = require('lib/components/global-style.js');
const { Dropdown } = require('lib/components/Dropdown.js');
const { dialogs } = require('lib/dialogs.js');
const DialogBox = require('react-native-dialogbox').default;
2017-05-16 21:57:09 +02:00
// Rather than applying a padding to the whole bar, it is applied to each
// individual component (button, picker, etc.) so that the touchable areas
// are widder and to give more room to the picker component which has a larger
// default height.
const PADDING_V = 10;
class ScreenHeaderComponent extends React.PureComponent {
2017-08-01 19:59:01 +02:00
constructor() {
super();
this.styles_ = {};
2017-07-21 23:40:02 +02:00
}
2017-07-16 01:30:54 +02:00
2017-08-01 19:59:01 +02:00
styles() {
const themeId = Setting.value('theme');
2017-08-01 19:59:01 +02:00
if (this.styles_[themeId]) return this.styles_[themeId];
this.styles_ = {};
const theme = themeStyle(themeId);
let styleObject = {
container: {
flexDirection: 'column',
2017-08-01 19:59:01 +02:00
backgroundColor: theme.raisedBackgroundColor,
alignItems: 'center',
shadowColor: '#000000',
2017-08-01 19:59:01 +02:00
elevation: 5,
paddingTop: Platform.OS === 'ios' ? 15 : 0, // Extra padding for iOS because the top icons are there
2017-08-01 19:59:01 +02:00
},
divider: {
borderBottomWidth: 1,
borderColor: theme.dividerColor,
2019-07-29 15:43:53 +02:00
backgroundColor: '#0000ff',
2017-08-01 19:59:01 +02:00
},
sideMenuButton: {
flex: 1,
alignItems: 'center',
2017-08-01 19:59:01 +02:00
backgroundColor: theme.raisedBackgroundColor,
paddingLeft: theme.marginLeft,
paddingRight: 5,
marginRight: 2,
paddingTop: PADDING_V,
paddingBottom: PADDING_V,
},
iconButton: {
flex: 1,
backgroundColor: theme.raisedBackgroundColor,
paddingLeft: 15,
paddingRight: 15,
paddingTop: PADDING_V,
paddingBottom: PADDING_V,
},
saveButton: {
flex: 0,
flexDirection: 'row',
alignItems: 'center',
2017-08-01 19:59:01 +02:00
padding: 10,
borderWidth: 1,
borderColor: theme.raisedHighlightedColor,
borderRadius: 4,
marginRight: 8,
},
saveButtonText: {
textAlignVertical: 'center',
2017-08-01 19:59:01 +02:00
color: theme.raisedHighlightedColor,
fontWeight: 'bold',
2017-08-01 19:59:01 +02:00
},
savedButtonIcon: {
fontSize: 20,
color: theme.raisedHighlightedColor,
width: 18,
height: 18,
},
saveButtonIcon: {
width: 18,
height: 18,
},
contextMenuTrigger: {
fontSize: 30,
paddingLeft: 10,
2017-08-01 19:59:01 +02:00
paddingRight: theme.marginRight,
color: theme.raisedColor,
fontWeight: 'bold',
2017-08-01 19:59:01 +02:00
},
contextMenu: {
backgroundColor: theme.raisedBackgroundColor,
},
contextMenuItem: {
backgroundColor: theme.backgroundColor,
},
contextMenuItemText: {
flex: 1,
textAlignVertical: 'center',
2017-08-01 19:59:01 +02:00
paddingLeft: theme.marginLeft,
paddingRight: theme.marginRight,
paddingTop: theme.itemMarginTop,
paddingBottom: theme.itemMarginBottom,
color: theme.color,
backgroundColor: theme.backgroundColor,
fontSize: theme.fontSize,
},
titleText: {
flex: 1,
textAlignVertical: 'center',
marginLeft: 10,
2017-08-01 19:59:01 +02:00
color: theme.raisedHighlightedColor,
fontWeight: 'bold',
2017-08-01 19:59:01 +02:00
fontSize: theme.fontSize,
paddingTop: 15,
paddingBottom: 15,
2017-12-30 21:57:34 +02:00
},
warningBox: {
2019-07-29 15:43:53 +02:00
backgroundColor: '#ff9900',
flexDirection: 'row',
2017-12-30 21:57:34 +02:00
padding: theme.marginLeft,
},
2017-08-01 19:59:01 +02:00
};
2017-07-22 18:36:55 +02:00
2017-08-01 19:59:01 +02:00
styleObject.topIcon = Object.assign({}, theme.icon);
styleObject.topIcon.flex = 1;
styleObject.topIcon.textAlignVertical = 'center';
2017-08-01 19:59:01 +02:00
styleObject.topIcon.color = theme.raisedColor;
2017-07-23 00:52:24 +02:00
2017-08-01 19:59:01 +02:00
styleObject.backButton = Object.assign({}, styleObject.iconButton);
styleObject.backButton.marginRight = 1;
2017-07-16 01:30:54 +02:00
2017-08-01 19:59:01 +02:00
styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { opacity: theme.disabledOpacity });
styleObject.saveButtonDisabled = Object.assign({}, styleObject.saveButton, { opacity: theme.disabledOpacity });
2017-05-16 22:25:19 +02:00
2017-08-01 19:59:01 +02:00
this.styles_[themeId] = StyleSheet.create(styleObject);
return this.styles_[themeId];
}
2017-05-16 21:57:09 +02:00
2017-06-06 22:01:43 +02:00
sideMenuButton_press() {
this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' });
2017-05-24 21:27:13 +02:00
}
async backButton_press() {
if (this.props.noteSelectionEnabled) {
this.props.dispatch({ type: 'NOTE_SELECTION_END' });
2019-07-29 15:43:53 +02:00
} else {
await BackButtonService.back();
2019-07-29 15:43:53 +02:00
}
2017-05-16 21:57:09 +02:00
}
2017-07-23 00:52:24 +02:00
searchButton_press() {
NavService.go('Search');
2017-07-23 00:52:24 +02:00
}
async deleteButton_press() {
// Dialog needs to be displayed as a child of the parent component, otherwise
// it won't be visible within the header component.
const ok = await dialogs.confirm(this.props.parentComponent, _('Delete these notes?'));
if (!ok) return;
const noteIds = this.props.selectedNoteIds;
this.props.dispatch({ type: 'NOTE_SELECTION_END' });
await Note.batchDelete(noteIds);
}
2017-06-06 22:01:43 +02:00
menu_select(value) {
2019-07-29 15:43:53 +02:00
if (typeof value == 'function') {
2017-05-16 22:25:19 +02:00
value();
}
}
2017-07-07 19:19:24 +02:00
log_press() {
NavService.go('Log');
2017-07-07 19:19:24 +02:00
}
2017-07-10 21:16:59 +02:00
status_press() {
NavService.go('Status');
2017-07-10 21:16:59 +02:00
}
2017-12-30 21:57:34 +02:00
warningBox_press() {
NavService.go('EncryptionConfig');
2017-12-30 21:57:34 +02:00
}
2017-05-16 21:57:09 +02:00
render() {
2017-07-16 01:30:54 +02:00
function sideMenuButton(styles, onPress) {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.sideMenuButton}>
2019-07-29 15:43:53 +02:00
<Icon name="md-menu" style={styles.topIcon} />
2017-07-16 01:30:54 +02:00
</View>
</TouchableOpacity>
);
}
function backButton(styles, onPress, disabled) {
return (
<TouchableOpacity onPress={onPress} disabled={disabled}>
<View style={disabled ? styles.backButtonDisabled : styles.backButton}>
2019-07-29 15:43:53 +02:00
<Icon name="md-arrow-back" style={styles.topIcon} />
2017-07-16 01:30:54 +02:00
</View>
</TouchableOpacity>
);
}
function saveButton(styles, onPress, disabled, show) {
if (!show) return null;
2019-07-29 15:43:53 +02:00
const icon = disabled ? <Icon name="md-checkmark" style={styles.savedButtonIcon} /> : <Image style={styles.saveButtonIcon} source={require('./SaveIcon.png')} />;
2017-07-30 23:33:54 +02:00
return (
2019-07-29 15:43:53 +02:00
<TouchableOpacity onPress={onPress} disabled={disabled} style={{ padding: 0 }}>
<View style={disabled ? styles.saveButtonDisabled : styles.saveButton}>{icon}</View>
</TouchableOpacity>
);
}
2017-07-23 00:52:24 +02:00
function searchButton(styles, onPress) {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.iconButton}>
2019-07-29 15:43:53 +02:00
<Icon name="md-search" style={styles.topIcon} />
2017-07-23 00:52:24 +02:00
</View>
</TouchableOpacity>
);
}
function deleteButton(styles, onPress) {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.iconButton}>
2019-07-29 15:43:53 +02:00
<Icon name="md-trash" style={styles.topIcon} />
</View>
</TouchableOpacity>
);
}
function sortButton(styles, onPress) {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.iconButton}>
2019-07-29 15:43:53 +02:00
<Icon name="md-funnel" style={styles.topIcon} />
</View>
</TouchableOpacity>
);
}
2017-05-16 23:46:21 +02:00
let key = 0;
2017-05-16 22:25:19 +02:00
let menuOptionComponents = [];
2017-05-16 23:46:21 +02:00
if (!this.props.noteSelectionEnabled) {
for (let i = 0; i < this.props.menuOptions.length; i++) {
let o = this.props.menuOptions[i];
if (o.isDivider) {
2019-07-29 15:43:53 +02:00
menuOptionComponents.push(<View key={'menuOption_' + key++} style={this.styles().divider} />);
} else {
menuOptionComponents.push(
<MenuOption value={o.onPress} key={'menuOption_' + key++} style={this.styles().contextMenuItem}>
<Text style={this.styles().contextMenuItemText}>{o.title}</Text>
2019-07-29 15:43:53 +02:00
</MenuOption>
);
}
}
2017-09-24 16:48:23 +02:00
if (menuOptionComponents.length) {
2019-07-29 15:43:53 +02:00
menuOptionComponents.push(<View key={'menuOption_' + key++} style={this.styles().divider} />);
2017-09-24 16:48:23 +02:00
}
} else {
2017-09-24 16:48:23 +02:00
menuOptionComponents.push(
<MenuOption value={() => this.deleteButton_press()} key={'menuOption_delete'} style={this.styles().contextMenuItem}>
<Text style={this.styles().contextMenuItemText}>{_('Delete')}</Text>
2019-07-29 15:43:53 +02:00
</MenuOption>
);
2017-09-24 16:48:23 +02:00
}
2017-07-10 21:16:59 +02:00
2017-07-16 18:06:05 +02:00
const createTitleComponent = () => {
const themeId = Setting.value('theme');
const theme = themeStyle(themeId);
const folderPickerOptions = this.props.folderPickerOptions;
if (folderPickerOptions && folderPickerOptions.enabled) {
const addFolderChildren = (folders, pickerItems, indent) => {
folders.sort((a, b) => {
const aTitle = a && a.title ? a.title : '';
const bTitle = b && b.title ? b.title : '';
return aTitle.toLowerCase() < bTitle.toLowerCase() ? -1 : +1;
});
for (let i = 0; i < folders.length; i++) {
const f = folders[i];
pickerItems.push({ label: ' '.repeat(indent) + ' ' + Folder.displayTitle(f), value: f.id });
pickerItems = addFolderChildren(f.children, pickerItems, indent + 1);
}
return pickerItems;
2019-07-29 15:43:53 +02:00
};
2019-07-29 15:43:53 +02:00
const titlePickerItems = mustSelect => {
const folders = this.props.folders.filter(f => f.id !== Folder.conflictFolderId());
let output = [];
if (mustSelect) output.push({ label: _('Move to notebook...'), value: null });
const folderTree = Folder.buildTree(folders);
output = addFolderChildren(folderTree, output, 0);
return output;
2019-07-29 15:43:53 +02:00
};
2017-07-16 18:06:05 +02:00
return (
<Dropdown
items={titlePickerItems(!!folderPickerOptions.mustSelect)}
itemHeight={35}
labelTransform="trim"
2019-07-29 15:43:53 +02:00
selectedValue={'selectedFolderId' in folderPickerOptions ? folderPickerOptions.selectedFolderId : null}
itemListStyle={{
backgroundColor: theme.backgroundColor,
}}
headerStyle={{
2017-11-19 02:23:18 +02:00
color: theme.raisedHighlightedColor,
fontSize: theme.fontSize,
}}
itemStyle={{
color: theme.color,
fontSize: theme.fontSize,
}}
onValueChange={async (folderId, itemIndex) => {
// If onValueChange is specified, use this as a callback, otherwise do the default
// which is to take the selectedNoteIds from the state and move them to the
// chosen folder.
if (folderPickerOptions.onValueChange) {
folderPickerOptions.onValueChange(folderId, itemIndex);
return;
}
if (!folderId) return;
const noteIds = this.props.selectedNoteIds;
if (!noteIds.length) return;
const folder = await Folder.load(folderId);
const ok = noteIds.length > 1 ? await dialogs.confirm(this.props.parentComponent, _('Move %d notes to notebook "%s"?', noteIds.length, folder.title)) : true;
if (!ok) return;
this.props.dispatch({ type: 'NOTE_SELECTION_END' });
for (let i = 0; i < noteIds.length; i++) {
await Note.moveToFolder(noteIds[i], folderId);
}
}}
/>
2017-07-16 18:06:05 +02:00
);
} else {
let title = 'title' in this.props && this.props.title !== null ? this.props.title : '';
2019-07-29 15:43:53 +02:00
return <Text style={this.styles().titleText}>{title}</Text>;
2017-07-16 18:06:05 +02:00
}
2019-07-29 15:43:53 +02:00
};
2017-07-16 18:06:05 +02:00
2017-12-30 21:57:34 +02:00
const warningComp = this.props.showMissingMasterKeyMessage ? (
<TouchableOpacity style={this.styles().warningBox} onPress={() => this.warningBox_press()} activeOpacity={0.8}>
2019-07-29 15:43:53 +02:00
<Text style={{ flex: 1 }}>{_('Press to set the decryption password.')}</Text>
2017-12-30 21:57:34 +02:00
</TouchableOpacity>
) : null;
const showSideMenuButton = !!this.props.showSideMenuButton && !this.props.noteSelectionEnabled;
const showSearchButton = !!this.props.showSearchButton && !this.props.noteSelectionEnabled;
const showContextMenuButton = this.props.showContextMenuButton !== false;
const showBackButton = !!this.props.noteSelectionEnabled || this.props.showBackButton !== false;
let backButtonDisabled = !this.props.historyCanGoBack;
2019-07-29 15:43:53 +02:00
if (this.props.noteSelectionEnabled) backButtonDisabled = false;
2017-07-16 18:06:05 +02:00
const titleComp = createTitleComponent();
const sideMenuComp = !showSideMenuButton ? null : sideMenuButton(this.styles(), () => this.sideMenuButton_press());
const backButtonComp = !showBackButton ? null : backButton(this.styles(), () => this.backButton_press(), backButtonDisabled);
const searchButtonComp = !showSearchButton ? null : searchButton(this.styles(), () => this.searchButton_press());
const deleteButtonComp = this.props.noteSelectionEnabled ? deleteButton(this.styles(), () => this.deleteButton_press()) : null;
const sortButtonComp = !this.props.noteSelectionEnabled && this.props.sortButton_press ? sortButton(this.styles(), () => this.props.sortButton_press()) : null;
const windowHeight = Dimensions.get('window').height - 50;
const contextMenuStyle = { paddingTop: PADDING_V, paddingBottom: PADDING_V };
2019-07-29 15:43:53 +02:00
// HACK: if this button is removed during selection mode, the header layout is broken, so for now just make it 1 pixel large (normally it should be hidden)
2019-07-29 15:43:53 +02:00
if (this.props.noteSelectionEnabled) contextMenuStyle.width = 1;
const menuComp =
!menuOptionComponents.length || !showContextMenuButton ? null : (
<Menu onSelect={value => this.menu_select(value)} style={this.styles().contextMenu}>
<MenuTrigger style={contextMenuStyle}>
<Icon name="md-more" style={this.styles().contextMenuTrigger} />
</MenuTrigger>
<MenuOptions>
<ScrollView style={{ maxHeight: windowHeight }}>{menuOptionComponents}</ScrollView>
</MenuOptions>
</Menu>
);
2017-05-16 22:25:19 +02:00
2017-05-16 21:57:09 +02:00
return (
2019-07-29 15:43:53 +02:00
<View style={this.styles().container}>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
{sideMenuComp}
{backButtonComp}
{saveButton(
this.styles(),
() => {
if (this.props.onSaveButtonPress) this.props.onSaveButtonPress();
},
this.props.saveButtonDisabled === true,
this.props.showSaveButton === true
)}
{titleComp}
{searchButtonComp}
{deleteButtonComp}
{sortButtonComp}
{menuComp}
2017-12-30 21:57:34 +02:00
</View>
2019-07-29 15:43:53 +02:00
{warningComp}
<DialogBox
ref={dialogbox => {
this.dialogbox = dialogbox;
}}
/>
2017-05-16 21:57:09 +02:00
</View>
);
}
}
2017-06-11 23:11:14 +02:00
ScreenHeaderComponent.defaultProps = {
menuOptions: [],
};
2019-07-29 15:43:53 +02:00
const ScreenHeader = connect(state => {
return {
historyCanGoBack: state.historyCanGoBack,
locale: state.settings.locale,
folders: state.folders,
theme: state.settings.theme,
noteSelectionEnabled: state.noteSelectionEnabled,
selectedNoteIds: state.selectedNoteIds,
showMissingMasterKeyMessage: state.notLoadedMasterKeys.length && state.masterKeys.length,
};
})(ScreenHeaderComponent);
module.exports = { ScreenHeader };