-
-
Notifications
You must be signed in to change notification settings - Fork 390
/
FileMenuOptions.tsx
142 lines (131 loc) · 4.75 KB
/
FileMenuOptions.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import { FunctionComponent, useCallback, useMemo } from 'react'
import { PopoverFileItemActionType } from '../AttachedFilesPopover/PopoverFileItemAction'
import Icon from '@/Components/Icon/Icon'
import { observer } from 'mobx-react-lite'
import { FilesController } from '@/Controllers/FilesController'
import { SelectedItemsController } from '@/Controllers/SelectedItemsController'
import HorizontalSeparator from '../Shared/HorizontalSeparator'
import { formatSizeToReadableString } from '@standardnotes/filepicker'
import { useResponsiveAppPane } from '../ResponsivePane/ResponsivePaneProvider'
import { AppPaneId } from '../ResponsivePane/AppPaneMetadata'
import MenuItem from '../Menu/MenuItem'
import { FileContextMenuBackupOption } from './FileContextMenuBackupOption'
import MenuSwitchButtonItem from '../Menu/MenuSwitchButtonItem'
type Props = {
closeMenu: () => void
filesController: FilesController
selectionController: SelectedItemsController
isFileAttachedToNote?: boolean
renameToggleCallback?: (isRenamingFile: boolean) => void
shouldShowRenameOption: boolean
shouldShowAttachOption: boolean
}
const FileMenuOptions: FunctionComponent<Props> = ({
closeMenu,
filesController,
selectionController,
isFileAttachedToNote,
renameToggleCallback,
shouldShowRenameOption,
shouldShowAttachOption,
}) => {
const { selectedFiles } = selectionController
const { handleFileAction } = filesController
const { toggleAppPane } = useResponsiveAppPane()
const hasProtectedFiles = useMemo(() => selectedFiles.some((file) => file.protected), [selectedFiles])
const hasSelectedMultipleFiles = useMemo(() => selectedFiles.length > 1, [selectedFiles.length])
const totalFileSize = useMemo(
() => selectedFiles.map((file) => file.decryptedSize).reduce((prev, next) => prev + next, 0),
[selectedFiles],
)
const onDetach = useCallback(() => {
const file = selectedFiles[0]
void handleFileAction({
type: PopoverFileItemActionType.DetachFileToNote,
payload: { file },
})
closeMenu()
}, [closeMenu, handleFileAction, selectedFiles])
const onAttach = useCallback(() => {
const file = selectedFiles[0]
void handleFileAction({
type: PopoverFileItemActionType.AttachFileToNote,
payload: { file },
})
closeMenu()
}, [closeMenu, handleFileAction, selectedFiles])
const closeMenuAndToggleFilesList = useCallback(() => {
toggleAppPane(AppPaneId.Items)
closeMenu()
}, [closeMenu, toggleAppPane])
return (
<>
{selectedFiles.length === 1 && (
<>
{isFileAttachedToNote ? (
<MenuItem onClick={onDetach}>
<Icon type="link-off" className="mr-2 text-neutral" />
Detach from note
</MenuItem>
) : shouldShowAttachOption ? (
<MenuItem onClick={onAttach}>
<Icon type="link" className="mr-2 text-neutral" />
Attach to note
</MenuItem>
) : null}
</>
)}
<MenuSwitchButtonItem
checked={hasProtectedFiles}
onChange={(hasProtectedFiles) => {
void filesController.setProtectionForFiles(hasProtectedFiles, selectionController.selectedFiles)
}}
>
<Icon type="lock" className="mr-2 text-neutral" />
Password protect
</MenuSwitchButtonItem>
<HorizontalSeparator classes="my-1" />
<MenuItem
onClick={() => {
void filesController.downloadFiles(selectionController.selectedFiles)
}}
>
<Icon type="download" className="mr-2 text-neutral" />
Download
</MenuItem>
{shouldShowRenameOption && (
<MenuItem
onClick={() => {
renameToggleCallback?.(true)
}}
>
<Icon type="pencil" className="mr-2 text-neutral" />
Rename
</MenuItem>
)}
<MenuItem
onClick={() => {
closeMenuAndToggleFilesList()
void filesController.deleteFilesPermanently(selectionController.selectedFiles)
}}
>
<Icon type="trash" className="mr-2 text-danger" />
<span className="text-danger">Delete permanently</span>
</MenuItem>
<FileContextMenuBackupOption file={selectedFiles[0]} />
<HorizontalSeparator classes="my-2" />
<div className="px-3 pt-1 pb-0.5 text-xs font-medium text-neutral">
{!hasSelectedMultipleFiles && (
<div className="mb-1">
<span className="font-semibold">File ID:</span> {selectedFiles[0].uuid}
</div>
)}
<div>
<span className="font-semibold">{hasSelectedMultipleFiles ? 'Total Size:' : 'Size:'}</span>{' '}
{formatSizeToReadableString(totalFileSize)}
</div>
</div>
</>
)
}
export default observer(FileMenuOptions)