getMenuOptions
Description
Returns an array of default context menu options available for requested menu typeThe helper function takes the context menu type as an input and returns default context menu options available for this type
Usage
getMenuOptions: (mode: "file" | "folder" | "body" | "add" | "multiselect") => IMenuOption[];
Parameters
mode
- (required) the type of the context menu that can be one of the following:file
- the context menu type for a file (if specified, the function will return menu options available for the file type)folder
- the context menu type for a folderadd
- if specified, the function will return context menu options available when clicking the Add new buttonbody
- if specified, the function will return context menu options that open on clicking an empty area in the cards or table view modemultiselect
- if specified, the function will return context menu options available for multiple selected files or folders
Returns
An array of objects representing context menu items. Each IMenuOption
object can include:
id
– (optional) an id for the menu itemtext
– (optional) the label for the menu itemhotkey
– (optional) 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"
Default context menu options
Default context menu options for each mode are the following:
// "body"
[
{ icon: "wxi-content-paste", text: "Paste", hotkey: "Ctrl+V", id: "paste" }
]
// "add"
[
{ icon: "mdi mdi-folder-plus-outline", text: "Add new file", id: "add-file" },
{ icon: "mdi mdi-file-plus-outline", text: "Add new folder", id: "add-folder" },
{ icon: "mdi mdi-file-upload-outline", text: "Upload file", id: "upload", type: "upload" }
]
// "multiselect"
[
{ icon: "wxi-content-copy", text: "Copy", hotkey: "Ctrl+C", id: "copy" },
{ icon: "wxi-content-cut", text: "Cut", hotkey: "Ctrl+X", id: "move" },
{ type: "separator" },
{ icon: "wxi-close", text: "Delete", hotkey: "Delete", id: "delete" }
]
// "file"
[
{ icon: "wxi-download", text: "Download", hotkey: "Ctrl+D", id: "download" },
{ icon: "wxi-content-copy", text: "Copy", hotkey: "Ctrl+C", id: "copy" },
{ icon: "wxi-content-cut", text: "Cut", hotkey: "Ctrl+X", id: "move" },
{ icon: "wxi-content-paste", text: "Paste", hotkey: "Ctrl+V", id: "paste" },
{ type: "separator" },
{ icon: "wxi-edit", text: "Rename", hotkey: "Ctrl+R", id: "rename" },
{ icon: "wxi-close", text: "Delete", hotkey: "Delete", id: "delete" }
]
// "folder"
[
{ icon: "wxi-content-copy", text: "Copy", hotkey: "Ctrl+C", id: "copy" },
{ icon: "wxi-content-cut", text: "Cut", hotkey: "Ctrl+X", id: "move" },
{ icon: "wxi-content-paste", text: "Paste", hotkey: "Ctrl+V", id: "paste" },
{ type: "separator" },
{ icon: "wxi-edit", text: "Rename", hotkey: "Ctrl+R", id: "rename" },
{ icon: "wxi-close", text: "Delete", hotkey: "Delete", id: "delete" }
]
Example
In the example below we import the getMenuOptions
function to get the ready-made list of menu options, and then apply the menuOptions
function to 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} />