react-checkbox-tree - npm Package Compare versions

Comparing version 0.5.1 to 0.5.2

CHANGELOG.md

 # CHANGELOG
 
+## [v0.5.2](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.5.1...v0.5.2) (2017-05-03)
+
+### Bug Fixes
+
+* [#31]: Fix issue where expand buttons would submit a parent form
+
 ## [v0.5.1](https://github.com/jakezatecky/react-checkbox-tree/compare/v0.5.0...v0.5.1) (2017-03-21)
@@ -4,0 +10,0 @@

gulpfile.js

@@ -46,3 +46,3 @@ const gulp = require('gulp');
 gulp.task('build-style', () => (
-	gulp.src('./src/sass/**/*.scss')
+	gulp.src('./src/scss/**/*.scss')
 		.pipe(scsslint())
@@ -62,3 +62,3 @@ .pipe(scsslint.failReporter())
 gulp.task('build-examples-style', () => (
-	gulp.src('./examples/src/**/*.scss')
+	gulp.src('./examples/src/scss/**/*.scss')
 		.pipe(scsslint())
@@ -93,3 +93,3 @@ .pipe(scsslint.failReporter())
 	gulp.watch(['./src/js/**/*.js', './examples/src/**/*.js'], ['build-examples-script']);
-	gulp.watch(['./src/sass/**/*.scss', './examples/src/**/*.scss'], ['build-examples-style']);
+	gulp.watch(['./src/scss/**/*.scss', './examples/src/**/*.scss'], ['build-examples-style']);
 	gulp.watch(['./examples/src/**/*.html'], ['build-examples-html']).on('change', browserSync.reload);
@@ -96,0 +96,0 @@ });

package.json

 {
   "name": "react-checkbox-tree",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "A simple and elegant checkbox tree for React.",
@@ -22,3 +22,4 @@ "author": "Jake Zatecky",
     "examples": "gulp examples",
-    "gh-deploy": "git subtree push --prefix examples/dist origin gh-pages"
+    "gh-deploy": "git subtree push --prefix examples/dist origin gh-pages",
+    "test": "gulp test"
   },
@@ -34,3 +35,3 @@ "peerDependencies": {
     "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-0": "^6.5.0",
+    "babel-preset-stage-2": "^6.5.0",
     "browser-sync": "^2.18.6",
@@ -41,2 +42,3 @@ "chai": "^3.5.0",
     "eslint-config-airbnb": "^14.1.0",
+    "eslint-import-resolver-webpack": "^0.8.1",
     "eslint-plugin-import": "^2.2.0",
@@ -57,2 +59,3 @@ "eslint-plugin-jsx-a11y": "^4.0.0",
     "react-dom": "^15.4.2",
+    "react-test-renderer": "^15.5.4",
     "webpack": "^2.2.1",
@@ -63,4 +66,5 @@ "webpack-stream": "^3.2.0"
     "classnames": "^2.2.5",
+    "prop-types": "^15.5.8",
     "shortid": "^2.2.6"
   }
 }

README.md

@@ -13,14 +13,38 @@ # react-checkbox-tree
 
-# Installation
+## Usage
 
-The easiest way to use react-checkbox-tree is to install from NPM and include it in your own React build process (e.g. using [Webpack](http://webpack.github.io/docs/what-is-webpack.html)):
+### Installation
 
+Install the library using your favorite dependency manager:
+
+``` shell
+yarn add react-checkbox-tree
 ```
+
+Using npm:
+
+```
 npm install react-checkbox-tree --save
 ```
 
-> **Note** – This library requires that [Font Awesome](http://fontawesome.io/) styles are loaded in the browser.
+> **Note** – This library makes use of [Font Awesome](http://fontawesome.io/) styles and expects them to be loaded in the browser.
 
-# Usage
 
+### Include CSS
+
+For your convenience, the library's styles can be consumed utilizing one of the following files:
+
+* `node_modules/react-checkbox-tree/lib/react-checkbox-tree.css`
+* `node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less`
+* `node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss`
+
+Either include one of these files in your stylesheets or utilize a CSS loader:
+
+``` javascript
+import 'react-checkbox-tree/lib/react-checkbox-tree.css';
+```
+
+
+### Render Component
+
 A quick usage example is included below. Note that the react-checkbox-tree component is [controlled](https://facebook.github.io/react/docs/forms.html#controlled-components). In other words, it is stateless. You must update its `checked` and `expanded` properties whenever a change occurs.
@@ -65,3 +89,3 @@
 
-## Properties
+### Properties
 
@@ -79,3 +103,3 @@ | Property           | Type     | Description                                                                                      | Default     |
 
-### Node Properties
+#### Node Properties
 
@@ -82,0 +106,0 @@ Individual nodes within the `nodes` property can have the following structure:

src/js/CheckboxTree.js

@@ -0,1 +1,2 @@
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -9,11 +10,11 @@ import shortid from 'shortid';
 	static propTypes = {
-		nodes: React.PropTypes.arrayOf(nodeShape).isRequired,
+		nodes: PropTypes.arrayOf(nodeShape).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,
+		checked: PropTypes.arrayOf(React.PropTypes.string),
+		expanded: PropTypes.arrayOf(React.PropTypes.string),
+		name: PropTypes.string,
+		nameAsArray: PropTypes.bool,
+		optimisticToggle: PropTypes.bool,
+		onCheck: PropTypes.func,
+		onExpand: PropTypes.func,
 	};
@@ -20,0 +21,0 @@

src/js/nodeShape.js

@@ -1,18 +0,18 @@
-import React from 'react';
+import PropTypes from 'prop-types';
 
 const nodeShape = {
-	label: React.PropTypes.string.isRequired,
-	value: React.PropTypes.oneOfType([
-		React.PropTypes.string,
-		React.PropTypes.number,
+	label: PropTypes.string.isRequired,
+	value: PropTypes.oneOfType([
+		PropTypes.string,
+		PropTypes.number,
 	]).isRequired,
 
-	icon: React.PropTypes.node,
+	icon: PropTypes.node,
 };
 
-const nodeShapeWithChildren = React.PropTypes.oneOfType([
-	React.PropTypes.shape(nodeShape),
-	React.PropTypes.shape({
+const nodeShapeWithChildren = PropTypes.oneOfType([
+	PropTypes.shape(nodeShape),
+	PropTypes.shape({
 		...nodeShape,
-		children: React.PropTypes.arrayOf(nodeShape).isRequired,
+		children: PropTypes.arrayOf(nodeShape).isRequired,
 	}),
@@ -19,0 +19,0 @@ ]);

src/js/TreeNode.js

 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import React from 'react';
@@ -8,14 +9,14 @@
 	static propTypes = {
-		checked: React.PropTypes.number.isRequired,
-		expanded: React.PropTypes.bool.isRequired,
-		label: React.PropTypes.string.isRequired,
-		optimisticToggle: React.PropTypes.bool.isRequired,
-		treeId: React.PropTypes.string.isRequired,
-		value: React.PropTypes.string.isRequired,
-		onCheck: React.PropTypes.func.isRequired,
-		onExpand: React.PropTypes.func.isRequired,
+		checked: PropTypes.number.isRequired,
+		expanded: PropTypes.bool.isRequired,
+		label: PropTypes.string.isRequired,
+		optimisticToggle: PropTypes.bool.isRequired,
+		treeId: PropTypes.string.isRequired,
+		value: PropTypes.string.isRequired,
+		onCheck: PropTypes.func.isRequired,
+		onExpand: PropTypes.func.isRequired,
 
-		children: React.PropTypes.node,
-		icon: React.PropTypes.node,
-		rawChildren: React.PropTypes.arrayOf(nodeShape),
+		children: PropTypes.node,
+		icon: PropTypes.node,
+		rawChildren: PropTypes.arrayOf(nodeShape),
 	};
@@ -69,6 +70,6 @@
 		if (!this.props.expanded) {
-			return <i className="rct-icon rct-icon-expand-close" />;
+			return <span className="rct-icon rct-icon-expand-close" />;
 		}
 
-		return <i className="rct-icon rct-icon-expand-open" />;
+		return <span className="rct-icon rct-icon-expand-open" />;
 	}
@@ -80,3 +81,3 @@
 				<span className="rct-collapse">
-					<i className="rct-icon" />
+					<span className="rct-icon" />
 				</span>
@@ -87,3 +88,9 @@ );
 		return (
-			<button aria-label="Toggle" className="rct-collapse rct-collapse-btn" title="Toggle" onClick={this.onExpand}>
+			<button
+				aria-label="Toggle"
+				className="rct-collapse rct-collapse-btn"
+				title="Toggle"
+				type="button"
+				onClick={this.onExpand}
+			>
 				{this.renderCollapseIcon()}
@@ -96,10 +103,10 @@ </button>
 		if (this.props.checked === 0) {
-			return <i className="rct-icon rct-icon-uncheck" />;
+			return <span className="rct-icon rct-icon-uncheck" />;
 		}
 
 		if (this.props.checked === 1) {
-			return <i className="rct-icon rct-icon-check" />;
+			return <span className="rct-icon rct-icon-check" />;
 		}
 
-		return <i className="rct-icon rct-icon-half-check" />;
+		return <span className="rct-icon rct-icon-half-check" />;
 	}
@@ -113,10 +120,10 @@
 		if (!this.hasChildren()) {
-			return <i className="rct-icon rct-icon-leaf" />;
+			return <span className="rct-icon rct-icon-leaf" />;
 		}
 
 		if (!this.props.expanded) {
-			return <i className="rct-icon rct-icon-parent-close" />;
+			return <span className="rct-icon rct-icon-parent-close" />;
 		}
 
-		return <i className="rct-icon rct-icon-parent-open" />;
+		return <span className="rct-icon rct-icon-parent-open" />;
 	}
@@ -123,0 +130,0 @@

webpack.test.config.js

@@ -0,1 +1,3 @@
+const path = require('path');
+
 module.exports = {
@@ -7,2 +9,7 @@ output: {
 	},
+	resolve: {
+		alias: {
+			'react-checkbox-tree': path.resolve(__dirname, 'src/js/CheckboxTree'),
+		},
+	},
 	module: {
@@ -9,0 +16,0 @@ rules: [

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

335947

increased by182.4%

Number of package files

23

increased by4.55%

Lines of code

1385

increased by1.02%

Number of lines in readme file

111

increased by27.59%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

30

increased by7.14%

Dependency changes

• + Addedprop-types@^15.5.8