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: "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 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) with the next parameters:
    • id – (required) unique identifier of the file or folder
    • type - (optional) it can be "file" | "folder"` that indicates whether the entity is a file or folder
    • size – (optional) the size of the file in bytes (folders may omit this)
    • lazy – (optional) if true, children are loaded on demand
    • date – (optional) last modification or creation date
    • parent – (required) ID of the parent folder
    • name – (required) the name of the file or folder
    • ext – (required) file extension; empty string for folders
    • open – (optional) whether the folder is expanded in the UI
    • data – (optional) nested children (if any), each with the same structure as file
    • [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 item
  • text – (optional) the label for the menu item
  • hotkey – (required) 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"

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