Modal add Esc shortcut

This commit is contained in:
Sanster 2022-02-08 21:41:47 +08:00
parent 3db21e7e95
commit 38010a9556
2 changed files with 7 additions and 3 deletions

View File

@ -1,6 +1,6 @@
import { XIcon } from '@heroicons/react/outline'
import React, { ReactNode, useRef } from 'react'
import { useClickAway } from 'react-use'
import { useClickAway, useKey } from 'react-use'
import Button from './Button'
interface ModalProps {
@ -17,6 +17,10 @@ export default function Modal(props: ModalProps) {
onClose?.()
})
useKey('Escape', onClose, {
event: 'keydown',
})
return (
<div
className={[

View File

@ -31,8 +31,8 @@ export default function ShortcutsModal(props: ShortcutsModalProps) {
<ShortCut content="Enable multi-stroke mask drawing">
<p>Hold Cmd/Ctrl</p>
</ShortCut>
<ShortCut content="Enable panning">
<p>Hold Space</p>
<ShortCut content="Pan">
<p>Space & Drag</p>
</ShortCut>
<ShortCut content="View original image">
<p>Hold Tab</p>