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(
(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
}
@@ -54,9 +54,12 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
}
break
}
case KeyboardKey.Escape:
dismiss()
break
}
},
[currentFile.uuid, otherFiles, setCurrentFile],
[currentFile.uuid, dismiss, otherFiles, setCurrentFile],
)
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 "
>
<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}
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="h-6 w-6">{IconComponent}</div>
<span className="ml-3 font-medium">{currentFile.name}</span>
@@ -112,6 +116,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, view
</div>
{showFileInfoPanel && <FilePreviewInfoPanel file={currentFile} />}
</div>
</div>
</DialogContent>
</DialogOverlay>
)