mynode/packages/app-mobile/components/ScreenHeader/index.tsx

import * as React from 'react';
import { PureComponent, ReactElement } from 'react';
import { connect } from 'react-redux';
import { View, Text, StyleSheet, TouchableOpacity, ViewStyle, TextStyle, ImageStyle } from 'react-native';
import BackButtonService from '../../services/BackButtonService';
import NavService from '@joplin/lib/services/NavService';
import { _, _n } from '@joplin/lib/locale';
import Note from '@joplin/lib/models/Note';
import Folder from '@joplin/lib/models/Folder';
import { themeStyle } from '../global-style';
import { OnValueChangedListener } from '../Dropdown';
import { FolderEntity } from '@joplin/lib/services/database/types';
import { State } from '@joplin/lib/reducer';
import IconButton from '../IconButton';
import FolderPicker from '../FolderPicker';
import { itemIsInTrash } from '@joplin/lib/services/trash';
import restoreItems from '@joplin/lib/services/trash/restoreItems';
import { ModelType } from '@joplin/lib/BaseModel';
import { PluginStates } from '@joplin/lib/services/plugins/reducer';
import { ContainerType } from '@joplin/lib/services/plugins/WebviewController';
import { Dispatch } from 'redux';
import WarningBanner from './WarningBanner';

import shim from '@joplin/lib/shim';
import CommandService from '@joplin/lib/services/CommandService';
import Icon from '../Icon';
import Menu from './Menu';
import { MenuOption, MenuOptionStyle } from '../BottomDrawerMenu';
export { MenuOption, MenuOptionStyle };

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

type OnPressCallback=()=> void;
type ScreenHeaderStyles = ReturnType<typeof StyleSheet.create>;

export interface FolderPickerOptions {
	visible: boolean;
	disabled?: boolean;
	selectedFolderId?: string;
	onValueChange?: OnValueChangedListener;
	mustSelect?: boolean;
}

export enum ViewToggleButtonMode {
	Hidden = 'hidden',
	ShowViewer = 'show-viewer',
	ShowEditor = 'show-editor',
}

interface ScreenHeaderProps {
	selectedNoteIds: string[];
	selectedFolderId: string;
	notesParentType: string;
	noteSelectionEnabled: boolean;
	showUndoButton: boolean;
	undoButtonDisabled?: boolean;
	showRedoButton: boolean;
	menuOptions: MenuOption[];
	title?: string|null;
	folders: FolderEntity[];
	folderPickerOptions?: FolderPickerOptions;
	plugins: PluginStates;

	dispatch: Dispatch;
	onUndoButtonPress: OnPressCallback;
	onRedoButtonPress: OnPressCallback;
	onSaveButtonPress: OnPressCallback;
	sortButton_press?: OnPressCallback;
	onSearchButtonPress?: OnPressCallback;
	onDeleteButtonPress?: OnPressCallback;

	showSideMenuButton?: boolean;
	showSearchButton?: boolean;
	showContextMenuButton?: boolean;
	showPluginEditorButton?: boolean;
	showBackButton?: boolean;
	viewToggleButtonMode?: ViewToggleButtonMode;
	onViewTogglePress?: OnPressCallback;

	saveButtonDisabled?: boolean;
	showSaveButton?: boolean;

	historyCanGoBack?: boolean;
	showShouldUpgradeSyncTargetMessage?: boolean;
	showNoteLockKeyConflictMessage?: boolean;

	themeId: number;
}

interface ScreenHeaderState {
}

class ScreenHeaderComponent extends PureComponent<ScreenHeaderProps, ScreenHeaderState> {
	private cachedStyles: Record<number, ReturnType<typeof StyleSheet.create>>;
	public constructor(props: ScreenHeaderProps) {
		super(props);
		this.cachedStyles = {};
	}

