diff --git a/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx b/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx index 63517e181..85bb46069 100644 --- a/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx +++ b/packages/app-desktop/gui/Sidebar/FolderAndTagList.tsx @@ -51,6 +51,7 @@ const FolderAndTagList: React.FC = props => { listItems: listItems, selectedIndex, updateSelectedIndex, + collapsedFolderIds: props.collapsedFolderIds, }); const itemListRef = useRef>(); diff --git a/packages/app-desktop/gui/Sidebar/hooks/useOnSidebarKeyDownHandler.ts b/packages/app-desktop/gui/Sidebar/hooks/useOnSidebarKeyDownHandler.ts index ab71369bc..acd335c3e 100644 --- a/packages/app-desktop/gui/Sidebar/hooks/useOnSidebarKeyDownHandler.ts +++ b/packages/app-desktop/gui/Sidebar/hooks/useOnSidebarKeyDownHandler.ts @@ -1,28 +1,44 @@ import { Dispatch } from 'redux'; -import { ListItem, ListItemType, SetSelectedIndexCallback } from '../types'; +import { FolderListItem, ListItem, ListItemType, SetSelectedIndexCallback } from '../types'; import { KeyboardEventHandler, useCallback } from 'react'; import CommandService from '@joplin/lib/services/CommandService'; interface Props { dispatch: Dispatch; listItems: ListItem[]; + collapsedFolderIds: string[]; selectedIndex: number; 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 { updateSelectedIndex, listItems, selectedIndex, dispatch } = props; + const { updateSelectedIndex, listItems, selectedIndex, collapsedFolderIds, dispatch } = props; return useCallback>((event) => { 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(); dispatch({ type: 'FOLDER_TOGGLE', 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(); } @@ -45,7 +61,7 @@ const useOnSidebarKeyDownHandler = (props: Props) => { event.preventDefault(); updateSelectedIndex(selectedIndex + indexChange); } - }, [selectedIndex, listItems, updateSelectedIndex, dispatch]); + }, [selectedIndex, collapsedFolderIds, listItems, updateSelectedIndex, dispatch]); }; export default useOnSidebarKeyDownHandler;