Skip to main content

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 options

It allows configuring default context menu options.

Usage​

menuOptions: (mode: string, item?:{}) => []

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 file
    • folder - the context menu mode for folders
    • add - menu options that are available when clicking the Add New button
    • body - menu options that open on clicking an empty area in the cards or table view mode
    • multiselect - 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). The parameters are the ones returned by the getFile method.

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:

  • 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

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 "@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} />

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 "@wx/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} />