react-virtualized-checkbox - npm Package Compare versions

Comparing version 2.0.3 to 2.1.2

CHANGELOG.md

 Changelog
 ------------
+###2.1.0
+Fix react-virtualized imports
+
+###2.0.4
+Remove unnecessary isRequired on props
+Add example on overlay
+Fix linting issues
+
 ###2.0.3
@@ -4,0 +12,0 @@ Fix bug on checkboxes alignment

dist/commonjs/VirtualizedCheckbox/VirtualizedCheckbox.js

@@ -15,4 +15,10 @@ 'use strict';
 
-var _reactVirtualized = require('react-virtualized');
+var _List = require('react-virtualized/dist/commonjs/List');
 
+var _List2 = _interopRequireDefault(_List);
+
+var _AutoSizer = require('react-virtualized/dist/commonjs/AutoSizer');
+
+var _AutoSizer2 = _interopRequireDefault(_AutoSizer);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,6 +37,6 @@
 var Checkbox = function Checkbox(_ref) {
-  var _onChange = _ref.onChange;
-  var checked = _ref.checked;
-  var label = _ref.label;
-  var style = _ref.style;
+  var onChange = _ref.onChange,
+      checked = _ref.checked,
+      label = _ref.label,
+      style = _ref.style;
   return _react2.default.createElement(
@@ -45,5 +51,3 @@ 'div',
         value: label,
-        onChange: function onChange() {
-          return _onChange();
-        },
+        onChange: onChange,
         checked: checked || false
@@ -64,6 +68,6 @@ }),
 
-    var items = props.items;
-    var labelKey = props.labelKey;
-    var valueKey = props.valueKey;
-    var textFilter = props.textFilter;
+    var items = props.items,
+        labelKey = props.labelKey,
+        valueKey = props.valueKey,
+        textFilter = props.textFilter;
 
@@ -92,2 +96,3 @@
     _this.onTextFilterChange = _this.onTextFilterChange.bind(_this);
+    _this.onChange = _this.onChange.bind(_this);
     return _this;
@@ -134,6 +139,6 @@ }
     value: function onChange(box) {
-      var _props = this.props;
-      var valueKey = _props.valueKey;
-      var labelKey = _props.labelKey;
-      var onChange = _props.onChange;
+      var _props = this.props,
+          valueKey = _props.valueKey,
+          labelKey = _props.labelKey,
+          onChange = _props.onChange;
       var boxes = this.state.boxes;
@@ -159,3 +164,6 @@
         var _newBoxes2 = boxes.map(function (bx) {
-          return bx[labelKey] === box[labelKey] ? _extends({}, box, { checked: !box.checked }) : bx;
+          if (bx[labelKey] === box[labelKey]) {
+            return _extends({}, box, { checked: !box.checked });
+          }
+          return bx;
         });
@@ -172,2 +180,3 @@ var newCheckedCounter = box.checked ? this.checkedCounter - 1 : this.checkedCounter + 1;
       }
