react-checkbox-tree - npm Package Compare versions

Comparing version 0.4.0 to 0.4.1

CHANGELOG.md

 # CHANGELOG
 
-## [v0.4.0](https://github.com/jakezatecky/react-dual-listbox/compare/v0.3.0...v0.4.0) (2016-01-27)
+## [v0.4.1](https://github.com/jakezatecky/react-dual-listbox/compare/v0.4.0...v0.4.1) (2017-02-15)
 
+### Deprecations
+
+* [#20]: Add support for `label` in `nodes` property and deprecate `title`
+
+### New Features
+
+* [#21]: Add greater accessibility support
+
+## [v0.4.0](https://github.com/jakezatecky/react-dual-listbox/compare/v0.3.0...v0.4.0) (2017-01-27)
+
 ### Bug Fixes
@@ -6,0 +16,0 @@

gulpfile.js

 const gulp = require('gulp');
 const eslint = require('gulp-eslint');
-const mocha = require('gulp-mocha-phantomjs');
+const mocha = require('gulp-mocha');
 const header = require('gulp-header');
-const webpack = require('webpack-stream');
+const webpack = require('webpack');
+const webpackStream = require('webpack-stream');
 const scsslint = require('gulp-scss-lint');
 const sass = require('gulp-sass');
 const autoprefixer = require('gulp-autoprefixer');
+const babel = require('babel-core/register');
 const pkg = require('./package.json');
@@ -23,19 +25,19 @@ const browserSync = require('browser-sync').create();
 
-gulp.task('compile-test-script', () =>
-	gulp.src(['./test/index.js'])
-		.pipe(webpack(webpackConfig))
-		.pipe(gulp.dest('./test/compiled/'))
+gulp.task('test-mocha', ['test-script-format'], () =>
+	gulp.src(['./test/**/*.js'])
+		.pipe(mocha({
+			compilers: {
+				js: babel,
+			},
+			require: [
+				'./test/setup.js',
+			],
+		}))
 );
 
-// Disabled for now
-gulp.task('test-mocha', ['script-compile-test'], () =>
-	gulp.src(['test/test.html'])
-		.pipe(mocha({ reporter: 'spec' }))
-);
+gulp.task('test', ['test-script-format', 'test-mocha']);
 
-gulp.task('test-script', ['test-script-format']);
-
-gulp.task('build-script', ['test-script'], () =>
+gulp.task('build-script', ['test'], () =>
 	gulp.src(['./src/index.js'])
-		.pipe(webpack(webpackConfig))
+		.pipe(webpackStream(webpackConfig, webpack))
 		.pipe(header(banner, { pkg }))
@@ -58,2 +60,4 @@ .pipe(gulp.dest('./lib/'))
 
+gulp.task('build', ['build-script', 'build-style']);
+
 gulp.task('build-examples-style', () =>
@@ -75,3 +79,3 @@ gulp.src('./examples/src/**/*.scss')
 	gulp.src(['./examples/src/index.js'])
-		.pipe(webpack(testWebpackConfig))
+		.pipe(webpackStream(testWebpackConfig, webpack))
 		.pipe(gulp.dest('./examples/dist/'))
@@ -94,2 +98,3 @@ .pipe(browserSync.stream())
 });
-gulp.task('default', ['build-script', 'build-style']);
+
+gulp.task('default', ['build']);

lib/index.js

@@ -1,2 +0,2 @@
-/*! react-checkbox-tree - v0.4.0 | 2017 */
+/*! react-checkbox-tree - v0.4.1 | 2017 */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -11,3 +11,3 @@ if(typeof exports === 'object' && typeof module === 'object')
 		root["ReactCheckboxTree"] = factory(root["React"]);
-})(this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
+})(this, function(__WEBPACK_EXTERNAL_MODULE_0__) {
 return /******/ (function(modules) { // webpackBootstrap
@@ -26,5 +26,5 @@ /******/ 	// The module cache
 /******/ 		var module = installedModules[moduleId] = {
-/******/ 			exports: {},
-/******/ 			id: moduleId,
-/******/ 			loaded: false
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
 /******/ 		};
@@ -36,3 +36,3 @@
 /******/ 		// Flag the module as loaded
-/******/ 		module.loaded = true;
+/******/ 		module.l = true;
 
@@ -50,2 +50,28 @@ /******/ 		// Return the exports of the module
 
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+
 /******/ 	// __webpack_public_path__
@@ -55,3 +81,3 @@ /******/ 	__webpack_require__.p = "";
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(0);
+/******/ 	return __webpack_require__(__webpack_require__.s = 5);
 /******/ })
@@ -61,502 +87,560 @@ /************************************************************************/
 /* 0 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports) {
 
-	'use strict';
+module.exports = __WEBPACK_EXTERNAL_MODULE_0__;
 
-	// Use CommonJS export to trick Webpack into working around the issues that
-	// window.[module].default is set rather than window.[module]
-	//
-	// See: https://github.com/webpack/webpack/issues/706
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
 
-	module.exports = __webpack_require__(1).default;
+"use strict";
 
-/***/ },
-/* 1 */
-/***/ function(module, exports, __webpack_require__) {
 
-	'use strict';
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
 
-	Object.defineProperty(exports, "__esModule", {
-		value: true
-	});
+var _react = __webpack_require__(0);
 
-	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _react2 = _interopRequireDefault(_react);
 
-	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-	var _react = __webpack_require__(2);
+exports.default = {
+	value: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
+	title: _react2.default.PropTypes.string
+};
 
-	var _react2 = _interopRequireDefault(_react);
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
 
-	var _TreeNode = __webpack_require__(3);
+"use strict";
 
-	var _TreeNode2 = _interopRequireDefault(_TreeNode);
 
-	var _nodeShape = __webpack_require__(4);
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
 
-	var _nodeShape2 = _interopRequireDefault(_nodeShape);
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-	function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+var _react = __webpack_require__(0);
 
-	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _react2 = _interopRequireDefault(_react);
 
-	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+var _TreeNode = __webpack_require__(3);
 
-	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+var _TreeNode2 = _interopRequireDefault(_TreeNode);
 
-	var Tree = function (_React$Component) {
-		_inherits(Tree, _React$Component);
+var _nodeShape = __webpack_require__(1);
 
-		function Tree(props) {
-			_classCallCheck(this, Tree);
+var _nodeShape2 = _interopRequireDefault(_nodeShape);
 
-			var _this = _possibleConstructorReturn(this, (Tree.__proto__ || Object.getPrototypeOf(Tree)).call(this, props));
+var _uniqueDomId = __webpack_require__(4);
 
-			_this.onCheck = _this.onCheck.bind(_this);
-			_this.onExpand = _this.onExpand.bind(_this);
-			return _this;
-		}
+var _uniqueDomId2 = _interopRequireDefault(_uniqueDomId);
 
-		_createClass(Tree, [{
-			key: 'onCheck',
-			value: function onCheck(node) {
-				var _props = this.props;
-				var checked = _props.checked;
-				var onCheck = _props.onCheck;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
 
-				onCheck(this.toggleChecked([].concat(_toConsumableArray(checked)), node, node.checked));
-			}
-		}, {
-			key: 'onExpand',
-			value: function onExpand(node) {
-				var _props2 = this.props;
-				var expanded = _props2.expanded;
-				var onExpand = _props2.onExpand;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-				onExpand(this.toggleNode([].concat(_toConsumableArray(expanded)), node, node.expanded));
-			}
-		}, {
-			key: 'getFormattedNodes',
-			value: function getFormattedNodes(nodes) {
-				var _this2 = this;
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-				var _props3 = this.props;
-				var checked = _props3.checked;
-				var expanded = _props3.expanded;
+var Tree = function (_React$Component) {
+	_inherits(Tree, _React$Component);
 
+	function Tree(props) {
+		_classCallCheck(this, Tree);
 
-				return nodes.map(function (node) {
-					var formatted = Object.create(node);
+		var _this = _possibleConstructorReturn(this, (Tree.__proto__ || Object.getPrototypeOf(Tree)).call(this, props));
 
-					formatted.checked = checked.indexOf(node.value) > -1;
-					formatted.expanded = expanded.indexOf(node.value) > -1;
+		_this.onCheck = _this.onCheck.bind(_this);
+		_this.onExpand = _this.onExpand.bind(_this);
 
-					if (Array.isArray(node.children) && node.children.length > 0) {
-						formatted.children = _this2.getFormattedNodes(formatted.children);
-					} else {
-						formatted.children = null;
-					}
+		_this.id = (0, _uniqueDomId2.default)('rct');
+		return _this;
+	}
 
-					return formatted;
-				});
-			}
-		}, {
-			key: 'getCheckState',
-			value: function getCheckState(node) {
-				if (node.children === null) {
-					return node.checked ? 1 : 0;
-				}
+	_createClass(Tree, [{
+		key: 'onCheck',
+		value: function onCheck(node) {
+			var _props = this.props;
+			var checked = _props.checked;
+			var onCheck = _props.onCheck;
 
-				if (this.isEveryChildChecked(node)) {
-					return 1;
-				}
 
-				if (this.isSomeChildChecked(node)) {
-					return 2;
-				}
+			onCheck(this.toggleChecked([].concat(_toConsumableArray(checked)), node, node.checked));
+		}
+	}, {
+		key: 'onExpand',
+		value: function onExpand(node) {
+			var _props2 = this.props;
+			var expanded = _props2.expanded;
+			var onExpand = _props2.onExpand;
 
-				return 0;
-			}
-		}, {
-			key: 'toggleChecked',
-			value: function toggleChecked(checked, node, isChecked) {
-				var _this3 = this;
 
-				if (node.children !== null) {
-					// Percolate check status down to all children
-					node.children.forEach(function (child) {
-						_this3.toggleChecked(checked, child, isChecked);
-					});
+			onExpand(this.toggleNode([].concat(_toConsumableArray(expanded)), node, node.expanded));
+		}
+	}, {
+		key: 'getFormattedNodes',
+		value: function getFormattedNodes(nodes) {
+			var _this2 = this;
+
+			var _props3 = this.props;
+			var checked = _props3.checked;
+			var expanded = _props3.expanded;
+
+
+			return nodes.map(function (node) {
+				var formatted = Object.create(node);
+
+				formatted.checked = checked.indexOf(node.value) > -1;
+				formatted.expanded = expanded.indexOf(node.value) > -1;
+
+				if (Array.isArray(node.children) && node.children.length > 0) {
+					formatted.children = _this2.getFormattedNodes(formatted.children);
 				} else {
-					// Set leaf to check/unchecked state
-					this.toggleNode(checked, node, isChecked);
+					formatted.children = null;
 				}
 
-				return checked;
+				return formatted;
+			});
+		}
+	}, {
+		key: 'getCheckState',
+		value: function getCheckState(node) {
+			if (node.children === null) {
+				return node.checked ? 1 : 0;
 			}
-		}, {
-			key: 'toggleNode',
-			value: function toggleNode(list, node, toggleValue) {
-				var index = list.indexOf(node.value);
 
-				if (index > -1 && !toggleValue) {
-					list.splice(index, 1);
-				} else if (index === -1 && toggleValue) {
-					list.push(node.value);
-				}
+			if (this.isEveryChildChecked(node)) {
+				return 1;
+			}
 
-				return list;
+			if (this.isSomeChildChecked(node)) {
+				return 2;
 			}
-		}, {
-			key: 'isEveryChildChecked',
-			value: function isEveryChildChecked(node) {
-				var _this4 = this;
 
-				return node.children.every(function (child) {
-					if (child.children !== null) {
-						return _this4.isEveryChildChecked(child);
-					}
+			return 0;
+		}
+	}, {
+		key: 'toggleChecked',
+		value: function toggleChecked(checked, node, isChecked) {
+			var _this3 = this;
 
-					return child.checked;
+			if (node.children !== null) {
+				// Percolate check status down to all children
+				node.children.forEach(function (child) {
+					_this3.toggleChecked(checked, child, isChecked);
 				});
+			} else {
+				// Set leaf to check/unchecked state
+				this.toggleNode(checked, node, isChecked);
 			}
-		}, {
-			key: 'isSomeChildChecked',
-			value: function isSomeChildChecked(node) {
-				var _this5 = this;
 
-				return node.children.some(function (child) {
-					if (child.children !== null) {
-						return _this5.isSomeChildChecked(child);
-					}
+			return checked;
+		}
+	}, {
+		key: 'toggleNode',
+		value: function toggleNode(list, node, toggleValue) {
+			var index = list.indexOf(node.value);
 
-					return child.checked;
-				});
+			if (index > -1 && !toggleValue) {
+				list.splice(index, 1);
+			} else if (index === -1 && toggleValue) {
+				list.push(node.value);
 			}
-		}, {
-			key: 'renderTreeNodes',
-			value: function renderTreeNodes(nodes) {
-				var _this6 = this;
 
-				var treeNodes = nodes.map(function (node, index) {
-					var key = index + '-' + node.value;
-					var checked = _this6.getCheckState(node);
-					var children = _this6.renderChildNodes(node);
+			return list;
+		}
+	}, {
+		key: 'isEveryChildChecked',
+		value: function isEveryChildChecked(node) {
+			var _this4 = this;
 
-					return _react2.default.createElement(
-						_TreeNode2.default,
-						{
-							key: key,
-							checked: checked,
-							expanded: node.expanded,
-							optimisticToggle: _this6.props.optimisticToggle,
-							rawChildren: node.children,
-							title: node.title,
-							value: node.value,
-							onCheck: _this6.onCheck,
-							onExpand: _this6.onExpand
-						},
-						children
-					);
-				});
+			return node.children.every(function (child) {
+				if (child.children !== null) {
+					return _this4.isEveryChildChecked(child);
+				}
 
+				return child.checked;
+			});
+		}
+	}, {
+		key: 'isSomeChildChecked',
+		value: function isSomeChildChecked(node) {
+			var _this5 = this;
+
+			return node.children.some(function (child) {
+				if (child.children !== null) {
+					return _this5.isSomeChildChecked(child);
+				}
+
+				return child.checked;
+			});
+		}
+	}, {
+		key: 'renderTreeNodes',
+		value: function renderTreeNodes(nodes) {
+			var _this6 = this;
+
+			var treeNodes = nodes.map(function (node, index) {
+				var key = index + '-' + node.value;
+				var checked = _this6.getCheckState(node);
+				var children = _this6.renderChildNodes(node);
+
 				return _react2.default.createElement(
-					'ol',
-					null,
-					treeNodes
+					_TreeNode2.default,
+					{
+						key: key,
+						checked: checked,
+						expanded: node.expanded,
+						label: node.label || node.title,
+						optimisticToggle: _this6.props.optimisticToggle,
+						rawChildren: node.children,
+						treeId: _this6.id,
+						value: node.value,
+						onCheck: _this6.onCheck,
+						onExpand: _this6.onExpand
+					},
+					children
 				);
+			});
+
+			return _react2.default.createElement(
+				'ol',
+				null,
+				treeNodes
+			);
+		}
+	}, {
+		key: 'renderChildNodes',
+		value: function renderChildNodes(node) {
+			if (node.children !== null && node.expanded) {
+				return this.renderTreeNodes(node.children);
 			}
-		}, {
-			key: 'renderChildNodes',
-			value: function renderChildNodes(node) {
-				if (node.children !== null && node.expanded) {
-					return this.renderTreeNodes(node.children);
-				}
 
+			return null;
+		}
+	}, {
+		key: 'renderHiddenInput',
+		value: function renderHiddenInput() {
+			if (this.props.name === undefined) {
 				return null;
 			}
-		}, {
-			key: 'renderHiddenInput',
-			value: function renderHiddenInput() {
-				if (this.props.name === undefined) {
-					return null;
-				}
 
-				if (this.props.nameAsArray) {
-					return this.renderArrayHiddenInput();
-				}
-
-				return this.renderJoinedHiddenInput();
+			if (this.props.nameAsArray) {
+				return this.renderArrayHiddenInput();
 			}
-		}, {
-			key: 'renderArrayHiddenInput',
-			value: function renderArrayHiddenInput() {
-				var _this7 = this;
 
-				return this.props.checked.map(function (value) {
-					var name = _this7.props.name + '[]';
+			return this.renderJoinedHiddenInput();
+		}
+	}, {
+		key: 'renderArrayHiddenInput',
+		value: function renderArrayHiddenInput() {
+			var _this7 = this;
 
-					return _react2.default.createElement('input', { key: value, name: name, type: 'hidden', value: value });
-				});
-			}
-		}, {
-			key: 'renderJoinedHiddenInput',
-			value: function renderJoinedHiddenInput() {
-				var checked = this.props.checked.join(',');
+			return this.props.checked.map(function (value) {
+				var name = _this7.props.name + '[]';
 
-				return _react2.default.createElement('input', { name: this.props.name, type: 'hidden', value: checked });
-			}
-		}, {
-			key: 'render',
-			value: function render() {
-				var nodes = this.getFormattedNodes(this.props.nodes);
-				var treeNodes = this.renderTreeNodes(nodes);
+				return _react2.default.createElement('input', { key: value, name: name, type: 'hidden', value: value });
+			});
+		}
+	}, {
+		key: 'renderJoinedHiddenInput',
+		value: function renderJoinedHiddenInput() {
+			var checked = this.props.checked.join(',');
 
-				return _react2.default.createElement(
-					'div',
-					{ className: 'react-checkbox-tree' },
-					this.renderHiddenInput(),
-					treeNodes
-				);
-			}
-		}]);
+			return _react2.default.createElement('input', { name: this.props.name, type: 'hidden', value: checked });
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var nodes = this.getFormattedNodes(this.props.nodes);
+			var treeNodes = this.renderTreeNodes(nodes);
 
-		return Tree;
-	}(_react2.default.Component);
+			return _react2.default.createElement(
+				'div',
+				{ className: 'react-checkbox-tree' },
+				this.renderHiddenInput(),
+				treeNodes
+			);
+		}
+	}]);
 
-	Tree.propTypes = {
-		checked: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string).isRequired,
-		expanded: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string).isRequired,
-		nodes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.shape(_nodeShape2.default), _react2.default.PropTypes.shape(_extends({}, _nodeShape2.default, {
-			children: _react2.default.PropTypes.arrayOf(_nodeShape2.default)
-		}))])).isRequired,
-		onCheck: _react2.default.PropTypes.func.isRequired,
-		onExpand: _react2.default.PropTypes.func.isRequired,
+	return Tree;
+}(_react2.default.Component);
 
-		name: _react2.default.PropTypes.string,
-		nameAsArray: _react2.default.PropTypes.bool,
-		optimisticToggle: _react2.default.PropTypes.bool
-	};
-	Tree.defaultProps = {
-		checked: [],
-		expanded: [],
-		name: undefined,
-		nameAsArray: false,
-		nodes: [],
-		optimisticToggle: true
-	};
-	exports.default = Tree;
+Tree.propTypes = {
+	nodes: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.shape(_nodeShape2.default), _react2.default.PropTypes.shape(_extends({}, _nodeShape2.default, {
+		children: _react2.default.PropTypes.arrayOf(_nodeShape2.default)
+	}))])).isRequired,
 
-/***/ },
-/* 2 */
-/***/ function(module, exports) {
+	checked: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string),
+	expanded: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.string),
+	name: _react2.default.PropTypes.string,
+	nameAsArray: _react2.default.PropTypes.bool,
+	optimisticToggle: _react2.default.PropTypes.bool,
+	onCheck: _react2.default.PropTypes.func,
+	onExpand: _react2.default.PropTypes.func
+};
+Tree.defaultProps = {
+	checked: [],
+	expanded: [],
+	name: undefined,
+	nameAsArray: false,
+	nodes: [],
+	optimisticToggle: true,
+	onCheck: function onCheck() {},
+	onExpand: function onExpand() {}
+};
+exports.default = Tree;
 
-	module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
-
-/***/ },
+/***/ }),
 /* 3 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
-	'use strict';
+"use strict";
 
-	Object.defineProperty(exports, "__esModule", {
-		value: true
-	});
 
-	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
 
-	var _react = __webpack_require__(2);
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-	var _react2 = _interopRequireDefault(_react);
+var _react = __webpack_require__(0);
 
-	var _nodeShape = __webpack_require__(4);
+var _react2 = _interopRequireDefault(_react);
 
-	var _nodeShape2 = _interopRequireDefault(_nodeShape);
+var _nodeShape = __webpack_require__(1);
 
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _nodeShape2 = _interopRequireDefault(_nodeShape);
 
-	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-	var TreeNode = function (_React$Component) {
-		_inherits(TreeNode, _React$Component);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-		function TreeNode(props) {
-			_classCallCheck(this, TreeNode);
+var TreeNode = function (_React$Component) {
+	_inherits(TreeNode, _React$Component);
 
-			var _this = _possibleConstructorReturn(this, (TreeNode.__proto__ || Object.getPrototypeOf(TreeNode)).call(this, props));
+	function TreeNode(props) {
+		_classCallCheck(this, TreeNode);
 
-			_this.onCheck = _this.onCheck.bind(_this);
-			_this.onExpand = _this.onExpand.bind(_this);
-			return _this;
-		}
+		var _this = _possibleConstructorReturn(this, (TreeNode.__proto__ || Object.getPrototypeOf(TreeNode)).call(this, props));
 
-		_createClass(TreeNode, [{
-			key: 'onCheck',
-			value: function onCheck() {
-				var isChecked = false;
+		_this.onCheck = _this.onCheck.bind(_this);
+		_this.onExpand = _this.onExpand.bind(_this);
+		return _this;
+	}
 
-				// Toggle off state to checked
-				if (this.props.checked === 0) {
-					isChecked = true;
-				}
+	_createClass(TreeNode, [{
+		key: 'onCheck',
+		value: function onCheck() {
+			var isChecked = false;
 
-				// Toggle partial state based on model
-				if (this.props.checked === 2) {
-					isChecked = this.props.optimisticToggle;
-				}
+			// Toggle off state to checked
+			if (this.props.checked === 0) {
+				isChecked = true;
+			}
 
-				this.props.onCheck({
-					value: this.props.value,
-					checked: isChecked,
-					children: this.props.rawChildren
-				});
+			// Toggle partial state based on model
+			if (this.props.checked === 2) {
+				isChecked = this.props.optimisticToggle;
 			}
-		}, {
-			key: 'onExpand',
-			value: function onExpand() {
-				this.props.onExpand({
-					value: this.props.value,
-					expanded: !this.props.expanded
-				});
+
+			this.props.onCheck({
+				value: this.props.value,
+				checked: isChecked,
+				children: this.props.rawChildren
+			});
+		}
+	}, {
+		key: 'onExpand',
+		value: function onExpand() {
+			this.props.onExpand({
+				value: this.props.value,
+				expanded: !this.props.expanded
+			});
+		}
+	}, {
+		key: 'renderCollapseIcon',
+		value: function renderCollapseIcon() {
+			if (this.props.rawChildren === null) {
+				return _react2.default.createElement('i', { className: 'fa' });
 			}
-		}, {
-			key: 'renderCollapseIcon',
-			value: function renderCollapseIcon() {
-				if (this.props.rawChildren === null) {
-					return _react2.default.createElement('i', { className: 'fa' });
-				}
 
-				if (!this.props.expanded) {
-					return _react2.default.createElement('i', { className: 'fa fa-chevron-right' });
-				}
+			if (!this.props.expanded) {
+				return _react2.default.createElement('i', { className: 'fa fa-chevron-right' });
+			}
 
-				return _react2.default.createElement('i', { className: 'fa fa-chevron-down' });
+			return _react2.default.createElement('i', { className: 'fa fa-chevron-down' });
+		}
+	}, {
+		key: 'renderCheckboxIcon',
+		value: function renderCheckboxIcon() {
+			if (this.props.checked === 0) {
+				return _react2.default.createElement('i', { className: 'fa fa-square-o' });
 			}
-		}, {
-			key: 'renderCheckboxIcon',
-			value: function renderCheckboxIcon() {
-				if (this.props.checked === 0) {
-					return _react2.default.createElement('i', { className: 'fa fa-square-o' });
-				}
 
-				if (this.props.checked === 1) {
-					return _react2.default.createElement('i', { className: 'fa fa-check-square-o' });
-				}
-
-				return _react2.default.createElement('i', { className: 'fa fa-check-square-o rct-half-checked' });
+			if (this.props.checked === 1) {
+				return _react2.default.createElement('i', { className: 'fa fa-check-square-o' });
 			}
-		}, {
-			key: 'renderNodeIcon',
-			value: function renderNodeIcon() {
-				if (this.props.rawChildren !== null) {
-					if (!this.props.expanded) {
-						return _react2.default.createElement('i', { className: 'fa fa-folder-o' });
-					}
 
-					return _react2.default.createElement('i', { className: 'fa fa-folder-open-o' });
+			return _react2.default.createElement('i', { className: 'fa fa-check-square-o rct-half-checked' });
+		}
+	}, {
+		key: 'renderNodeIcon',
+		value: function renderNodeIcon() {
+			if (this.props.rawChildren !== null) {
+				if (!this.props.expanded) {
+					return _react2.default.createElement('i', { className: 'fa fa-folder-o' });
 				}
 
-				return _react2.default.createElement('i', { className: 'fa fa-file-o' });
+				return _react2.default.createElement('i', { className: 'fa fa-folder-open-o' });
 			}
-		}, {
-			key: 'renderChildren',
-			value: function renderChildren() {
-				if (!this.props.expanded) {
-					return null;
-				}
 
-				return this.props.children;
+			return _react2.default.createElement('i', { className: 'fa fa-file-o' });
+		}
+	}, {
+		key: 'renderChildren',
+		value: function renderChildren() {
+			if (!this.props.expanded) {
+				return null;
 			}
-		}, {
-			key: 'render',
-			value: function render() {
-				return _react2.default.createElement(
-					'li',
-					{ className: 'rct-node' },
+
+			return this.props.children;
+		}
+	}, {
+		key: 'render',
+		value: function render() {
+			var _props = this.props;
+			var checked = _props.checked;
+			var treeId = _props.treeId;
+			var label = _props.label;
+			var value = _props.value;
+
+			var inputId = treeId + '-' + value;
+
+			return _react2.default.createElement(
+				'li',
+				{ className: 'rct-node' },
+				_react2.default.createElement(
+					'span',
+					{ className: 'rct-text' },
 					_react2.default.createElement(
-						'span',
-						{ className: 'rct-text' },
+						'button',
+						{ 'aria-label': 'Toggle', className: 'rct-collapse', title: 'Toggle', onClick: this.onExpand },
+						this.renderCollapseIcon()
+					),
+					_react2.default.createElement(
+						'label',
+						{ htmlFor: inputId },
+						_react2.default.createElement('input', { checked: checked === 1, id: inputId, type: 'checkbox', onChange: this.onCheck }),
 						_react2.default.createElement(
 							'span',
-							{ className: 'rct-collapse', title: 'Toggle', onClick: this.onExpand },
-							this.renderCollapseIcon()
+							{ className: 'rct-checkbox' },
+							this.renderCheckboxIcon()
 						),
 						_react2.default.createElement(
-							'label',
-							{ onClick: this.onCheck },
-							_react2.default.createElement(
-								'span',
-								{ className: 'rct-checkbox' },
-								this.renderCheckboxIcon()
-							),
-							_react2.default.createElement(
-								'span',
-								{ className: 'rct-icon' },
-								this.renderNodeIcon()
-							),
-							_react2.default.createElement(
-								'span',
-								{ className: 'rct-title' },
-								this.props.title
-							)
+							'span',
+							{ className: 'rct-icon' },
+							this.renderNodeIcon()
+						),
+						_react2.default.createElement(
+							'span',
+							{ className: 'rct-title' },
+							label
 						)
-					),
-					this.renderChildren()
-				);
-			}
-		}]);
+					)
+				),
+				this.renderChildren()
+			);
+		}
+	}]);
 
-		return TreeNode;
-	}(_react2.default.Component);
+	return TreeNode;
+}(_react2.default.Component);
 
-	TreeNode.propTypes = {
-		checked: _react2.default.PropTypes.number.isRequired,
-		expanded: _react2.default.PropTypes.bool.isRequired,
-		optimisticToggle: _react2.default.PropTypes.bool.isRequired,
-		title: _react2.default.PropTypes.string.isRequired,
-		value: _react2.default.PropTypes.string.isRequired,
-		onCheck: _react2.default.PropTypes.func.isRequired,
-		onExpand: _react2.default.PropTypes.func.isRequired,
+TreeNode.propTypes = {
+	checked: _react2.default.PropTypes.number.isRequired,
+	expanded: _react2.default.PropTypes.bool.isRequired,
+	label: _react2.default.PropTypes.string.isRequired,
+	optimisticToggle: _react2.default.PropTypes.bool.isRequired,
+	treeId: _react2.default.PropTypes.string.isRequired,
+	value: _react2.default.PropTypes.string.isRequired,
+	onCheck: _react2.default.PropTypes.func.isRequired,
+	onExpand: _react2.default.PropTypes.func.isRequired,
 
-		children: _react2.default.PropTypes.node,
-		rawChildren: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape(_nodeShape2.default))
-	};
-	TreeNode.defaultProps = {
-		children: null,
-		rawChildren: undefined
-	};
-	exports.default = TreeNode;
+	children: _react2.default.PropTypes.node,
+	rawChildren: _react2.default.PropTypes.arrayOf(_react2.default.PropTypes.shape(_nodeShape2.default))
+};
+TreeNode.defaultProps = {
+	children: null,
+	rawChildren: undefined
+};
+exports.default = TreeNode;
 
-/***/ },
+/***/ }),
 /* 4 */
