WIP seperate name and label/title attribute

examples/bundle.js

@@ -2227,14 +2227,14 @@ var SuperTreeview = function (_Component) {
 
             var _props5 = this.props,
                 isCheckable = _props5.isCheckable,
-                keywordLabel = _props5.keywordLabel,
+                keywordName = _props5.keywordName,
                 depth = _props5.depth;
 
 
             if (isCheckable(node, depth)) {
                 return _react2.default.createElement('input', {
                     type: 'checkbox',
-                    name: node[keywordLabel],
+                    name: node[keywordName],
                     onClick: function onClick(e) {
                         _this2.handleCheckToggle(node, e);
                     },
@@ -2354,6 +2354,7 @@ var SuperTreeview = function (_Component) {
                 null,
                 (0, _lodash.isEmpty)(nodeArray) ? this.printNoChildrenMessage() : nodeArray.map(function (node, index) {
                     var nodeText = (0, _lodash.get)(node, keywordLabel, '');
+                    var nodeName = (0, _lodash.get)(node, keywordName, '');
 
                     return _react2.default.createElement(
                         _reactTransitionGroup.CSSTransition,
@@ -41802,55 +41803,55 @@ module.exports = function() {
 /* 205 */
 /***/ (function(module, exports) {
 
-var g;
-
-// This works in non-strict mode
-g = (function() {
-	return this;
-})();
-
-try {
-	// This works if eval is allowed (see CSP)
-	g = g || Function("return this")() || (1,eval)("this");
-} catch(e) {
-	// This works if the window reference is available
-	if(typeof window === "object")
-		g = window;
-}
-
-// g can still be undefined, but nothing to do about it...
-// We return undefined, instead of nothing here, so it's
-// easier to handle this case. if(!global) { ...}
-
-module.exports = g;
+var g;
+
+// This works in non-strict mode
+g = (function() {
+	return this;
+})();
+
+try {
+	// This works if eval is allowed (see CSP)
+	g = g || Function("return this")() || (1,eval)("this");
+} catch(e) {
+	// This works if the window reference is available
+	if(typeof window === "object")
+		g = window;
+}
+
+// g can still be undefined, but nothing to do about it...
+// We return undefined, instead of nothing here, so it's
+// easier to handle this case. if(!global) { ...}
+
+module.exports = g;
 
 
 /***/ }),
 /* 206 */
 /***/ (function(module, exports) {
 
-module.exports = function(module) {
-	if(!module.webpackPolyfill) {
-		module.deprecate = function() {};
-		module.paths = [];
-		// module.parent = undefined by default
-		if(!module.children) module.children = [];
-		Object.defineProperty(module, "loaded", {
-			enumerable: true,
-			get: function() {
-				return module.l;
-			}
-		});
-		Object.defineProperty(module, "id", {
-			enumerable: true,
-			get: function() {
-				return module.i;
-			}
-		});
-		module.webpackPolyfill = 1;
-	}
-	return module;
-};
+module.exports = function(module) {
+	if(!module.webpackPolyfill) {
+		module.deprecate = function() {};
+		module.paths = [];
+		// module.parent = undefined by default
+		if(!module.children) module.children = [];
+		Object.defineProperty(module, "loaded", {
+			enumerable: true,
+			get: function() {
+				return module.l;
+			}
+		});
+		Object.defineProperty(module, "id", {
+			enumerable: true,
+			get: function() {
+				return module.i;
+			}
+		});
+		module.webpackPolyfill = 1;
+	}
+	return module;
+};
 
 
 /***/ }),

readme.md

@@ -131,7 +131,8 @@ Props  | Type  | Default  | Description
 `keywordChildren`| string | `'children'`| Set the `key` where the component should look for the children elements.
 `keywordChildrenLoading`| string| `'isChildrenLoading'`|Set the `key` that indicates if the children nodes are loading or now. If `true` then the `loadingElement` is shown. NOTE: Make sure that the node is expanded (`isExpanded: true`) for the `loadingElement`.
 `keywordKey`| string | `'id'` | This is the value that is set as the `key` attribute on the node (`<div key={keywordKey}> node name </div>`). It defaults to the `id` key. This must be a unique key, if not provided or is not unique, will break the animation feature.
-`keywordLabel`|string|`'name'` | The node text is printed from the `name` key. If you want some other key value to be printed, provide the key here.
+`keywordName`|string|`'name'` | The node text is printed from the `name` key. If you want some other key value to be printed, provide the key here.
+`keywordLabel`|string|`'name'` | The node label text is printed from the `name` key. If you want some other key value to be printed, provide the key here.
 `loadingElement`| element | `<div>loading...</div>`|Element that shows when data is being loading. Provide your custom loading element with this prop.
 `noChildrenAvailableMessage` | string | `'no data found'` |Message that shows when the expanded node has no children.
 `onCheckToggleCb`| function |`(arrayOfNodes, depth) => {}`|Function callback when checkbox gets toggled. The callback provides an array of nodes (`arrayOfNodes`) that got checked/unchecked. Since `<SuperTreeview />`  has a multi-select feature, hence its an array here. All nodes will have the same `isChecked` state, either `true` or `false`. The callback also provides the `depth` of the node that got checked/unchecked.

src/index.js

@@ -101,13 +101,13 @@ class SuperTreeview extends Component {
     }
 
     printCheckbox(node) {
-        const { isCheckable, keywordLabel, depth } = this.props;
+        const { isCheckable, keywordName, depth } = this.props;
 
         if (isCheckable(node, depth)) {
             return (
                 <input
                     type="checkbox"
-                    name={node[keywordLabel]}
+                    name={node[keywordName]}
                     onClick={(e) => {
                         this.handleCheckToggle(node, e);
                     }}
@@ -186,6 +186,7 @@ class SuperTreeview extends Component {
     printNodes(nodeArray) {
         const {
             keywordKey,
+            keywordName,
             keywordLabel,
             depth,
             transitionEnterTimeout,
@@ -216,6 +217,7 @@ class SuperTreeview extends Component {
                     ? this.printNoChildrenMessage()
                     : nodeArray.map((node, index) => {
                           const nodeText = get(node, keywordLabel, '');
+                          const nodeName = get(node, keywordName, '');
 
                           return (
                               <CSSTransition
@@ -311,6 +313,7 @@ SuperTreeview.propTypes = {
     keywordChildrenLoading: PropTypes.string,
     keywordKey: PropTypes.string,
     keywordLabel: PropTypes.string,
+    keywordName: PropTypes.string,
 
     loadingElement: PropTypes.element,
     noChildrenAvailableMessage: PropTypes.string,
@@ -345,6 +348,7 @@ SuperTreeview.defaultProps = {
     keywordChildren: 'children',
     keywordChildrenLoading: 'isChildrenLoading',
     keywordLabel: 'name',
+    keywordName: 'name',
     keywordKey: 'id',
 
     loadingElement: <div>loading...</div>,