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