react-selectable-fast - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

lib/CreateSelectable.js

@@ -15,6 +15,4 @@ 'use strict';
 
-var _reactDom = require('react-dom');
+var _propTypes = require('prop-types');
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _getBoundsForNode = require('./getBoundsForNode');
@@ -33,22 +31,27 @@
 var createSelectable = function createSelectable(WrappedComponent) {
-  var _class, _temp;
+  var _class, _temp2;
 
-  var SelectableItem = (_temp = _class = function (_Component) {
+  return _temp2 = _class = function (_Component) {
     _inherits(SelectableItem, _Component);
 
-    function SelectableItem(props) {
+    function SelectableItem() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
       _classCallCheck(this, SelectableItem);
 
-      var _this = _possibleConstructorReturn(this, (SelectableItem.__proto__ || Object.getPrototypeOf(SelectableItem)).call(this, props));
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-      _this.registerSelectable = function (containerScroll) {
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SelectableItem.__proto__ || Object.getPrototypeOf(SelectableItem)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+        selected: _this.props.selected,
+        selecting: false
+      }, _this.registerSelectable = function (containerScroll) {
         _this.bounds = (0, _getBoundsForNode2.default)(_this.node, containerScroll);
         _this.context.selectable.register(_this);
-      };
-
-      _this.state = {
-        selected: props.selected,
-        selecting: false
-      };
-      return _this;
+      }, _this.selectableRef = function (ref) {
+        return _this.node = ref;
+      }, _temp), _possibleConstructorReturn(_this, _ret);
     }
@@ -59,3 +62,2 @@
       value: function componentDidMount() {
-        this.node = _reactDom2.default.findDOMNode(this); // eslint-disable-line
         this.registerSelectable();
@@ -71,8 +73,7 @@ }
       value: function render() {
-        var props = _extends({}, this.props, {
+        return _react2.default.createElement(WrappedComponent, _extends({}, this.props, {
           selected: this.state.selected,
-          selecting: this.state.selecting
-        });
-
-        return _react2.default.createElement(WrappedComponent, props, this.props.children);
+          selecting: this.state.selecting,
+          selectableRef: this.selectableRef
+        }));
       }
@@ -82,14 +83,11 @@ }]);
     return SelectableItem;
-  }(_react.Component), _class.contextTypes = {
-    selectable: _react2.default.PropTypes.object
-  }, _class.propTypes = {
-    selected: _react.PropTypes.bool
+  }(_react.Component), _class.propTypes = {
+    selected: _propTypes.bool
   }, _class.defaultProps = {
     selected: false
-  }, _temp);
-
-
-  return SelectableItem;
+  }, _class.contextTypes = {
+    selectable: _propTypes.object
+  }, _temp2;
 };
 
 exports.default = createSelectable;

lib/DeselectAll.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _class, _temp2;
-
 var _react = require('react');
@@ -16,2 +14,4 @@
 
+var _propTypes = require('prop-types');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +25,3 @@
 
-var DeselectAllButton = (_temp2 = _class = function (_Component) {
+var DeselectAllButton = function (_Component) {
   _inherits(DeselectAllButton, _Component);
@@ -68,10 +68,14 @@
   return DeselectAllButton;
-}(_react.Component), _class.propTypes = {
-  children: _react.PropTypes.object,
-  component: _react.PropTypes.node
-}, _class.defaultProps = {
+}(_react.Component);
+
+DeselectAllButton.propTypes = {
+  children: _propTypes.object,
+  component: _propTypes.node
+};
+DeselectAllButton.defaultProps = {
   component: 'div'
-}, _class.contextTypes = {
-  selectable: _react2.default.PropTypes.object
-}, _temp2);
+};
+DeselectAllButton.contextTypes = {
+  selectable: _propTypes.object
+};
 exports.default = DeselectAllButton;

lib/getBoundsForNode.js

@@ -6,3 +6,3 @@ "use strict";
 });
