How to add context menu to node? about react-treebeard

[fkhadra]

Hello @PriyankGahtori ,

I don't know if you still need to add a context menu. Anyway I made a POC using my library react-contexify.

You can check the demo here : http://sniphpet.github.io/react-treebeard/

[andrewex]

Hello @sniphpet I am having problems implementing your example above is there any chance you can share the source.

Thanks!

[fkhadra]

Hello, @andrewex . Sorry, I should have given more details.

The work is located under the feature/context-menu branch.

I made some changes only inside treebeard.js :

...
import { menuProvider } from 'react-contexify';

class TreeBeard extends React.Component {
    constructor(props){
        ...
       // Menu provider is a higher order component. We will use it on the TreeNode component
        this.node = props.contextMenuId !== false ? menuProvider(props.contextMenuId)(TreeNode) : TreeNode;
    }

...

TreeBeard.propTypes = {
   ...
    contextMenuId: React.PropTypes.string
};

TreeBeard.defaultProps = {
    ...
    contextMenuId: false
};

Then React-contexify take care of the rest.

Here is the source example implementation. There are 2 interesting parts :

• The context menu file. This is where I declare what I want inside my context menu and which id I'll use.
• The app file. This file is almost the same as the original, here are the differences :

// import the menu and the menu id
import ContextMenu, { menuId } from './ContextMenu';
...

//Inside the render of the DemoTree component, pass the menuId that we will use
<Treebeard  ...  contextMenuId={menuId} />
//The context menu to render. Don't pay attention to animation and theme it's only sugar 
<ContextMenu animation={this.state.ctxAnimation} theme={this.state.ctxTheme}/>

I hope I gave you enough details to help. Otherwise please tell me.
If you are interested in this feature maybe I can take the time to make a better implementation.

[andrewex]

Thanks works great!

[fkhadra]

I'm glad it works for you :)

[tblazz]

Hello,
Is there a possibility to merge this feature created by @sniphpet with the current master ? (To have this feature directly by npm )

[fkhadra]

Hello @tblasig ,
If the author wants to add the context menu I need to review the implementation. It was a quick and dirty implementation 😁 .
Anyway I would love to contribute.