Configuring context menu

Adding custom context menu

The context menu with the default set of menu options is enabled by default. The list of options depends on the context menu type ("body" | "add" | "multiselect" | "folder" | "file"). Default options for each menu type can be obtained via the getMenuOptions function.

To redefine the context menu options, you need to return an array of the required options from the menuOptions function. To change the default list of options, you can apply the getMenuOptions helper that returns the options array for the required mode, and then you can return and change this array inside the menuOptions function.

In the example below we keep only the Rename 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-edit",
              text: "Rename",
              hotkey: "Ctrl+R",
              id: "rename",
            },
          ];
      default:
        return getMenuOptions(mode);
    }
  }
</script>

<Filemanager data={getData()} drive={getDrive()} {menuOptions} />

The next example shows how to add a new menu option (Clone) to the menu and we apply the handler parameter to define which action should be performed for this option.

<script>
  import { getData, getDrive } from "./common/data";
  import { Filemanager, getMenuOptions } from "@wx/svelte-filemanager";

  let fmApi;
  function init(api) {
    fmApi = api;

    fmApi.on("download-file", ({ id }) => {
      alert(`No server data - no download. File ID: ${id}`);
    });
  }
  function menuOptions(mode, item) {
    switch (mode) {
      case "file":
      case "folder":
        if (item.id === "/Code") return false;
        if (item.id === "/Pictures") return getMenuOptions().filter((o) => o.id === "rename");
        return [
          ...getMenuOptions(mode),
          {
            type: "separator",
          },
          {
            icon: "wxi-cat",
            text: "Clone",
            id: "clone",
            hotkey: "Ctrl+Shift+V",
            handler: ({ context }) => {
              const { panels, activePanel } = fmApi.getState();
              fmApi.exec("copy-files", {
                ids: [context.id],
                target: panels[activePanel].path,
              });
            },
          },
        ];

      default:
        return getMenuOptions(mode);
    }
  }
</script>

<Filemanager {init} data={getData()} drive={getDrive()} {menuOptions} />

Hiding the menu

To hide the default context menu, apply the menuOptions function by returning false or an empty array.

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

---

Related samples: Custom menu