2019-07-29 15:43:53 +02:00
|
|
|
const React = require('react');
|
2023-02-18 17:05:48 +02:00
|
|
|
import { AppState as RNAppState, View, StyleSheet, NativeEventSubscription } from 'react-native';
|
|
|
|
import { stateUtils } from '@joplin/lib/reducer';
|
|
|
|
import { connect } from 'react-redux';
|
2023-04-23 11:07:28 +02:00
|
|
|
import NoteList from '../NoteList';
|
2023-02-18 17:05:48 +02:00
|
|
|
import Folder from '@joplin/lib/models/Folder';
|
|
|
|
import Tag from '@joplin/lib/models/Tag';
|
|
|
|
import Note from '@joplin/lib/models/Note';
|
|
|
|
import Setting from '@joplin/lib/models/Setting';
|
2020-11-05 18:58:23 +02:00
|
|
|
const { themeStyle } = require('../global-style.js');
|
2023-02-18 17:05:48 +02:00
|
|
|
import { ScreenHeader } from '../ScreenHeader';
|
|
|
|
import { _ } from '@joplin/lib/locale';
|
|
|
|
import ActionButton from '../ActionButton';
|
2020-11-05 18:58:23 +02:00
|
|
|
const { dialogs } = require('../../utils/dialogs.js');
|
2018-03-09 22:59:12 +02:00
|
|
|
const DialogBox = require('react-native-dialogbox').default;
|
2023-11-09 21:19:08 +02:00
|
|
|
const { BaseScreenComponent } = require('../base-screen');
|
2020-11-05 18:58:23 +02:00
|
|
|
const { BackButtonService } = require('../../services/back-button.js');
|
2023-02-18 17:05:48 +02:00
|
|
|
import { AppState } from '../../utils/types';
|
2023-11-19 12:43:57 +02:00
|
|
|
const { ALL_NOTES_FILTER_ID } = require('@joplin/lib/reserved-ids.js');
|
2017-05-12 22:23:54 +02:00
|
|
|
|
2023-02-18 17:05:48 +02:00
|
|
|
class NotesScreenComponent extends BaseScreenComponent<any> {
|
|
|
|
|
|
|
|
private onAppStateChangeSub_: NativeEventSubscription = null;
|
2017-05-12 22:23:54 +02:00
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public constructor() {
|
2018-02-22 20:58:15 +02:00
|
|
|
super();
|
|
|
|
|
2018-07-20 15:59:55 +02:00
|
|
|
this.onAppStateChange_ = async () => {
|
|
|
|
// Force an update to the notes list when app state changes
|
2023-06-01 13:02:36 +02:00
|
|
|
const newProps = { ...this.props };
|
2018-07-20 15:59:55 +02:00
|
|
|
newProps.notesSource = '';
|
|
|
|
await this.refreshNotes(newProps);
|
2019-07-29 15:43:53 +02:00
|
|
|
};
|
2018-07-20 15:59:55 +02:00
|
|
|
|
2018-02-22 20:58:15 +02:00
|
|
|
this.sortButton_press = async () => {
|
|
|
|
const buttons = [];
|
2018-03-09 22:59:12 +02:00
|
|
|
const sortNoteOptions = Setting.enumOptions('notes.sortOrder.field');
|
2018-02-22 20:58:15 +02:00
|
|
|
|
2023-02-18 17:05:48 +02:00
|
|
|
const makeCheckboxText = function(selected: boolean, sign: string, label: string) {
|
2019-07-29 15:43:53 +02:00
|
|
|
const s = sign === 'tick' ? '✓' : '⬤';
|
2019-09-19 23:51:18 +02:00
|
|
|
return (selected ? `${s} ` : '') + label;
|
2019-07-29 15:43:53 +02:00
|
|
|
};
|
2018-02-22 20:58:15 +02:00
|
|
|
|
2020-03-14 01:46:14 +02:00
|
|
|
for (const field in sortNoteOptions) {
|
2018-02-22 20:58:15 +02:00
|
|
|
if (!sortNoteOptions.hasOwnProperty(field)) continue;
|
|
|
|
buttons.push({
|
2018-03-09 22:59:12 +02:00
|
|
|
text: makeCheckboxText(Setting.value('notes.sortOrder.field') === field, 'bullet', sortNoteOptions[field]),
|
|
|
|
id: { name: 'notes.sortOrder.field', value: field },
|
2018-02-22 20:58:15 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
buttons.push({
|
2019-09-19 23:51:18 +02:00
|
|
|
text: makeCheckboxText(Setting.value('notes.sortOrder.reverse'), 'tick', `[ ${Setting.settingMetadata('notes.sortOrder.reverse').label()} ]`),
|
2018-03-09 22:59:12 +02:00
|
|
|
id: { name: 'notes.sortOrder.reverse', value: !Setting.value('notes.sortOrder.reverse') },
|
2018-02-22 20:58:15 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
buttons.push({
|
2019-09-19 23:51:18 +02:00
|
|
|
text: makeCheckboxText(Setting.value('uncompletedTodosOnTop'), 'tick', `[ ${Setting.settingMetadata('uncompletedTodosOnTop').label()} ]`),
|
2018-03-09 22:59:12 +02:00
|
|
|
id: { name: 'uncompletedTodosOnTop', value: !Setting.value('uncompletedTodosOnTop') },
|
2018-02-22 20:58:15 +02:00
|
|
|
});
|
|
|
|
|
2018-05-09 22:00:05 +02:00
|
|
|
buttons.push({
|
2019-09-19 23:51:18 +02:00
|
|
|
text: makeCheckboxText(Setting.value('showCompletedTodos'), 'tick', `[ ${Setting.settingMetadata('showCompletedTodos').label()} ]`),
|
2018-05-09 22:00:05 +02:00
|
|
|
id: { name: 'showCompletedTodos', value: !Setting.value('showCompletedTodos') },
|
|
|
|
});
|
|
|
|
|
2018-03-09 22:59:12 +02:00
|
|
|
const r = await dialogs.pop(this, Setting.settingMetadata('notes.sortOrder.field').label(), buttons);
|
2018-02-22 20:58:15 +02:00
|
|
|
if (!r) return;
|
|
|
|
|
|
|
|
Setting.setValue(r.name, r.value);
|
2019-07-29 15:43:53 +02:00
|
|
|
};
|
2020-05-14 17:03:13 +02:00
|
|
|
|
|
|
|
this.backHandler = () => {
|
2020-08-07 04:03:33 +02:00
|
|
|
if (this.dialogbox && this.dialogbox.state && this.dialogbox.state.isVisible) {
|
2020-05-14 17:03:13 +02:00
|
|
|
this.dialogbox.close();
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
};
|
2018-02-22 20:58:15 +02:00
|
|
|
}
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public styles() {
|
2019-07-12 20:36:12 +02:00
|
|
|
if (!this.styles_) this.styles_ = {};
|
2020-09-15 15:01:07 +02:00
|
|
|
const themeId = this.props.themeId;
|
2019-07-12 20:36:12 +02:00
|
|
|
const cacheKey = themeId;
|
|
|
|
|
|
|
|
if (this.styles_[cacheKey]) return this.styles_[cacheKey];
|
|
|
|
this.styles_ = {};
|
|
|
|
|
2020-03-14 01:46:14 +02:00
|
|
|
const styles = {
|
2019-07-12 20:36:12 +02:00
|
|
|
noteList: {
|
|
|
|
flex: 1,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
this.styles_[cacheKey] = StyleSheet.create(styles);
|
|
|
|
return this.styles_[cacheKey];
|
|
|
|
}
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public async componentDidMount() {
|
2021-03-11 16:31:39 +02:00
|
|
|
BackButtonService.addHandler(this.backHandler);
|
2017-07-25 20:09:01 +02:00
|
|
|
await this.refreshNotes();
|
2023-02-18 17:05:48 +02:00
|
|
|
this.onAppStateChangeSub_ = RNAppState.addEventListener('change', this.onAppStateChange_);
|
2018-07-20 15:59:55 +02:00
|
|
|
}
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public async componentWillUnmount() {
|
2023-02-18 17:05:48 +02:00
|
|
|
if (this.onAppStateChangeSub_) this.onAppStateChangeSub_.remove();
|
2020-05-14 17:03:13 +02:00
|
|
|
BackButtonService.removeHandler(this.backHandler);
|
2017-07-25 20:09:01 +02:00
|
|
|
}
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public async componentDidUpdate(prevProps: any) {
|
2023-11-24 15:48:41 +02:00
|
|
|
if (prevProps.notesOrder !== this.props.notesOrder || prevProps.selectedFolderId !== this.props.selectedFolderId || prevProps.selectedTagId !== this.props.selectedTagId || prevProps.selectedSmartFilterId !== this.props.selectedSmartFilterId || prevProps.notesParentType !== this.props.notesParentType || prevProps.uncompletedTodosOnTop !== this.props.uncompletedTodosOnTop || prevProps.showCompletedTodos !== this.props.showCompletedTodos) {
|
2019-07-29 15:43:53 +02:00
|
|
|
await this.refreshNotes(this.props);
|
2017-07-25 20:09:01 +02:00
|
|
|
}
|
2019-07-29 15:43:53 +02:00
|
|
|
}
|
2017-07-25 20:09:01 +02:00
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public async refreshNotes(props: any = null) {
|
2017-07-25 20:09:01 +02:00
|
|
|
if (props === null) props = this.props;
|
|
|
|
|
2020-03-14 01:46:14 +02:00
|
|
|
const options = {
|
2017-07-26 20:36:16 +02:00
|
|
|
order: props.notesOrder,
|
|
|
|
uncompletedTodosOnTop: props.uncompletedTodosOnTop,
|
2018-05-09 22:00:05 +02:00
|
|
|
showCompletedTodos: props.showCompletedTodos,
|
2018-02-22 20:58:15 +02:00
|
|
|
caseInsensitive: true,
|
2017-07-25 20:09:01 +02:00
|
|
|
};
|
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
const parent = this.parentItem(props);
|
2017-07-31 22:03:12 +02:00
|
|
|
if (!parent) return;
|
2017-07-25 20:36:52 +02:00
|
|
|
|
2017-07-25 20:09:01 +02:00
|
|
|
const source = JSON.stringify({
|
|
|
|
options: options,
|
2017-07-25 20:36:52 +02:00
|
|
|
parentId: parent.id,
|
2017-07-25 20:09:01 +02:00
|
|
|
});
|
|
|
|
|
2022-07-23 09:31:32 +02:00
|
|
|
if (source === props.notesSource) return;
|
2017-07-25 20:09:01 +02:00
|
|
|
|
2017-07-25 20:36:52 +02:00
|
|
|
let notes = [];
|
2019-06-28 01:51:02 +02:00
|
|
|
if (props.notesParentType === 'Folder') {
|
2017-07-25 20:36:52 +02:00
|
|
|
notes = await Note.previews(props.selectedFolderId, options);
|
2019-06-28 01:51:02 +02:00
|
|
|
} else if (props.notesParentType === 'Tag') {
|
2019-01-18 19:56:56 +02:00
|
|
|
notes = await Tag.notes(props.selectedTagId, options);
|
2019-06-28 01:51:02 +02:00
|
|
|
} else if (props.notesParentType === 'SmartFilter') {
|
|
|
|
notes = await Note.previews(null, options);
|
2017-07-25 20:36:52 +02:00
|
|
|
}
|
2017-07-25 20:09:01 +02:00
|
|
|
|
|
|
|
this.props.dispatch({
|
2018-03-09 22:59:12 +02:00
|
|
|
type: 'NOTE_UPDATE_ALL',
|
2017-07-25 20:09:01 +02:00
|
|
|
notes: notes,
|
|
|
|
notesSource: source,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public newNoteNavigate = async (folderId: string, isTodo: boolean) => {
|
2023-07-16 18:42:42 +02:00
|
|
|
try {
|
|
|
|
const newNote = await Note.save({
|
|
|
|
parent_id: folderId,
|
|
|
|
is_todo: isTodo ? 1 : 0,
|
|
|
|
}, { provisional: true });
|
|
|
|
|
|
|
|
this.props.dispatch({
|
|
|
|
type: 'NAV_GO',
|
|
|
|
routeName: 'Note',
|
|
|
|
noteId: newNote.id,
|
|
|
|
});
|
|
|
|
} catch (error) {
|
|
|
|
alert(_('Cannot create a new note: %s', error.message));
|
|
|
|
}
|
2023-01-08 14:22:41 +02:00
|
|
|
};
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public parentItem(props: any = null) {
|
2017-07-25 20:36:52 +02:00
|
|
|
if (!props) props = this.props;
|
|
|
|
|
|
|
|
let output = null;
|
2022-07-23 09:31:32 +02:00
|
|
|
if (props.notesParentType === 'Folder') {
|
2017-07-25 20:36:52 +02:00
|
|
|
output = Folder.byId(props.folders, props.selectedFolderId);
|
2022-07-23 09:31:32 +02:00
|
|
|
} else if (props.notesParentType === 'Tag') {
|
2017-07-25 20:36:52 +02:00
|
|
|
output = Tag.byId(props.tags, props.selectedTagId);
|
2022-07-23 09:31:32 +02:00
|
|
|
} else if (props.notesParentType === 'SmartFilter') {
|
2019-06-28 01:51:02 +02:00
|
|
|
output = { id: this.props.selectedSmartFilterId, title: _('All notes') };
|
2017-07-25 20:36:52 +02:00
|
|
|
} else {
|
2017-07-31 22:03:12 +02:00
|
|
|
return null;
|
2019-07-30 09:35:42 +02:00
|
|
|
// throw new Error('Invalid parent type: ' + props.notesParentType);
|
2017-07-25 20:36:52 +02:00
|
|
|
}
|
|
|
|
return output;
|
2017-05-16 22:25:19 +02:00
|
|
|
}
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public folderPickerOptions() {
|
2019-07-12 20:36:12 +02:00
|
|
|
const options = {
|
|
|
|
enabled: this.props.noteSelectionEnabled,
|
|
|
|
mustSelect: true,
|
|
|
|
};
|
|
|
|
|
|
|
|
if (this.folderPickerOptions_ && options.enabled === this.folderPickerOptions_.enabled) return this.folderPickerOptions_;
|
|
|
|
|
|
|
|
this.folderPickerOptions_ = options;
|
|
|
|
return this.folderPickerOptions_;
|
|
|
|
}
|
|
|
|
|
2023-03-06 16:22:01 +02:00
|
|
|
public render() {
|
2017-07-25 20:36:52 +02:00
|
|
|
const parent = this.parentItem();
|
2020-09-15 15:01:07 +02:00
|
|
|
const theme = themeStyle(this.props.themeId);
|
2017-08-01 19:59:01 +02:00
|
|
|
|
2020-03-14 01:46:14 +02:00
|
|
|
const rootStyle = {
|
2017-08-01 19:59:01 +02:00
|
|
|
flex: 1,
|
|
|
|
backgroundColor: theme.backgroundColor,
|
2019-07-29 15:43:53 +02:00
|
|
|
};
|
2017-08-01 19:59:01 +02:00
|
|
|
|
2017-07-31 22:03:12 +02:00
|
|
|
if (!this.props.visible) {
|
|
|
|
rootStyle.flex = 0.001; // This is a bit of a hack but it seems to work fine - it makes the component invisible but without unmounting it
|
|
|
|
}
|
|
|
|
|
2020-03-14 01:46:14 +02:00
|
|
|
const title = parent ? parent.title : null;
|
2017-08-02 19:55:03 +02:00
|
|
|
if (!parent) {
|
|
|
|
return (
|
|
|
|
<View style={rootStyle}>
|
2019-07-26 21:23:18 +02:00
|
|
|
<ScreenHeader title={title} showSideMenuButton={true} showBackButton={false} />
|
2017-08-02 19:55:03 +02:00
|
|
|
</View>
|
2019-07-29 15:43:53 +02:00
|
|
|
);
|
2017-08-02 19:55:03 +02:00
|
|
|
}
|
|
|
|
|
2021-11-15 19:19:51 +02:00
|
|
|
const icon = Folder.unserializeIcon(parent.icon);
|
|
|
|
const iconString = icon ? `${icon.emoji} ` : '';
|
|
|
|
|
2022-07-23 09:31:32 +02:00
|
|
|
let buttonFolderId = this.props.selectedFolderId !== Folder.conflictFolderId() ? this.props.selectedFolderId : null;
|
2020-09-07 18:42:16 +02:00
|
|
|
if (!buttonFolderId) buttonFolderId = this.props.activeFolderId;
|
|
|
|
|
2023-11-19 12:43:57 +02:00
|
|
|
const isAllNotes =
|
|
|
|
this.props.notesParentType === 'SmartFilter'
|
|
|
|
&& this.props.selectedSmartFilterId === ALL_NOTES_FILTER_ID;
|
|
|
|
|
|
|
|
// Usually, when showing all notes, activeFolderId/selectedFolderId is set to the last
|
|
|
|
// active folder.
|
|
|
|
// If the app starts showing all notes, activeFolderId/selectedFolderId are
|
|
|
|
// empty or null. As such, we need a special case to show the buttons:
|
|
|
|
const addFolderNoteButtons = !!buttonFolderId || isAllNotes;
|
2017-11-23 20:47:51 +02:00
|
|
|
const thisComp = this;
|
2023-01-08 14:22:41 +02:00
|
|
|
|
|
|
|
const makeActionButtonComp = () => {
|
2023-11-19 12:43:57 +02:00
|
|
|
const getTargetFolderId = async () => {
|
|
|
|
if (!buttonFolderId && isAllNotes) {
|
|
|
|
return (await Folder.defaultFolder()).id;
|
|
|
|
}
|
|
|
|
return buttonFolderId;
|
|
|
|
};
|
2023-01-08 14:22:41 +02:00
|
|
|
if (addFolderNoteButtons && this.props.folders.length > 0) {
|
|
|
|
const buttons = [];
|
|
|
|
buttons.push({
|
|
|
|
label: _('New to-do'),
|
2023-11-19 12:43:57 +02:00
|
|
|
onPress: async () => {
|
|
|
|
const folderId = await getTargetFolderId();
|
2023-01-08 14:22:41 +02:00
|
|
|
const isTodo = true;
|
2023-11-19 12:43:57 +02:00
|
|
|
void this.newNoteNavigate(folderId, isTodo);
|
2023-01-08 14:22:41 +02:00
|
|
|
},
|
|
|
|
color: '#9b59b6',
|
2023-10-07 18:25:03 +02:00
|
|
|
icon: 'checkbox-outline',
|
2023-01-08 14:22:41 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
buttons.push({
|
|
|
|
label: _('New note'),
|
2023-11-19 12:43:57 +02:00
|
|
|
onPress: async () => {
|
|
|
|
const folderId = await getTargetFolderId();
|
2023-01-08 14:22:41 +02:00
|
|
|
const isTodo = false;
|
2023-11-19 12:43:57 +02:00
|
|
|
void this.newNoteNavigate(folderId, isTodo);
|
2023-01-08 14:22:41 +02:00
|
|
|
},
|
|
|
|
color: '#9b59b6',
|
2023-10-07 18:25:03 +02:00
|
|
|
icon: 'document',
|
2023-01-08 14:22:41 +02:00
|
|
|
});
|
|
|
|
return <ActionButton buttons={buttons}/>;
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
};
|
|
|
|
|
|
|
|
const actionButtonComp = this.props.noteSelectionEnabled || !this.props.visible ? null : makeActionButtonComp();
|
2017-08-02 19:55:03 +02:00
|
|
|
|
2023-09-19 12:39:43 +02:00
|
|
|
// Ensure that screen readers can't focus the notes list when it isn't visible.
|
|
|
|
// accessibilityElementsHidden is used on iOS and importantForAccessibility is used
|
|
|
|
// on Android.
|
|
|
|
const accessibilityHidden = !this.props.visible;
|
|
|
|
|
2017-05-12 22:23:54 +02:00
|
|
|
return (
|
2023-09-19 12:39:43 +02:00
|
|
|
<View
|
|
|
|
style={rootStyle}
|
|
|
|
|
|
|
|
accessibilityElementsHidden={accessibilityHidden}
|
|
|
|
importantForAccessibility={accessibilityHidden ? 'no-hide-descendants' : undefined}
|
|
|
|
>
|
2021-11-15 19:19:51 +02:00
|
|
|
<ScreenHeader title={iconString + title} showBackButton={false} parentComponent={thisComp} sortButton_press={this.sortButton_press} folderPickerOptions={this.folderPickerOptions()} showSearchButton={true} showSideMenuButton={true} />
|
2023-04-23 11:07:28 +02:00
|
|
|
<NoteList />
|
2019-07-29 15:43:53 +02:00
|
|
|
{actionButtonComp}
|
|
|
|
<DialogBox
|
2023-02-18 17:05:48 +02:00
|
|
|
ref={(dialogbox: any) => {
|
2019-07-29 15:43:53 +02:00
|
|
|
this.dialogbox = dialogbox;
|
|
|
|
}}
|
2017-11-23 20:47:51 +02:00
|
|
|
/>
|
2017-05-12 22:23:54 +02:00
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-02-18 17:05:48 +02:00
|
|
|
const NotesScreen = connect((state: AppState) => {
|
2019-07-29 15:43:53 +02:00
|
|
|
return {
|
|
|
|
folders: state.folders,
|
|
|
|
tags: state.tags,
|
2020-09-07 18:42:16 +02:00
|
|
|
activeFolderId: state.settings.activeFolderId,
|
2019-07-29 15:43:53 +02:00
|
|
|
selectedFolderId: state.selectedFolderId,
|
|
|
|
selectedNoteIds: state.selectedNoteIds,
|
|
|
|
selectedTagId: state.selectedTagId,
|
|
|
|
selectedSmartFilterId: state.selectedSmartFilterId,
|
|
|
|
notesParentType: state.notesParentType,
|
|
|
|
notes: state.notes,
|
|
|
|
notesSource: state.notesSource,
|
|
|
|
uncompletedTodosOnTop: state.settings.uncompletedTodosOnTop,
|
|
|
|
showCompletedTodos: state.settings.showCompletedTodos,
|
2020-09-15 15:01:07 +02:00
|
|
|
themeId: state.settings.theme,
|
2019-07-29 15:43:53 +02:00
|
|
|
noteSelectionEnabled: state.noteSelectionEnabled,
|
|
|
|
notesOrder: stateUtils.notesOrder(state.settings),
|
|
|
|
};
|
2023-02-18 17:05:48 +02:00
|
|
|
})(NotesScreenComponent as any);
|
2018-03-09 22:59:12 +02:00
|
|
|
|
2023-02-18 17:05:48 +02:00
|
|
|
export default NotesScreen as any;
|