Skip to main content

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: string) => [];

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​

The function returns an array of context menu options that depend on the context menu type.

Default context menu options​

The default array of menu options for each menu type includes objects with the following parameters for each:

  • icon (string) - (optional) the name of an icon
  • text (string) - (optional) the text for an option
  • subtext (string) - (optional) a hotkey assigned to an option
  • id (string) - (optional) the id of an option

Default context menu options 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 "@wx/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} />