	private styles() {
		const themeId = this.props.themeId;
		if (this.cachedStyles[themeId]) return this.cachedStyles[themeId];
		this.cachedStyles = {};

		const theme = themeStyle(themeId);

		const styleObject: Record<string, ViewStyle | TextStyle | ImageStyle> = {
			outerContainer: {
				flexDirection: 'column',
			},
			innerContainer: {
				flexDirection: 'row',
				alignItems: 'center',
				backgroundColor: theme.backgroundColor,
				borderBottomColor: theme.dividerColor,
				borderBottomWidth: 1,
				// 2026-08-28: Including a fully transparent shadow avoids a crash on iOS when opening settings:
				shadowColor: '#000',
				shadowOpacity: 0,
			},
			folderPicker: {
				marginRight: theme.marginMedium,
				fontSize: theme.fontSizeLarger,
			},
			sideMenuButton: {
				flex: 1,
				alignItems: 'center',
				backgroundColor: theme.backgroundColor,
				paddingLeft: theme.marginLeft,
				paddingRight: 5,
				marginRight: 2,
				paddingTop: PADDING_V,
				paddingBottom: PADDING_V,
			},
			iconButton: {
				flex: 1,
				backgroundColor: theme.backgroundColor,
				paddingLeft: 10,
				paddingRight: 10,
				paddingTop: PADDING_V,
				paddingBottom: PADDING_V,
			},
			saveButton: {
				flex: 0,
				flexDirection: 'row',
				alignItems: 'center',
				justifyContent: 'center',
				minWidth: 40,
				minHeight: 40,

				borderWidth: 1,
				borderColor: theme.color,
				borderRadius: 4,
				marginRight: 8,
			},
			saveButtonText: {
				textAlignVertical: 'center',
				color: theme.color,
				fontWeight: 'bold',
			},
			savedButtonIcon: {
				...theme.icon,
				fontSize: 20,
				width: 18,
				height: 18,
			},
			saveButtonIcon: {
				...theme.icon,
				fontSize: 25,
			},
			contextMenuTrigger: {
				fontSize: 30,
				paddingLeft: 5,
				paddingRight: theme.marginRight,
				color: theme.color,
				fontWeight: 'bold',
			},
			titleText: {
				flex: 1,
				textAlignVertical: 'center',
				marginLeft: 10,
				color: theme.color,
				fontWeight: 'bold',
				fontSize: theme.fontSizeLarger,
				paddingTop: 15,
				paddingBottom: 15,
			},
			viewToggleButton: {
				flex: 1,
				backgroundColor: theme.backgroundColor,
				paddingLeft: 10,
				paddingRight: 10,
				paddingTop: PADDING_V,
				paddingBottom: PADDING_V,
			},
			viewToggleIcon: {
				fontSize: 27,
				color: theme.color,
				flex: 1,
				textAlignVertical: 'center',
			},
		};


		const topIcon: TextStyle = { ...theme.icon, flex: 1, textAlignVertical: 'center', color: theme.color };
		styleObject.topIcon = topIcon;

		styleObject.backButton = { ...styleObject.iconButton };
		styleObject.backButton.marginRight = 1;

		styleObject.backButtonDisabled = { ...styleObject.backButton, opacity: theme.disabledOpacity };
		styleObject.saveButtonDisabled = { ...styleObject.saveButton, opacity: theme.disabledOpacity };
		styleObject.iconButtonDisabled = { ...styleObject.iconButton, opacity: theme.disabledOpacity };

		this.cachedStyles[themeId] = StyleSheet.create(styleObject);
		return this.cachedStyles[themeId];
	}

	private sideMenuButton_press() {
		this.props.dispatch({ type: 'SIDE_MENU_TOGGLE' });
	}

	private async backButton_press() {
		if (this.props.noteSelectionEnabled) {
			this.props.dispatch({ type: 'NOTE_SELECTION_END' });
		} else {
			await BackButtonService.back();
		}
	}

	private selectAllButton_press() {
		this.props.dispatch({ type: 'NOTE_SELECT_ALL_TOGGLE' });
	}

	private searchButton_press() {
		if (this.props.onSearchButtonPress) {
			this.props.onSearchButtonPress();
		} else {
			void NavService.go('Search');
		}
	}

	private pluginPanelToggleButton_press() {
		this.props.dispatch({ type: 'SET_PLUGIN_PANELS_DIALOG_VISIBLE', visible: true });
	}

