Add title node property and showNodeTitle tree property

Resolves #103.

Author: jakezatecky

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### New Features
 
 * [#102]: Add `icons` property to allow specification of icon components
+* [#103]: Add `title` node property and `showNodeTitle` tree property
 
 ## [v1.2.4](https://github.com/jakezatecky/react-checkbox-tree/compare/v1.2.3...v1.2.4) (2018-08-29)
 

README.md

@@ -105,6 +105,7 @@ All node objects **must** have a unique `value`. This value is serialized into t
 | `onlyLeafCheckboxes` | bool     | If true, checkboxes will only be shown for leaf nodes.                                                                 | `false`     |
 | `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect.                       | `true`      |
 | `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) {}`                                                                                | `() => {}`  |
 | `onClick`            | function | onClick handler: `function(clicked) {}`. If set, it will be called when clicked on a node label.                       | `() => {}`  |
 | `onExpand`           | function | onExpand handler: `function(expanded) {}`                                                                              | `() => {}`  |
@@ -122,3 +123,4 @@ Individual nodes within the `nodes` property can have the following structure:
 | `disabled`     | bool   | Whether the node should be disabled.     | `false` |
 | `icon`         | mixed  | A custom icon for the node.              | `null`  |
 | `showCheckbox` | bool   | Whether the node should show a checkbox. | `true`  |
+| `title`        | string | A custom `title` attribute for the node. | `null`  |

src/js/CheckboxTree.js

@@ -26,6 +26,7 @@ class CheckboxTree extends React.Component {
         onlyLeafCheckboxes: PropTypes.bool,
         optimisticToggle: PropTypes.bool,
         showNodeIcon: PropTypes.bool,
+        showNodeTitle: PropTypes.bool,
         onCheck: PropTypes.func,
         onClick: PropTypes.func,
         onExpand: PropTypes.func,
@@ -54,6 +55,7 @@ class CheckboxTree extends React.Component {
         onlyLeafCheckboxes: false,
         optimisticToggle: true,
         showNodeIcon: true,
+        showNodeTitle: false,
         onCheck: () => {},
         onClick: () => {},
         onExpand: () => {},
@@ -229,6 +231,7 @@ class CheckboxTree extends React.Component {
             noCascade,
             onlyLeafCheckboxes,
             optimisticToggle,
+            showNodeTitle,
             showNodeIcon,
             onClick,
         } = this.props;
@@ -258,6 +261,7 @@ class CheckboxTree extends React.Component {
                     rawChildren={node.children}
                     showCheckbox={showCheckbox}
                     showNodeIcon={showNodeIcon}
+                    title={showNodeTitle ? node.title || node.label : node.title}
                     treeId={this.id}
                     value={node.value}
                     onCheck={this.onCheck}

src/js/TreeNode.js

@@ -30,6 +30,7 @@ class TreeNode extends React.Component {
         icon: PropTypes.node,
         rawChildren: PropTypes.arrayOf(nodeShape),
         showCheckbox: PropTypes.bool,
+        title: PropTypes.string,
         onClick: PropTypes.func,
     };
 
@@ -40,6 +41,7 @@ class TreeNode extends React.Component {
         icon: null,
         rawChildren: null,
         showCheckbox: true,
+        title: null,
         onClick: () => {},
     };
 
@@ -174,12 +176,12 @@ class TreeNode extends React.Component {
     }
 
     renderBareLabel(children) {
-        const { onClick } = this.props;
+        const { onClick, title } = this.props;
 
         const clickable = onClick.toString() !== TreeNode.defaultProps.onClick.toString();
 
         return (
-            <span className="rct-bare-label">
+            <span className="rct-bare-label" title={title}>
                 {clickable ? (
                     <span
                         className="rct-node-clickable"
@@ -200,6 +202,7 @@ class TreeNode extends React.Component {
             checked,
             disabled,
             label,
+            title,
             treeId,
             value,
             onClick,
@@ -209,7 +212,7 @@ class TreeNode extends React.Component {
         const inputId = `${treeId}-${String(value).split(' ').join('_')}`;
 
         const render = [(
-            <label key={0} htmlFor={inputId}>
+            <label key={0} htmlFor={inputId} title={title}>
                 <NativeCheckbox
                     checked={checked === 1}
                     disabled={disabled}

src/js/nodeShape.js

@@ -9,6 +9,7 @@ const nodeShape = {
 
     icon: PropTypes.node,
     showCheckbox: PropTypes.bool,
+    title: PropTypes.string,
 };
 
 const nodeShapeWithChildren = PropTypes.oneOfType([

test/CheckboxTree.js

@@ -297,6 +297,41 @@ describe('<CheckboxTree />', () => {
         });
     });
 
+    describe('showNodeTitle', () => {
+        it('should add `title` properties to a TreeNode from the `label` property when set', () => {
+            const wrapper = shallow(
+                <CheckboxTree
+                    nodes={[
+                        {
+                            value: 'jupiter',
+                            label: 'Jupiter',
+                        },
+                    ]}
+                    showNodeTitle
+                />,
+            );
+
+            assert.equal('Jupiter', wrapper.find('TreeNode').prop('title'));
+        });
+
+        it('should prioritize the node `title` over the `label', () => {
+            const wrapper = shallow(
+                <CheckboxTree
+                    nodes={[
+                        {
+                            value: 'jupiter',
+                            label: 'Jupiter',
+                            title: 'That Big Failed Star',
+                        },
+                    ]}
+                    showNodeTitle
+                />,
+            );
+
+            assert.equal('That Big Failed Star', wrapper.find('TreeNode').prop('title'));
+        });
+    });
+
     describe('onCheck', () => {
         it('should pass the node toggled as the second parameter', () => {
             let actualNode = null;

test/TreeNode.js

@@ -266,6 +266,24 @@ describe('<TreeNode />', () => {
         });
     });
 
+    describe('title', () => {
+        it('should add the `title` property to the label when set', () => {
+            const wrapper = shallow(
+                <TreeNode {...baseProps} title="Some extra text" />,
+            );
+
+            assert.equal('Some extra text', wrapper.find('label').prop('title'));
+        });
+
+        it('should add the `title` property to the bare label when set on a checkbox-less node', () => {
+            const wrapper = shallow(
+                <TreeNode {...baseProps} showCheckbox={false} title="Some extra text" />,
+            );
+
+            assert.equal('Some extra text', wrapper.find('.rct-bare-label').prop('title'));
+        });
+    });
+
     describe('onCheck', () => {
         it('should pass the current node\'s value', () => {
             let actual = {};