refactor note list

.eslintignore

@@ -556,12 +556,18 @@ packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.js.map
 packages/app-desktop/gui/NoteList/NoteList.d.ts
 packages/app-desktop/gui/NoteList/NoteList.js
 packages/app-desktop/gui/NoteList/NoteList.js.map
+packages/app-desktop/gui/NoteList/NoteList2.d.ts
+packages/app-desktop/gui/NoteList/NoteList2.js
+packages/app-desktop/gui/NoteList/NoteList2.js.map
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.d.ts
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js.map
 packages/app-desktop/gui/NoteList/commands/index.d.ts
 packages/app-desktop/gui/NoteList/commands/index.js
 packages/app-desktop/gui/NoteList/commands/index.js.map
+packages/app-desktop/gui/NoteList/types.d.ts
+packages/app-desktop/gui/NoteList/types.js
+packages/app-desktop/gui/NoteList/types.js.map
 packages/app-desktop/gui/NoteListControls/NoteListControls.d.ts
 packages/app-desktop/gui/NoteListControls/NoteListControls.js
 packages/app-desktop/gui/NoteListControls/NoteListControls.js.map

.gitignore

@@ -546,12 +546,18 @@ packages/app-desktop/gui/NoteEditor/utils/useWindowCommandHandler.js.map
 packages/app-desktop/gui/NoteList/NoteList.d.ts
 packages/app-desktop/gui/NoteList/NoteList.js
 packages/app-desktop/gui/NoteList/NoteList.js.map
+packages/app-desktop/gui/NoteList/NoteList2.d.ts
+packages/app-desktop/gui/NoteList/NoteList2.js
+packages/app-desktop/gui/NoteList/NoteList2.js.map
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.d.ts
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js
 packages/app-desktop/gui/NoteList/commands/focusElementNoteList.js.map
 packages/app-desktop/gui/NoteList/commands/index.d.ts
 packages/app-desktop/gui/NoteList/commands/index.js
 packages/app-desktop/gui/NoteList/commands/index.js.map
+packages/app-desktop/gui/NoteList/types.d.ts
+packages/app-desktop/gui/NoteList/types.js
+packages/app-desktop/gui/NoteList/types.js.map
 packages/app-desktop/gui/NoteListControls/NoteListControls.d.ts
 packages/app-desktop/gui/NoteListControls/NoteListControls.js
 packages/app-desktop/gui/NoteListControls/NoteListControls.js.map

packages/app-desktop/gui/NoteList/NoteList.tsx

@@ -486,6 +486,15 @@ class NoteListComponent extends React.Component {
 		);
 	}
 
