Skip to main content

defaultMenuOptions

Description​

An array of objects with default configuration parameters for context menu items

Usage​

defaultMenuOptions?:
{ 
    id?: string | number,
    separator?: boolean,
    text?: string,
    icon?: string,
    data?: [],
    type?: string,
    check?: any,
}

Parameters​

The array includes objects with the next parameters for each menu item:

  • id - the id of a menu item
  • text - the text for an item
  • icon - the name of an icon displayed before the text. It converts to adding "i class={item.icon}", so any icons with the wxi- prefix can be used here, e.g ".wxi-plus" or any customer icons defined on the page.
  • type - the type of an item. It can be a "separator" or a custom type registered as a menu item (e.g. type:"button)
  • data - an array of sub items for a menu item. Used to create a tree-like menu structure
  • check - the function that checks if the menu should be shown for the specified task

Default menu options settings​

[
    {
        id: "add-task",
        text: "Add",
        icon: "wxi-plus",
        data: [
            { id: "add-task:child", text: "Child task" },
            { id: "add-task:before", text: "Task above" },
            { id: "add-task:after", text: "Task below" },
        ],
    },
    { type: "separator" },
    {
        id: "convert-task",
        text: "Convert to",
        icon: "wxi-swap-horizontal",
        dataFactory: type => {
            return {
                id: `convert-task:${type.id}`,
                text: `${type.label}`,
                check: exclude(type.id),
            };
        },
    },
    {
        id: "edit-task",
        text: "Edit",
        icon: "wxi-edit",
    },
    { id: "cut-task", text: "Cut", icon: "wxi-content-cut" },
    { id: "copy-task", text: "Copy", icon: "wxi-content-copy" },
    { id: "paste-task", text: "Paste", icon: "wxi-content-paste" },
    {
        id: "move-task",
        text: "Move",
        icon: "wxi-swap-vertical",
        data: [
            { id: "move-task:up", text: "Up" },
            { id: "move-task:down", text: "Down" },
        ],
    },
    { type: "separator" },
    { id: "indent-task:add", text: "Indent", icon: "wxi-indent" },
    { id: "indent-task:remove", text: "Outdent", icon: "wxi-unindent" },
    { type: "separator" },
    {
        id: "delete-task",
        icon: "wxi-delete",
        text: "Delete",
    },
];