react-selectable-fast - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

lib/CreateSelectable.js

@@ -7,2 +7,4 @@ '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; }; }();
@@ -18,6 +20,2 @@
 
-var _autobindDecorator = require('autobind-decorator');
-
-var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);
-
 var _getBoundsForNode = require('./getBoundsForNode');
@@ -35,35 +33,6 @@
 
-function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
-  var desc = {};
-  Object['ke' + 'ys'](descriptor).forEach(function (key) {
-    desc[key] = descriptor[key];
-  });
-  desc.enumerable = !!desc.enumerable;
-  desc.configurable = !!desc.configurable;
-
-  if ('value' in desc || desc.initializer) {
-    desc.writable = true;
-  }
-
-  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
-    return decorator(target, property, desc) || desc;
-  }, desc);
-
-  if (context && desc.initializer !== void 0) {
-    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
-    desc.initializer = undefined;
-  }
-
-  if (desc.initializer === void 0) {
-    Object['define' + 'Property'](target, property, desc);
-    desc = null;
-  }
-
-  return desc;
-}
-
 var createSelectable = function createSelectable(WrappedComponent) {
-  var _desc, _value, _class, _class2, _temp;
+  var _class, _temp;
 
-  var SelectableItem = (_class = (_temp = _class2 = function (_Component) {
+  var SelectableItem = (_temp = _class = function (_Component) {
     _inherits(SelectableItem, _Component);
@@ -74,4 +43,9 @@
 
-      var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SelectableItem).call(this));
+      var _this = _possibleConstructorReturn(this, (SelectableItem.__proto__ || Object.getPrototypeOf(SelectableItem)).call(this));
 
+      _this.registerSelectable = function (containerScroll) {
+        _this.bounds = (0, _getBoundsForNode2.default)(_this.node, containerScroll);
+        _this.context.selectable.register(_this);
+      };
+
       _this.state = {
@@ -87,3 +61,3 @@ selected: false,
       value: function componentDidMount() {
-        this.node = _reactDom2.default.findDOMNode(this);
+        this.node = _reactDom2.default.findDOMNode(this); // eslint-disable-line
         this.registerSelectable();
@@ -97,11 +71,5 @@ }
     }, {
-      key: 'registerSelectable',
-      value: function registerSelectable(containerScroll) {
-        this.bounds = (0, _getBoundsForNode2.default)(this.node, containerScroll);
-        this.context.selectable.register(this);
-      }
-    }, {
       key: 'render',
       value: function render() {
-        var props = Object.assign({}, this.props, {
+        var props = _extends({}, this.props, {
           selected: this.state.selected,
@@ -116,8 +84,8 @@ selecting: this.state.selecting
     return SelectableItem;
-  }(_react.Component), _class2.propTypes = {
+  }(_react.Component), _class.propTypes = {
     children: _react.PropTypes.array,
     selectableKey: _react.PropTypes.any
-  }, _class2.contextTypes = {
+  }, _class.contextTypes = {
     selectable: _react2.default.PropTypes.object
-  }, _temp), (_applyDecoratedDescriptor(_class.prototype, 'registerSelectable', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'registerSelectable'), _class.prototype)), _class);
+  }, _temp);
 
@@ -124,0 +92,0 @@

lib/DeselectAll.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _class, _temp;
+var _class, _temp2;
 
@@ -24,9 +24,19 @@ var _react = require('react');
 
-var DeselectAllButton = (_temp = _class = function (_Component) {
+var DeselectAllButton = (_temp2 = _class = function (_Component) {
   _inherits(DeselectAllButton, _Component);
 
   function DeselectAllButton() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, DeselectAllButton);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(DeselectAllButton).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DeselectAllButton.__proto__ || Object.getPrototypeOf(DeselectAllButton)).call.apply(_ref, [this].concat(args))), _this), _this.getRootRef = function (c) {
+      return _this.root = c;
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -37,3 +47,3 @@
     value: function componentDidMount() {
-      this.refs.root.addEventListener('mousedown', function (e) {
+      this.root.addEventListener('mousedown', function (e) {
         return e.stopPropagation();
@@ -48,5 +58,5 @@ });
         {
-          ref: 'root',
-          className: 'selectable-deselect-all ' + this.props.className,
-          onClick: this.context.selectable.clearSelection
+          ref: this.getRootRef,
+          onClick: this.context.selectable.clearSelection,
+          className: 'selectable-deselect-all ' + this.props.className
         },
@@ -66,3 +76,3 @@ this.props.children
   selectable: _react2.default.PropTypes.object
-}, _temp);
+}, _temp2);
 exports.default = DeselectAllButton;

lib/getBoundsForNode.js

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

lib/Selectable-group.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _desc, _value, _class, _class2, _temp;
+var _class, _temp;
 
@@ -18,6 +18,2 @@ require('babel-polyfill');
 
-var _autobindDecorator = require('autobind-decorator');
-
-var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);
-
 var _nodeInRoot = require('./nodeInRoot');
@@ -49,32 +45,5 @@
 
-function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
-  var desc = {};
-  Object['ke' + 'ys'](descriptor).forEach(function (key) {
-    desc[key] = descriptor[key];
-  });
-  desc.enumerable = !!desc.enumerable;
-  desc.configurable = !!desc.configurable;
+var noop = function noop() {};
 
-  if ('value' in desc || desc.initializer) {
-    desc.writable = true;
-  }
-
-  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
-    return decorator(target, property, desc) || desc;
-  }, desc);
-
-  if (context && desc.initializer !== void 0) {
-    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
-    desc.initializer = undefined;
-  }
-
-  if (desc.initializer === void 0) {
-    Object['define' + 'Property'](target, property, desc);
-    desc = null;
-  }
-
-  return desc;
-}
-
-var SelectableGroup = (_class = (_temp = _class2 = function (_Component) {
+var SelectableGroup = (_temp = _class = function (_Component) {
   _inherits(SelectableGroup, _Component);
@@ -85,112 +54,47 @@
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SelectableGroup).call(this, props));
+    var _this = _possibleConstructorReturn(this, (SelectableGroup.__proto__ || Object.getPrototypeOf(SelectableGroup)).call(this, props));
 
-    _this.state = { selectionMode: false };
+    _this.applyScale = function (top, left) {
+      return {
+        scaledTop: top / _this.props.scale,
+        scaledLeft: left / _this.props.scale
+      };
+    };
 
-    _this.mouseDownStarted = false;
-    _this.mouseMoveStarted = false;
-    _this.mouseUpStarted = false;
-    _this.mouseDownData = null;
+    _this.setScollTop = function (e) {
+      var scrollTop = _this.scrollContainer.scrollTop;
+      _this.checkScrollUp(e, scrollTop);
+      _this.checkScrollDown(e, scrollTop);
+    };
 
-    _this.registry = new Set();
-    _this.selectedItems = new Set();
-    _this.selectingItems = new Set();
-    _this.whiteList = _this.props.whiteList.concat(['.selectable-select-all', '.selectable-deselect-all']);
-    return _this;
-  }
+    _this.checkScrollUp = function (e, currentTop) {
+      var _this$props = _this.props,
+          minimumSpeedFactor = _this$props.minimumSpeedFactor,
+          scrollSpeed = _this$props.scrollSpeed;
 
-  _createClass(SelectableGroup, [{
-    key: 'getChildContext',
-    value: function getChildContext() {
-      var _this2 = this;
+      var offset = _this.scrollBounds.top - e.clientY;
 
-      return {
-        selectable: {
-          register: this.registerSelectable,
-          unregister: this.unregisterSelectable,
-          selectAll: this.selectAll,
-          clearSelection: this.clearSelection,
-          getScrolledContainer: function getScrolledContainer() {
-            return _this2.scrollContainer;
-          }
-        }
-      };
-    }
-  }, {
-    key: 'componentDidMount',
-    value: function componentDidMount() {
-      this.rootNode = this.refs.selectableGroup;
-      this.scrollContainer = document.querySelector(this.props.scrollContainer) || this.rootNode;
-      this.initialRootBounds = this.rootNode.getBoundingClientRect();
-      this.rootNode.addEventListener('mousedown', this.mouseDown);
-      this.rootNode.addEventListener('touchstart', this.mouseDown);
-      document.addEventListener('keydown', this.keyListener);
-      document.addEventListener('keyup', this.keyListener);
-    }
-  }, {
-    key: 'componentWillUnmount',
-    value: function componentWillUnmount() {
-      this.rootNode.removeEventListener('mousedown', this.mouseDown);
-      this.rootNode.removeEventListener('touchstart', this.mouseDown);
-      document.removeEventListener('keydown', this.keyListener);
-      document.removeEventListener('keyup', this.keyListener);
-    }
-  }, {
-    key: 'applyScale',
-    value: function applyScale(top, left) {
-      return {
-        scaledTop: top / this.props.scale,
-        scaledLeft: left / this.props.scale
-      };
-    }
-  }, {
-    key: 'setScollTop',
-    value: function setScollTop(e) {
-      var scrollTop = this.scrollContainer.scrollTop;
-      this.checkScrollUp(e, scrollTop);
-      this.checkScrollDown(e, scrollTop);
-    }
-  }, {
-    key: 'checkScrollUp',
-    value: function checkScrollUp(e, currentTop) {
-      var _props = this.props;
-      var minimumSpeedFactor = _props.minimumSpeedFactor;
-      var scrollSpeed = _props.scrollSpeed;
-
-      var offset = this.scrollBounds.top - e.clientY;
-
       if (offset > 0 || e.clientY < 0) {
         var newTop = currentTop - Math.max(offset, minimumSpeedFactor) * scrollSpeed;
-        this.scrollContainer.scrollTop = newTop;
+        _this.scrollContainer.scrollTop = newTop;
       }
-    }
-  }, {
-    key: 'checkScrollDown',
-    value: function checkScrollDown(e, currentTop) {
-      var _props2 = this.props;
-      var minimumSpeedFactor = _props2.minimumSpeedFactor;
-      var scrollSpeed = _props2.scrollSpeed;
+    };
 
-      var offset = e.clientY - this.scrollBounds.bottom;
+    _this.checkScrollDown = function (e, currentTop) {
+      var _this$props2 = _this.props,
+          minimumSpeedFactor = _this$props2.minimumSpeedFactor,
+          scrollSpeed = _this$props2.scrollSpeed;
 
+      var offset = e.clientY - _this.scrollBounds.bottom;
+
       if (offset > 0 || e.clientY > window.innerHeight) {
         var newTop = currentTop + Math.max(offset, minimumSpeedFactor) * scrollSpeed;
-        this.scrollContainer.scrollTop = Math.min(newTop, this.maxScroll);
+        _this.scrollContainer.scrollTop = Math.min(newTop, _this.maxScroll);
       }
-    }
-  }, {
-    key: 'updateRootBounds',
-    value: function updateRootBounds() {
-      if (this.scrollBounds) {
-        this.oldScrollBounds = this.scrollBounds;
-      }
-      this.scrollBounds = this.scrollContainer.getBoundingClientRect();
-      this.maxScroll = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;
-    }
-  }, {
-    key: 'updateRegistry',
-    value: function updateRegistry() {
+    };
+
+    _this.updateRegistry = function () {
       var containerScroll = {
-        scrollTop: this.scrollContainer.scrollTop,
-        scrollLeft: this.scrollContainer.scrollLeft
+        scrollTop: _this.scrollContainer.scrollTop,
+        scrollLeft: _this.scrollContainer.scrollLeft
       };
@@ -203,3 +107,3 @@
       try {
-        for (var _iterator = this.registry.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        for (var _iterator = _this.registry.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
           var selectableItem = _step.value;
@@ -223,98 +127,79 @@
       }
-    }
-  }, {
-    key: 'registerSelectable',
-    value: function registerSelectable(selectableItem) {
-      this.registry.add(selectableItem);
-    }
-  }, {
-    key: 'unregisterSelectable',
-    value: function unregisterSelectable(selectableItem) {
-      this.registry.delete(selectableItem);
-    }
-  }, {
-    key: 'toggleSelectionMode',
-    value: function toggleSelectionMode() {
-      var selectedItems = this.selectedItems;
-      var selectionMode = this.state.selectionMode;
+    };
 
+    _this.registerSelectable = function (selectableItem) {
+      _this.registry.add(selectableItem);
+    };
 
-      if (selectedItems.size && !selectionMode) {
-        this.setState({ selectionMode: true });
-      }
-      if (!selectedItems.size && selectionMode) {
-        this.setState({ selectionMode: false });
-      }
-    }
-  }, {
-    key: 'openSelectbox',
-    value: function openSelectbox(event) {
-      var _this3 = this;
+    _this.unregisterSelectable = function (selectableItem) {
+      _this.registry.delete(selectableItem);
+    };
 
-      var e = this.desktopEventCoords(event);
-      this.setScollTop(e);
+    _this.applyContainerScroll = function (value, scroll) {
+      return value + scroll / _this.props.scale;
+    };
 
-      if (this.mouseMoveStarted) return;
-      this.mouseMoveStarted = true;
+    _this.openSelectbox = function (event) {
+      var e = _this.desktopEventCoords(event);
+      _this.setScollTop(e);
 
-      var scrollTop = this.scrollContainer.scrollTop;
-      var applyContainerScroll = function applyContainerScroll(value, scroll) {
-        return value + scroll / _this3.props.scale;
-      };
+      if (_this.mouseMoveStarted) return;
+      _this.mouseMoveStarted = true;
 
-      var _applyScale = this.applyScale(e.pageY, e.pageX);
+      var scrollTop = _this.scrollContainer.scrollTop;
 
-      var scaledTop = _applyScale.scaledTop;
-      var scaledLeft = _applyScale.scaledLeft;
+      var _this$applyScale = _this.applyScale(e.pageY, e.pageX),
+          scaledTop = _this$applyScale.scaledTop,
+          scaledLeft = _this$applyScale.scaledLeft;
 
+      var windowTopScroll = _this.isChrome ? window.scrollY : document.documentElement.scrollTop;
+      var windowLeftScroll = _this.isChrome ? window.scrollX : document.documentElement.scrollLeft;
 
-      var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-      var windowTopScroll = isChrome ? window.scrollY : document.documentElement.scrollTop;
-      var windowLeftScroll = isChrome ? window.scrollX : document.documentElement.scrollLeft;
+      var top = _this.applyContainerScroll(scaledTop - _this.scrollBounds.top, scrollTop - windowTopScroll);
 
-      var top = applyContainerScroll(scaledTop - this.scrollBounds.top, scrollTop - windowTopScroll);
-      var boxTop = applyContainerScroll(this.mouseDownData.boxTop - this.scrollBounds.top, this.mouseDownData.scrollTop - windowTopScroll);
-      var h = boxTop - top;
-      boxTop = Math.min(boxTop - h, boxTop);
-      var w = this.mouseDownData.boxLeft - scaledLeft;
-      var leftContainerRelative = this.mouseDownData.boxLeft - this.scrollBounds.left;
-      var boxLeft = applyContainerScroll(Math.min(leftContainerRelative - w / this.props.scale, leftContainerRelative / this.props.scale), -windowLeftScroll);
+      var boxTop = _this.applyContainerScroll(_this.mouseDownData.boxTop - _this.scrollBounds.top, _this.mouseDownData.scrollTop - windowTopScroll);
 
-      this.updatedSelecting();
+      var boxHeight = boxTop - top;
+      boxTop = Math.min(boxTop - boxHeight, boxTop);
 
-      this.refs.selectbox.setState({
+      var bowWidth = _this.mouseDownData.boxLeft - scaledLeft;
+      var leftContainerRelative = _this.mouseDownData.boxLeft - _this.scrollBounds.left;
+
+      var boxLeft = _this.applyContainerScroll(Math.min(leftContainerRelative - bowWidth / _this.props.scale, leftContainerRelative / _this.props.scale), -windowLeftScroll);
+
+      _this.updateSelecting();
+
+      _this.selectbox.setState({
         isBoxSelecting: true,
-        boxWidth: Math.abs(w),
-        boxHeight: Math.abs(h),
+        boxWidth: Math.abs(bowWidth),
+        boxHeight: Math.abs(boxHeight),
         boxLeft: boxLeft,
         boxTop: boxTop
       }, function () {
-        _this3.mouseMoveStarted = false;
+        _this.mouseMoveStarted = false;
       });
 
-      this.props.duringSelection([].concat(_toConsumableArray(this.selectingItems)));
-    }
-  }, {
-    key: 'updatedSelecting',
-    value: function updatedSelecting() {
-      var selectbox = this.refs.selectbox.getRef();
+      _this.props.duringSelection([].concat(_toConsumableArray(_this.selectingItems)));
+    };
+
+    _this.updateSelecting = function () {
+      var selectbox = _this.selectbox.getRef();
       if (!selectbox) return;
 
       var selectboxBounds = (0, _getBoundsForNode2.default)(selectbox);
-      this.selectItems(selectboxBounds);
-    }
-  }, {
-    key: 'selectItems',
-    value: function selectItems(selectboxBounds) {
-      var _ref = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+      _this.selectItems(selectboxBounds);
+    };
 
-      var click = _ref.click;
-      var _props3 = this.props;
-      var tolerance = _props3.tolerance;
-      var enableDeselect = _props3.enableDeselect;
-      var mixedDeselect = _props3.mixedDeselect;
+    _this.selectItems = function (selectboxBounds) {
+      var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          click = _ref.click;
 
-      selectboxBounds.top += this.scrollContainer.scrollTop;
-      selectboxBounds.left += this.scrollContainer.scrollLeft;
+      var _this$props3 = _this.props,
+          tolerance = _this$props3.tolerance,
+          enableDeselect = _this$props3.enableDeselect,
+          mixedDeselect = _this$props3.mixedDeselect;
 
+      selectboxBounds.top += _this.scrollContainer.scrollTop;
+      selectboxBounds.left += _this.scrollContainer.scrollLeft;
+
       var _iteratorNormalCompletion2 = true;
@@ -325,6 +210,6 @@ var _didIteratorError2 = false;
       try {
-        for (var _iterator2 = this.registry.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+        for (var _iterator2 = _this.registry.values()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
           var item = _step2.value;
 
-          this.processItem(item, tolerance, selectboxBounds, click, enableDeselect, mixedDeselect);
+          _this.processItem(item, tolerance, selectboxBounds, click, enableDeselect, mixedDeselect);
         }
@@ -345,54 +230,5 @@ } catch (err) {
       }
-    }
-  }, {
-    key: 'processItem',
-    value: function processItem(item, tolerance, selectboxBounds, click, enableDeselect, mixedDeselect) {
-      if (this.inWhiteList(item.node)) {
-        return null;
-      }
+    };
 
-      var isCollided = (0, _doObjectsCollide2.default)(selectboxBounds, item.bounds, tolerance);
-      var _item$state = item.state;
-      var selecting = _item$state.selecting;
-      var selected = _item$state.selected;
-
-
-      if (click && isCollided) {
-        if (selected) {
-          this.selectedItems.delete(item);
-        } else {
-          this.selectedItems.add(item);
-        }
-        item.setState({ selected: !selected });
-        return this.clickedItem = item;
-      }
-
-      if (!click && isCollided) {
-        if (selected && enableDeselect && (!this.selectionStarted || mixedDeselect)) {
-          item.setState({ selected: false });
-          item.deselected = true;
-          this.deselectionStarted = true;
-          return this.selectedItems.delete(item);
-        }
-
-        var canSelect = mixedDeselect ? !item.deselected : !this.deselectionStarted;
-        if (!selecting && !selected && canSelect) {
-          item.setState({ selecting: true });
-          this.selectionStarted = true;
-          return this.selectingItems.add(item);
-        }
-      }
-
-      if (!click && !isCollided && selecting) {
-        if (this.selectingItems.has(item)) {
-          item.setState({ selecting: false });
-          return this.selectingItems.delete(item);
-        }
-      }
-
-      return null;
-    }
-  }, {
-    key: 'clearSelection',
-    value: function clearSelection() {
+    _this.clearSelection = function () {
       var _iteratorNormalCompletion3 = true;
@@ -403,7 +239,7 @@ var _didIteratorError3 = false;
       try {
-        for (var _iterator3 = this.selectedItems.values()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+        for (var _iterator3 = _this.selectedItems.values()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
           var item = _step3.value;
 
           item.setState({ selected: false });
-          this.selectedItems.delete(item);
+          _this.selectedItems.delete(item);
         }
@@ -425,10 +261,9 @@ } catch (err) {
 
-      this.setState({ selectionMode: false });
-      this.props.onSelectionFinish([].concat(_toConsumableArray(this.selectedItems)));
-      this.props.onSelectionClear();
-    }
-  }, {
-    key: 'selectAll',
-    value: function selectAll() {
-      this.updateWhiteListNodes();
+      _this.setState({ selectionMode: false });
+      _this.props.onSelectionFinish([].concat(_toConsumableArray(_this.selectedItems)));
+      _this.props.onSelectionClear();
+    };
+
+    _this.selectAll = function () {
+      _this.updateWhiteListNodes();
       var _iteratorNormalCompletion4 = true;
@@ -439,8 +274,8 @@ var _didIteratorError4 = false;
       try {
-        for (var _iterator4 = this.registry.values()[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
+        for (var _iterator4 = _this.registry.values()[Symbol.iterator](), _step4; !(_iteratorNormalCompletion4 = (_step4 = _iterator4.next()).done); _iteratorNormalCompletion4 = true) {
           var item = _step4.value;
 
-          if (!this.inWhiteList(item.node) && !item.state.selected) {
+          if (!_this.inIgnoreList(item.node) && !item.state.selected) {
             item.setState({ selected: true });
-            this.selectedItems.add(item);
+            _this.selectedItems.add(item);
           }
@@ -463,33 +298,20 @@ }
 
-      this.setState({ selectionMode: true });
-      this.props.onSelectionFinish([].concat(_toConsumableArray(this.selectedItems)));
-    }
-  }, {
-    key: 'inWhiteList',
-    value: function inWhiteList(target) {
-      return [].concat(_toConsumableArray(this.whiteListNodes)).some(function (node) {
-        return target === node || node.contains(target);
-      });
-    }
-  }, {
-    key: 'updateWhiteListNodes',
-    value: function updateWhiteListNodes() {
-      this.whiteListNodes = document.querySelectorAll(this.whiteList.join(', '));
-    }
-  }, {
-    key: 'mouseDown',
-    value: function mouseDown(e) {
-      if (this.mouseDownStarted) return;
-      this.mouseDownStarted = true;
-      this.mouseUpStarted = false;
-      e = this.desktopEventCoords(e);
+      _this.setState({ selectionMode: true });
+      _this.props.onSelectionFinish([].concat(_toConsumableArray(_this.selectedItems)));
+    };
 
-      this.updateWhiteListNodes();
-      if (this.inWhiteList(e.target)) {
-        this.mouseDownStarted = false;
+    _this.mouseDown = function (e) {
+      if (_this.mouseDownStarted) return;
+      _this.mouseDownStarted = true;
+      _this.mouseUpStarted = false;
+      e = _this.desktopEventCoords(e);
+
+      _this.updateWhiteListNodes();
+      if (_this.inIgnoreList(e.target)) {
+        _this.mouseDownStarted = false;
         return;
       }
 
-      var node = this.refs.selectableGroup;
-      if (!this.props.globalMouse && !(0, _nodeInRoot2.default)(e.target, node)) {
+      var node = _this.selectableGroup;
+      if (!_this.props.globalMouse && !(0, _nodeInRoot2.default)(e.target, node)) {
         var offsetData = (0, _getBoundsForNode2.default)(node);
@@ -510,15 +332,14 @@ var collides = (0, _doObjectsCollide2.default)({
 
-      this.updateRootBounds();
-      this.updateRegistry();
+      _this.updateRootBounds();
+      _this.updateRegistry();
 
-      var _applyScale2 = this.applyScale(e.pageY, e.pageX);
+      var _this$applyScale2 = _this.applyScale(e.pageY, e.pageX),
+          scaledTop = _this$applyScale2.scaledTop,
+          scaledLeft = _this$applyScale2.scaledLeft;
 
-      var scaledTop = _applyScale2.scaledTop;
-      var scaledLeft = _applyScale2.scaledLeft;
-
-      this.mouseDownData = {
+      _this.mouseDownData = {
         boxLeft: scaledLeft,
         boxTop: scaledTop,
-        scrollTop: this.scrollContainer.scrollTop,
-        scrollLeft: this.scrollContainer.scrollLeft,
+        scrollTop: _this.scrollContainer.scrollTop,
+        scrollLeft: _this.scrollContainer.scrollLeft,
         target: e.target
@@ -529,46 +350,35 @@ };
 
-      document.addEventListener('mousemove', this.openSelectbox);
-      document.addEventListener('touchmove', this.openSelectbox);
-      document.addEventListener('mouseup', this.mouseUp);
-      document.addEventListener('touchend', this.mouseUp);
-    }
-  }, {
-    key: 'preventEvent',
-    value: function preventEvent(target, type) {
-      var preventHandler = function preventHandler(e) {
-        target.removeEventListener(type, preventHandler, true);
-        e.preventDefault();
-        e.stopPropagation();
-      };
-      target.addEventListener(type, preventHandler, true);
-    }
-  }, {
-    key: 'mouseUp',
-    value: function mouseUp(event) {
-      if (this.mouseUpStarted) return;
+      document.addEventListener('mousemove', _this.openSelectbox);
+      document.addEventListener('touchmove', _this.openSelectbox);
+      document.addEventListener('mouseup', _this.mouseUp);
+      document.addEventListener('touchend', _this.mouseUp);
+    };
 
-      this.mouseUpStarted = true;
-      this.mouseDownStarted = false;
+    _this.mouseUp = function (event) {
+      if (_this.mouseUpStarted) return;
 
-      document.removeEventListener('mousemove', this.openSelectbox);
-      document.removeEventListener('touchmove', this.openSelectbox);
-      document.removeEventListener('mouseup', this.mouseUp);
-      document.removeEventListener('touchend', this.mouseUp);
+      _this.mouseUpStarted = true;
+      _this.mouseDownStarted = false;
 
-      if (!this.mouseDownData) return;
+      document.removeEventListener('mousemove', _this.openSelectbox);
+      document.removeEventListener('touchmove', _this.openSelectbox);
+      document.removeEventListener('mouseup', _this.mouseUp);
+      document.removeEventListener('touchend', _this.mouseUp);
 
-      var e = this.desktopEventCoords(event);
+      if (!_this.mouseDownData) return;
 
-      var _applyScale3 = this.applyScale(e.pageY, e.pageX);
+      var e = _this.desktopEventCoords(event);
 
-      var scaledTop = _applyScale3.scaledTop;
-      var scaledLeft = _applyScale3.scaledLeft;
-      var _mouseDownData = this.mouseDownData;
-      var boxTop = _mouseDownData.boxTop;
-      var boxLeft = _mouseDownData.boxLeft;
+      var _this$applyScale3 = _this.applyScale(e.pageY, e.pageX),
+          scaledTop = _this$applyScale3.scaledTop,
+          scaledLeft = _this$applyScale3.scaledLeft;
 
+      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)) {
-        this.handleClick(e, scaledTop, scaledLeft);
+      if (isClick && (0, _nodeInRoot2.default)(e.target, _this.rootNode)) {
+        _this.handleClick(e, scaledTop, scaledLeft);
       } else {
@@ -580,3 +390,3 @@ var _iteratorNormalCompletion5 = true;
         try {
-          for (var _iterator5 = this.selectingItems.values()[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
+          for (var _iterator5 = _this.selectingItems.values()[Symbol.iterator](), _step5; !(_iteratorNormalCompletion5 = (_step5 = _iterator5.next()).done); _iteratorNormalCompletion5 = true) {
             var item = _step5.value;
@@ -601,10 +411,10 @@
 
-        this.selectedItems = new Set([].concat(_toConsumableArray(this.selectedItems), _toConsumableArray(this.selectingItems)));
-        this.selectingItems.clear();
+        _this.selectedItems = new Set([].concat(_toConsumableArray(_this.selectedItems), _toConsumableArray(_this.selectingItems)));
+        _this.selectingItems.clear();
 
-        if (e.which === 1 && this.mouseDownData.target === e.target) {
-          this.preventEvent(e.target, 'click');
+        if (e.which === 1 && _this.mouseDownData.target === e.target) {
+          _this.preventEvent(e.target, 'click');
         }
 
-        this.refs.selectbox.setState({
+        _this.selectbox.setState({
           isBoxSelecting: false,
@@ -614,9 +424,182 @@ boxWidth: 0,
         });
-        this.props.onSelectionFinish([].concat(_toConsumableArray(this.selectedItems)));
+        _this.props.onSelectionFinish([].concat(_toConsumableArray(_this.selectedItems)));
       }
 
-      this.toggleSelectionMode();
-      this.cleanUp();
+      _this.toggleSelectionMode();
+      _this.cleanUp();
+    };
+
+    _this.keyListener = function (e) {
+      _this.ctrlPressed = e.ctrlKey || e.metaKey;
+
+      if (_this.ctrlPressed) {
+        return;
+      }
+
+      if (e.keyCode === 27) {
+        _this.clearSelection();
+      }
+    };
+
+    _this.getGroupRef = function (c) {
+      return _this.selectableGroup = c;
+    };
+
+    _this.getSelectboxRef = function (c) {
+      return _this.selectbox = c;
+    };
+
+    _this.state = { selectionMode: false };
+
+    _this.mouseDownStarted = false;
+    _this.mouseMoveStarted = false;
+    _this.mouseUpStarted = false;
+    _this.mouseDownData = null;
+
+    _this.registry = new Set();
+    _this.selectedItems = new Set();
+    _this.selectingItems = new Set();
+    _this.ignoreCheckCache = new Map();
+    _this.ignoreList = _this.props.ignoreList.concat(['.selectable-select-all', '.selectable-deselect-all']);
+    return _this;
+  }
+
+  _createClass(SelectableGroup, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      var _this2 = this;
+
+      return {
+        selectable: {
+          register: this.registerSelectable,
+          unregister: this.unregisterSelectable,
+          selectAll: this.selectAll,
+          clearSelection: this.clearSelection,
+          getScrolledContainer: function getScrolledContainer() {
+            return _this2.scrollContainer;
+          }
+        }
+      };
     }
   }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.resizeInProgress = false;
+      this.rootNode = this.selectableGroup;
+      this.scrollContainer = document.querySelector(this.props.scrollContainer) || this.rootNode;
+      this.initialRootBounds = this.rootNode.getBoundingClientRect();
+      this.rootNode.addEventListener('mousedown', this.mouseDown);
+      this.rootNode.addEventListener('touchstart', this.mouseDown);
+      document.addEventListener('keydown', this.keyListener);
+      document.addEventListener('keyup', this.keyListener);
+      this.isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.rootNode.removeEventListener('mousedown', this.mouseDown);
+      this.rootNode.removeEventListener('touchstart', this.mouseDown);
+      document.removeEventListener('keydown', this.keyListener);
+      document.removeEventListener('keyup', this.keyListener);
+    }
+  }, {
+    key: 'updateRootBounds',
+    value: function updateRootBounds() {
+      if (this.scrollBounds) {
+        this.oldScrollBounds = this.scrollBounds;
+      }
+      this.scrollBounds = this.scrollContainer.getBoundingClientRect();
+      this.maxScroll = this.scrollContainer.scrollHeight - this.scrollContainer.clientHeight;
+    }
+  }, {
+    key: 'toggleSelectionMode',
+    value: function toggleSelectionMode() {
+      var selectedItems = this.selectedItems,
+          selectionMode = this.state.selectionMode;
+
+
+      if (selectedItems.size && !selectionMode) {
+        this.setState({ selectionMode: true });
+      }
+      if (!selectedItems.size && selectionMode) {
+        this.setState({ selectionMode: false });
+      }
+    }
+  }, {
+    key: 'processItem',
+    value: function processItem(item, tolerance, selectboxBounds, click, enableDeselect, mixedDeselect) {
+      if (this.inIgnoreList(item.node)) {
+        return null;
+      }
+
+      var isCollided = (0, _doObjectsCollide2.default)(selectboxBounds, item.bounds, tolerance);
+      var _item$state = item.state,
+          selecting = _item$state.selecting,
+          selected = _item$state.selected;
+
+
+      if (click && isCollided) {
+        if (selected) {
+          this.selectedItems.delete(item);
+        } else {
+          this.selectedItems.add(item);
+        }
+        item.setState({ selected: !selected });
+        return this.clickedItem = item;
+      }
+
+      if (!click && isCollided) {
+        if (selected && enableDeselect && (!this.selectionStarted || mixedDeselect)) {
+          item.setState({ selected: false });
+          item.deselected = true;
+          this.deselectionStarted = true;
+          return this.selectedItems.delete(item);
+        }
+
+        var canSelect = mixedDeselect ? !item.deselected : !this.deselectionStarted;
+        if (!selecting && !selected && canSelect) {
+          item.setState({ selecting: true });
+          this.selectionStarted = true;
+          return this.selectingItems.add(item);
+        }
+      }
+
+      if (!click && !isCollided && selecting) {
+        if (this.selectingItems.has(item)) {
+          item.setState({ selecting: false });
+          return this.selectingItems.delete(item);
+        }
+      }
+
+      return null;
+    }
+  }, {
+    key: 'inIgnoreList',
+    value: function inIgnoreList(target) {
+      if (this.ignoreCheckCache.get(target) !== undefined) {
+        return this.ignoreCheckCache.get(target);
+      }
+
+      var shouldBeIgnored = this.ignoreListNodes.some(function (node) {
+        return target === node || node.contains(target);
+      });
+      this.ignoreCheckCache.set(target, shouldBeIgnored);
+      return shouldBeIgnored;
+    }
+  }, {
+    key: 'updateWhiteListNodes',
+    value: function updateWhiteListNodes() {
+      this.ignoreListNodes = [].concat(_toConsumableArray(document.querySelectorAll(this.ignoreList.join(', '))));
+    }
+  }, {
+    key: 'preventEvent',
+    value: function preventEvent(target, type) {
+      var preventHandler = function preventHandler(e) {
+        target.removeEventListener(type, preventHandler, true);
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      target.addEventListener(type, preventHandler, true);
+    }
+  }, {
     key: 'handleClick',
@@ -639,14 +622,2 @@ value: function handleClick(e, top, left) {
   }, {
-    key: 'keyListener',
-    value: function keyListener(e) {
-      this.ctrlPressed = e.ctrlKey || e.metaKey;
-      if (this.ctrlPressed) {
-        return;
-      }
-
-      if (e.keyCode === 27) {
-        this.clearSelection();
-      }
-    }
-  }, {
     key: 'cleanUp',
@@ -712,7 +683,10 @@ value: function cleanUp() {
         {
-          ref: 'selectableGroup',
+          ref: this.getGroupRef,
           style: this.props.style,
           className: this.props.className + ' ' + (this.state.selectionMode ? this.props.selectionModeClass : '')
         },
-        _react2.default.createElement(_Selectbox2.default, { fixedPosition: this.props.fixedPosition, ref: 'selectbox' }),
+        _react2.default.createElement(_Selectbox2.default, {
+          ref: this.getSelectboxRef,
+          fixedPosition: this.props.fixedPosition
+        }),
         this.props.children
@@ -724,10 +698,9 @@ );
   return SelectableGroup;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component), _class.propTypes = {
   scale: _react.PropTypes.number,
   globalMouse: _react.PropTypes.bool,
-  whiteList: _react.PropTypes.array,
+  ignoreList: _react.PropTypes.array,
   scrollSpeed: _react.PropTypes.number,
   minimumSpeedFactor: _react.PropTypes.number,
   allowClickWithoutSelected: _react.PropTypes.bool,
-  clickableClassName: _react.PropTypes.string,
   style: _react.PropTypes.object,
@@ -773,18 +746,18 @@ selectionModeClass: _react.PropTypes.string,
   fixedPosition: _react.PropTypes.bool
-}, _class2.defaultProps = {
+}, _class.defaultProps = {
   component: 'div',
   tolerance: 0,
   globalMouse: false,
-  whiteList: [],
+  ignoreList: [],
   scale: 1,
   scrollSpeed: 0.25,
   minimumSpeedFactor: 60,
-  duringSelection: function duringSelection() {},
-  onSelectionFinish: function onSelectionFinish() {},
-  onSelectionClear: function onSelectionClear() {},
+  duringSelection: noop,
+  onSelectionFinish: noop,
+  onSelectionClear: noop,
   allowClickWithoutSelected: true,
   selectionModeClass: 'in-selection-mode'
-}, _class2.childContextTypes = {
+}, _class.childContextTypes = {
   selectable: _react2.default.PropTypes.object
-}, _temp), (_applyDecoratedDescriptor(_class.prototype, 'applyScale', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'applyScale'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'setScollTop', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'setScollTop'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'checkScrollUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'checkScrollUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'checkScrollDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'checkScrollDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'updateRegistry', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'updateRegistry'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'registerSelectable', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'registerSelectable'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'unregisterSelectable', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'unregisterSelectable'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'openSelectbox', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'openSelectbox'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'updatedSelecting', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'updatedSelecting'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'selectItems', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'selectItems'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'clearSelection', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'clearSelection'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'selectAll', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'selectAll'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'mouseDown', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'mouseDown'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'mouseUp', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'mouseUp'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'keyListener', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'keyListener'), _class.prototype)), _class);
+}, _temp);
 exports.default = SelectableGroup;

lib/SelectAll.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _class, _temp;
+var _class, _temp2;
 
@@ -24,9 +24,19 @@ var _react = require('react');
 
-var SelectAllButton = (_temp = _class = function (_Component) {
+var SelectAllButton = (_temp2 = _class = function (_Component) {
   _inherits(SelectAllButton, _Component);
 
   function SelectAllButton() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
     _classCallCheck(this, SelectAllButton);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(SelectAllButton).apply(this, arguments));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SelectAllButton.__proto__ || Object.getPrototypeOf(SelectAllButton)).call.apply(_ref, [this].concat(args))), _this), _this.getRootRef = function (c) {
+      return _this.root = c;
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
@@ -37,3 +47,3 @@
     value: function componentDidMount() {
-      this.refs.root.addEventListener('mousedown', function (e) {
+      this.root.addEventListener('mousedown', function (e) {
         return e.stopPropagation();
@@ -48,3 +58,3 @@ });
         {
-          ref: 'root',
+          ref: this.getRootRef,
           className: 'selectable-select-all ' + this.props.className,
@@ -66,3 +76,3 @@ onClick: this.context.selectable.selectAll
   selectable: _react2.default.PropTypes.object
-}, _temp);
+}, _temp2);
 exports.default = SelectAllButton;

lib/Selectbox.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _desc, _value, _class, _class2, _temp;
+var _class, _temp2;
 
@@ -16,6 +16,2 @@ var _react = require('react');
 
-var _autobindDecorator = require('autobind-decorator');
-
-var _autobindDecorator2 = _interopRequireDefault(_autobindDecorator);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,55 +25,30 @@
 
-function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
-  var desc = {};
-  Object['ke' + 'ys'](descriptor).forEach(function (key) {
-    desc[key] = descriptor[key];
-  });
-  desc.enumerable = !!desc.enumerable;
-  desc.configurable = !!desc.configurable;
+var Selectbox = (_temp2 = _class = function (_Component) {
+  _inherits(Selectbox, _Component);
 
-  if ('value' in desc || desc.initializer) {
-    desc.writable = true;
-  }
+  function Selectbox() {
+    var _ref;
 
-  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
-    return decorator(target, property, desc) || desc;
-  }, desc);
+    var _temp, _this, _ret;
 
-  if (context && desc.initializer !== void 0) {
-    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
-    desc.initializer = undefined;
-  }
-
-  if (desc.initializer === void 0) {
-    Object['define' + 'Property'](target, property, desc);
-    desc = null;
-  }
-
-  return desc;
-}
-
-var Selectbox = (_class = (_temp = _class2 = function (_Component) {
-  _inherits(Selectbox, _Component);
-
-  function Selectbox() {
     _classCallCheck(this, Selectbox);
 
-    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Selectbox).call(this));
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-    _this.state = {
-      isBoxSelecting: false,
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Selectbox.__proto__ || Object.getPrototypeOf(Selectbox)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+      top: 0,
       left: 0,
-      top: 0,
       boxWidth: 0,
-      boxHeight: 0
-    };
-    return _this;
+      boxHeight: 0,
+      isBoxSelecting: false
+    }, _this.getRef = function () {
+      return _this.selectbox;
+    }, _this.getSelectboxRef = function (c) {
+      return _this.selectbox = c;
+    }, _temp), _possibleConstructorReturn(_this, _ret);
   }
 
   _createClass(Selectbox, [{
-    key: 'getRef',
-    value: function getRef() {
-      return this.refs.selectbox;
-    }
-  }, {
     key: 'render',
@@ -98,3 +69,7 @@ value: function render() {
         null,
-        this.state.isBoxSelecting && _react2.default.createElement('div', { style: boxStyle, className: this.props.className, ref: 'selectbox' })
+        this.state.isBoxSelecting && _react2.default.createElement('div', {
+          ref: this.getSelectboxRef,
+          style: boxStyle,
+          className: this.props.className
+        })
       );
@@ -105,8 +80,8 @@ }
   return Selectbox;
-}(_react.Component), _class2.propTypes = {
+}(_react.Component), _class.propTypes = {
   fixedPosition: _react.PropTypes.bool,
   className: _react.PropTypes.string
-}, _class2.defaultProps = {
+}, _class.defaultProps = {
   className: 'selectable-selectbox'
-}, _temp), (_applyDecoratedDescriptor(_class.prototype, 'getRef', [_autobindDecorator2.default], Object.getOwnPropertyDescriptor(_class.prototype, 'getRef'), _class.prototype)), _class);
+}, _temp2);
 exports.default = Selectbox;

package.json

 {
   "name": "react-selectable-fast",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Enable other React components to be selectable by drawing a box with your mouse/touch",
@@ -40,3 +40,3 @@ "repository": {
     "babel-core": "^6.9.1",
-    "babel-eslint": "^6.0.4",
+    "babel-eslint": "^7.1.0",
     "babel-loader": "^6.2.1",
@@ -47,10 +47,10 @@ "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-stage-0": "^6.3.13",
-    "eslint": "^2.12.0",
-    "eslint-config-airbnb": "^9.0.1",
+    "eslint": "^3.9.1",
+    "eslint-config-airbnb": "^12.0.0",
     "eslint-plugin-babel": "^3.2.0",
-    "eslint-plugin-import": "^1.8.1",
-    "eslint-plugin-jsx-a11y": "^1.4.2",
-    "eslint-plugin-react": "^5.1.1",
-    "react": "^15.0.0-rc.1",
-    "react-dom": "^15.0.0-rc.1",
+    "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",
@@ -61,4 +61,3 @@ "webpack": "^1.12.11",
   "dependencies": {
-    "babel-polyfill": "^6.7.4",
-    "autobind-decorator": "^1.3.3"
+    "babel-polyfill": "^6.7.4"
   },
@@ -65,0 +64,0 @@ "files": [

README.md

@@ -23,4 +23,4 @@ # 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)
 
-Package exports 4 components `{ SelectableGroup, createSelectable, SelectAll, DeselectAll }`.
-To make other components selectable create selectable component with `createSelectable` function and put a list of them under `SelectableGroup`.
+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`.
 
@@ -46,3 +46,3 @@ ```js
         onSelectionFinish={this.handleSelectionFinish}
-        whiteList={['.not-selectable', '.item:nth-child(10)', '.item:nth-child(27)']}
+        ignoreList={['.not-selectable', '.item:nth-child(10)', '.item:nth-child(27)']}
       >
@@ -58,3 +58,16 @@ <List items={this.props.items} />
 import React, { Component } from 'react'
-import { createSelectable, SelectAll, DeselectAll } from 'react-selectable-fast'
+import { createSelectable } from '../src'
+
+const SomeComponent = () => (
+  <div>
+    Important info
+  </div>
+)
+
+export default createSelectable(Album)
+```
+
+```js
+import React from 'react'
+import { SelectAll, DeselectAll } from 'react-selectable-fast'
 import SomeComponent from './SomeComponent'
@@ -64,25 +77,19 @@
 
-class List extends Component {
-  ...
-
-  render() {
-    return (
-      <div>
-        <SelectAll className="selectable-button">
-          <button>Select all</button>
-        </SelectAll>
-        <DeselectAll className="selectable-button">
-          <button>Clear selection</button>
-        </DeselectAll>
-        {this.props.items.map((item, i) => (
-          <SelectableComponent
-            key={i}
-            title={item.title}
-            year={item.year}
-          />
-        ))}
-      </div>
-    )
-  }
-}
+const List = () => (
+  <div>
+    <SelectAll className="selectable-button">
+      <button>Select all</button>
+    </SelectAll>
+    <DeselectAll className="selectable-button">
+      <button>Clear selection</button>
+    </DeselectAll>
+    {this.props.items.map((item, i) => (
+      <SelectableComponent
+        key={i}
+        title={item.title}
+        year={item.year}
+      />
+    ))}
+  </div>
+)
 ```
@@ -98,3 +105,3 @@ ## Configuration
 * `scrollContainer` (String) Selector of scroll container which will be used to calculate selectbox position. If not specified SelectableGroup element will be used as scroll container.
-* `whiteList` (Array) Array of whitelisted selectors.
+* `ignoreList` (Array) Array of ignored selectors.
 * `clickableClassName` (String) On element with specified selector click item cotaining this element will be selected.
@@ -101,0 +108,0 @@ * `tolerance` (Number) The amount of buffer to add around your `<SelectableGroup />` container, in pixels.

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

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

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

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

Total package byte prevSize

2957768

increased by7.49%

Dependency count

1

decreased by-50%

Lines of code

2205

increased by0.32%

Number of lines in readme file

109

increased by6.86%

Dependency changes

• - Removedautobind-decorator@^1.3.3

• - Removedautobind-decorator@1.4.3(transitive)