self-hosted/joplin
1
0
Fork 0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-24 10:27:10 +02:00
Code Issues Releases Activity

Desktop: Add left/right arrow keys as expand/collapse shortcuts for notebooks (#10944)

Browse Source
This commit is contained in:
Henry Heino 2024-08-31 07:44:12 -07:00 committed by GitHub
parent 3bca12fd4a
commit 4f2d0c8e5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx
View File

@ -51,6 +51,7 @@ const FolderAndTagList: React.FC<Props> = props => {
listItems: listItems, listItems: listItems,
selectedIndex, selectedIndex,
updateSelectedIndex, updateSelectedIndex,
collapsedFolderIds: props.collapsedFolderIds,
}); });
const itemListRef = useRef<ItemList<ListItem>>(); const itemListRef = useRef<ItemList<ListItem>>();

26
packages/app-desktop/gui/Sidebar/hooks/useOnSidebarKeyDownHandler.ts
View File

@ -1,28 +1,44 @@
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import { ListItem, ListItemType, SetSelectedIndexCallback } from '../types'; import { FolderListItem, ListItem, ListItemType, SetSelectedIndexCallback } from '../types';
import { KeyboardEventHandler, useCallback } from 'react'; import { KeyboardEventHandler, useCallback } from 'react';
import CommandService from '@joplin/lib/services/CommandService'; import CommandService from '@joplin/lib/services/CommandService';
interface Props { interface Props {
dispatch: Dispatch; dispatch: Dispatch;
listItems: ListItem[]; listItems: ListItem[];
collapsedFolderIds: string[];
selectedIndex: number; selectedIndex: number;
updateSelectedIndex: SetSelectedIndexCallback; updateSelectedIndex: SetSelectedIndexCallback;
} }
const isToggleShortcut = (keyCode: string, selectedItem: FolderListItem, collapsedFolderIds: string[]) => {
if (!['Space', 'ArrowLeft', 'ArrowRight'].includes(keyCode)) {
return false;
}
if (keyCode === 'Space') {
return true;
}
const isCollapsed = collapsedFolderIds.includes(selectedItem.folder.id);
return (keyCode === 'ArrowRight') === isCollapsed;
};
const useOnSidebarKeyDownHandler = (props: Props) => { const useOnSidebarKeyDownHandler = (props: Props) => {
const { updateSelectedIndex, listItems, selectedIndex, dispatch } = props; const { updateSelectedIndex, listItems, selectedIndex, collapsedFolderIds, dispatch } = props;
return useCallback<KeyboardEventHandler<HTMLElement>>((event) => { return useCallback<KeyboardEventHandler<HTMLElement>>((event) => {
const selectedItem = listItems[selectedIndex]; const selectedItem = listItems[selectedIndex];
if (selectedItem && selectedItem.kind === ListItemType.Folder && event.code === 'Space') { if (selectedItem?.kind === ListItemType.Folder && isToggleShortcut(event.code, selectedItem, collapsedFolderIds)) {
event.preventDefault(); event.preventDefault();
dispatch({ dispatch({
type: 'FOLDER_TOGGLE', type: 'FOLDER_TOGGLE',
id: selectedItem.folder.id, id: selectedItem.folder.id,
}); });
} else if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') { // ctrl+a or cmd+a }
if ((event.ctrlKey || event.metaKey) && event.code === 'KeyA') { // ctrl+a or cmd+a
event.preventDefault(); event.preventDefault();
} }
@ -45,7 +61,7 @@ const useOnSidebarKeyDownHandler = (props: Props) => {
event.preventDefault(); event.preventDefault();
updateSelectedIndex(selectedIndex + indexChange); updateSelectedIndex(selectedIndex + indexChange);
} }
}, [selectedIndex, listItems, updateSelectedIndex, dispatch]); }, [selectedIndex, collapsedFolderIds, listItems, updateSelectedIndex, dispatch]);
}; };
export default useOnSidebarKeyDownHandler; export default useOnSidebarKeyDownHandler;