context-menu

Context Menu Quick Reference

This guide provides a quick overview of how to create and display a context menu using our system.

---

ContextMenuItem Type

Define each menu item using the ContextMenuItem type:

type ContextMenuItem = {
  label?: string;
  type?: "separator" | "normal" | "submenu" | "checkbox" | "radio";
  role?: string; // Electron role (optional)
  click?: () => void; // Callback for item selection (not needed if role is set)
  submenu?: ContextMenuItem[]; // For nested menus
  checked?: boolean; // For checkbox or radio items
  visible?: boolean;
  enabled?: boolean;
  sublabel?: string;
};

---

Import and Show the Menu

Import the context menu module:

import { ContextMenuModel } from "@/app/store/contextmenu";

To display the context menu, call:

ContextMenuModel.getInstance().showContextMenu(menu, event);

• menu: An array of ContextMenuItem.
• event: The mouse event that triggered the context menu (typically from an onContextMenu handler).

---

Basic Example

A simple context menu with a separator:

const menu: ContextMenuItem[] = [
  {
    label: "New File",
    click: () => {
      /* create a new file */
    },
  },
  {
    label: "New Folder",
    click: () => {
      /* create a new folder */
    },
  },
  { type: "separator" },
  {
    label: "Rename",
    click: () => {
      /* rename item */
    },
  },
];

ContextMenuModel.getInstance().showContextMenu(menu, e);

---

Example with Submenu and Checkboxes

Toggle settings using a submenu with checkbox items:

const isClearOnStart = true; // Example setting

const menu: ContextMenuItem[] = [
  {
    label: "Clear Output On Restart",
    submenu: [
      {
        label: "On",
        type: "checkbox",
        checked: isClearOnStart,
        click: () => {
          // Set the config to enable clear on restart
        },
      },
      {
        label: "Off",
        type: "checkbox",
        checked: !isClearOnStart,
        click: () => {
          // Set the config to disable clear on restart
        },
      },
    ],
  },
];

ContextMenuModel.getInstance().showContextMenu(menu, e);