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

feat: multiple files selected view (#1062)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-03 12:19:22 +05:30
committed by GitHub
parent 462199406c
commit 4caf958659
17 changed files with 399 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,11 +7,9 @@ import { observer } from 'mobx-react-lite'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { ChallengeReason, ContentType, FileItem, SNNote } from '@standardnotes/snjs'
import { confirmDialog } from '@/Services/AlertService'
import { addToast, dismissToast, ToastType } from '@standardnotes/stylekit'
import { ContentType, FileItem, SNNote } from '@standardnotes/snjs'
import { addToast, ToastType } from '@standardnotes/stylekit'
import { StreamingFileReader } from '@standardnotes/filepicker'
import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
import AttachedFilesPopover from './AttachedFilesPopover'
import { usePremiumModal } from '@/Hooks/usePremiumModal'
import { PopoverTabs } from './PopoverTabs'
@@ -105,29 +103,6 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
await toggleAttachedFilesMenu()
}, [toggleAttachedFilesMenu, prospectivelyShowFilesPremiumModal])
const deleteFile = async (file: FileItem) => {
const shouldDelete = await confirmDialog({
text: `Are you sure you want to permanently delete "${file.name}"?`,
confirmButtonStyle: 'danger',
})
if (shouldDelete) {
const deletingToastId = addToast({
type: ToastType.Loading,
message: `Deleting file "${file.name}"...`,
})
await application.files.deleteFile(file)
addToast({
type: ToastType.Success,
message: `Deleted file "${file.name}"`,
})
dismissToast(deletingToastId)
}
}
const downloadFile = async (file: FileItem) => {
viewControllerManager.filesController.downloadFile(file).catch(console.error)
}
const attachFileToNote = useCallback(
async (file: FileItem) => {
if (!note) {
@@ -143,98 +118,6 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
[application.items, note],
)
const detachFileFromNote = async (file: FileItem) => {
if (!note) {
addToast({
type: ToastType.Error,
message: 'Could not attach file because selected note was deleted',
})
return
}
await application.items.disassociateFileWithNote(file, note)
}
const toggleFileProtection = async (file: FileItem) => {
let result: FileItem | undefined
if (file.protected) {
keepMenuOpen(true)
result = await application.mutator.unprotectFile(file)
keepMenuOpen(false)
buttonRef.current?.focus()
} else {
result = await application.mutator.protectFile(file)
}
const isProtected = result ? result.protected : file.protected
return isProtected
}
const authorizeProtectedActionForFile = async (file: FileItem, challengeReason: ChallengeReason) => {
const authorizedFiles = await application.protections.authorizeProtectedActionForItems([file], challengeReason)
const isAuthorized = authorizedFiles.length > 0 && authorizedFiles.includes(file)
return isAuthorized
}
const renameFile = async (file: FileItem, fileName: string) => {
await application.items.renameFile(file, fileName)
}
const handleFileAction = async (action: PopoverFileItemAction) => {
const file = action.type !== PopoverFileItemActionType.RenameFile ? action.payload : action.payload.file
let isAuthorizedForAction = true
if (file.protected && action.type !== PopoverFileItemActionType.ToggleFileProtection) {
keepMenuOpen(true)
isAuthorizedForAction = await authorizeProtectedActionForFile(file, ChallengeReason.AccessProtectedFile)
keepMenuOpen(false)
buttonRef.current?.focus()
}
if (!isAuthorizedForAction) {
return false
}
switch (action.type) {
case PopoverFileItemActionType.AttachFileToNote:
await attachFileToNote(file)
break
case PopoverFileItemActionType.DetachFileToNote:
await detachFileFromNote(file)
break
case PopoverFileItemActionType.DeleteFile:
await deleteFile(file)
break
case PopoverFileItemActionType.DownloadFile:
await downloadFile(file)
break
case PopoverFileItemActionType.ToggleFileProtection: {
const isProtected = await toggleFileProtection(file)
action.callback(isProtected)
break
}
case PopoverFileItemActionType.RenameFile:
await renameFile(file, action.payload.name)
break
case PopoverFileItemActionType.PreviewFile: {
keepMenuOpen(true)
const otherFiles = currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles
viewControllerManager.filePreviewModalController.activate(
file,
otherFiles.filter((file) => !file.protected),
)
break
}
}
if (
action.type !== PopoverFileItemActionType.DownloadFile &&
action.type !== PopoverFileItemActionType.PreviewFile
) {
application.sync.sync().catch(console.error)
}
return true
}
const [isDraggingFiles, setIsDraggingFiles] = useState(false)
const dragCounter = useRef(0)
@@ -400,12 +283,11 @@ const AttachedFilesButton: FunctionComponent<Props> = ({
{open && (
<AttachedFilesPopover
application={application}
viewControllerManager={viewControllerManager}
filesController={viewControllerManager.filesController}
attachedFiles={attachedFiles}
allFiles={allFiles}
closeOnBlur={closeOnBlur}
currentTab={currentTab}
handleFileAction={handleFileAction}
isDraggingFiles={isDraggingFiles}
setCurrentTab={setCurrentTab}
/>

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

@@ -1,6 +1,5 @@
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
import { WebApplication } from '@/Application/Application'
import { ViewControllerManager } from '@/Services/ViewControllerManager'
import { FileItem } from '@standardnotes/snjs'
import { FilesIllustration } from '@standardnotes/icons'
import { observer } from 'mobx-react-lite'
@@ -8,29 +7,28 @@ import { Dispatch, FunctionComponent, SetStateAction, useRef, useState } from 'r
import Button from '@/Components/Button/Button'
import Icon from '@/Components/Icon/Icon'
import PopoverFileItem from './PopoverFileItem'
import { PopoverFileItemAction, PopoverFileItemActionType } from './PopoverFileItemAction'
import { PopoverFileItemActionType } from './PopoverFileItemAction'
import { PopoverTabs } from './PopoverTabs'
import { FilesController } from '@/Controllers/FilesController'
type Props = {
application: WebApplication
viewControllerManager: ViewControllerManager
filesController: FilesController
allFiles: FileItem[]
attachedFiles: FileItem[]
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
currentTab: PopoverTabs
handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
isDraggingFiles: boolean
setCurrentTab: Dispatch<SetStateAction<PopoverTabs>>
}
const AttachedFilesPopover: FunctionComponent<Props> = ({
application,
viewControllerManager,
filesController,
allFiles,
attachedFiles,
closeOnBlur,
currentTab,
handleFileAction,
isDraggingFiles,
setCurrentTab,
}) => {
@@ -45,20 +43,31 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
: filesList
const handleAttachFilesClick = async () => {
const uploadedFiles = await viewControllerManager.filesController.uploadNewFile()
const uploadedFiles = await filesController.uploadNewFile()
if (!uploadedFiles) {
return
}
if (currentTab === PopoverTabs.AttachedFiles) {
uploadedFiles.forEach((file) => {
handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote,
payload: file,
}).catch(console.error)
filesController
.handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote,
payload: { file },
})
.catch(console.error)
})
}
}
const previewHandler = (file: FileItem) => {
filesController
.handleFileAction({
type: PopoverFileItemActionType.PreviewFile,
payload: { file, otherFiles: currentTab === PopoverTabs.AllFiles ? allFiles : attachedFiles },
})
.catch(console.error)
}
return (
<div
className="flex flex-col"
@@ -130,9 +139,10 @@ const AttachedFilesPopover: FunctionComponent<Props> = ({
key={file.uuid}
file={file}
isAttachedToNote={attachedFiles.includes(file)}
handleFileAction={handleFileAction}
handleFileAction={filesController.handleFileAction}
getIconType={application.iconsController.getIconForFileType}
closeOnBlur={closeOnBlur}
previewHandler={previewHandler}
/>
)
})

76
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItem.tsx
View File

@@ -2,7 +2,15 @@ import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
import { KeyboardKey } from '@/Services/IOService'
import { formatSizeToReadableString } from '@standardnotes/filepicker'
import { FileItem } from '@standardnotes/snjs'
import { FormEventHandler, FunctionComponent, KeyboardEventHandler, useEffect, useRef, useState } from 'react'
import {
FormEventHandler,
FunctionComponent,
KeyboardEventHandler,
useCallback,
useEffect,
useRef,
useState,
} from 'react'
import Icon from '@/Components/Icon/Icon'
import { PopoverFileItemActionType } from './PopoverFileItemAction'
import PopoverFileSubmenu from './PopoverFileSubmenu'
@@ -15,6 +23,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
handleFileAction,
getIconType,
closeOnBlur,
previewHandler,
}) => {
const [fileName, setFileName] = useState(file.name)
const [isRenamingFile, setIsRenamingFile] = useState(false)
@@ -27,37 +36,48 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
}
}, [isRenamingFile])
const renameFile = async (file: FileItem, name: string) => {
await handleFileAction({
type: PopoverFileItemActionType.RenameFile,
payload: {
file,
name,
},
})
setIsRenamingFile(false)
}
const renameFile = useCallback(
async (file: FileItem, name: string) => {
if (name.length < 1) {
return
}
const handleFileNameInput: FormEventHandler<HTMLInputElement> = (event) => {
await handleFileAction({
type: PopoverFileItemActionType.RenameFile,
payload: {
file,
name,
},
})
setIsRenamingFile(false)
},
[handleFileAction],
)
const handleFileNameInput: FormEventHandler<HTMLInputElement> = useCallback((event) => {
setFileName((event.target as HTMLInputElement).value)
}
}, [])
const handleFileNameInputKeyDown: KeyboardEventHandler = (event) => {
if (event.key === KeyboardKey.Enter) {
itemRef.current?.focus()
}
}
const handleFileNameInputKeyDown: KeyboardEventHandler = useCallback(
(event) => {
if (fileName.length > 0 && event.key === KeyboardKey.Enter) {
itemRef.current?.focus()
}
},
[fileName.length],
)
const handleFileNameInputBlur = () => {
const handleFileNameInputBlur = useCallback(() => {
renameFile(file, fileName).catch(console.error)
}
}, [file, fileName, renameFile])
const clickPreviewHandler = () => {
handleFileAction({
type: PopoverFileItemActionType.PreviewFile,
payload: file,
}).catch(console.error)
}
const handleClick = useCallback(() => {
if (isRenamingFile) {
return
}
previewHandler(file)
}, [file, isRenamingFile, previewHandler])
return (
<div
@@ -65,7 +85,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
className="flex items-center justify-between p-3 focus:shadow-none"
tabIndex={FOCUSABLE_BUT_NOT_TABBABLE}
>
<div onClick={clickPreviewHandler} className="flex items-center cursor-pointer">
<div onClick={handleClick} className="flex items-center cursor-pointer">
{getFileIconComponent(getIconType(file.mimeType), 'w-8 h-8 flex-shrink-0')}
<div className="flex flex-col mx-4">
{isRenamingFile ? (
@@ -97,7 +117,7 @@ const PopoverFileItem: FunctionComponent<PopoverFileItemProps> = ({
handleFileAction={handleFileAction}
setIsRenamingFile={setIsRenamingFile}
closeOnBlur={closeOnBlur}
previewHandler={clickPreviewHandler}
previewHandler={previewHandler}
/>
</div>
)

19
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemAction.tsx
View File

@@ -14,13 +14,19 @@ export type PopoverFileItemAction =
| {
type: Exclude<
PopoverFileItemActionType,
PopoverFileItemActionType.RenameFile | PopoverFileItemActionType.ToggleFileProtection
| PopoverFileItemActionType.RenameFile
| PopoverFileItemActionType.ToggleFileProtection
| PopoverFileItemActionType.PreviewFile
>
payload: FileItem
payload: {
file: FileItem
}
}
| {
type: PopoverFileItemActionType.ToggleFileProtection
payload: FileItem
payload: {
file: FileItem
}
callback: (isProtected: boolean) => void
}
| {
@@ -30,3 +36,10 @@ export type PopoverFileItemAction =
name: string
}
}
| {
type: PopoverFileItemActionType.PreviewFile
payload: {
file: FileItem
otherFiles: FileItem[]
}
}

17
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileItemProps.tsx
View File

@@ -1,10 +1,21 @@
import { IconType, FileItem } from '@standardnotes/snjs'
import { Dispatch, SetStateAction } from 'react'
import { PopoverFileItemAction } from './PopoverFileItemAction'
export type PopoverFileItemProps = {
type CommonProps = {
file: FileItem
isAttachedToNote: boolean
handleFileAction: (action: PopoverFileItemAction) => Promise<boolean>
getIconType(type: string): IconType
handleFileAction: (action: PopoverFileItemAction) => Promise<{
didHandleAction: boolean
}>
closeOnBlur: (event: { relatedTarget: EventTarget | null }) => void
previewHandler: (file: FileItem) => void
}
export type PopoverFileItemProps = CommonProps & {
getIconType(type: string): IconType
}
export type PopoverFileSubmenuProps = CommonProps & {
setIsRenamingFile: Dispatch<SetStateAction<boolean>>
}

23
app/assets/javascripts/Components/AttachedFilesPopover/PopoverFileSubmenu.tsx
View File

@@ -1,19 +1,14 @@
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
import { calculateSubmenuStyle, SubmenuStyle } from '@/Utils/CalculateSubmenuStyle'
import { Disclosure, DisclosureButton, DisclosurePanel } from '@reach/disclosure'
import { Dispatch, FunctionComponent, SetStateAction, useCallback, useEffect, useRef, useState } from 'react'
import { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react'
import Icon from '@/Components/Icon/Icon'
import Switch from '@/Components/Switch/Switch'
import { useCloseOnBlur } from '@/Hooks/useCloseOnBlur'
import { PopoverFileItemProps } from './PopoverFileItemProps'
import { PopoverFileSubmenuProps } from './PopoverFileItemProps'
import { PopoverFileItemActionType } from './PopoverFileItemAction'
type Props = Omit<PopoverFileItemProps, 'renameFile' | 'getIconType'> & {
setIsRenamingFile: Dispatch<SetStateAction<boolean>>
previewHandler: () => void
}
const PopoverFileSubmenu: FunctionComponent<Props> = ({
const PopoverFileSubmenu: FunctionComponent<PopoverFileSubmenuProps> = ({
file,
isAttachedToNote,
handleFileAction,
@@ -88,7 +83,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
onBlur={closeOnBlur}
className="sn-dropdown-item focus:bg-info-backdrop"
onClick={() => {
previewHandler()
previewHandler(file)
closeMenu()
}}
>
@@ -102,7 +97,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.DetachFileToNote,
payload: file,
payload: { file },
}).catch(console.error)
closeMenu()
}}
@@ -117,7 +112,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote,
payload: file,
payload: { file },
}).catch(console.error)
closeMenu()
}}
@@ -132,7 +127,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.ToggleFileProtection,
payload: file,
payload: { file },
callback: (isProtected: boolean) => {
setIsFileProtected(isProtected)
},
@@ -157,7 +152,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.DownloadFile,
payload: file,
payload: { file },
}).catch(console.error)
closeMenu()
}}
@@ -181,7 +176,7 @@ const PopoverFileSubmenu: FunctionComponent<Props> = ({
onClick={() => {
handleFileAction({
type: PopoverFileItemActionType.DeleteFile,
payload: file,
payload: { file },
}).catch(console.error)
closeMenu()
}}