Documentation on HOC use of ContextMenuTarget is vague

[aviita]

Quite new to to react and using typescript with it. Also not sure if this is the right way to as these questions, but the documentation and examples could do with some additional clarity in my opinion.

I am confused by the example below as it does not explain or show how this onContextMenu is supposed to be used. So if it is mandatory, I'm sure there should be some implementation for it too.

import { ContextMenuTarget, Menu, MenuItem } from "@blueprintjs/core";
 
const RightClickMe = ContextMenuTarget(class RightClickMeWithContext extends React.Component {
    render() {
        // root element must support `onContextMenu`
        return <div>{...}</div>;
    }
 
    renderContextMenu() {
        // return a single element, or nothing to use default browser behavior
        return (
            <Menu>
                <MenuItem onClick={this.handleSave} text="Save" />
                <MenuItem onClick={this.handleDelete} text="Delete" />
            </Menu>
        );
    }
 
    onContextMenuClose() {
        // Optional method called once the context menu is closed.
    }
});

After searching the repository a bit I could at least find out that the function needs to be in form of something like the following:

    const contextMenuHandler = (e: React.MouseEvent<HTMLElement>) => {
        
    }

Additionally the example seems to be missing the wiring of the props. So could someone help me figure out a more comprehensive example that does not leave these gaps? Thanks!

[aviita]

Also if this component from the example as such is put into use with component I wish to have the context menu:

export function MyComponent() {
    return (
        <div>
            <RightClickMe>
              <Button>Button text</Button>   
            </RightClickMe>
        </div>
    )
}

I will get error like this:

TypeError: Class constructor RightClickMeWithContext cannot be invoked without 'new'
new ContextMenuTarget(RightClickMeWithContext)

[aviita]

I think my only problem now after proper digging through the example is with that type error I get. I do get it also after using e.g. the decorator example in plain react app created with redux-typescript template.

npx create-react-app react-redux-typescript-playground --template redux-typescript 

Even using the decorator example produces the same TypeError. But maybe this is more of a support request I should ask in stackoverflow.

[adidahiya]

See #3891, #3604