Blueprint: Example for combining Tree and ContextMenu

[volkandkaya]

Question

It would be great to have an example of Tree and ContextMenu working together in the docs. Can't seem to get it working.

[giladgray]

sorry, we do not have bandwidth to build examples like this. i'd suggest sharing a codesandbox.

[giladgray]

also see #1725 which is also relevant to ContextMenuTarget: must be wrapped around a DOM node.

[volkandkaya]

https://codesandbox.io/s/v32pz1y9qy That is a basic version of what I have. Just need some a tiny bit of guidance. @giladgray

[clarson0]

@volkandkaya - update your codesandbox Tree.tsx with this. seems to work for me

import * as React from "react";
import {
  Classes,
  ContextMenu,
  Icon,
  Menu,
  MenuDivider,
  MenuItem,
  Tree
} from "@blueprintjs/core";

export interface ExampleProps {
  header: string;
}

export class NewTree extends React.PureComponent<ExampleProps> {
  public showContextMenu(nodeData, path, e) {
    e.preventDefault();
    // invoke static API, getting coordinates from mouse event
    ContextMenu.show(
      <Menu>
        <MenuItem icon="search-around" text="Search around..." />
        <MenuItem icon="search" text="Object viewer" />
        <MenuItem icon="graph-remove" text="Remove" />
        <MenuItem icon="group-objects" text="Group" />
        <MenuDivider />
        <MenuItem disabled={true} text="Clicked on node" />
      </Menu>,
      { left: e.clientX, top: e.clientY }
    );
  };

  public render() {
    return (
      <Tree
        onNodeContextMenu={this.showContextMenu}
        contents={[
          {
            id: 0,
            hasCaret: true,
            icon: "folder-close",
            label: "Folder 0",
          }]}
      />
    );
  }
}