Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-checkbox-tree

Package Overview
Dependencies
Maintainers
1
Versions
49
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-checkbox-tree - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

CHANGELOG.md

45

gulpfile.js

@@ -8,4 +8,5 @@ const gulp = require('gulp');

const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pkg = require('./package.json');
const browserSync = require('browser-sync').create();
const webpackConfig = require('./webpack.config');

@@ -25,3 +26,3 @@ const testWebpackConfig = require('./webpack.test.config');

gulp.src(['./test/index.js'])
.pipe(webpack(require('./webpack.config.js')))
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('./test/compiled/'))

@@ -52,16 +53,42 @@ );

}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
}))
.pipe(gulp.dest('./lib'))
);
gulp.task('build-examples', ['build-script', 'build-style'], () =>
gulp.src(['./examples/index.js'])
gulp.task('build-examples-style', () =>
gulp.src('./examples/src/**/*.scss')
.pipe(scsslint())
.pipe(scsslint.failReporter())
.pipe(sass({
outputStyle: 'expanded',
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
}))
.pipe(gulp.dest('./examples/dist'))
.pipe(browserSync.stream())
);
gulp.task('build-examples-script', () =>
gulp.src(['./examples/src/index.js'])
.pipe(webpack(testWebpackConfig))
.pipe(gulp.dest('./examples/compiled/'))
.pipe(gulp.dest('./examples/dist/'))
.pipe(browserSync.stream())
);
gulp.task('watch', () => {
gulp.watch(['./src/js/**/*.js'], ['build-script']);
gulp.watch(['./src/sass/**/*.scss'], ['build-style']);
gulp.task('build-examples-html', () =>
gulp.src('./examples/src/index.html')
.pipe(gulp.dest('./examples/dist/'))
.pipe(browserSync.stream())
);
gulp.task('examples', ['build-examples-style', 'build-examples-script', 'build-examples-html'], () => {
browserSync.init({ server: './examples/dist' });
gulp.watch(['./src/js/**/*.js', './examples/src/**/*.js'], ['build-examples-script']);
gulp.watch(['./src/sass/**/*.scss', './examples/src/**/*.scss'], ['build-examples-style']);
gulp.watch(['./examples/src/**/*.html'], ['build-examples-html']).on('change', browserSync.reload);
});
gulp.task('default', ['build-script', 'build-style']);

83

lib/index.js

@@ -1,2 +0,2 @@

/*! react-checkbox-tree - v0.3.0 | 2017 */
/*! react-checkbox-tree - v0.4.0 | 2017 */
(function webpackUniversalModuleDefinition(root, factory) {

@@ -119,8 +119,8 @@ if(typeof exports === 'object' && typeof module === 'object')

value: function onCheck(node) {
var checked = [].concat(_toConsumableArray(this.props.checked));
var isChecked = node.checked;
var _props = this.props;
var checked = _props.checked;
var onCheck = _props.onCheck;
this.setCheckState(checked, node, isChecked);
this.props.onCheck(checked);
onCheck(this.toggleChecked([].concat(_toConsumableArray(checked)), node, node.checked));
}

@@ -130,15 +130,8 @@ }, {

value: function onExpand(node) {
var isExpanded = node.expanded;
var expanded = [].concat(_toConsumableArray(this.props.expanded));
var nodeIndex = expanded.indexOf(node.value);
var _props2 = this.props;
var expanded = _props2.expanded;
var onExpand = _props2.onExpand;
if (!isExpanded && nodeIndex > -1) {
// Node is now collapsed, remove from expanded list
expanded.splice(nodeIndex, 1);
} else if (isExpanded && nodeIndex === -1) {
// Add node to expanded list
expanded.push(node.value);
}
this.props.onExpand(expanded);
onExpand(this.toggleNode([].concat(_toConsumableArray(expanded)), node, node.expanded));
}

@@ -150,5 +143,5 @@ }, {

var _props = this.props;
var checked = _props.checked;
var expanded = _props.expanded;
var _props3 = this.props;
var checked = _props3.checked;
var expanded = _props3.expanded;

@@ -189,4 +182,4 @@

}, {
key: 'setCheckState',
value: function setCheckState(checked, node, isChecked) {
key: 'toggleChecked',
value: function toggleChecked(checked, node, isChecked) {
var _this3 = this;

@@ -197,16 +190,23 @@

node.children.forEach(function (child) {
_this3.setCheckState(checked, child, isChecked);
_this3.toggleChecked(checked, child, isChecked);
});
} else {
// Set leaf to check/unchecked state
var index = checked.indexOf(node.value);
this.toggleNode(checked, node, isChecked);
}
if (index > -1) {
checked.splice(index, 1);
}
return checked;
}
}, {
key: 'toggleNode',
value: function toggleNode(list, node, toggleValue) {
var index = list.indexOf(node.value);
if (isChecked) {
checked.push(node.value);
}
if (index > -1 && !toggleValue) {
list.splice(index, 1);
} else if (index === -1 && toggleValue) {
list.push(node.value);
}
return list;
}

@@ -255,2 +255,3 @@ }, {

expanded: node.expanded,
optimisticToggle: _this6.props.optimisticToggle,
rawChildren: node.children,

@@ -333,2 +334,5 @@ title: node.title,

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,

@@ -339,5 +343,3 @@ onExpand: _react2.default.PropTypes.func.isRequired,

nameAsArray: _react2.default.PropTypes.bool,
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)
}))]))
optimisticToggle: _react2.default.PropTypes.bool
};

