Fix/right clicks (#140)

* Fix right click callbacks

* Add sample right clicks integration

Author: danielcaldas

sandbox/Sandbox.jsx

@@ -55,8 +55,18 @@ export default class Sandbox extends React.Component {
 
     onClickNode = id => !this.state.config.collapsible && window.alert(`Clicked node ${id}`);
 
+    onRightClickNode = (event, id) => {
+        event.preventDefault();
+        window.alert(`RIGHT clicked node ${id}`);
+    };
+
     onClickLink = (source, target) => window.alert(`Clicked link between ${source} and ${target}`);
 
+    onRightClickLink = (event, source, target) => {
+        event.preventDefault();
+        window.alert(`RIGHT clicked link between ${source} and ${target}`);
+    };
+
     onMouseOverNode = id => console.info(`Do something when mouse is over node (${id})`);
 
     onMouseOutNode = id => console.info(`Do something when mouse is out of node (${id})`);
@@ -297,8 +307,10 @@ export default class Sandbox extends React.Component {
             data,
             config: this.state.config,
             onClickNode: this.onClickNode,
+            onRightClickNode: this.onRightClickNode,
             onClickGraph: this.onClickGraph,
             onClickLink: this.onClickLink,
+            onRightClickLink: this.onRightClickLink,
             onMouseOverNode: this.onMouseOverNode,
             onMouseOutNode: this.onMouseOutNode,
             onMouseOverLink: this.onMouseOverLink,

src/components/graph/Graph.jsx

@@ -407,16 +407,6 @@ export default class Graph extends React.Component {
         }
     };
 
-    /**
-     * Calls the callback passed to the component.
-     * @param {Object} event - the event object generated by the event.
-     * @param  {string} clickedNodeId - The id of the node where the click was performed.
-     * @returns {undefined}
-     */
-    onRightClickNode = (event, clickedNodeId) => {
-        this.props.onRightClickNode && this.props.onRightClickNode(event, clickedNodeId);
-    };
-
     /**
      * Calls the callback passed to the component.
      * @param  {Object} e - The event of onClick handler.
@@ -439,15 +429,15 @@ export default class Graph extends React.Component {
             this.state.nodes,
             {
                 onClickNode: this.onClickNode,
-                onRightClickNode: this.onRightClickNode,
+                onRightClickNode: this.props.onRightClickNode,
                 onMouseOverNode: this.onMouseOverNode,
                 onMouseOut: this.onMouseOutNode
             },
             this.state.d3Links,
             this.state.links,
             {
                 onClickLink: this.props.onClickLink,
-                onRightClickLink: this.onRightClickLink,
+                onRightClickLink: this.props.onRightClickLink,
                 onMouseOverLink: this.onMouseOverLink,
                 onMouseOutLink: this.onMouseOutLink
             },

src/components/link/Link.jsx

@@ -7,7 +7,7 @@ import React from 'react';
  *      window.alert(`Clicked link between ${source} and ${target}`);
  * };
  *
- * const onRightClickLink = function(event, source, target) {
+ * const onRightClickLink = function(source, target) {
  *      window.alert(`Right clicked link between ${source} and ${target}`);
  * };
  *
@@ -43,12 +43,11 @@ export default class Link extends React.Component {
 
     /**
      * Handle link right click event.
-     * @param {Object} event - the event object
+     * @param {Object} event - native event.
      * @returns {undefined}
      */
-    handleOnRightClickLink = event => {
+    handleOnRightClickLink = event =>
         this.props.onRightClickLink && this.props.onRightClickLink(event, this.props.source, this.props.target);
-    };
 
     /**
      * Handle mouse over link event.

src/components/node/Node.jsx

@@ -11,7 +11,7 @@ import nodeHelper from './node.helper';
  *      window.alert('Clicked node', nodeId);
  * };
  *
- * const onRightClickNode = function(event, nodeId) {
+ * const onRightClickNode = function(nodeId) {
  *      window.alert('Right clicked node', nodeId);
  * }
  *
@@ -56,10 +56,10 @@ export default class Node extends React.Component {
 
     /**
      * Handle right click on the node.
-     * @param {Object} event - the event object
+     * @param {Object} event - native event.
      * @returns {undefined}
      */
-    handleOnRightClickNode = event => this.props.onRightClickNode && this.props.onClickNode(event, this.props.id);
+    handleOnRightClickNode = event => this.props.onRightClickNode && this.props.onRightClickNode(event, this.props.id);
 
     /**
      * Handle mouse over node event.