menuOptions
Description
Optional. The function takes the context menu type name (and a file/folder data if necessary) as an input and returns customized context menu optionsIt allows configuring default context menu options.
Usage
menuOptions?: () => (
mode: "folder" | "file" | "body" | "add" | "multiselect",
item?: {
id: string,
type?: "file" | "folder",
size?: number,
lazy?: boolean,
date?: Date,
parent: string,
name: string,
ext: string,
open?: boolean,
data?: IParsedEntity[],
[key: string]: any,
}
) => {
id?: string,
text?: string,
hotkey: string,
icon?: string,
comp?: string,
type?: string,
}[];
Parameters
mode
- (required) the name of the context menu mode that can be one of the following:file
- the list of context menu options for a filefolder
- the context menu mode for foldersadd
- menu options that are available when clicking the Add New buttonbody
- menu options that open on clicking an empty area in the cards or table view modemultiselect
- menu options available when multiple files or folders are selected
item
- (optional) an object with data for a file or folder (if the file or folder mode is set) with the next parameters:id
– (required) unique identifier of the file or foldertype
- (optional) it can be "file" | "folder"` that indicates whether the entity is a file or foldersize
– (optional) the size of the file in bytes (folders may omit this)lazy
– (optional) iftrue
, children are loaded on demanddate
– (optional) last modification or creation dateparent
– (required) ID of the parent foldername
– (required) the name of the file or folderext
– (required) file extension; empty string for foldersopen
– (optional) whether the folder is expanded in the UIdata
– (optional) nested children (if any), each with the same structure asfile
[key: string]: any
– additional metadata fields provided by the backend
Returns
The function returns an array with context menu options for the requested menu mode and/or item. If the menuOptions
function returns false or an empty array, the context menu will not be displayed. The default array of menu options includes objects with the following parameters for each:
id
– (optional) an id for the menu itemtext
– (optional) the label for the menu itemhotkey
– (required) keyboard shortcut associated with the menu itemicon
– (optional) icon class or URL to display alongside the menu itemcomp
– (optional) optional component name to render custom menu contenttype
– (optional) type of menu item, e.g.,"separator"
or"upload"
The full list of menu options for each menu type is provided here Default context menu options
Example
In the example below we keep only the Delete option for the "/Pictures" folder.
<script>
import { getData, getDrive } from "./common/data";
import { Filemanager, getMenuOptions } from "@svar-ui/svelte-filemanager";
function menuOptions(mode, item) {
switch (mode) {
case "folder":
if (item.id === "/Pictures")
return [
{
icon: "wxi-close",
text: "Delete",
hotkey: "Delete",
id: "delete",
},
];
default:
return getMenuOptions(mode);
}
}
</script>
<Filemanager data={getData()} drive={getDrive()} {menuOptions} />
If the menuOptions
function returns false or an empty array, the context menu will not be displayed.
<script>
import { getData, getDrive } from "./common/data";
import { Filemanager, getMenuOptions } from "@svar-ui/svelte-filemanager";
function menuOptions(mode, item) {
switch (mode) {
case "file":
case "folder":
if (item.id === "/Code") return false;
default:
return getMenuOptions(mode);
}
}
</script>
<Filemanager data={getData()} drive={getDrive()} {menuOptions} />