Add onContextMenu property

Resolves #237.

Author: jakezatecky

CHANGELOG.md

@@ -26,6 +26,7 @@
 ### New Features
 
 * Add `checkKeys` property to allow specification of JavaScript keys to trigger check behavior
+* Add `onContextMenu` property, which will trigger whenever a user right-clicks a node (#237)
 
 ## [v1.8.0](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.7.3...v1.8.0) (2022-09-06)
 

README.md

@@ -174,7 +174,8 @@ Returns:
 | `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.                                                                    | `true`           |
 | `showNodeTitle`      | bool     | If true, the `label` of each node will become the `title` of the resulting DOM node. Overridden by `node.title`.       | `false`          |
 | `onCheck`            | function | onCheck handler: `function(checked, targetNode) {}`                                                                    | `() => {}`       |
-| `onClick`            | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked.     | `() => {}`       |
+| `onClick`            | function | onClick handler: `function(targetNode) {}`. If set, `onClick` will be called when a node's label has been clicked.     | `null`           |
+| `onContextMenu`      | function | onContextMenu handler: `function(event, targetNode) {}`. Triggers when right-clicking a node element.                  | `null`           |
 | `onExpand`           | function | onExpand handler: `function(expanded, targetNode) {}`                                                                  | `() => {}`       |
 
 #### `onCheck` and `onExpand`

src/js/CheckboxTree.jsx

@@ -56,6 +56,7 @@ class CheckboxTree extends React.Component {
         showNodeTitle: PropTypes.bool,
         onCheck: PropTypes.func,
         onClick: PropTypes.func,
+        onContextMenu: PropTypes.func,
         onExpand: PropTypes.func,
     };
 
@@ -83,6 +84,7 @@ class CheckboxTree extends React.Component {
         showNodeTitle: false,
         onCheck: () => {},
         onClick: null,
+        onContextMenu: null,
         onExpand: () => {},
     };
 
@@ -102,6 +104,7 @@ class CheckboxTree extends React.Component {
         };
 
         this.onCheck = this.onCheck.bind(this);
+        this.onContextMenu = this.onContextMenu.bind(this);
         this.onExpand = this.onExpand.bind(this);
         this.onNodeClick = this.onNodeClick.bind(this);
         this.onExpandAll = this.onExpandAll.bind(this);
@@ -132,6 +135,14 @@ class CheckboxTree extends React.Component {
         return newState;
     }
 
+    onContextMenu(node) {
+        const { onContextMenu } = this.props;
+
+        return (event) => {
+            onContextMenu(event, node);
+        };
+    }
+
     onCheck(nodeInfo) {
         const { checkModel, noCascade, onCheck } = this.props;
         const { model } = this.state;
@@ -250,6 +261,13 @@ class CheckboxTree extends React.Component {
                 return null;
             }
 
+            // Prepare node information for context menu usage
+            const nodeContext = {
+                ...node,
+                checked: flatNode.checkState,
+                expanded: flatNode.expanded,
+            };
+
             return (
                 <TreeNode
                     key={key}
@@ -272,6 +290,7 @@ class CheckboxTree extends React.Component {
                     value={node.value}
                     onCheck={this.onCheck}
                     onClick={onClick && this.onNodeClick}
+                    onContextMenu={this.onContextMenu(nodeContext)}
                     onExpand={this.onExpand}
                 >
                     {children}

src/js/components/TreeNode.jsx

@@ -37,6 +37,7 @@ class TreeNode extends React.PureComponent {
         title: PropTypes.string,
         treeId: PropTypes.string,
         onClick: PropTypes.func,
+        onContextMenu: PropTypes.func,
     };
 
     static defaultProps = {
@@ -48,6 +49,7 @@ class TreeNode extends React.PureComponent {
         title: null,
         treeId: null,
         onClick: null,
+        onContextMenu: null,
     };
 
     constructor(props) {
@@ -154,7 +156,7 @@ class TreeNode extends React.PureComponent {
     }
 
     renderBareLabel(children) {
-        const { onClick, title } = this.props;
+        const { title, onClick, onContextMenu } = this.props;
         const clickable = onClick !== null;
 
         return (
@@ -165,6 +167,7 @@ class TreeNode extends React.PureComponent {
                         role="button"
                         tabIndex={0}
                         onClick={this.onClick}
+                        onContextMenu={onContextMenu}
                         onKeyPress={this.onClick}
                     >
                         {children}
@@ -182,13 +185,14 @@ class TreeNode extends React.PureComponent {
             treeId,
             value,
             onClick,
+            onContextMenu,
         } = this.props;
         const clickable = onClick !== null;
         const valueId = String(value).split(' ').join('_');
         const inputId = treeId ? `${treeId}-${valueId}` : null;
 
         const render = [(
-            <label key={0} htmlFor={inputId} title={title}>
+            <label key={0} htmlFor={inputId} title={title} onContextMenu={onContextMenu}>
                 <NativeCheckbox
                     checked={checked === 1}
                     disabled={disabled}
@@ -217,6 +221,7 @@ class TreeNode extends React.PureComponent {
                     role="button"
                     tabIndex={0}
                     onClick={this.onClick}
+                    onContextMenu={onContextMenu}
                     onKeyPress={this.onClick}
                 >
                     {children}

test/CheckboxTree.jsx

@@ -926,6 +926,39 @@ describe('<CheckboxTree />', () => {
         });
     });
 
+    describe('onContextMenu', () => {
+        it('should provide the target node\'s information when right-clicking a label', async () => {
+            let actualNode = null;
+
+            render(
+                <CheckboxTree
+                    nodes={[
+                        {
+                            value: 'jupiter',
+                            label: 'Jupiter',
+                            children: [
+                                { value: 'io', label: 'Io' },
+                                { value: 'europa', label: 'Europa' },
+                            ],
+                        },
+                    ]}
+                    onContextMenu={(event, node) => {
+                        actualNode = node;
+                    }}
+                />,
+            );
+
+            const user = userEvent.setup();
+            await user.pointer({
+                target: screen.getByText('Jupiter'),
+                keys: '[MouseRight]',
+            });
+
+            assert.equal(actualNode.value, 'jupiter');
+            assert.isFalse(actualNode.expanded);
+        });
+    });
+
     describe('onExpand', () => {
         it('should toggle the expansion state of the target node', async () => {
             let actualExpanded = null;