@@ -349,3 +351,4 @@ Tree.defaultProps = {

nameAsArray: false,
nodes: []
nodes: [],
optimisticToggle: true
};

@@ -404,9 +407,14 @@ exports.default = Tree;

value: function onCheck() {
var isChecked = 0;
var isChecked = false;
// Toggle off/partial check state to checked
if (this.props.checked === 0 || this.props.checked === 2) {
isChecked = 1;
// Toggle off state to checked
if (this.props.checked === 0) {
isChecked = true;
}
// Toggle partial state based on model
if (this.props.checked === 2) {
isChecked = this.props.optimisticToggle;
}
this.props.onCheck({

@@ -519,2 +527,3 @@ value: this.props.value,

expanded: _react2.default.PropTypes.bool.isRequired,
optimisticToggle: _react2.default.PropTypes.bool.isRequired,
title: _react2.default.PropTypes.string.isRequired,

@@ -521,0 +530,0 @@ value: _react2.default.PropTypes.string.isRequired,

7

package.json
{
"name": "react-checkbox-tree",
"version": "0.3.0",
"version": "0.4.0",
"description": "React component for checkbox trees.",

@@ -19,3 +19,3 @@ "author": "Jake Zatecky",

"scripts": {
"examples": "gulp build-examples && http-server"
"examples": "gulp examples"
},

@@ -32,2 +32,3 @@ "peerDependencies": {

"babel-preset-stage-0": "^6.5.0",
"browser-sync": "^2.18.6",
"chai": "^3.5.0",

@@ -40,2 +41,3 @@ "eslint": "^3.13.0",

"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-eslint": "^3.0.1",

@@ -46,3 +48,2 @@ "gulp-header": "^1.8.8",

"gulp-scss-lint": "^0.4.0",
"http-server": "^0.9.0",
"mocha": "^3.0.2",

@@ -49,0 +50,0 @@ "react": "^15.3.0",

21

README.md

@@ -20,2 +20,4 @@ # react-checkbox-tree

> **Note** – This library requires that [Font Awesome](http://fontawesome.io/) styles are loaded in the browser.
# Usage

@@ -69,10 +71,11 @@

| Property | Type | Description |
| ------------- | -------- | --------------------------------------------------------------------------------------------- |
| `nodes` | array | **Required**. Specifies the tree nodes and their children. |
| `checked` | array | **Required**. An array of checked node values. |
| `expanded` | array | **Required**. An array of expanded node values. |
| `onCheck` | function | **Required**. onCheck handler: `function(checked) {}` |
| `onExpand` | function | **Required**. onExpand handler: `function(expanded) {}` |
| `name` | string | Optional name for the hidden `<input>` element. |
| `nameAsArray` | bool | If true, the hidden `<input>` will encode its values as an array rather than a joined string. |
| Property | Type | Description | Default |
| ------------------ | -------- | ------------------------------------------------------------------------------------------------ | ----------- |
| `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) {}` | |
| `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` |

6

src/index.js

@@ -1,6 +0,2 @@

// 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
// Export default to provide support for non-ES6 solutions
module.exports = require('./js/Tree').default;

60

src/js/Tree.js

@@ -10,7 +10,2 @@ import React from 'react';

expanded: React.PropTypes.arrayOf(React.PropTypes.string).isRequired,
onCheck: React.PropTypes.func.isRequired,
onExpand: React.PropTypes.func.isRequired,
name: React.PropTypes.string,
nameAsArray: React.PropTypes.bool,
nodes: React.PropTypes.arrayOf(

@@ -24,3 +19,9 @@ React.PropTypes.oneOfType([

]),
),
).isRequired,
onCheck: React.PropTypes.func.isRequired,
onExpand: React.PropTypes.func.isRequired,
name: React.PropTypes.string,
nameAsArray: React.PropTypes.bool,
optimisticToggle: React.PropTypes.bool,
};

@@ -34,2 +35,3 @@

nodes: [],
optimisticToggle: true,
};

@@ -45,24 +47,11 @@

onCheck(node) {
const checked = [...this.props.checked];
const isChecked = node.checked;
const { checked, onCheck } = this.props;
this.setCheckState(checked, node, isChecked);
this.props.onCheck(checked);
onCheck(this.toggleChecked([...checked], node, node.checked));
}
onExpand(node) {
const isExpanded = node.expanded;
const expanded = [...this.props.expanded];
const nodeIndex = expanded.indexOf(node.value);
const { expanded, onExpand } = this.props;
if (!isExpanded && nodeIndex > -1) {
// Node is now collapsed, remove from expanded list
expanded.splice(nodeIndex, 1);
} else if (isExpanded && nodeIndex === -1) {
// Add node to expanded list
expanded.push(node.value);
}
this.props.onExpand(expanded);
onExpand(this.toggleNode([...expanded], node, node.expanded));
}

@@ -105,20 +94,26 @@

setCheckState(checked, node, isChecked) {
toggleChecked(checked, node, isChecked) {
if (node.children !== null) {
// Percolate check status down to all children
node.children.forEach((child) => {
this.setCheckState(checked, child, isChecked);
this.toggleChecked(checked, child, isChecked);
});
} else {
// Set leaf to check/unchecked state
const index = checked.indexOf(node.value);
this.toggleNode(checked, node, isChecked);
}
if (index > -1) {
checked.splice(index, 1);
}
return checked;
}
if (isChecked) {
checked.push(node.value);
}
toggleNode(list, node, toggleValue) {
const index = list.indexOf(node.value);
if (index > -1 && !toggleValue) {
list.splice(index, 1);
} else if (index === -1 && toggleValue) {
list.push(node.value);
}
return list;
}

@@ -157,2 +152,3 @@

expanded={node.expanded}
optimisticToggle={this.props.optimisticToggle}
rawChildren={node.children}

@@ -159,0 +155,0 @@ title={node.title}

14

src/js/TreeNode.js

@@ -9,2 +9,3 @@ import React from 'react';

expanded: React.PropTypes.bool.isRequired,
optimisticToggle: React.PropTypes.bool.isRequired,
title: React.PropTypes.string.isRequired,

@@ -32,9 +33,14 @@ value: React.PropTypes.string.isRequired,

onCheck() {
let isChecked = 0;
let isChecked = false;
// Toggle off/partial check state to checked
if (this.props.checked === 0 || this.props.checked === 2) {
isChecked = 1;
// Toggle off state to checked
if (this.props.checked === 0) {
isChecked = true;
}
// Toggle partial state based on model
if (this.props.checked === 2) {
isChecked = this.props.optimisticToggle;
}
this.props.onCheck({

@@ -41,0 +47,0 @@ value: this.props.value,

lib/react-checkbox-tree.css

Sorry, the diff of this file is not supported yet

src/less/react-checkbox-tree.less

Sorry, the diff of this file is not supported yet

src/sass/react-checkbox-tree.scss

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc