getMenuOptions

Description

Returns an array of default context menu options available for requested menu type

The 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 folder
  • add - if specified, the function will return context menu options available when clicking the Add new button
  • body - if specified, the function will return context menu options that open on clicking an empty area in the cards or table view mode
  • multiselect - 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 item
• text – (optional) the label for the menu item
• hotkey – (optional) keyboard shortcut associated with the menu item
• icon – (optional) icon class or URL to display alongside the menu item
• comp – (optional) optional component name to render custom menu content
• type – (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} />