From 354721107816a632b5c7debeb924690f2c7d310b Mon Sep 17 00:00:00 2001 From: JC Gurango Date: Sun, 26 Mar 2023 03:06:32 +0800 Subject: [PATCH 01/14] Implement sorting --- .eslintignore | 1 + .gitignore | 1 + packages/app-mobile/babel.config.js | 1 + packages/app-mobile/components/NoteList.tsx | 164 +++++++++++++++++ packages/app-mobile/components/note-item.js | 14 +- packages/app-mobile/components/note-list.js | 122 ------------ .../app-mobile/components/screens/Notes.tsx | 4 +- packages/app-mobile/package.json | 3 + packages/app-mobile/root.tsx | 31 ++-- yarn.lock | 174 ++++++++++++++++++ 10 files changed, 372 insertions(+), 143 deletions(-) create mode 100644 packages/app-mobile/components/NoteList.tsx delete mode 100644 packages/app-mobile/components/note-list.js diff --git a/.eslintignore b/.eslintignore index 62b4cdd85..4ae040c7c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -396,6 +396,7 @@ packages/app-mobile/components/NoteEditor/NoteEditor.js packages/app-mobile/components/NoteEditor/SearchPanel.js packages/app-mobile/components/NoteEditor/SelectionFormatting.js packages/app-mobile/components/NoteEditor/types.js +packages/app-mobile/components/NoteList.js packages/app-mobile/components/ProfileSwitcher/ProfileEditor.js packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js diff --git a/.gitignore b/.gitignore index 07ac8254d..6ef7c68a7 100644 --- a/.gitignore +++ b/.gitignore @@ -383,6 +383,7 @@ packages/app-mobile/components/NoteEditor/NoteEditor.js packages/app-mobile/components/NoteEditor/SearchPanel.js packages/app-mobile/components/NoteEditor/SelectionFormatting.js packages/app-mobile/components/NoteEditor/types.js +packages/app-mobile/components/NoteList.js packages/app-mobile/components/ProfileSwitcher/ProfileEditor.js packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.js packages/app-mobile/components/ProfileSwitcher/useProfileConfig.js diff --git a/packages/app-mobile/babel.config.js b/packages/app-mobile/babel.config.js index e953058a7..b23608952 100644 --- a/packages/app-mobile/babel.config.js +++ b/packages/app-mobile/babel.config.js @@ -1,3 +1,4 @@ module.exports = { presets: ['module:metro-react-native-babel-preset'], + plugins: ['react-native-reanimated/plugin'], }; diff --git a/packages/app-mobile/components/NoteList.tsx b/packages/app-mobile/components/NoteList.tsx new file mode 100644 index 000000000..c9e4e1a84 --- /dev/null +++ b/packages/app-mobile/components/NoteList.tsx @@ -0,0 +1,164 @@ +const React = require('react'); + +import { connect } from 'react-redux'; +import { Component } from 'react'; +import { FolderEntity } from '@joplin/lib/services/database/types'; +import { AppState } from '../utils/types'; +import { FlatList, Text, StyleSheet, Button, View } from 'react-native'; +import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist'; +import Setting from '@joplin/lib/models/Setting'; +import Note from '@joplin/lib/models/Note'; + +const { _ } = require('@joplin/lib/locale'); +const { NoteItem } = require('./note-item.js'); +const { themeStyle } = require('./global-style.js'); + +interface NoteListProps { + themeId: string; + dispatch: (action: any)=> void; + notesSource: string; + items: any[]; + folders: FolderEntity[]; + noteSelectionEnabled?: boolean; + selectedFolderId?: string; +} + +interface NoteListState { + items: any[]; + selectedItemIds: string[]; +} + +class NoteListComponent extends Component { + private rootRef_: FlatList; + private styles_: Record>; + public state: NoteListState; + + public constructor(props: NoteListProps) { + super(props); + + this.state = { + items: props.items || [], + selectedItemIds: [], + }; + this.rootRef_ = null; + this.styles_ = {}; + + this.createNotebookButton_click = this.createNotebookButton_click.bind(this); + } + + public styles() { + const themeId = this.props.themeId; + const theme = themeStyle(themeId); + + if (this.styles_[themeId]) return this.styles_[themeId]; + this.styles_ = {}; + + const styles = { + noItemMessage: { + paddingLeft: theme.marginLeft, + paddingRight: theme.marginRight, + paddingTop: theme.marginTop, + paddingBottom: theme.marginBottom, + fontSize: theme.fontSize, + color: theme.color, + textAlign: 'center', + }, + noNotebookView: { + + }, + }; + + this.styles_[themeId] = StyleSheet.create(styles); + return this.styles_[themeId]; + } + + private createNotebookButton_click() { + this.props.dispatch({ + type: 'NAV_GO', + routeName: 'Folder', + folderId: null, + }); + } + + public UNSAFE_componentWillReceiveProps(newProps: NoteListProps) { + // Make sure scroll position is reset when switching from one folder to another or to a tag list. + if (this.rootRef_ && newProps.notesSource !== this.props.notesSource) { + this.rootRef_.scrollToOffset({ offset: 0, animated: false }); + } + + this.setState({ + items: newProps.items || [], + }); + } + + public render() { + // `enableEmptySections` is to fix this warning: https://github.com/FaridSafi/react-native-gifted-listview/issues/39 + + if (this.props.items.length) { + if (this.props.noteSelectionEnabled && Setting.value('notes.sortOrder.field') === 'order') { + return ( + (this.rootRef_ = ref)} + data={this.state.items} + renderItem={({ item, drag, isActive }) => ( + + )} + keyExtractor={item => item.id} + onDragEnd={async ({ data, to }) => { + if (this.props.selectedFolderId) { + this.setState({ items: data }); + await Note.insertNotesAt( + this.props.selectedFolderId, + [data[to].id], + to, + Setting.value('uncompletedTodosOnTop'), + Setting.value('showCompletedTodos') + ); + this.props.dispatch({ + type: 'NOTE_UPDATE_ALL', + notes: data, + notesSource: this.props.notesSource, + }); + } + }} + /> + ); + } else { + return ( + (this.rootRef_ = ref)} + data={this.state.items} + renderItem={({ item }) => } + keyExtractor={item => item.id} + /> + ); + } + } else { + if (!this.props.folders.length) { + const noItemMessage = _('You currently have no notebooks.'); + return ( + + {noItemMessage} +