diff --git a/api-editor/gui/src/features/annotations/batchforms/AnnotationBatchForm.tsx b/api-editor/gui/src/features/annotations/batchforms/AnnotationBatchForm.tsx index c4c1adda6..d2048d889 100644 --- a/api-editor/gui/src/features/annotations/batchforms/AnnotationBatchForm.tsx +++ b/api-editor/gui/src/features/annotations/batchforms/AnnotationBatchForm.tsx @@ -1,11 +1,12 @@ -import { Button, Heading, HStack, Stack, Text as ChakraText } from '@chakra-ui/react'; +import { Button, Heading, HStack, Stack, Text as ChakraText, Tooltip } from '@chakra-ui/react'; import React from 'react'; +import { useKeyboardShortcut } from '../../../app/hooks'; interface AnnotationFormProps { heading: string; description: string; - onConfirm: React.MouseEventHandler; - onCancel: React.MouseEventHandler; + onConfirm: () => void; + onCancel: () => void; children: React.ReactNode; } @@ -16,6 +17,9 @@ export const AnnotationBatchForm: React.FC = function ({ onConfirm, children, }) { + useKeyboardShortcut(false, true, false, 'Enter', onConfirm); + useKeyboardShortcut(false, false, false, 'Escape', onCancel); + return ( @@ -29,12 +33,16 @@ export const AnnotationBatchForm: React.FC = function ({ {children} - - + + + + + + ); diff --git a/api-editor/gui/src/features/annotations/forms/AnnotationForm.tsx b/api-editor/gui/src/features/annotations/forms/AnnotationForm.tsx index 9c690c559..8880e66c2 100644 --- a/api-editor/gui/src/features/annotations/forms/AnnotationForm.tsx +++ b/api-editor/gui/src/features/annotations/forms/AnnotationForm.tsx @@ -1,11 +1,12 @@ -import { Button, Heading, HStack, Stack, Text as ChakraText } from '@chakra-ui/react'; +import { Button, Heading, HStack, Stack, Text as ChakraText, Tooltip } from '@chakra-ui/react'; import React from 'react'; +import { useKeyboardShortcut } from '../../../app/hooks'; interface AnnotationFormProps { heading: string; description: string; - onSave: React.MouseEventHandler; - onCancel: React.MouseEventHandler; + onSave: () => void; + onCancel: () => void; children: React.ReactNode; } @@ -16,6 +17,9 @@ export const AnnotationForm: React.FC = function ({ onSave, children, }) { + useKeyboardShortcut(false, true, false, 'Enter', onSave); + useKeyboardShortcut(false, false, false, 'Escape', onCancel); + return ( @@ -29,12 +33,16 @@ export const AnnotationForm: React.FC = function ({ {children} - - + + + + + + );