+      // this.list.forceUpdate()
       if (onChange) {
@@ -206,10 +215,9 @@ onChange(box);
 
-      // console.log(this)
-      var _props2 = this.props;
-      var rowHeight = _props2.rowHeight;
-      var hasButtons = _props2.hasButtons;
-      var hasFilterBox = _props2.hasFilterBox;
-      var _state = this.state;
-      var boxes = _state.boxes;
-      var textFilter = _state.textFilter;
+      var _props2 = this.props,
+          rowHeight = _props2.rowHeight,
+          hasButtons = _props2.hasButtons,
+          hasFilterBox = _props2.hasFilterBox;
+      var _state = this.state,
+          boxes = _state.boxes,
+          textFilter = _state.textFilter;
 
@@ -226,7 +234,7 @@ var filteredBoxes = boxes.filter(function (box) {
       return _react2.default.createElement(
-        _reactVirtualized.AutoSizer,
+        _AutoSizer2.default,
         null,
         function (_ref3) {
-          var width = _ref3.width;
-          var height = _ref3.height;
+          var width = _ref3.width,
+              height = _ref3.height;
           return _react2.default.createElement(
@@ -246,3 +254,3 @@ 'div',
             ) : null,
-            _react2.default.createElement(_reactVirtualized.List, _extends({
+            _react2.default.createElement(_List2.default, _extends({
               height: virtualScrollHeight(height),
@@ -258,8 +266,16 @@ width: width,
               { style: { display: 'flex', width: width, height: rowHeight } },
-              _react2.default.createElement('input', { type: 'button', value: 'Ok', onClick: function onClick() {
+              _react2.default.createElement('input', {
+                type: 'button',
+                value: 'Ok',
+                onClick: function onClick() {
                   return _this2.props.onOk(_this2.checkedAll, _this2.checkedBoxes, textFilter);
-                } }),
-              _react2.default.createElement('input', { type: 'button', value: 'Cancel', onClick: function onClick() {
+                }
+              }),
+              _react2.default.createElement('input', {
+                type: 'button',
+                value: 'Cancel',
+                onClick: function onClick() {
                   return _this2.props.onCancel();
-                } })
+                }
+              })
             ) : null
@@ -275,7 +291,7 @@ );
 
-      var index = _ref4.index;
-      var style = _ref4.style;
-      var _props3 = this.props;
-      var valueKey = _props3.valueKey;
-      var labelKey = _props3.labelKey;
+      var index = _ref4.index,
+          style = _ref4.style;
+      var _props3 = this.props,
+          valueKey = _props3.valueKey,
+          labelKey = _props3.labelKey;
       var boxes = this.state.boxes;
@@ -289,5 +305,11 @@
       }
-      return _react2.default.createElement(Checkbox, _extends({ style: style, key: box[labelKey], onChange: function onChange() {
+      return _react2.default.createElement(Checkbox, {
+        style: style,
+        key: box[labelKey],
+        onChange: function onChange() {
           return _this3.onChange(box);
-        }, label: box[labelKey] }, box));
+        },
+        label: box[labelKey],
+        checked: box.checked
+      });
     }
@@ -312,5 +334,5 @@ }, {
     get: function get() {
-      var _state2 = this.state;
-      var boxes = _state2.boxes;
-      var textFilter = _state2.textFilter;
+      var _state2 = this.state,
+          boxes = _state2.boxes,
+          textFilter = _state2.textFilter;
 
@@ -338,10 +360,10 @@ return boxes[0].checked && !textFilter;
   hasFilterBox: _react.PropTypes.bool,
-  labelKey: _react.PropTypes.string.isRequired,
-  onCancel: _react.PropTypes.func.isRequired,
-  onChange: _react.PropTypes.func.isRequired,
-  onOk: _react.PropTypes.func.isRequired,
-  items: _react.PropTypes.array.isRequired,
-  rowHeight: _react.PropTypes.number.isRequired,
+  labelKey: _react.PropTypes.string,
+  onCancel: _react.PropTypes.func,
+  onChange: _react.PropTypes.func,
+  onOk: _react.PropTypes.func,
+  items: _react.PropTypes.array,
+  rowHeight: _react.PropTypes.number,
   textFilter: _react.PropTypes.string,
-  valueKey: _react.PropTypes.string.isRequired
+  valueKey: _react.PropTypes.string
 };
@@ -348,0 +370,0 @@ VirtualizedCheckbox.defaultProps = {

dist/es/VirtualizedCheckbox/VirtualizedCheckbox.js

 import React, { Component, PropTypes } from 'react';
-import { List, AutoSizer } from 'react-virtualized';
+import List from 'react-virtualized/dist/commonjs/List';
+import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 
 var Checkbox = function Checkbox(_ref) {
-  var _onChange = _ref.onChange;
-  var checked = _ref.checked;
-  var label = _ref.label;
-  var style = _ref.style;
+  var onChange = _ref.onChange,
+      checked = _ref.checked,
+      label = _ref.label,
+      style = _ref.style;
   return React.createElement(
@@ -18,5 +19,3 @@ 'div',
         value: label,
-        onChange: function onChange() {
-          return _onChange();
-        },
+        onChange: onChange,
         checked: checked || false
@@ -37,6 +36,6 @@ }),
 
-    var items = props.items;
-    var labelKey = props.labelKey;
-    var valueKey = props.valueKey;
-    var textFilter = props.textFilter;
+    var items = props.items,
+        labelKey = props.labelKey,
+        valueKey = props.valueKey,
+        textFilter = props.textFilter;
 
@@ -65,2 +64,3 @@
     _this.onTextFilterChange = _this.onTextFilterChange.bind(_this);
+    _this.onChange = _this.onChange.bind(_this);
     return _this;
@@ -107,6 +107,6 @@ }
     value: function onChange(box) {
-      var _props = this.props;
-      var valueKey = _props.valueKey;
-      var labelKey = _props.labelKey;
-      var onChange = _props.onChange;
+      var _props = this.props,
+          valueKey = _props.valueKey,
+          labelKey = _props.labelKey,
+          onChange = _props.onChange;
       var boxes = this.state.boxes;
@@ -132,3 +132,6 @@
         var _newBoxes2 = boxes.map(function (bx) {
-          return bx[labelKey] === box[labelKey] ? babelHelpers.extends({}, box, { checked: !box.checked }) : bx;
+          if (bx[labelKey] === box[labelKey]) {
+            return babelHelpers.extends({}, box, { checked: !box.checked });
+          }
+          return bx;
         });
@@ -145,2 +148,3 @@ var newCheckedCounter = box.checked ? this.checkedCounter - 1 : this.checkedCounter + 1;
       }
+      // this.list.forceUpdate()
       if (onChange) {
@@ -179,10 +183,9 @@ onChange(box);
 
-      // console.log(this)
-      var _props2 = this.props;
-      var rowHeight = _props2.rowHeight;
-      var hasButtons = _props2.hasButtons;
-      var hasFilterBox = _props2.hasFilterBox;
-      var _state = this.state;
-      var boxes = _state.boxes;
-      var textFilter = _state.textFilter;
+      var _props2 = this.props,
+          rowHeight = _props2.rowHeight,
+          hasButtons = _props2.hasButtons,
+          hasFilterBox = _props2.hasFilterBox;
+      var _state = this.state,
+          boxes = _state.boxes,
+          textFilter = _state.textFilter;
 
@@ -202,4 +205,4 @@ var filteredBoxes = boxes.filter(function (box) {
         function (_ref3) {
-          var width = _ref3.width;
-          var height = _ref3.height;
+          var width = _ref3.width,
+              height = _ref3.height;
           return React.createElement(
@@ -230,8 +233,16 @@ 'div',
               { style: { display: 'flex', width: width, height: rowHeight } },
-              React.createElement('input', { type: 'button', value: 'Ok', onClick: function onClick() {
+              React.createElement('input', {
+                type: 'button',
+                value: 'Ok',
+                onClick: function onClick() {
                   return _this2.props.onOk(_this2.checkedAll, _this2.checkedBoxes, textFilter);
-                } }),
-              React.createElement('input', { type: 'button', value: 'Cancel', onClick: function onClick() {
+                }
+              }),
+              React.createElement('input', {
+                type: 'button',
+                value: 'Cancel',
+                onClick: function onClick() {
                   return _this2.props.onCancel();
-                } })
+                }
+              })
             ) : null
@@ -247,7 +258,7 @@ );
 
-      var index = _ref4.index;
-      var style = _ref4.style;
-      var _props3 = this.props;
-      var valueKey = _props3.valueKey;
-      var labelKey = _props3.labelKey;
+      var index = _ref4.index,
+          style = _ref4.style;
+      var _props3 = this.props,
+          valueKey = _props3.valueKey,
+          labelKey = _props3.labelKey;
       var boxes = this.state.boxes;
@@ -261,5 +272,11 @@
       }
-      return React.createElement(Checkbox, babelHelpers.extends({ style: style, key: box[labelKey], onChange: function onChange() {
+      return React.createElement(Checkbox, {
+        style: style,
+        key: box[labelKey],
+        onChange: function onChange() {
           return _this3.onChange(box);
-        }, label: box[labelKey] }, box));
+        },
+        label: box[labelKey],
+        checked: box.checked
+      });
     }
@@ -284,5 +301,5 @@ }, {
     get: function get() {
-      var _state2 = this.state;
-      var boxes = _state2.boxes;
-      var textFilter = _state2.textFilter;
+      var _state2 = this.state,
+          boxes = _state2.boxes,
+          textFilter = _state2.textFilter;
 
@@ -309,10 +326,10 @@ return boxes[0].checked && !textFilter;
   hasFilterBox: PropTypes.bool,
-  labelKey: PropTypes.string.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onOk: PropTypes.func.isRequired,
-  items: PropTypes.array.isRequired,
-  rowHeight: PropTypes.number.isRequired,
+  labelKey: PropTypes.string,
+  onCancel: PropTypes.func,
+  onChange: PropTypes.func,
+  onOk: PropTypes.func,
+  items: PropTypes.array,
+  rowHeight: PropTypes.number,
   textFilter: PropTypes.string,
-  valueKey: PropTypes.string.isRequired
+  valueKey: PropTypes.string
 };
@@ -319,0 +336,0 @@ VirtualizedCheckbox.defaultProps = {

package.json

 {
   "name": "react-virtualized-checkbox",
-  "version": "2.0.3",
+  "version": "2.1.2",
   "description": "Checkbox group component with virtualization for large number of items",
@@ -8,5 +8,4 @@ "main": "dist/commonjs/index.js",
   "scripts": {
-    "build": "npm run build:commonjs && npm run build:css && npm run build:es && npm run build:demo && npm run build:umd",
+    "build": "npm run build:commonjs && npm run build:es && npm run build:demo && npm run build:umd",
     "build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=production cross-env BABEL_ENV=commonjs babel source --out-dir dist/commonjs --ignore *.example.js,*.test.js,source/demo/,source/tests.js",
-    "build:css": "postcss --use autoprefixer source/styles.css > styles.css",
     "build:demo": "npm run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail",
@@ -70,58 +69,59 @@ "build:es": "npm run clean:es && cross-env NODE_ENV=production cross-env BABEL_ENV=es babel source --out-dir dist/es --ignore *.example.js,*.test.js,source/demo/,source/tests.js",
   "devDependencies": {
-    "autoprefixer": "^6.2.3",
-    "babel-cli": "6.5.1",
-    "babel-core": "^6.5.1",
-    "babel-eslint": "^6.0.4",
-    "babel-loader": "^6.2.3",
-    "babel-plugin-__coverage__": "^0.1111.1",
+    "autoprefixer": "latest",
+    "babel-cli": "latest",
+    "babel-core": "latest",
+    "babel-eslint": "latest",
+    "babel-loader": "latest",
+    "babel-plugin-__coverage__": "latest",
+    "babel-plugin-transform-es2015-destructuring": "latest",
+    "babel-plugin-transform-object-rest-spread": "latest",
+    "babel-plugin-transform-react-inline-elements": "latest",
+    "babel-polyfill": "latest",
+    "babel-preset-es2015": "latest",
+    "babel-preset-es2015-rollup": "latest",
+    "babel-preset-react": "latest",
+    "babel-preset-stage-0": "latest",
+    "bluebird": "latest",
+    "cross-env": "latest",
+    "css-loader": "latest",
+    "enzyme": "latest",
+    "express": "latest",
+    "file-loader": "latest",
+    "fs-extra": "latest",
+    "gh-pages": "latest",
+    "jasmine": "latest",
+    "karma": "latest",
+    "karma-coverage": "latest",
+    "karma-jasmine": "latest",
+    "karma-junit-reporter": "latest",
+    "karma-spec-reporter": "latest",
+    "postcss": "latest",
+    "postcss-cli": "latest",
+    "postcss-loader": "latest",
+    "react": "latest",
+    "react-addons-shallow-compare": "latest",
+    "react-addons-test-utils": "latest",
+    "react-dom": "latest",
+    "react-overlays": "latest",
+    "react-resizable": "latest",
+    "redbox-react": "latest",
+    "rimraf": "latest",
+    "standard": "latest",
+    "style-loader": "latest",
+    "watch": "latest",
     "babel-plugin-react-transform": "^2.0.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-es2015-destructuring": "^6.9.0",
-    "babel-plugin-transform-object-rest-spread": "^6.8.0",
-    "babel-plugin-transform-react-inline-elements": "^6.6.5",
     "babel-plugin-typecheck": "^3.6.1",
-    "babel-polyfill": "^6.5.0",
-    "babel-preset-es2015": "^6.5.0",
-    "babel-preset-es2015-rollup": "^1.1.1",
-    "babel-preset-react": "^6.5.0",
-    "babel-preset-stage-0": "^6.5.0",
-    "bluebird": "^3.0.5",
     "codecov": "^1.0.1",
-    "cross-env": "^1.0.7",
-    "css-loader": "^0.23.0",
-    "enzyme": "^2.3.0",
-    "express": "^4.13.3",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.8.5",
-    "fs-extra": "^0.26.2",
-    "gh-pages": "^0.6.0",
     "html-webpack-plugin": "^1.7.0",
     "immutable": "^3.8.1",
-    "jasmine": "^2.3.2",
     "jasmine-core": "^2.3.4",
     "json-loader": "^0.5.4",
-    "karma": "^0.13.22",
-    "karma-coverage": "^0.5.5",
-    "karma-jasmine": "^0.3.6",
-    "karma-junit-reporter": "^0.3.8",
     "karma-phantomjs-launcher": "^1.0.2",
     "karma-sourcemap-loader": "^0.3.6",
-    "karma-spec-reporter": "0.0.23",
     "karma-webpack": "^1.7.0",
     "phantomjs-prebuilt": "^2.1.13",
-    "postcss": "^5.0.14",
-    "postcss-cli": "^2.3.3",
-    "postcss-loader": "^0.8.0",
-    "react": "^15.1.0",
-    "react-addons-shallow-compare": "^15.0.2",
-    "react-addons-test-utils": "^15.1.0",
-    "react-dom": "^15.1.0",
-    "react-resizable": "^1.4.1",
     "react-transform-catch-errors": "^1.0.2",
     "react-transform-hmr": "^1.0.2",
-    "redbox-react": "^1.0.1",
-    "rimraf": "^2.4.3",
-    "standard": "^7.1.2",
-    "style-loader": "^0.13.0",
-    "watch": "^0.16.0",
     "webpack": "^1.9.6",
@@ -131,9 +131,4 @@ "webpack-dev-server": "^1.14.0"
   "dependencies": {
-    "react-virtualized": "^8.0.11"
-  },
-  "peerDependencies": {
-    "react": "^0.14.0 || ^15.1.0",
-    "react-addons-shallow-compare": "^0.14.0 || ^15.1.0",
-    "react-dom": "^0.14.0 || ^15.1.0"
+    "react-virtualized": "9.2.1"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Improved metrics

Dependency count

1

-75%

Number of package files

14

16.67%

Number of medium quality alerts

1

-50%

Number of lines in readme file

74

Infinity%

Worsened metrics

Total package byte prevSize

735584

-23.17%

Dev dependency count

59

1.72%

Lines of code

3040

-45.52%

Number of low supply chain risk alerts

6

Infinity%

Dependency changes

• + Added

  react@16.14.0
  (transitive)

• + Added

  react-dom@16.14.0
  (transitive)

• + Added

  react-virtualized@9.2.1
  (transitive)

• + Added

  scheduler@0.19.1
  (transitive)

• - Removed

  asap@2.0.6
  (transitive)

• - Removed

  core-js@1.2.7
  (transitive)

• - Removed

  create-react-class@15.7.0
  (transitive)

• - Removed

  encoding@0.1.13
  (transitive)

• - Removed

  fbjs@0.8.18
  (transitive)

• - Removed

  iconv-lite@0.6.3
  (transitive)

• - Removed

  is-stream@1.1.0
  (transitive)

• - Removed

  isomorphic-fetch@2.2.1
  (transitive)

• - Removed

  node-fetch@1.7.3
  (transitive)

• - Removed

  promise@7.3.1
  (transitive)

• - Removed

  react@15.7.0
  (transitive)

• - Removed

  react-addons-shallow-compare@15.6.3
  (transitive)

• - Removed

  react-dom@15.7.0
  (transitive)

• - Removed

  react-virtualized@8.11.4
  (transitive)

• - Removed

  safer-buffer@2.1.2
  (transitive)

• - Removed

  setimmediate@1.0.5
  (transitive)

• - Removed

  ua-parser-js@0.7.40
  (transitive)

• - Removed

  whatwg-fetch@3.6.20
  (transitive)

• Updated

  react-virtualized@9.2.1