plugins: event fileMenu: added 'id' in menu
Massimo Melina committed
Jul 29, 2023 at 18:58 UTC
ff9f05be28a729cd36131de1bbad6db34be35d88
4 files changed
+27
-10
dev-plugins.md
+17
-4
@@ -250,12 +250,15 @@ This is a list of available frontend-events, with respective object parameter an
250
- no parameter
251
- output `Html`
252
- `fileMenu`
253
- - add your entries to the menu.
253
+ - add or manipulate entries of the menu. If you return something, that will be added to the menu.
254
+ You can also delete or replace the content of the `menu` array.
255
- parameter `{ entry: Entry, menu: FileMenuEntry[], props: FileMenuProp[] }`
255
- - output `FileMenuEntry | FileMenuEntry[]`
256
+ - output `undefined | FileMenuEntry | FileMenuEntry[]`
257
```typescript
257
- interface FileMenuEntry {
258
+ interface FileMenuEntry {
259
+ id?: string,
260
label: ReactNode,
261
+ subLabel: ReactNode,
262
href?: string, // use this if you want your entry to be a link
263
icon?: string, // supports: emoji, name from a limited set
264
onClick?: () => (Promisable<boolean>) // return false to not close menu dialog
@@ -263,6 +266,15 @@ This is a list of available frontend-events, with respective object parameter an
266
}
267
type FileMenuProp = [ReactNode,ReactNode] | ReactElement
268
```
269
+ Example, if you want to remove the 'show' item of the menu:
270
+ ```typescript
271
+ HFS.onEvent('fileMenu', ({ entry, menu }) => {
272
+ const index = menu.findIndex(x => x.id === 'show')
273
+ if (index >= 0)
274
+ menu.splice(index, 1)
275
+ })
276
+ ```
277
+ or if you like lodash, you can simply `HFS._.remove(menu, { id: 'show' })`
278
- `fileShow`
279
- you receive an entry of the list, and optionally produce React Component for visualization.
280
- parameter `{ entry: Entry }` (refer above for Entry object)
@@ -326,7 +338,8 @@ Where `h` is just `import { createElement as h } from 'react'`.
338
## API version history
339
340
- 8.3 (v0.47.0)
329
- - HFS.useBatch
341
+ - HFS.useBatch
342
+ - FileMenuEntry.id, .subLabel
343
- 8.23 (v0.46.0)
344
- entry.getNext, getPrevious, getNextFiltered, getPreviousFiltered, getDefaultIcon
345
- platform-dependent distribution
frontend/src/Breadcrumbs.ts
+1
@@ -42,6 +42,7 @@ function Breadcrumb({ path, label, current }:{ current?: boolean, path: string,
42
return reload()
43
openFileMenu(new DirEntry(decodeURIComponent(path)), ev, [
44
{
45
+ id: 'reload',
46
label: t`Reload`,
47
icon: 'reload',
48
onClick: reload
frontend/src/fileMenu.ts
+7
-4
@@ -12,6 +12,7 @@ import { apiCall, useApi } from '@hfs/shared/api'
12
import { navigate } from './App'
13
14
interface FileMenuEntry {
15
+ id?: string
16
label: ReactNode
17
subLabel?: ReactNode
18
href?: string
@@ -23,29 +24,31 @@ export function openFileMenu(entry: DirEntry, ev: MouseEvent, addToMenu: (FileMe
24
const { uri, isFolder, s } = entry
25
const cantDownload = entry.cantOpen || isFolder && entry.p?.includes('r') // folders needs both list and read
26
const menu = [
26
- !cantDownload && { label: t`Download`, href: uri + (isFolder ? '?get=zip' : '?dl'), icon: 'download' },
27
+ !cantDownload && { id: 'download', label: t`Download`, href: uri + (isFolder ? '?get=zip' : '?dl'), icon: 'download' },
28
...addToMenu.map(x => {
29
if (x === 'open') {
30
if (entry.cantOpen) return
30
- const open = { icon: 'play', label: t('file_open', "Open"), href: uri, target: isFolder ? undefined : '_blank' }
31
+ const open = { id: 'open', icon: 'play', label: t('file_open', "Open"), href: uri, target: isFolder ? undefined : '_blank' }
32
return !isFolder ? open : h(Link, { to: uri, onClick: () => close() }, hIcon(open.icon), open.label)
33
}
34
if (x === 'delete')
35
return (state.can_delete || entry.p?.includes('d')) && {
36
+ id: 'delete',
37
label: t`Delete`,
38
icon: 'trash',
39
onClick: () => deleteFiles([entry.uri])
40
}
41
if (x === 'show')
42
return !entry.cantOpen && getShowType(entry) && {
43
+ id: 'show',
44
label: t`Show`,
45
icon: 'image',
46
onClick: () => fileShow(entry)
47
}
48
return x
49
}),
47
- state.can_delete && { label: t`Rename`, icon: 'edit', onClick: () => rename(entry) },
48
- isFolder && { label: t`Get list`, href: uri + '?get=list&folders=*', icon: 'list' },
50
+ state.can_delete && { id: 'rename', label: t`Rename`, icon: 'edit', onClick: () => rename(entry) },
51
+ isFolder && { id: 'list', label: t`Get list`, href: uri + '?get=list&folders=*', icon: 'list' },
52
]
53
const props = [
54
[t`Name`, entry.name],
frontend/src/show.ts
+2
-2
@@ -77,8 +77,8 @@ export function fileShow(entry: DirEntry) {
77
useWindowSize().width > 1280 && iconBtn('?', () => window.open(WIKI_URL + 'File-show')),
78
iconBtn('menu', ev => openFileMenu(cur, ev, [
79
'open','delete',
80
- { icon: 'zoom', label: md(t`Switch _z_oom mode`), onClick: switchZoomMode },
81
- { icon: 'fullscreen', label: md(t`_F_ull screen`), onClick: toggleFullScreen },
80
+ { id: 'zoom', icon: 'zoom', label: md(t`Switch _z_oom mode`), onClick: switchZoomMode },
81
+ { id: 'fullscreen', icon: 'fullscreen', label: md(t`_F_ull screen`), onClick: toggleFullScreen },
82
])),
83
iconBtn('close', close),
84
)