feat: hotkey, close #27 (#56)

Author: QingWei-Li

components/hotkey-tooltip.tsx

@@ -1,7 +1,9 @@
 import { Tooltip, TooltipProps } from '@material-ui/core'
+import UIState from 'libs/web/state/ui'
+import { noop } from 'lodash'
 import { FC } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 
-// todo: tooltip style
 const Title: FC<{
   text: string
   keys: string[]
@@ -16,13 +18,53 @@ const Title: FC<{
 const HotkeyTooltip: FC<{
   text: string
   keys?: string[]
+  /**
+   * first key
+   */
+  commandKey?: boolean
+  optionKey?: boolean
   onClose?: TooltipProps['onClose']
-}> = ({ text, keys = [], children, onClose }) => {
+  onHotkey?: () => void
+}> = ({
+  text,
+  keys = [],
+  children,
+  onClose,
+  commandKey,
+  optionKey,
+  onHotkey = noop,
+}) => {
+  const {
+    ua: { isMac },
+  } = UIState.useContainer()
+  const keyMap = [...keys]
+
+  if (commandKey) {
+    keyMap.unshift(isMac ? '⌘' : 'ctrl')
+  }
+
+  if (optionKey) {
+    keyMap.unshift(isMac ? '⌥' : 'alt')
+  }
+
+  useHotkeys(
+    keyMap.join('+'),
+    (event) => {
+      event.preventDefault()
+      onHotkey()
+    },
+    {
+      enabled: !!keys.length,
+      enableOnTags: ['INPUT', 'TEXTAREA'],
+      enableOnContentEditable: true,
+    }
+  )
+
   return (
     <Tooltip
       enterDelay={200}
       TransitionProps={{ timeout: 0 }}
-      title={<Title text={text} keys={keys} />}
+      title={<Title text={text} keys={keyMap} />}
       onClose={onClose}
       placement="bottom-start"
     >

components/portal/filter-modal/filter-modal-list.tsx

@@ -1,22 +1,69 @@
 import UIState from 'libs/web/state/ui'
-import { FC, ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 import { use100vh } from 'react-div-100vh'
+import { useHotkeys } from 'react-hotkeys-hook'
 
-const FilterModalList: FC<{
-  ItemComponent: (item: any) => ReactNode
-  items?: any[]
-}> = ({ ItemComponent, items }) => {
+interface ItemProps {
+  selected: boolean
+}
+interface Props<T> {
+  ItemComponent: (item: T, props: ItemProps) => ReactNode
+  items: T[]
+  onEnter?: (item: T) => void
+}
+
+export default function FilterModalList<T>({
+  ItemComponent,
+  items,
+  onEnter,
+}: Props<T>) {
   const {
     ua: { isMobileOnly },
   } = UIState.useContainer()
   const height = use100vh() || 0
   const calcHeight = isMobileOnly ? height : (height * 2) / 3
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  useHotkeys(
+    'down',
+    (event) => {
+      event.preventDefault()
+      setSelectedIndex((prev) => Math.min(items?.length ?? 0, prev + 1))
+    },
+    {
+      enableOnTags: ['INPUT'],
+    }
+  )
+  useHotkeys(
+    'up',
+    (event) => {
+      event.preventDefault()
+      setSelectedIndex((prev) => Math.max(0, prev - 1))
+    },
+    {
+      enableOnTags: ['INPUT'],
+    }
+  )
+  useHotkeys(
+    'enter',
+    (event) => {
+      event.preventDefault()
+      onEnter?.(items[selectedIndex])
+    },
+    {
+      enableOnTags: ['INPUT'],
+    }
+  )
 
   return (
     <>
       {items?.length ? (
         <ul className="list border-t border-gray-100 overflow-auto divide-y divide-gray-100">
-          {items?.map((item) => ItemComponent(item))}
+          {items?.map((item, index) =>
+            ItemComponent(item, {
+              selected: selectedIndex === index,
+            })
+          )}
         </ul>
       ) : null}
       <style jsx>{`
@@ -27,5 +74,3 @@ const FilterModalList: FC<{
     </>
   )
 }
-
-export default FilterModalList

components/portal/search-modal/search-item.tsx

@@ -1,21 +1,32 @@
 import dayjs from 'dayjs'
 import Link from 'next/link'
-import { FC } from 'react'
+import { FC, useRef } from 'react'
 import { NoteCacheItem } from 'libs/web/cache'
 import MarkText from 'components/portal/filter-modal/mark-text'
 import PortalState from 'libs/web/state/portal'
+import classNames from 'classnames'
+import useScrollView from 'libs/web/hooks/use-scroll-view'
 
 const SearchItem: FC<{
   note: NoteCacheItem
   keyword?: string
-}> = ({ note, keyword }) => {
+  selected?: boolean
+}> = ({ note, keyword, selected }) => {
   const {
     search: { close },
   } = PortalState.useContainer()
+  const ref = useRef<HTMLLIElement>(null)
+
+  useScrollView(ref, selected)
 
   return (
-    <li className="hover:bg-gray-200 cursor-pointer">
-      <Link href={`/${note.id}`}>
+    <li
+      ref={ref}
+      className={classNames('hover:bg-gray-200 cursor-pointer', {
+        'bg-gray-300': selected,
+      })}
+    >
+      <Link href={`/${note.id}`} shallow>
         <a className="py-2 px-4 block text-xs text-gray-500" onClick={close}>
           <h4 className="text-sm font-bold">
             <MarkText text={note.title} keyword={keyword} />

components/portal/search-modal/search-modal.tsx

@@ -1,19 +1,29 @@
 import SearchState from 'libs/web/state/search'
-import { FC } from 'react'
+import { FC, useCallback } from 'react'
 import FilterModal from 'components/portal/filter-modal/filter-modal'
 import FilterModalInput from 'components/portal/filter-modal/filter-modal-input'
 import FilterModalList from 'components/portal/filter-modal/filter-modal-list'
 import SearchItem from './search-item'
 import { NoteModel } from 'libs/shared/note'
 import PortalState from 'libs/web/state/portal'
 import useI18n from 'libs/web/hooks/use-i18n'
+import { useRouter } from 'next/router'
 
 const SearchModal: FC = () => {
   const { t } = useI18n()
   const { filterNotes, keyword, list } = SearchState.useContainer()
   const {
     search: { visible, close },
   } = PortalState.useContainer()
+  const router = useRouter()
+
+  const onEnter = useCallback(
+    (item: NoteModel) => {
+      router.push(`/${item.id}`, `/${item.id}`, { shallow: true })
+      close()
+    },
+    [router, close]
+  )
 
   return (
     <FilterModal open={visible} onClose={close}>
@@ -23,10 +33,11 @@ const SearchModal: FC = () => {
         keyword={keyword}
         onClose={close}
       />
-      <FilterModalList
-        items={list}
-        ItemComponent={(item: NoteModel) => (
-          <SearchItem note={item} keyword={keyword} key={item.id} />
+      <FilterModalList<NoteModel>
+        onEnter={onEnter}
+        items={list ?? []}
+        ItemComponent={(item, props) => (
+          <SearchItem note={item} keyword={keyword} key={item.id} {...props} />
         )}
       />
     </FilterModal>

components/portal/trash-modal/trash-item.tsx

@@ -1,22 +1,26 @@
 import Link from 'next/link'
-import { FC, useCallback } from 'react'
+import { FC, useCallback, useRef } from 'react'
 import { NoteCacheItem } from 'libs/web/cache'
 import MarkText from 'components/portal/filter-modal/mark-text'
 import IconButton from 'components/icon-button'
 import HotkeyTooltip from 'components/hotkey-tooltip'
 import TrashState from 'libs/web/state/trash'
 import PortalState from 'libs/web/state/portal'
 import useI18n from 'libs/web/hooks/use-i18n'
+import classNames from 'classnames'
+import useScrollView from 'libs/web/hooks/use-scroll-view'
 
 const TrashItem: FC<{
   note: NoteCacheItem
   keyword?: string
-}> = ({ note, keyword }) => {
+  selected?: boolean
+}> = ({ note, keyword, selected }) => {
   const { t } = useI18n()
   const { restoreNote, deleteNote, filterNotes } = TrashState.useContainer()
   const {
     trash: { close },
   } = PortalState.useContainer()
+  const ref = useRef<HTMLLIElement>(null)
 
   const onClickRestore = useCallback(async () => {
     await restoreNote(note)
@@ -28,9 +32,16 @@ const TrashItem: FC<{
     filterNotes(keyword)
   }, [deleteNote, note.id, filterNotes, keyword])
 
+  useScrollView(ref, selected)
+
   return (
-    <li className="hover:bg-gray-200 cursor-pointer py-2 px-4 flex">
-      <Link href={`/${note.id}`}>
+    <li
+      ref={ref}
+      className={classNames('hover:bg-gray-200 cursor-pointer py-2 px-4 flex', {
+        'bg-gray-300': selected,
+      })}
+    >
+      <Link href={`/${note.id}`} shallow>
         <a className=" block text-xs text-gray-500 flex-grow" onClick={close}>
           <h4 className="text-sm font-bold">
             <MarkText text={note.title} keyword={keyword} />

components/portal/trash-modal/trash-modal.tsx

@@ -1,17 +1,27 @@
-import { FC, useEffect } from 'react'
+import { FC, useCallback, useEffect } from 'react'
 import FilterModal from 'components/portal/filter-modal/filter-modal'
 import FilterModalInput from 'components/portal/filter-modal/filter-modal-input'
 import FilterModalList from 'components/portal/filter-modal/filter-modal-list'
 import TrashItem from './trash-item'
 import { NoteModel } from 'libs/shared/note'
 import TrashState from 'libs/web/state/trash'
 import PortalState from 'libs/web/state/portal'
+import { useRouter } from 'next/router'
 
 const TrashModal: FC = () => {
   const { filterNotes, keyword, list } = TrashState.useContainer()
   const {
     trash: { visible, close },
   } = PortalState.useContainer()
+  const router = useRouter()
+
+  const onEnter = useCallback(
+    (item: NoteModel) => {
+      router.push(`/${item.id}`, `/${item.id}`, { shallow: true })
+      close()
+    },
+    [router, close]
+  )
 
   useEffect(() => {
     if (visible) {
@@ -27,10 +37,11 @@ const TrashModal: FC = () => {
         keyword={keyword}
         onClose={close}
       />
-      <FilterModalList
-        items={list}
-        ItemComponent={(item: NoteModel) => (
-          <TrashItem note={item} keyword={keyword} key={item.id} />
+      <FilterModalList<NoteModel>
+        onEnter={onEnter}
+        items={list ?? []}
+        ItemComponent={(item, props) => (
+          <TrashItem note={item} keyword={keyword} key={item.id} {...props} />
         )}
       />
     </FilterModal>

components/sidebar/sidebar-list.tsx

@@ -46,16 +46,23 @@ const SideBarList = () => {
     [moveItem]
   )
 
+  const onCreateNote = useCallback(() => {
+    router.push('/new', undefined, { shallow: true })
+  }, [])
+
   return (
     <section className="h-full flex text-sm flex-col flex-grow bg-gray-100 overflow-hidden">
       <div className="p-2 text-gray-500 flex items-center">
         <span className="flex-auto">{t('My Pages')}</span>
-        <HotkeyTooltip text={t('Create page')} keys={['cmd', 'n']}>
+        <HotkeyTooltip
+          text={t('Create page')}
+          commandKey
+          onHotkey={onCreateNote}
+          keys={['O']}
+        >
           <IconButton
             icon="Plus"
-            onClick={() => {
-              router.push('/new', undefined, { shallow: true })
-            }}
+            onClick={onCreateNote}
             className="text-gray-700"
           ></IconButton>
         </HotkeyTooltip>