	private async duplicateButton_press() {
		const noteIds = this.props.selectedNoteIds;

		this.props.dispatch({ type: 'NOTE_SELECTION_END' });

		try {
			// Duplicate all selected notes. ensureUniqueTitle is set to true to use the
			// original note's name as a root for the new unique identifier.
			await Note.duplicateMultipleNotes(noteIds, { ensureUniqueTitle: true });
		} catch (error) {
			alert(_n('This note could not be duplicated: %s', 'These notes could not be duplicated: %s', noteIds.length, error.message));
		}
	}

	private 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 noteIds = this.props.selectedNoteIds;
		this.props.dispatch({ type: 'NOTE_SELECTION_END' });

		try {
			await Note.batchDelete(noteIds, { toTrash: true, sourceDescription: 'Delete selected notes button' });
		} catch (error) {
			alert(_n('This note could not be deleted: %s', 'These notes could not be deleted: %s', noteIds.length, error.message));
		}
	}

	private async restoreButton_press() {
		// Dialog needs to be displayed as a child of the parent component, otherwise
		// it won't be visible within the header component.
		const noteIds = this.props.selectedNoteIds;
		this.props.dispatch({ type: 'NOTE_SELECTION_END' });

		try {
			await restoreItems(ModelType.Note, noteIds);
		} catch (error) {
			alert(`Could not restore note(s): ${error.message}`);
		}
	}

	public render() {
		const themeId = this.props.themeId;
		function sideMenuButton(styles: ScreenHeaderStyles, onPress: OnPressCallback) {
			return (
				<TouchableOpacity
					onPress={onPress}

					accessibilityLabel={_('Sidebar')}
					accessibilityHint={_('Show/hide the sidebar')}
					accessibilityRole="button">
					<View style={styles.sideMenuButton}>
						<Icon name="ionicon menu" style={styles.topIcon} accessibilityLabel={null} />
					</View>
				</TouchableOpacity>
			);
		}

		function backButton(styles: ScreenHeaderStyles, onPress: OnPressCallback, disabled: boolean) {
			return (
				<TouchableOpacity
					onPress={onPress}
					disabled={disabled}

					accessibilityLabel={_('Back')}
					accessibilityRole="button">
					<View style={disabled ? styles.backButtonDisabled : styles.backButton}>
						<Icon
							name="ionicon arrow-back"
							style={styles.topIcon}
							accessibilityLabel={null}
						/>
					</View>
				</TouchableOpacity>
			);
		}

		function saveButton(
			styles: ScreenHeaderStyles, onPress: OnPressCallback, disabled: boolean, show: boolean,
		) {
			if (!show) return null;

			return (
				<IconButton
					onPress={onPress}

					themeId={themeId}
					description={_('Save changes')}
					disabled={disabled}
					contentWrapperStyle={disabled ? styles.saveButtonDisabled : styles.saveButton}
					iconStyle={disabled ? styles.savedButtonIcon : styles.saveButtonIcon}

					iconName={disabled ? 'ionicon checkmark' : 'material content-save'}
				/>
			);
		}

		interface TopButtonOptions {
			visible: boolean;
			iconName: string;
			disabled?: boolean;
			description: string;
			onPress: OnPressCallback;
		}
		const renderTopButton = (options: TopButtonOptions) => {
			if (!options.visible) return null;

			const viewStyle = options.disabled ? this.styles().iconButtonDisabled : this.styles().iconButton;

			return (
				<IconButton
					onPress={options.onPress}
					containerStyle={{ padding: 0 }}
					contentWrapperStyle={viewStyle}
					themeId={themeId}
					disabled={!!options.disabled}
					description={options.description}
					iconName={options.iconName}
					iconStyle={this.styles().topIcon}
				/>
			);
		};

		const renderUndoButton = () => {
			return renderTopButton({
				iconName: 'ionicon arrow-undo-circle-sharp',
				description: _('Undo'),
				onPress: this.props.onUndoButtonPress,
				visible: this.props.showUndoButton,
				disabled: this.props.undoButtonDisabled,
			});
		};

		const renderRedoButton = () => {
			return renderTopButton({
				iconName: 'ionicon arrow-redo-circle-sharp',
				description: _('Redo'),
				onPress: this.props.onRedoButtonPress,
				visible: this.props.showRedoButton,
			});
		};

		const renderViewToggleButton = () => {
			const mode = this.props.viewToggleButtonMode ?? ViewToggleButtonMode.Hidden;
			if (mode === ViewToggleButtonMode.Hidden || !this.props.onViewTogglePress) return null;

			return (
				<IconButton
					onPress={this.props.onViewTogglePress}
					containerStyle={{ padding: 0 }}
					contentWrapperStyle={this.styles().viewToggleButton}
					themeId={themeId}
					description={mode === ViewToggleButtonMode.ShowViewer ? _('Stop editing') : _('Edit')}
					iconName={mode === ViewToggleButtonMode.ShowViewer ? 'ionicon book-outline' : 'ionicon create-outline'}
					iconStyle={this.styles().viewToggleIcon}
				/>
			);
		};

		function selectAllButton(styles: ScreenHeaderStyles, onPress: OnPressCallback) {
			return (
				<IconButton
					onPress={onPress}

					themeId={themeId}
					description={_('Select all')}
					contentWrapperStyle={styles.iconButton}

					iconName="ionicon checkmark-circle-outline"
					iconStyle={styles.topIcon}
				/>
			);
		}

		function searchButton(styles: ScreenHeaderStyles, onPress: OnPressCallback) {
			return (
				<IconButton
					onPress={onPress}

					description={_('Search')}
					themeId={themeId}
					contentWrapperStyle={styles.iconButton}

					iconName='ionicon search'
					iconStyle={styles.topIcon}
				/>
			);
		}

		const customDeleteButton = (styles: ScreenHeaderStyles, onPress: OnPressCallback) => {
			return (
				<IconButton
					onPress={onPress}

					description={_('Delete')}
					themeId={themeId}
					contentWrapperStyle={styles.iconButton}

					iconName='fas trash'
					iconStyle={styles.topIcon}
				/>
			);
		};

		const pluginPanelToggleButton = (styles: ScreenHeaderStyles, onPress: OnPressCallback) => {
			const allPluginViews = Object.values(this.props.plugins).map(plugin => Object.values(plugin.views)).flat();
			const allVisiblePanels = allPluginViews.filter(
				view => view.containerType === ContainerType.Panel && view.opened,
			);
			if (allVisiblePanels.length === 0) return null;

			return (
				<IconButton
					onPress={onPress}
					description={_('Plugin panels')}
					themeId={themeId}
					contentWrapperStyle={styles.iconButton}

					iconName="ionicon extension-puzzle"
					iconStyle={styles.topIcon}
				/>
			);
		};

		const renderTogglePluginEditorButton = (styles: ScreenHeaderStyles, onPress: OnPressCallback, disabled: boolean) => {
			if (!this.props.showPluginEditorButton) return null;

			return (
				<IconButton
					onPress={onPress}
					disabled={disabled}

					themeId={themeId}
					description={_('Toggle plugin editor')}
					contentWrapperStyle={disabled ? styles.iconButtonDisabled : styles.iconButton}

					iconName='ionicon eye'
					iconStyle={styles.topIcon}
				/>
			);
		};

		function deleteButton(styles: ScreenHeaderStyles, onPress: OnPressCallback, disabled: boolean) {
			return (
				<IconButton
					onPress={onPress}
					disabled={disabled}

					themeId={themeId}
					description={_('Delete')}
					accessibilityHint={
						disabled ? null : _('Delete selected notes')
					}
					contentWrapperStyle={disabled ? styles.iconButtonDisabled : styles.iconButton}

					iconName='ionicon trash'
					iconStyle={styles.topIcon}
				/>
			);
		}

		function restoreButton(styles: ScreenHeaderStyles, onPress: OnPressCallback, disabled: boolean) {
			return (
				<IconButton
					onPress={onPress}
					disabled={disabled}

					themeId={themeId}
					description={_('Restore')}
					accessibilityHint={
						disabled ? null : _('Restore')
					}
					contentWrapperStyle={disabled ? styles.iconButtonDisabled : styles.iconButton}

					iconName='ionicon reload-circle'
					iconStyle={styles.topIcon}
				/>
			);
		}

		function duplicateButton(styles: ScreenHeaderStyles, onPress: OnPressCallback, disabled: boolean) {
			return (
				<IconButton
					onPress={onPress}
					disabled={disabled}

					themeId={themeId}
					description={_('Duplicate')}
					accessibilityHint={
						disabled ? null : _('Duplicate selected notes')
					}
					contentWrapperStyle={disabled ? styles.iconButtonDisabled : styles.iconButton}
					iconName='ionicon copy'
					iconStyle={styles.topIcon}
				/>
			);
		}

		function sortButton(styles: ScreenHeaderStyles, onPress: OnPressCallback) {
			return (
				<IconButton
					onPress={onPress}
					themeId={themeId}

					description={_('Sort notes by')}
					iconName='ionicon filter'
					contentWrapperStyle={styles.iconButton}
					iconStyle={styles.topIcon}
				/>
			);
		}

		const menuOptions: MenuOption[] = [...this.props.menuOptions];

		const selectedFolder = this.props.notesParentType === 'Folder' ? Folder.byId(this.props.folders, this.props.selectedFolderId) : null;
		const selectedFolderInTrash = itemIsInTrash(selectedFolder);

		if (this.props.noteSelectionEnabled) {
			menuOptions.push({
				key: 'delete',
				title: _('Delete'),
				onPress: () => this.deleteButton_press(),
			});

			menuOptions.push({
				key: 'duplicate',
				title: _('Duplicate'),
				onPress: () => this.duplicateButton_press(),
			});
		}

		const createTitleComponent = (hideableAfterTitleComponents: ReactElement) => {
			const folderPickerOptions = this.props.folderPickerOptions;

			if (folderPickerOptions && folderPickerOptions.visible) {
				const hasSelectedNotes = this.props.selectedNoteIds.length > 0;
				const disabled = this.props.folderPickerOptions.disabled ?? !hasSelectedNotes;
				return (
					<FolderPicker
						themeId={themeId}
						disabled={disabled}
						headerStyle={this.styles().folderPicker}
						selectedFolderId={'selectedFolderId' in folderPickerOptions ? folderPickerOptions.selectedFolderId : null}
						darkText
						onValueChange={async (folderId) => {
							// 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);
								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 shim.showConfirmationDialog(_n('Move %d note to notebook "%s"?', 'Move %d notes to notebook "%s"?', noteIds.length, noteIds.length, folder.title)) : true;
							if (!ok) return;

							this.props.dispatch({ type: 'NOTE_SELECTION_END' });

							try {
								for (let i = 0; i < noteIds.length; i++) {
									await Note.moveToFolder(
										noteIds[i],
										folderId,
										// By default, the note selection is preserved on mobile when a note is moved to
										// a different folder. However, when moving notes from the note list, this shouldn't be
										// the case:
										{ dispatchOptions: { preserveSelection: false } },
									);
								}
							} catch (error) {
								alert(_n('This note could not be moved: %s', 'These notes could not be moved: %s', noteIds.length, error.message));
							}
						}}
						mustSelect={!!folderPickerOptions.mustSelect}
						folders={Folder.getRealFolders(this.props.folders)}
						coverableChildrenRight={hideableAfterTitleComponents}
					/>
				);
			} else {
				const title = 'title' in this.props && this.props.title !== null ? this.props.title : '';
				return (
					<>
						<Text
							ellipsizeMode={'tail'}
							numberOfLines={1}
							style={this.styles().titleText}
							accessibilityRole='header'
						>{title}</Text>
						{hideableAfterTitleComponents}
					</>
				);
			}
		};

		const showSideMenuButton = !!this.props.showSideMenuButton && !this.props.noteSelectionEnabled;
		const showSelectAllButton = 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;
		const showStandardDeleteButton = !this.props.onDeleteButtonPress && !selectedFolderInTrash && this.props.noteSelectionEnabled;

		let backButtonDisabled = !this.props.historyCanGoBack;
		if (this.props.noteSelectionEnabled) backButtonDisabled = false;
		const headerItemDisabled = !(this.props.selectedNoteIds.length > 0);

		const sideMenuComp = !showSideMenuButton ? null : sideMenuButton(this.styles(), () => this.sideMenuButton_press());
		const backButtonComp = !showBackButton ? null : backButton(this.styles(), () => this.backButton_press(), backButtonDisabled);
		const pluginPanelsComp = pluginPanelToggleButton(this.styles(), () => this.pluginPanelToggleButton_press());
		const selectAllButtonComp = !showSelectAllButton ? null : selectAllButton(this.styles(), () => this.selectAllButton_press());
		const searchButtonComp = !showSearchButton ? null : searchButton(this.styles(), () => this.searchButton_press());
		const customDeleteButtonComp = this.props.onDeleteButtonPress ? customDeleteButton(this.styles(), this.props.onDeleteButtonPress) : null;
		const deleteButtonComp = showStandardDeleteButton ? deleteButton(this.styles(), () => this.deleteButton_press(), headerItemDisabled) : null;
		const restoreButtonComp = selectedFolderInTrash && this.props.noteSelectionEnabled ? restoreButton(this.styles(), () => this.restoreButton_press(), headerItemDisabled) : null;
		const duplicateButtonComp = !selectedFolderInTrash && this.props.noteSelectionEnabled ? duplicateButton(this.styles(), () => this.duplicateButton_press(), headerItemDisabled) : null;
		const sortButtonComp = !this.props.noteSelectionEnabled && this.props.sortButton_press ? sortButton(this.styles(), () => this.props.sortButton_press()) : null;
		const togglePluginEditorButton = renderTogglePluginEditorButton(this.styles(), () => CommandService.instance().execute('toggleEditorPlugin'), false);

		// To allow the notebook dropdown (and perhaps other components) to have sufficient
		// space while in use, we allow certain buttons to be hidden.
		const hideableRightComponents = <>
			{pluginPanelsComp}
			{togglePluginEditorButton}
			{selectAllButtonComp}
			{searchButtonComp}
			{deleteButtonComp}
			{customDeleteButtonComp}
			{renderViewToggleButton()}
		</>;

		const titleComp = createTitleComponent(hideableRightComponents);

		const contextMenuStyle: ViewStyle = {
			paddingTop: PADDING_V,
			paddingBottom: PADDING_V,
		};

		// 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)
		if (this.props.noteSelectionEnabled) contextMenuStyle.width = 1;

		const menuComp =
			!menuOptions.length || !showContextMenuButton ? null : (
				<Menu themeId={this.props.themeId} options={menuOptions}>
					<View style={contextMenuStyle}>
						<Icon name="ionicon ellipsis-vertical" style={this.styles().contextMenuTrigger} accessibilityLabel={_('Actions')}/>
					</View>
				</Menu>
			);

		// Updating the state of this component can result in the left most element becoming hidden, so add a dummy as the first element to prevent this
		// See https://github.com/laurent22/joplin/issues/14153
		const zeroWidthSpacer = (
			<View style={{ width: 0 }} pointerEvents="none"/>
		);

		return (
			<View style={this.styles().outerContainer}>
				<View style={this.styles().innerContainer}>
					{zeroWidthSpacer}
					{sideMenuComp}
					{backButtonComp}
					{renderUndoButton()}
					{renderRedoButton()}
					{saveButton(
						this.styles(),
						() => {
							if (this.props.onSaveButtonPress) this.props.onSaveButtonPress();
						},
						this.props.saveButtonDisabled === true,
						this.props.showSaveButton === true,
					)}
					{titleComp}
					{restoreButtonComp}
					{duplicateButtonComp}
					{sortButtonComp}
					{menuComp}
				</View>
				<WarningBanner
					showShouldUpgradeSyncTargetMessage={this.props.showShouldUpgradeSyncTargetMessage}
					showNoteLockKeyConflictMessage={this.props.showNoteLockKeyConflictMessage}
				/>
			</View>
		);
	}

	public static defaultProps: Partial<ScreenHeaderProps> = {
		menuOptions: [],
	};
}

const ScreenHeader = connect((state: State) => {
	return {
		historyCanGoBack: state.historyCanGoBack,
		locale: state.settings.locale,
		folders: state.folders,
		themeId: state.settings.theme,
		noteSelectionEnabled: state.noteSelectionEnabled,
		selectedNoteIds: state.selectedNoteIds,
		selectedFolderId: state.selectedFolderId,
		notesParentType: state.notesParentType,
		plugins: state.pluginService.plugins,
	};
})(ScreenHeaderComponent);

export default ScreenHeader;
export { ScreenHeader };