+	// componentWillReceiveProps(nextProps:any) {
+	// 	for (const index in nextProps) {
+	// 	  if (nextProps[index] !== this.props[index]) {
+	// 		console.log('PROPS', index, this.props[index], '-->', nextProps[index]);
+	// 	  }
+	// 	}
+	//   }
+
+
 	render() {
 		if (!this.props.size) throw new Error('props.size is required');
 

packages/app-desktop/gui/NoteList/NoteList2.tsx

@@ -0,0 +1,510 @@
+import * as React from 'react';
+import { useMemo, useEffect, useState, useRef, useCallback } from 'react';
+import { AppState } from '../../app.reducer';
+import eventManager from '@joplin/lib/eventManager';
+import NoteListUtils from '../utils/NoteListUtils';
+import { _ } from '@joplin/lib/locale';
+import time from '@joplin/lib/time';
+import BaseModel from '@joplin/lib/BaseModel';
+import bridge from '../../services/bridge';
+import Setting from '@joplin/lib/models/Setting';
+import NoteListItem from '../NoteListItem';
+import CommandService from '@joplin/lib/services/CommandService';
+import shim from '@joplin/lib/shim';
+import styled from 'styled-components';
+import { themeStyle } from '@joplin/lib/theme';
+const { ItemList } = require('../ItemList.min.js');
+const { connect } = require('react-redux');
+import Note from '@joplin/lib/models/Note';
+import Folder from '@joplin/lib/models/Folder';
+import { Props } from './types';
+import usePrevious from '../hooks/usePrevious';
+
+const commands = [
+	require('./commands/focusElementNoteList'),
+];
+
+const StyledRoot = styled.div`
+	width: 100%;
+	height: 100%;
+	background-color: ${(props: any) => props.theme.backgroundColor3};
+	border-right: 1px solid ${(props: any) => props.theme.dividerColor};
+`;
+
+const NoteListComponent = (props: Props) => {
+	const [dragOverTargetNoteIndex, setDragOverTargetNoteIndex] = useState(null);
+	const [width, setWidth] = useState(0);
+	const [, setHeight] = useState(0);
+
+	useEffect(() => {
+		// TODO
+		CommandService.instance().componentRegisterCommands(this, commands);
+	}, []);
+
+	const itemHeight = 34;
+
+	const focusItemIID_ = useRef<any>(null);
+	const noteListRef = useRef(null);
+	const itemListRef = useRef(null);
+
+	let globalDragEndEventRegistered_ = false;
+	const itemAnchorRefs_ = useRef<any>({});
+
+	const style = useMemo(() => {
+		const theme = themeStyle(props.themeId);
+
+		return {
+			root: {
+				backgroundColor: theme.backgroundColor,
+			},
+			listItem: {
+				maxWidth: '100%',
+				height: itemHeight,
+				boxSizing: 'border-box',
+				display: 'flex',
+				alignItems: 'stretch',
+				backgroundColor: theme.backgroundColor,
+				borderBottom: `1px solid ${theme.dividerColor}`,
+			},
+			listItemSelected: {
+				backgroundColor: theme.selectedColor,
+			},
+			listItemTitle: {
+				fontFamily: theme.fontFamily,
+				fontSize: theme.fontSize,
+				textDecoration: 'none',
+				color: theme.color,
+				cursor: 'default',
+				whiteSpace: 'nowrap',
+				flex: 1,
+				display: 'flex',
+				alignItems: 'center',
+				overflow: 'hidden',
+			},
+			listItemTitleCompleted: {
+				opacity: 0.5,
+				textDecoration: 'line-through',
+			},
+		};
+	}, [props.themeId, itemHeight]);
+
+	const itemContextMenu = useCallback((event: any) => {
+		const currentItemId = event.currentTarget.getAttribute('data-id');
+		if (!currentItemId) return;
+
+		let noteIds = [];
+		if (props.selectedNoteIds.indexOf(currentItemId) < 0) {
+			noteIds = [currentItemId];
+		} else {
+			noteIds = props.selectedNoteIds;
+		}
+
+		if (!noteIds.length) return;
+
+		const menu = NoteListUtils.makeContextMenu(noteIds, {
+			notes: props.notes,
+			dispatch: props.dispatch,
+			watchedNoteFiles: props.watchedNoteFiles,
+			plugins: props.plugins,
+			inConflictFolder: props.selectedFolderId === Folder.conflictFolderId(),
+			customCss: props.customCss,
+		});
+
+		menu.popup(bridge().window());
+	}, [props.selectedNoteIds, props.notes, props.dispatch, props.watchedNoteFiles,props.plugins, props.selectedFolderId, props.customCss]);
+
+	const onGlobalDrop_ = () => {
+		unregisterGlobalDragEndEvent_();
+		setDragOverTargetNoteIndex(null);
+	};
+
+	const registerGlobalDragEndEvent_ = () => {
+		if (globalDragEndEventRegistered_) return;
+		globalDragEndEventRegistered_ = true;
+		document.addEventListener('dragend', onGlobalDrop_);
+	};
+
+	const unregisterGlobalDragEndEvent_ = () => {
+		globalDragEndEventRegistered_ = false;
+		document.removeEventListener('dragend', onGlobalDrop_);
+	};
+
+	const dragTargetNoteIndex_ = (event: any) => {
+		return Math.abs(Math.round((event.clientY - itemListRef.current.offsetTop() + itemListRef.current.offsetScroll()) / itemHeight));
+	};
+
+	const noteItem_noteDragOver = (event: any) => {
+		if (props.notesParentType !== 'Folder') return;
+
+		const dt = event.dataTransfer;
+
+		if (dt.types.indexOf('text/x-jop-note-ids') >= 0) {
+			event.preventDefault();
+			const newIndex = dragTargetNoteIndex_(event);
+			if (dragOverTargetNoteIndex === newIndex) return;
+			registerGlobalDragEndEvent_();
+			setDragOverTargetNoteIndex(newIndex);
+		}
+	};
+
+	const noteItem_noteDrop = async (event: any) => {
+		if (props.notesParentType !== 'Folder') return;
+
+		if (props.noteSortOrder !== 'order') {
+			const doIt = await bridge().showConfirmMessageBox(_('To manually sort the notes, the sort order must be changed to "%s" in the menu "%s" > "%s"', _('Custom order'), _('View'), _('Sort notes by')), {
+				buttons: [_('Do it now'), _('Cancel')],
+			});
+			if (!doIt) return;
+
+			Setting.setValue('notes.sortOrder.field', 'order');
+			return;
+		}
+
+		// TODO: check that parent type is folder
+
+		const dt = event.dataTransfer;
+		unregisterGlobalDragEndEvent_();
+		setDragOverTargetNoteIndex(null);
+
+		const targetNoteIndex = dragTargetNoteIndex_(event);
+		const noteIds = JSON.parse(dt.getData('text/x-jop-note-ids'));
+
+		void Note.insertNotesAt(props.selectedFolderId, noteIds, targetNoteIndex);
+	};
+
+
+	const noteItem_checkboxClick = async (event: any, item: any) => {
+		const checked = event.target.checked;
+		const newNote = {
+			id: item.id,
+			todo_completed: checked ? time.unixMs() : 0,
+		};
+		await Note.save(newNote, { userSideValidation: true });
+		eventManager.emit('todoToggle', { noteId: item.id, note: newNote });
+	};
+
+	const noteItem_titleClick = async (event: any, item: any) => {
+		if (event.ctrlKey || event.metaKey) {
+			event.preventDefault();
+			props.dispatch({
+				type: 'NOTE_SELECT_TOGGLE',
+				id: item.id,
+			});
+		} else if (event.shiftKey) {
+			event.preventDefault();
+			props.dispatch({
+				type: 'NOTE_SELECT_EXTEND',
+				id: item.id,
+			});
+		} else {
+			props.dispatch({
+				type: 'NOTE_SELECT',
+				id: item.id,
+			});
+		}
+	};
+
+	const noteItem_dragStart = (event: any) => {
+		let noteIds = [];
+
+		// Here there is two cases:
+		// - If multiple notes are selected, we drag the group
+		// - If only one note is selected, we drag the note that was clicked on (which might be different from the currently selected note)
+		if (props.selectedNoteIds.length >= 2) {
+			noteIds = props.selectedNoteIds;
+		} else {
+			const clickedNoteId = event.currentTarget.getAttribute('data-id');
+			if (clickedNoteId) noteIds.push(clickedNoteId);
+		}
+
+		if (!noteIds.length) return;
+
+		event.dataTransfer.setDragImage(new Image(), 1, 1);
+		event.dataTransfer.clearData();
+		event.dataTransfer.setData('text/x-jop-note-ids', JSON.stringify(noteIds));
+	};
+
+	const renderItem = useCallback((item: any, index: number) => {
+		const highlightedWords = () => {
+			if (props.notesParentType === 'Search') {
+				const query = BaseModel.byId(props.searches, props.selectedSearchId);
+				if (query) {
+					return props.highlightedWords;
+				}
+			}
+			return [];
+		};
+
+		if (!itemAnchorRefs_.current[item.id]) itemAnchorRefs_.current[item.id] = React.createRef();
+		const ref = itemAnchorRefs_.current[item.id];
+
+		return <NoteListItem
+			ref={ref}
+			key={item.id}
+			style={style}
+			item={item}
+			index={index}
+			themeId={props.themeId}
+			width={width}
+			height={itemHeight}
+			dragItemIndex={dragOverTargetNoteIndex}
+			highlightedWords={highlightedWords()}
+			isProvisional={props.provisionalNoteIds.includes(item.id)}
+			isSelected={props.selectedNoteIds.indexOf(item.id) >= 0}
+			isWatched={props.watchedNoteFiles.indexOf(item.id) < 0}
+			itemCount={props.notes.length}
+			onCheckboxClick={noteItem_checkboxClick}
+			onDragStart={noteItem_dragStart}
+			onNoteDragOver={noteItem_noteDragOver}
+			onNoteDrop={noteItem_noteDrop}
+			onTitleClick={noteItem_titleClick}
+			onContextMenu={itemContextMenu}
+		/>;
+	}, [style, props.themeId, width, itemHeight, dragOverTargetNoteIndex, props.provisionalNoteIds, props.selectedNoteIds, props.watchedNoteFiles,
+		props.notes,
+		props.notesParentType,
+		props.searches,
+		props.selectedSearchId,
+		props.highlightedWords,
+	]);
+
+	const itemAnchorRef = (itemId: string) => {
+		if (itemAnchorRefs_.current[itemId] && itemAnchorRefs_.current[itemId].current) return itemAnchorRefs_.current[itemId].current;
+		return null;
+	};
+
+	const previousSelectedNoteIds = usePrevious(props.selectedNoteIds, []);
+	const previousNotes = usePrevious(props.notes, []);
+	const previousVisible = usePrevious(props.visible, false);
+
+	useEffect(() => {
+		if (previousSelectedNoteIds !== props.selectedNoteIds && props.selectedNoteIds.length === 1) {
+			const id = props.selectedNoteIds[0];
+			const doRefocus = props.notes.length < previousNotes.length;
+
+			for (let i = 0; i < props.notes.length; i++) {
+				if (props.notes[i].id === id) {
+					itemListRef.current.makeItemIndexVisible(i);
+					if (doRefocus) {
+						const ref = itemAnchorRef(id);
+						if (ref) ref.focus();
+					}
+					break;
+				}
+			}
+		}
+
+		if (previousVisible !== props.visible) {
+			updateSizeState();
+		}
+	}, [previousSelectedNoteIds,previousNotes, previousVisible, props.selectedNoteIds, props.notes]);
+
+	const scrollNoteIndex_ = (keyCode: any, ctrlKey: any, metaKey: any, noteIndex: any) => {
+
+		if (keyCode === 33) {
+			// Page Up
+			noteIndex -= (itemListRef.current.visibleItemCount() - 1);
+
+		} else if (keyCode === 34) {
+			// Page Down
+			noteIndex += (itemListRef.current.visibleItemCount() - 1);
+
+		} else if ((keyCode === 35 && ctrlKey) || (keyCode === 40 && metaKey)) {
+			// CTRL+End, CMD+Down
+			noteIndex = props.notes.length - 1;
+
+		} else if ((keyCode === 36 && ctrlKey) || (keyCode === 38 && metaKey)) {
+			// CTRL+Home, CMD+Up
+			noteIndex = 0;
+
+		} else if (keyCode === 38 && !metaKey) {
+			// Up
+			noteIndex -= 1;
+
+		} else if (keyCode === 40 && !metaKey) {
+			// Down
+			noteIndex += 1;
+		}
+		if (noteIndex < 0) noteIndex = 0;
+		if (noteIndex > props.notes.length - 1) noteIndex = props.notes.length - 1;
+		return noteIndex;
+	};
+
+	const onKeyDown = async (event: any) => {
+		const keyCode = event.keyCode;
+		const noteIds = props.selectedNoteIds;
+
+		if (noteIds.length > 0 && (keyCode === 40 || keyCode === 38 || keyCode === 33 || keyCode === 34 || keyCode === 35 || keyCode == 36)) {
+			// DOWN / UP / PAGEDOWN / PAGEUP / END / HOME
+			const noteId = noteIds[0];
+			let noteIndex = BaseModel.modelIndexById(props.notes, noteId);
+
+			noteIndex = scrollNoteIndex_(keyCode, event.ctrlKey, event.metaKey, noteIndex);
+
+			const newSelectedNote = props.notes[noteIndex];
+
+			props.dispatch({
+				type: 'NOTE_SELECT',
+				id: newSelectedNote.id,
+			});
+
+			itemListRef.current.makeItemIndexVisible(noteIndex);
+
+			focusNoteId_(newSelectedNote.id);
+
+			event.preventDefault();
+		}
+
+		if (noteIds.length && (keyCode === 46 || (keyCode === 8 && event.metaKey))) {
+			// DELETE / CMD+Backspace
+			event.preventDefault();
+			await NoteListUtils.confirmDeleteNotes(noteIds);
+		}
+
+		if (noteIds.length && keyCode === 32) {
+			// SPACE
+			event.preventDefault();
+
+			const notes = BaseModel.modelsByIds(props.notes, noteIds);
+			const todos = notes.filter((n: any) => !!n.is_todo);
+			if (!todos.length) return;
+
+			for (let i = 0; i < todos.length; i++) {
+				const toggledTodo = Note.toggleTodoCompleted(todos[i]);
+				await Note.save(toggledTodo);
+			}
+
+			focusNoteId_(todos[0].id);
+		}
+
+		if (keyCode === 9) {
+			// TAB
+			event.preventDefault();
+
+			if (event.shiftKey) {
+				void CommandService.instance().execute('focusElement', 'sideBar');
+			} else {
+				void CommandService.instance().execute('focusElement', 'noteTitle');
+			}
+		}
+
+		if (event.keyCode === 65 && (event.ctrlKey || event.metaKey)) {
+			// Ctrl+A key
+			event.preventDefault();
+
+			props.dispatch({
+				type: 'NOTE_SELECT_ALL',
+			});
+		}
+	};
+
+	const focusNoteId_ = (noteId: string) => {
+		// - We need to focus the item manually otherwise focus might be lost when the
+		//   list is scrolled and items within it are being rebuilt.
+		// - We need to use an interval because when leaving the arrow pressed, the rendering
+		//   of items might lag behind and so the ref is not yet available at this point.
+		if (!itemAnchorRef(noteId)) {
+			if (focusItemIID_.current) shim.clearInterval(focusItemIID_.current);
+			focusItemIID_.current = shim.setInterval(() => {
+				if (itemAnchorRef(noteId)) {
+					itemAnchorRef(noteId).focus();
+					shim.clearInterval(focusItemIID_.current);
+					focusItemIID_.current = null;
+				}
+			}, 10);
+		} else {
+			itemAnchorRef(noteId).focus();
+		}
+	};
+
+	const updateSizeState = () => {
+		setWidth(noteListRef.current.clientWidth);
+		setHeight(noteListRef.current.clientHeight);
+	};
+
+	const resizableLayout_resize = () => {
+		updateSizeState();
+	};
+
+	useEffect(() => {
+		props.resizableLayoutEventEmitter.on('resize', resizableLayout_resize);
+		return () => {
+			props.resizableLayoutEventEmitter.off('resize', resizableLayout_resize);
+		};
+	}, [props.resizableLayoutEventEmitter]);
+
+	useEffect(() => {
+		updateSizeState();
+
+		return () => {
+			if (focusItemIID_.current) {
+				shim.clearInterval(focusItemIID_.current);
+				focusItemIID_.current = null;
+			}
+			CommandService.instance().componentUnregisterCommands(commands);
+		};
+	}, []);
+
+	const renderEmptyList = () => {
+		if (props.notes.length) return null;
+
+		const theme = themeStyle(props.themeId);
+		const padding = 10;
+		const emptyDivStyle = {
+			padding: `${padding}px`,
+			fontSize: theme.fontSize,
+			color: theme.color,
+			backgroundColor: theme.backgroundColor,
+			fontFamily: theme.fontFamily,
+		};
+		return <div style={emptyDivStyle}>{props.folders.length ? _('No notes in here. Create one by clicking on "New note".') : _('There is currently no notebook. Create one by clicking on "New notebook".')}</div>;
+	};
+
+	const renderItemList = () => {
+		if (!props.notes.length) return null;
+
+		return (
+			<ItemList
+				ref={itemListRef}
+				disabled={props.isInsertingNotes}
+				itemHeight={style.listItem.height}
+				className={'note-list'}
+				items={props.notes}
+				style={props.size}
+				itemRenderer={renderItem}
+				onKeyDown={onKeyDown}
+			/>
+		);
+	};
+
+	if (!props.size) throw new Error('props.size is required');
+
+	return (
+		<StyledRoot ref={noteListRef}>
+			{renderEmptyList()}
+			{renderItemList()}
+		</StyledRoot>
+	);
+};
+
+const mapStateToProps = (state: AppState) => {
+	return {
+		notes: state.notes,
+		folders: state.folders,
+		selectedNoteIds: state.selectedNoteIds,
+		selectedFolderId: state.selectedFolderId,
+		themeId: state.settings.theme,
+		notesParentType: state.notesParentType,
+		searches: state.searches,
+		selectedSearchId: state.selectedSearchId,
+		watchedNoteFiles: state.watchedNoteFiles,
+		provisionalNoteIds: state.provisionalNoteIds,
+		isInsertingNotes: state.isInsertingNotes,
+		noteSortOrder: state.settings['notes.sortOrder.field'],
+		highlightedWords: state.highlightedWords,
+		plugins: state.pluginService.plugins,
+		customCss: state.customCss,
+	};
+};
+
+export default connect(mapStateToProps)(NoteListComponent);

packages/app-desktop/gui/NoteList/types.ts

@@ -0,0 +1,24 @@
+import { FolderEntity, NoteEntity } from '../../../lib/services/database/types';
+import { PluginStates } from '../../../lib/services/plugins/reducer';
+
+export interface Props {
+	themeId: any;
+	selectedNoteIds: string[];
+	notes: NoteEntity[];
+	dispatch: Function;
+	watchedNoteFiles: any[];
+	plugins: PluginStates;
+	selectedFolderId: string;
+	customCss: string;
+	notesParentType: string;
+	noteSortOrder: string;
+	resizableLayoutEventEmitter: any;
+	isInsertingNotes: boolean;
+	folders: FolderEntity[];
+	size: any;
+	searches: any[];
+	selectedSearchId: string;
+	highlightedWords: string[];
+	provisionalNoteIds: string[];
+	visible: boolean;
+}

packages/app-desktop/gui/NoteListWrapper/NoteListWrapper.tsx

@@ -1,7 +1,8 @@
 import { themeStyle } from '@joplin/lib/theme';
 import * as React from 'react';
 import { useMemo } from 'react';
-import NoteList from '../NoteList/NoteList';
+// import NoteList from '../NoteList/NoteList';
+import NoteList2 from '../NoteList/NoteList2';
 import NoteListControls from '../NoteListControls/NoteListControls';
 import { Size } from '../ResizableLayout/utils/types';
 import styled from 'styled-components';
@@ -35,7 +36,7 @@ export default function NoteListWrapper(props: Props) {
 	return (
 		<StyledRoot>
 			<NoteListControls showNewNoteButtons={props.focusedField !== 'globalSearch'} height={controlHeight} />
-			<NoteList resizableLayoutEventEmitter={props.resizableLayoutEventEmitter} size={noteListSize} visible={props.visible}/>
+			<NoteList2 resizableLayoutEventEmitter={props.resizableLayoutEventEmitter} size={noteListSize} visible={props.visible}/>
 		</StyledRoot>
 	);
 }