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

feat: preview next/prev files using arrow keys (#1004)

Browse Source
This commit is contained in:
Aman Harwara
2022-04-27 22:53:42 +05:30
committed by GitHub
parent e7fb9b67f8
commit 96be0d578d
5 changed files with 111 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesButton.tsx
View File

@@ -60,23 +60,29 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
const containerRef = useRef<HTMLDivElement>(null)
const [closeOnBlur, keepMenuOpen] = useCloseOnBlur(containerRef, setOpen)
const [attachedFilesCount, setAttachedFilesCount] = useState(
note ? application.items.getFilesForNote(note).length : 0,
)
const reloadAttachedFilesCount = useCallback(() => {
setAttachedFilesCount(note ? application.items.getFilesForNote(note).length : 0)
}, [application.items, note])
const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
const [allFiles, setAllFiles] = useState<SNFile[]>([])
const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([])
const attachedFilesCount = attachedFiles.length
useEffect(() => {
const unregisterFileStream = application.streamItems(ContentType.File, () => {
reloadAttachedFilesCount()
setAllFiles(
application.items
.getItems<SNFile>(ContentType.File)
.sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
)
setAttachedFiles(
application.items
.getFilesForNote(note)
.sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
)
})
return () => {
unregisterFileStream()
}
}, [application, reloadAttachedFilesCount])
}, [application, note])
const toggleAttachedFilesMenu = useCallback(async () => {
if (!appState.features.isEntitledToFiles) {
@@ -213,7 +219,10 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
await renameFile(file, action.payload.name)
break
case PopoverFileItemActionType.PreviewFile:
filePreviewModal.activate(file)
filePreviewModal.activate(
file,
currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles,
)
break
}
@@ -228,7 +237,6 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
}
const [isDraggingFiles, setIsDraggingFiles] = useState(false)
const [currentTab, setCurrentTab] = useState(PopoverTabs.AttachedFiles)
const dragCounter = useRef(0)
const handleDrag = (event: DragEvent) => {
@@ -373,12 +381,13 @@ export const AttachedFilesButton: FunctionComponent<Props> = observer(
<AttachedFilesPopover
application={application}
appState={appState}
note={note}
handleFileAction={handleFileAction}
currentTab={currentTab}
attachedFiles={attachedFiles}
allFiles={allFiles}
closeOnBlur={closeOnBlur}
setCurrentTab={setCurrentTab}
currentTab={currentTab}
handleFileAction={handleFileAction}
isDraggingFiles={isDraggingFiles}
setCurrentTab={setCurrentTab}
/>
)}
</DisclosurePanel>

36
app/assets/javascripts/Components/AttachedFilesPopover/AttachedFilesPopover.tsx
View File

@@ -1,11 +1,11 @@
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
import { WebApplication } from '@/UIModels/Application'
import { AppState } from '@/UIModels/AppState'
import { ContentType, SNFile, SNNote } from '@standardnotes/snjs'
import { SNFile } from '@standardnotes/snjs'
import { FilesIllustration } from '@standardnotes/stylekit'
import { observer } from 'mobx-react-lite'
import { FunctionComponent } from 'preact'
import { StateUpdater, useEffect, useRef, useState } from 'preact/hooks'
import { StateUpdater, useRef, useState } from 'preact/hooks'
import { Button } from '@/Components/Button/Button'
import { Icon } from '@/Components/Icon'
import { PopoverFileItem } from './PopoverFileItem'
@@ -19,11 +19,12 @@ export enum PopoverTabs {
type Props = {
application: WebApplication
appState: AppState
currentTab: PopoverTabs
allFiles: SNFile[]
attachedFiles: SNFile[]
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
currentTab: PopoverTabs
handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
isDraggingFiles: boolean
note: SNNote
setCurrentTab: StateUpdater<PopoverTabs>
}
@@ -31,15 +32,14 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
({
application,
appState,
currentTab,
allFiles,
attachedFiles,
closeOnBlur,
currentTab,
handleFileAction,
isDraggingFiles,
note,
setCurrentTab,
}) => {
const [attachedFiles, setAttachedFiles] = useState<SNFile[]>([])
const [allFiles, setAllFiles] = useState<SNFile[]>([])
const [searchQuery, setSearchQuery] = useState('')
const searchInputRef = useRef<HTMLInputElement>(null)
@@ -52,26 +52,6 @@ export const AttachedFilesPopover: FunctionComponent<Props> = observer(
)
: filesList
useEffect(() => {
const unregisterFileStream = application.streamItems(ContentType.File, () => {
setAttachedFiles(
application.items
.getFilesForNote(note)
.sort((a, b) => (a.created_at < b.created_at ? 1 : -1)),
)
setAllFiles(
application.items
.getItems(ContentType.File)
.sort((a, b) => (a.created_at < b.created_at ? 1 : -1)) as SNFile[],
)
})
return () => {
unregisterFileStream()
}
}, [application, note])
const handleAttachFilesClick = async () => {
const uploadedFiles = await appState.files.uploadNewFile()
if (!uploadedFiles) {

66
app/assets/javascripts/Components/Files/FilePreviewModal.tsx
View File

@@ -11,18 +11,30 @@ import { Icon } from '@/Components/Icon'
import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
import { isFileTypePreviewable } from './isFilePreviewable'
import { PreviewComponent } from './PreviewComponent'
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
import { useFilePreviewModal } from './FilePreviewModalProvider'
import { KeyboardKey } from '@/Services/IOService'
type Props = {
application: WebApplication
files: SNFile[]
file: SNFile
onDismiss: () => void
}
export const FilePreviewModal: FunctionComponent<Props> = ({ application, file, onDismiss }) => {
export const FilePreviewModal: FunctionComponent<Props> = ({
application,
files,
file,
onDismiss,
}) => {
const context = useFilePreviewModal()
const [objectUrl, setObjectUrl] = useState<string>()
const [isFilePreviewable, setIsFilePreviewable] = useState(false)
const [isLoadingFile, setIsLoadingFile] = useState(true)
const [showFileInfoPanel, setShowFileInfoPanel] = useState(false)
const currentFileIdRef = useRef<string>()
const closeButtonRef = useRef<HTMLButtonElement>(null)
const getObjectUrl = useCallback(async () => {
@@ -46,6 +58,10 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
}
}, [application.files, file])
useEffect(() => {
setIsLoadingFile(true)
}, [file.uuid])
useEffect(() => {
const isPreviewable = isFileTypePreviewable(file.mimeType)
setIsFilePreviewable(isPreviewable)
@@ -54,16 +70,48 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
setIsLoadingFile(false)
}
if (!objectUrl && isPreviewable) {
if (currentFileIdRef.current !== file.uuid && isPreviewable) {
getObjectUrl().catch(console.error)
}
currentFileIdRef.current = file.uuid
return () => {
if (objectUrl) {
URL.revokeObjectURL(objectUrl)
}
}
}, [file.mimeType, getObjectUrl, objectUrl])
}, [file, getObjectUrl, objectUrl])
const keyDownHandler = (event: KeyboardEvent) => {
if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
return
}
event.preventDefault()
const currentFileIndex = files.findIndex((fileFromArray) => fileFromArray.uuid === file.uuid)
switch (event.key) {
case KeyboardKey.Left: {
const previousFileIndex =
currentFileIndex - 1 >= 0 ? currentFileIndex - 1 : files.length - 1
const previousFile = files[previousFileIndex]
if (previousFile) {
context.setCurrentFile(previousFile)
}
break
}
case KeyboardKey.Right: {
const nextFileIndex = currentFileIndex + 1 < files.length ? currentFileIndex + 1 : 0
const nextFile = files[nextFileIndex]
if (nextFile) {
context.setCurrentFile(nextFile)
}
break
}
}
}
return (
<DialogOverlay
@@ -81,7 +129,11 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
background: 'var(--sn-stylekit-background-color)',
}}
>
<div className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b-1 border-solid border-main">
<div
className="flex flex-shrink-0 justify-between items-center min-h-6 px-4 py-3 border-0 border-b-1 border-solid border-main focus:shadow-none"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
onKeyDown={keyDownHandler}
>
<div className="flex items-center">
<div className="w-6 h-6">
{getFileIconComponent(
@@ -121,10 +173,10 @@ export const FilePreviewModal: FunctionComponent<Props> = ({ application, file,
</div>
<div className="flex flex-grow min-h-0">
<div className="flex flex-grow items-center justify-center relative max-w-full">
{objectUrl ? (
<PreviewComponent file={file} objectUrl={objectUrl} />
) : isLoadingFile ? (
{isLoadingFile ? (
<div className="sk-spinner w-5 h-5 spinner-info"></div>
) : objectUrl ? (
<PreviewComponent file={file} objectUrl={objectUrl} />
) : (
<div className="flex flex-col items-center">
<NoPreviewIllustration className="w-30 h-30 mb-4" />

26
app/assets/javascripts/Components/Files/FilePreviewModalProvider.tsx
View File

@@ -4,8 +4,11 @@ import { createContext, FunctionComponent } from 'preact'
import { useContext, useState } from 'preact/hooks'
import { FilePreviewModal } from './FilePreviewModal'
type FilePreviewActivateFunction = (file: SNFile, files: SNFile[]) => void
type FilePreviewModalContextData = {
activate: (file: SNFile) => void
activate: FilePreviewActivateFunction
setCurrentFile: (file: SNFile) => void
}
const FilePreviewModalContext = createContext<FilePreviewModalContextData | null>(null)
@@ -24,10 +27,12 @@ export const FilePreviewModalProvider: FunctionComponent<{
application: WebApplication
}> = ({ application, children }) => {
const [isOpen, setIsOpen] = useState(false)
const [file, setFile] = useState<SNFile>()
const [currentFile, setCurrentFile] = useState<SNFile>()
const [files, setFiles] = useState<SNFile[]>([])
const activate = (file: SNFile) => {
setFile(file)
const activate: FilePreviewActivateFunction = (file, files) => {
setCurrentFile(file)
setFiles(files)
setIsOpen(true)
}
@@ -37,10 +42,15 @@ export const FilePreviewModalProvider: FunctionComponent<{
return (
<>
{isOpen && file && (
<FilePreviewModal application={application} file={file} onDismiss={close} />
)}
<FilePreviewModalContext.Provider value={{ activate }}>
<FilePreviewModalContext.Provider value={{ activate, setCurrentFile }}>
{isOpen && currentFile && (
<FilePreviewModal
application={application}
files={files}
file={currentFile}
onDismiss={close}
/>
)}
{children}
</FilePreviewModalContext.Provider>
</>

2
app/assets/javascripts/Services/IOService.ts
View File

@@ -5,6 +5,8 @@ export enum KeyboardKey {
Backspace = 'Backspace',
Up = 'ArrowUp',
Down = 'ArrowDown',
Left = 'ArrowLeft',
Right = 'ArrowRight',
Enter = 'Enter',
Escape = 'Escape',
Home = 'Home',