-/***/ function(module, exports, __webpack_require__) {
+/***/ (function(module, exports, __webpack_require__) {
 
-	'use strict';
+"use strict";
 
-	Object.defineProperty(exports, "__esModule", {
-		value: true
-	});
 
-	var _react = __webpack_require__(2);
+Object.defineProperty(exports, "__esModule", {
+	value: true
+});
+var autoId = 0;
 
-	var _react2 = _interopRequireDefault(_react);
+/**
+ * Return a unique DOM ID for an element on the document.
+ *
+ * @param {string} prefix
+ *
+ * @return {string}
+ */
+function uniqueDomId() {
+	var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unique';
 
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+	var findingId = true;
+	var id = '';
 
-	exports.default = {
-		value: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.number]),
-		title: _react2.default.PropTypes.string
-	};
+	while (findingId) {
+		id = prefix + '-' + autoId;
 
-/***/ }
-/******/ ])
-});
-;
+		if (document.getElementById(id) === null) {
+			findingId = false;
+		}
+
+		autoId += 1;
+	}
+
+	return id;
+}
+
+exports.default = uniqueDomId;
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+// Export default to provide support for non-ES6 solutions
+module.exports = __webpack_require__(2).default;
+
+/***/ })
+/******/ ]);
+});

package.json

 {
   "name": "react-checkbox-tree",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "React component for checkbox trees.",
@@ -19,3 +19,5 @@ "author": "Jake Zatecky",
   "scripts": {
-    "examples": "gulp examples"
+    "build": "gulp build",
+    "examples": "gulp examples",
+    "gh-deploy": "git subtree push --prefix examples/dist origin gh-pages"
   },
@@ -34,6 +36,7 @@ "peerDependencies": {
     "chai": "^3.5.0",
-    "eslint": "^3.13.0",
-    "eslint-config-airbnb": "^14.0.0",
+    "enzyme": "^2.7.1",
+    "eslint": "^3.15.0",
+    "eslint-config-airbnb": "^14.1.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-react": "^6.9.0",
@@ -44,11 +47,13 @@ "gulp": "^3.9.1",
     "gulp-header": "^1.8.8",
-    "gulp-mocha-phantomjs": "^0.12.0",
+    "gulp-mocha": "^3.0.1",
     "gulp-sass": "^3.0.0",
     "gulp-scss-lint": "^0.4.0",
+    "jsdom": "^9.11.0",
     "mocha": "^3.0.2",
-    "react": "^15.3.0",
-    "react-dom": "^15.3.0",
-    "webpack": "^1.13.1",
+    "react": "^15.4.2",
+    "react-addons-test-utils": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "webpack": "^2.2.1",
     "webpack-stream": "^3.2.0"
   }
 }