-
+exports.default = getBoundsForNode;
 /**
@@ -13,3 +13,3 @@ * Given a node, get everything needed to calculate its boundaries
  */
-exports.default = function (node) {
+function getBoundsForNode(node) {
   var containerScroll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { scrollTop: 0, scrollLeft: 0 };
@@ -27,2 +27,2 @@ var scrollTop = containerScroll.scrollTop,
   };
-};
+}

lib/nodeInRoot.js

@@ -6,3 +6,4 @@ "use strict";
 });
-var isNodeInRoot = function isNodeInRoot(node, root) {
+exports.default = isNodeInRoot;
+function isNodeInRoot(node, root) {
   while (node) {
@@ -16,4 +17,2 @@ if (node === root) {
   return false;
-};
-
-exports.default = isNodeInRoot;
+}

lib/Selectable-group.js

@@ -7,8 +7,16 @@ 'use strict';
 
+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 _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 _class, _temp;
+require('core-js/fn/object/assign');
 
-require('babel-polyfill');
+require('core-js/fn/array/from');
 
+require('core-js/fn/array/is-array');
+
+require('core-js/fn/map');
+
+require('core-js/fn/set');
+
 var _react = require('react');
@@ -18,2 +26,4 @@
 
+var _propTypes = require('prop-types');
+
 var _nodeInRoot = require('./nodeInRoot');
@@ -47,3 +57,3 @@
 
-var SelectableGroup = (_temp = _class = function (_Component) {
+var SelectableGroup = function (_Component) {
   _inherits(SelectableGroup, _Component);
@@ -142,2 +152,16 @@
 
+    _this.getWindowScroll = function () {
+      if (_this.supportPageOffset) {
+        return {
+          windowTopScroll: window.pageYOffset,
+          windowLeftScroll: window.pageXOffset
+        };
+      }
+
+      return {
+        windowTopScroll: _this.isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop,
+        windowLeftScroll: _this.isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft
+      };
+    };
+
     _this.openSelectbox = function (event) {
@@ -149,2 +173,3 @@ var e = _this.desktopEventCoords(event);
       _this.mouseMoveStarted = true;
+      _this.mouseMoved = true;
 
@@ -157,4 +182,5 @@ var scrollTop = _this.scrollContainer.scrollTop;
 
-      var windowTopScroll = _this.isChrome ? window.scrollY : document.documentElement.scrollTop;
-      var windowLeftScroll = _this.isChrome ? window.scrollX : document.documentElement.scrollLeft;
+      var _this$getWindowScroll = _this.getWindowScroll(),
+          windowTopScroll = _this$getWindowScroll.windowTopScroll,
+          windowLeftScroll = _this$getWindowScroll.windowLeftScroll;
 
@@ -173,4 +199,2 @@ var top = _this.applyContainerScroll(scaledTop - _this.scrollBounds.top, scrollTop - windowTopScroll);
 
-      _this.updateSelecting();
-
       _this.selectbox.setState({
@@ -183,6 +207,6 @@ isBoxSelecting: true,
       }, function () {
+        _this.updateSelecting();
+        _this.props.duringSelection([].concat(_toConsumableArray(_this.selectingItems)));
         _this.mouseMoveStarted = false;
       });
-
-      _this.props.duringSelection([].concat(_toConsumableArray(_this.selectingItems)));
     };
@@ -195,3 +219,6 @@
       var selectboxBounds = (0, _getBoundsForNode2.default)(selectbox);
-      _this.selectItems(selectboxBounds);
+      _this.selectItems(_extends({}, selectboxBounds, {
+        offsetWidth: selectboxBounds.offsetWidth || 1,
+        offsetHeight: selectboxBounds.offsetHeight || 1
+      }));
     };
@@ -315,5 +342,4 @@
 
-      var node = _this.selectableGroup;
-      if (!_this.props.globalMouse && !(0, _nodeInRoot2.default)(e.target, node)) {
-        var offsetData = (0, _getBoundsForNode2.default)(node);
+      if (!_this.props.globalMouse && !(0, _nodeInRoot2.default)(e.target, _this.selectableGroup)) {
+        var offsetData = (0, _getBoundsForNode2.default)(_this.selectableGroup);
         var collides = (0, _doObjectsCollide2.default)({
@@ -371,9 +397,3 @@ top: offsetData.top,
 
-      var _this$mouseDownData = _this.mouseDownData,
-          boxTop = _this$mouseDownData.boxTop,
-          boxLeft = _this$mouseDownData.boxLeft;
-
-      var isClick = scaledLeft === boxLeft && scaledTop === boxTop;
-
-      if (isClick && (0, _nodeInRoot2.default)(e.target, _this.rootNode)) {
+      if (!_this.mouseMoved && (0, _nodeInRoot2.default)(e.target, _this.rootNode)) {
         _this.handleClick(e, scaledTop, scaledLeft);
@@ -423,2 +443,3 @@ } else {
       _this.cleanUp();
+      _this.mouseMoved = false;
     };
@@ -490,2 +511,5 @@
       this.isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+
+      this.supportPageOffset = window.pageXOffset !== undefined;
+      this.isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';
     }
@@ -587,4 +611,4 @@ }, {
 
-      var shouldBeIgnored = this.ignoreListNodes.some(function (node) {
-        return target === node || node.contains(target);
+      var shouldBeIgnored = this.ignoreListNodes.some(function (ignoredNode) {
+        return target === ignoredNode || ignoredNode.contains(target);
       });
@@ -701,19 +725,21 @@ this.ignoreCheckCache.set(target, shouldBeIgnored);
   return SelectableGroup;
-}(_react.Component), _class.propTypes = {
-  scale: _react.PropTypes.number,
-  globalMouse: _react.PropTypes.bool,
-  ignoreList: _react.PropTypes.array,
-  scrollSpeed: _react.PropTypes.number,
-  minimumSpeedFactor: _react.PropTypes.number,
-  allowClickWithoutSelected: _react.PropTypes.bool,
-  style: _react.PropTypes.object,
-  selectionModeClass: _react.PropTypes.string,
-  onSelectionClear: _react.PropTypes.func,
-  enableDeselect: _react.PropTypes.bool,
-  mixedDeselect: _react.PropTypes.bool,
+}(_react.Component);
 
+SelectableGroup.propTypes = {
+  scale: _propTypes.number,
+  globalMouse: _propTypes.bool,
+  ignoreList: _propTypes.array,
+  scrollSpeed: _propTypes.number,
+  minimumSpeedFactor: _propTypes.number,
+  allowClickWithoutSelected: _propTypes.bool,
+  style: _propTypes.object,
+  selectionModeClass: _propTypes.string,
+  onSelectionClear: _propTypes.func,
+  enableDeselect: _propTypes.bool,
+  mixedDeselect: _propTypes.bool,
+
   /**
    * Scroll container selector
    */
-  scrollContainer: _react.PropTypes.string,
+  scrollContainer: _propTypes.string,
 
@@ -724,3 +750,3 @@ /**
    */
-  duringSelection: _react.PropTypes.func,
+  duringSelection: _propTypes.func,
 
@@ -730,3 +756,3 @@ /**
    */
-  onSelectionFinish: _react.PropTypes.func,
+  onSelectionFinish: _propTypes.func,
 
@@ -736,3 +762,3 @@ /**
    */
-  component: _react.PropTypes.node,
+  component: _propTypes.node,
 
@@ -744,3 +770,3 @@ /**
    */
-  tolerance: _react.PropTypes.number,
+  tolerance: _propTypes.number,
 
@@ -752,4 +778,5 @@ /**
    */
-  fixedPosition: _react.PropTypes.bool
-}, _class.defaultProps = {
+  fixedPosition: _propTypes.bool
+};
+SelectableGroup.defaultProps = {
   component: 'div',
@@ -767,5 +794,6 @@ tolerance: 0,
   selectionModeClass: 'in-selection-mode'
-}, _class.childContextTypes = {
-  selectable: _react2.default.PropTypes.object
-}, _temp);
+};
+SelectableGroup.childContextTypes = {
+  selectable: _propTypes.object
+};
 exports.default = SelectableGroup;

lib/SelectAll.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _class, _temp2;
-
 var _react = require('react');
@@ -16,2 +14,4 @@
 
+var _propTypes = require('prop-types');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +25,3 @@
 
-var SelectAllButton = (_temp2 = _class = function (_Component) {
+var SelectAllButton = function (_Component) {
   _inherits(SelectAllButton, _Component);
@@ -68,10 +68,14 @@
   return SelectAllButton;
-}(_react.Component), _class.propTypes = {
-  children: _react.PropTypes.object,
-  component: _react.PropTypes.node
-}, _class.defaultProps = {
+}(_react.Component);
+
+SelectAllButton.propTypes = {
+  children: _propTypes.object,
+  component: _propTypes.node
+};
+SelectAllButton.defaultProps = {
   component: 'div'
-}, _class.contextTypes = {
-  selectable: _react2.default.PropTypes.object
-}, _temp2);
+};
+SelectAllButton.contextTypes = {
+  selectable: _propTypes.object
+};
 exports.default = SelectAllButton;

lib/Selectbox.js

@@ -9,4 +9,2 @@ 'use strict';
 
-var _class, _temp2;
-
 var _react = require('react');
@@ -16,2 +14,4 @@
 
+var _propTypes = require('prop-types');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -25,3 +25,3 @@
 
-var Selectbox = (_temp2 = _class = function (_Component) {
+var Selectbox = function (_Component) {
   _inherits(Selectbox, _Component);
@@ -79,8 +79,11 @@
   return Selectbox;
-}(_react.Component), _class.propTypes = {
-  fixedPosition: _react.PropTypes.bool,
-  className: _react.PropTypes.string
-}, _class.defaultProps = {
+}(_react.Component);
+
+Selectbox.propTypes = {
+  fixedPosition: _propTypes.bool,
+  className: _propTypes.string
+};
+Selectbox.defaultProps = {
   className: 'selectable-selectbox'
-}, _temp2);
+};
 exports.default = Selectbox;

package.json

 {
   "name": "react-selectable-fast",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Enable other React components to be selectable by drawing a box with your mouse/touch",
@@ -17,5 +17,5 @@ "repository": {
     "build": "webpack",
-    "lib": "babel ./src/ -d ./lib/",
-    "dist": "NODE_ENV=production webpack -p --config webpack.production.config.js",
-    "prepublish": "npm run lint && npm run clean && npm run dist && npm run lib"
+    "transpile": "babel ./src/ -d ./lib/",
+    "build:prod": "NODE_ENV=production webpack -p --config webpack.production.config.js",
+    "prepublish": "npm run lint && npm run clean && npm run build:prod && npm run transpile"
   },
@@ -39,24 +39,28 @@ "bugs": {
   "devDependencies": {
-    "babel-cli": "^6.6.5",
-    "babel-core": "^6.9.1",
-    "babel-eslint": "^7.1.0",
-    "babel-loader": "^6.2.1",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.0.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-preset-es2015": "^6.3.13",
-    "babel-preset-react": "^6.3.13",
-    "babel-preset-stage-0": "^6.3.13",
-    "eslint": "^3.9.1",
-    "eslint-config-airbnb": "^12.0.0",
-    "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-import": "^1.16.0",
-    "eslint-plugin-jsx-a11y": "^2.2.3",
-    "eslint-plugin-react": "^6.5.0",
-    "react": "^15.4.0-rc.4",
-    "react-dom": "^15.4.0-rc.4",
-    "rimraf": "^2.5.2",
-    "webpack": "^1.12.11",
-    "webpack-dev-server": "^1.14.1"
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.5",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
+    "eslint": "^3.19.0",
+    "eslint-config-airbnb": "^15.0.1",
+    "eslint-plugin-babel": "^4.1.1",
+    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-jsx-a11y": "^5.0.3",
+    "eslint-plugin-react": "^7.0.1",
+    "prop-types": "^15.5.10",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "rimraf": "^2.6.1",
+    "webpack": "^2.6.1",
+    "webpack-bundle-analyzer": "^2.8.2",
+    "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
-    "babel-polyfill": "^6.7.4"
+    "babel-polyfill": "^6.23.0"
   },
@@ -63,0 +67,0 @@ "files": [

README.md

@@ -19,3 +19,3 @@ # React-selectable-fast ![npm](https://img.shields.io/npm/v/react-selectable-fast.svg) ![license](https://img.shields.io/npm/l/react-selectable-fast.svg) ![github-issues](https://img.shields.io/github/issues/valerybugakov/react-selectable-fast.svg)
 This project is based on [react-selectable](https://github.com/unclecheese/react-selectable) by [unclecheese](https://github.com/unclecheese).
-Main idea of this fork is to eliminate render during selection caused by state updates of SelectableGroup. Only items under selectbox rerender themself, which great for big lists of selectable items. Also this package extends the original functionality with ability to scroll items while selecting relative to window and specified scroll container.
+The main idea of this fork is to eliminate render during selection caused by state updates of SelectableGroup. Only items under selectbox rerender themselves, which great for big lists of selectable items. Also, this package extends the original functionality with ability to scroll items while selecting relative to window and specified scroll container.
 
@@ -25,3 +25,3 @@ ## Usage
 Package exports 4 entities `{ SelectableGroup, createSelectable, SelectAll, DeselectAll }`.
-To make other components selectable wrap them using HoF `createSelectable` and put a list of them under `SelectableGroup`.
+To make other components selectable wrap them using HoC `createSelectable`, add passed `selectableRef` prop to the target node and put a list of seletable items under `SelectableGroup`.
 
@@ -60,4 +60,4 @@ ```js
 
-const SomeComponent = () => (
-  <div>...</div>
+const SomeComponent = ({ selectableRef, selected, selecting }) => (
+  <div ref={selectableRef}>...</div>
 )
@@ -101,8 +101,8 @@
 * `ignoreList` (Array) Array of ignored selectors.
-* `clickableClassName` (String) On element with specified selector click item cotaining this element will be selected.
+* `clickableClassName` (String) On elements with specified selector click item containing this element will be selected.
 * `tolerance` (Number) The amount of buffer to add around your `<SelectableGroup />` container, in pixels.
 * `className` (String) Class of selectable group element.
-* `selectionModeClass` (String) Class indicating that there are more than 1 selected item. Defaults to 'in-selection-mode'.
+* `selectionModeClass` (String) Class indicating that there is more than 1 selected item. Defaults to 'in-selection-mode'.
 * `component` (String) The component to render. Defaults to `div`.
-* `allowClickWithoutSelected` (Boolean) When disabled items can be selected by click only if there are more than 1 already selected item.
-* `fixedPosition` (Boolean) Whether the `<SelectableGroup />` container is a fixed/absolute position element or the grandchild of one.
+* `allowClickWithoutSelected` (Boolean) When disabled items can be selected by click only if there is more than 1 already selected item.
+* `fixedPosition` (Boolean) Whether the `<SelectableGroup />` container is a fixed or absolutely positioned element or the grandchild of one.

Fixed alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

1

decreased by-75%

Worsened metrics

Total package byte prevSize

350006

decreased by-88.17%

Dev dependency count

23

increased by21.05%

Lines of code

1157

decreased by-47.79%

Dependency changes

• Updatedbabel-polyfill@^6.23.0