rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: preview modal keyboard handling (#1345)

Browse Source
This commit is contained in:
Aman Harwara
2022-07-26 15:54:15 +05:30
committed by GitHub
parent 6f7dfaa9f6
commit 9bc7533010
1 changed files with 33 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/web/src/javascripts/Components/FilePreview/FilePreviewModal.tsx
View File

@@ -27,9 +27,9 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
const keyDownHandler: KeyboardEventHandler = useCallback( const keyDownHandler: KeyboardEventHandler = useCallback(
(event) => { (event) => {
const hasNotPressedLeftOrRightKeys = event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right const KeysToHandle: string[] = [KeyboardKey.Left, KeyboardKey.Right, KeyboardKey.Escape]
if (hasNotPressedLeftOrRightKeys) { if (!KeysToHandle.includes(event.key)) {
return return
} }
@@ -54,9 +54,12 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
} }
break break
} }
case KeyboardKey.Escape:
dismiss()
break
} }
}, },
[currentFile.uuid, otherFiles, setCurrentFile], [currentFile.uuid, dismiss, otherFiles, setCurrentFile],
) )
const IconComponent = useMemo( const IconComponent = useMemo(
@@ -81,10 +84,11 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
className="flex min-h-[90%] min-w-[90%] flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main " className="flex min-h-[90%] min-w-[90%] flex-col rounded bg-[color:var(--modal-background-color)] p-0 shadow-main "
> >
<div <div
className="min-h-6 flex flex-shrink-0 items-center justify-between border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none" className="flex h-full w-full flex-col focus:shadow-none focus:outline-none"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE} tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
onKeyDown={keyDownHandler} onKeyDown={keyDownHandler}
> >
<div className="min-h-6 flex flex-shrink-0 items-center justify-between border-0 border-b border-solid border-border px-4 py-3 focus:shadow-none">
<div className="flex items-center"> <div className="flex items-center">
<div className="h-6 w-6">{IconComponent}</div> <div className="h-6 w-6">{IconComponent}</div>
<span className="ml-3 font-medium">{currentFile.name}</span> <span className="ml-3 font-medium">{currentFile.name}</span>
@@ -112,6 +116,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
</div> </div>
{showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />} {showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
</div> </div>
</div>
</DialogContent> </DialogContent>
</DialogOverlay> </DialogOverlay>
) )