Skip to content

Context Menu Wrapper

This function is deprectated and will be removed in future release

Carbon 11 has a context menu component if your applications needs a context menu.

The context menu in Common Canvas can be used in your application by importing the ContextMenuWrapper React component. Aside from providing a standard context menu to allow users to select different actions, this context menu also allows for configuration of submenus as a menu item, as well as a visual dividers.

Getting started with Context Menu

Step 1: Import Context Menu Wrapper

To use Context Menu Wrapper in your React application you need to import the ContextMenuWrapper React component from the common-canvas library. It’s recommended to use All Components if Common Canvas is also being imported, otherwise use ContextMenuWrapper only option.

All Components 

    import {ContextMenuWrapper} from "@elyra/canvas";

ContextMenuWrapper only 

    import ContextMenuWrapper from "@elyra/canvas/dist/lib/context-menu";

Step 2: Pass in the correct props

  • contextMenuDef array (required): an array of menu item objects consisting of action and label. You can also pass in a divider item.
    const menuDef = [
        { action: ACTION.BUILD, label: "Build" },
    { action: ACTION.EXTEND, label: "Extend" },
    { action: ACTION.CLEAR, label: "Clear" },
    { divider: true },
    { action: ACTION.SCORE, label: "Score" },
    ];
  • containingDivId string (required): the id of the element that the context menu will be absolutely positioned inside. typically, the page element is used.

  • contextMenuPos object (required): the position of the context menu within the containing div. 

        const menuPos = { x: 500  , y: 300  };

  • contextMenuActionHandler func (required): this handler is where context menu actions are defined. 

        contextMenuActionHandler(action) {
        switch (action) {
            case "BUILD":
            break;
        case "EXTEND":
            break;
        default:
        }
    }

  • closeContextMenu func (required): this handler will be called when the context menu is closed.
  • stopPropagation bool (optional): this is optional and only for very specific, uncommon use cases. When this flag is set, if a user clicks outside the context menu, the event will not bubble to parent elements, preventing parent event handlers from being called.

Example

    const contextMenuWrapper = (
        <ContextMenuWrapper
            contextMenuDef={menuDef}
            containingDivId="main-page"
            contextMenuPos={menuPos}
            contextMenuActionHandler={this.contextMenuActionHandler}
            closeContextMenu={this.props.closeContextMenu}
        />
    );