README.md

 # react-checkbox-tree
 
 [![npm](https://img.shields.io/npm/v/react-checkbox-tree.svg?style=flat-square)](https://www.npmjs.com/package/react-checkbox-tree)
+[![Build Status](https://img.shields.io/travis/jakezatecky/react-checkbox-tree/master.svg?style=flat-square)](https://travis-ci.org/jakezatecky/react-checkbox-tree)
 [![Dependency Status](https://img.shields.io/david/jakezatecky/react-checkbox-tree.svg?style=flat-square)](https://david-dm.org/jakezatecky/react-checkbox-tree)
@@ -27,14 +28,12 @@ [![devDependency Status](https://david-dm.org/jakezatecky/react-checkbox-tree/dev-status.svg?style=flat-square)](https://david-dm.org/jakezatecky/react-checkbox-tree#info=devDependencies)
 ``` javascript
+import React from 'react';
 import CheckboxTree from 'react-checkbox-tree';
 
 const nodes = [{
-    value: 'node-1',
-    title: 'Parent Node 1',
-    children: [{
-        value: 'node-1-1',
-        title: 'Leaf Node 1-1',
-    }, {
-        value: 'node-1-2',
-        title: 'Leaf Node 1-2'
-    }],
+    value: 'mars',
+    label: 'Mars',
+    children: [
+        { value: 'phobos', label: 'Phobos' },
+        { value: 'deimos', label: 'Deimos' },
+    ],
 }];
@@ -57,3 +56,2 @@
             <Tree
-                name="tree_nodes"
                 nodes={nodes}
@@ -74,9 +72,9 @@ checked={checked}
 | ------------------ | -------- | ------------------------------------------------------------------------------------------------ | ----------- |
-| `checked`          | array    | **Required**. An array of checked node values.                                                   |             |
-| `expanded`         | array    | **Required**. An array of expanded node values.                                                  |             |
 | `nodes`            | array    | **Required**. Specifies the tree nodes and their children.                                       |             |
-| `onCheck`          | function | **Required**. onCheck handler: `function(checked) {}`                                            |             |
-| `onExpand`         | function | **Required**. onExpand handler: `function(expanded) {}`                                          |             |
+| `checked`          | array    | An array of checked node values.                                                                 | `[]`        |
+| `expanded`         | array    | An array of expanded node values.                                                                | `[]`        |
+| `onCheck`          | function | onCheck handler: `function(checked) {}`                                                          | `() => {}`  |
+| `onExpand`         | function | onExpand handler: `function(expanded) {}`                                                        | `() => {}` |
 | `name`             | string   | Optional name for the hidden `<input>` element.                                                  | `undefined` |
 | `nameAsArray`      | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.    | `false`     |
 | `optimisticToggle` | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true`      |

src/js/Tree.js

@@ -5,7 +5,6 @@ import React from 'react';
 import nodeShape from './nodeShape';
+import uniqueDomId from './uniqueDomId';
 
 class Tree extends React.Component {
 	static propTypes = {
-		checked: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
-		expanded: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
 		nodes: React.PropTypes.arrayOf(
@@ -20,8 +19,10 @@ React.PropTypes.oneOfType([
 		).isRequired,
-		onCheck: React.PropTypes.func.isRequired,
-		onExpand: React.PropTypes.func.isRequired,
 
+		checked: React.PropTypes.arrayOf(React.PropTypes.string),
+		expanded: React.PropTypes.arrayOf(React.PropTypes.string),
 		name: React.PropTypes.string,
 		nameAsArray: React.PropTypes.bool,
 		optimisticToggle: React.PropTypes.bool,
+		onCheck: React.PropTypes.func,
+		onExpand: React.PropTypes.func,
 	};
@@ -36,2 +37,4 @@
 		optimisticToggle: true,
+		onCheck: () => {},
+		onExpand: () => {},
 	};
@@ -44,2 +47,4 @@
 		this.onExpand = this.onExpand.bind(this);
+
+		this.id = uniqueDomId('rct');
 	}
@@ -151,5 +156,6 @@
 					expanded={node.expanded}
+					label={node.label || node.title}
 					optimisticToggle={this.props.optimisticToggle}
 					rawChildren={node.children}
-					title={node.title}
+					treeId={this.id}
 					value={node.value}
@@ -156,0 +162,0 @@ onCheck={this.onCheck}

src/js/TreeNode.js

@@ -9,4 +9,5 @@ import React from 'react';
 		expanded: React.PropTypes.bool.isRequired,
+		label: React.PropTypes.string.isRequired,
 		optimisticToggle: React.PropTypes.bool.isRequired,
-		title: React.PropTypes.string.isRequired,
+		treeId: React.PropTypes.string.isRequired,
 		value: React.PropTypes.string.isRequired,
@@ -104,9 +105,13 @@ onCheck: React.PropTypes.func.isRequired,
 	render() {
+		const { checked, treeId, label, value } = this.props;
+		const inputId = `${treeId}-${value}`;
+
 		return (
 			<li className="rct-node">
 				<span className="rct-text">
-					<span className="rct-collapse" title="Toggle" onClick={this.onExpand}>
+					<button aria-label="Toggle" className="rct-collapse" title="Toggle" onClick={this.onExpand}>
 						{this.renderCollapseIcon()}
-					</span>
-					<label onClick={this.onCheck}>
+					</button>
+					<label htmlFor={inputId}>
+						<input checked={checked === 1} id={inputId} type="checkbox" onChange={this.onCheck} />
 						<span className="rct-checkbox">
@@ -119,3 +124,3 @@ {this.renderCheckboxIcon()}
 						<span className="rct-title">
-							{this.props.title}
+							{label}
 						</span>
@@ -122,0 +127,0 @@ </label>

webpack.config.js

@@ -26,7 +26,7 @@ module.exports = {
 	module: {
-		loaders: [
+		rules: [
 			{
 				test: /\.js?$/,
 				exclude: /(node_modules|bower_components|vender_modules)/,
-				loader: 'babel',
+				loader: 'babel-loader',
 			},
@@ -33,0 +33,0 @@ ],

webpack.test.config.js

@@ -8,7 +8,7 @@ module.exports = {
 	module: {
-		loaders: [
+		rules: [
 			{
 				test: /\.js?$/,
 				exclude: /(node_modules|bower_components|vender_modules)/,
-				loader: 'babel',
+				loader: 'babel-loader',
 			},
@@ -15,0 +15,0 @@ ],

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

207657

increased by2.67%

Number of package files

23

increased by9.52%

Lines of code

1022

increased by11.69%

Worsened metrics

Dev dependency count

28

increased by12%

Number of lines in readme file

78

decreased by-2.5%

No dependency changes