diff --git a/components/pages/Constellation.tsx b/components/pages/Constellation.tsx index c3368ad..947a336 100644 --- a/components/pages/Constellation.tsx +++ b/components/pages/Constellation.tsx @@ -16,7 +16,7 @@ import { } from '@ionic/react' import { useLiveQuery } from 'dexie-react-hooks' import { add, starOutline } from 'ionicons/icons' -import { useCallback, useRef } from 'react' +import { RefObject, useCallback, useEffect, useRef } from 'react' import { db } from '../db' import { useCreateStarRoleModal } from '../starRoles/create/useCreateStarRoleModal' @@ -25,7 +25,7 @@ export default function Constellation() { const isLoading = starRoles === undefined const fab = useRef(null) - const [presentCreateStarRoleModal, dismiss] = useCreateStarRoleModal() + const [presentCreateStarRoleModal, _dismiss] = useCreateStarRoleModal() const openCreateStarRoleModal = useCallback(() => { presentCreateStarRoleModal({ onWillDismiss: () => { @@ -34,6 +34,8 @@ export default function Constellation() { }) }, [fab, presentCreateStarRoleModal]) + useGlobalKeyboardShortcuts(fab, openCreateStarRoleModal) + return ( @@ -92,3 +94,24 @@ export default function Constellation() { ) } + +function useGlobalKeyboardShortcuts( + fab: RefObject, + openCreateStarRoleModal: any, +) { + useEffect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.target !== document.body) return + + if (event.key === 'c') { + event.preventDefault() + openCreateStarRoleModal() + if (fab.current) fab.current.activated = true + } + } + document.addEventListener('keydown', handleKeyDown) + return () => { + document.removeEventListener('keydown', handleKeyDown) + } + }, [fab, openCreateStarRoleModal]) +} diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx index 4364e82..7a47fb3 100644 --- a/components/pages/Home.tsx +++ b/components/pages/Home.tsx @@ -1,4 +1,3 @@ -import { SyncStatePhase } from 'dexie-cloud-addon' import { menuController } from '@ionic/core/components' import { IonButton, @@ -86,7 +85,7 @@ const Home = () => { const contentRef = useRef(null) const searchbarRef = useRef(null) - useGlobalKeyboardShortcuts(contentRef, searchbarRef, openCreateTodoModal) + useGlobalKeyboardShortcuts(contentRef, searchbarRef, fab, openCreateTodoModal) const [enablePagination, setEnablePagination] = useState(false) @@ -875,13 +874,6 @@ export const Searchbar = forwardRef( return ( { - if (event.key === 'Escape') { - event.preventDefault() - const target = event.target as HTMLIonSearchbarElement - target.getElementsByTagName('input')[0].blur() - } - }} debounce={100} onIonInput={event => { const target = event.target as HTMLIonSearchbarElement @@ -925,6 +917,7 @@ function matchesQuery(query: string, todo: Todo) { function useGlobalKeyboardShortcuts( contentRef: RefObject, searchbarRef: RefObject, + fab: RefObject, openCreateTodoModal: any, ) { useEffect(() => { @@ -945,6 +938,7 @@ function useGlobalKeyboardShortcuts( if (event.key === 'c') { event.preventDefault() openCreateTodoModal() + if (fab.current) fab.current.activated = true } else if (event.key === 's') { event.preventDefault() contentRef.current?.scrollToBottom(500) @@ -954,5 +948,5 @@ function useGlobalKeyboardShortcuts( return () => { document.removeEventListener('keydown', handleKeyDown) } - }, [contentRef, openCreateTodoModal, searchbarRef]) + }, [contentRef, fab, openCreateTodoModal, searchbarRef]) } diff --git a/components/todos/TodoModal.tsx b/components/todos/TodoModal.tsx index 5cbde15..39a1f81 100644 --- a/components/todos/TodoModal.tsx +++ b/components/todos/TodoModal.tsx @@ -79,6 +79,7 @@ export default function TodoModal({