react-selection-hoc - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

build/debug.js

@@ -19,2 +19,25 @@ 'use strict';
   _createClass(Debug, null, [{
+    key: 'log',
+    value: function log() {
+      for (var _len = arguments.length, props = Array(_len), _key = 0; _key < _len; _key++) {
+        props[_key] = arguments[_key];
+      }
+
+      Function.prototype.bind.call(console.log, console).apply(console, props); /* eslint no-console: 0 */
+    }
+  }, {
+    key: 'DOMFlush',
+    value: function DOMFlush(id) {
+      var tmp = 0;
+      // flush the DOM in IE
+      // (http://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation)
+      var elementOnShow = document.getElementById(id);
+      if (navigator.appName === 'Microsoft Internet Explorer') {
+        tmp = elementOnShow.parentNode.offsetTop + 'px';
+      } else {
+        tmp = elementOnShow.offsetTop;
+      }
+      return tmp; // dummy value, only here to fool eslint
+    }
+  }, {
     key: 'debug',
@@ -34,6 +57,6 @@ value: function debug(_ref) {
       if (bounds || clicks || selection || registration || collisions) {
-        var props = { bounds: bounds, clicks: clicks, selection: selection, registration: registration, collisions: collisions };
+        var _props = { bounds: bounds, clicks: clicks, selection: selection, registration: registration, collisions: collisions };
         Debug.DEBUGGING = _extends({
           debug: true
-        }, props);
+        }, _props);
       } else {
@@ -65,10 +88,10 @@ Debug.DEBUGGING.debug = false;
 
-        console.log('collide ' + key + ': ', getBoundsForNode(nodeA), getBoundsForNode(nodeB));
+        Debug.log('collide ' + key + ': ', getBoundsForNode(nodeA), getBoundsForNode(nodeB));
         if (Debug.DEBUGGING.collisions) {
-          console.log('a bottom < b top', aBottom - tolerance < bTop);
-          console.log('a top > b bottom', aTop + tolerance > bBottom);
-          console.log('a right < b left', aBottom - tolerance < bTop);
-          console.log('a left > b right', aLeft + tolerance > bRight);
+          Debug.log('a bottom < b top', aBottom - tolerance < bTop);
+          Debug.log('a top > b bottom', aTop + tolerance > bBottom);
+          Debug.log('a right < b left', aBottom - tolerance < bTop);
+          Debug.log('a left > b right', aLeft + tolerance > bRight);
         }
-        console.log(!(
+        Debug.log(!(
         // 'a' bottom doesn't touch 'b' top
@@ -75,0 +98,0 @@ aBottom - tolerance < bTop ||

build/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Debug = exports.Selectable = exports.Selection = undefined;
+exports.InputManager = exports.SelectionManager = exports.Debug = exports.Selectable = exports.Selection = undefined;
 
@@ -21,2 +21,10 @@ var _Selection = require('./Selection');
 
+var _SelectionManager = require('./SelectionManager.js');
+
+var _SelectionManager2 = _interopRequireDefault(_SelectionManager);
+
+var _InputManager = require('./InputManager.js');
+
+var _InputManager2 = _interopRequireDefault(_InputManager);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -26,2 +34,4 @@
 exports.Selectable = _Selectable2.default;
-exports.Debug = _debug2.default;
+exports.Debug = _debug2.default;
+exports.SelectionManager = _SelectionManager2.default;
+exports.InputManager = _InputManager2.default;

build/mouseMath.js

@@ -113,3 +113,5 @@ 'use strict';
       var offsetname = dir === 'left' ? 'pageXOffset' : 'pageYOffset';
+      var backup = dir === 'left' ? win.document.body.scrollLeft : win.document.body.scrollTop;
       var offset = win[offsetname] ? win[offsetname] : 0;
+      if (!offset) offset = 0;
       var parentoffset = 0;
@@ -119,3 +121,4 @@ if (!useLocal && win.parent && win.parent.window) {
       }
-      return Math.max(offset, parentoffset, 0);
+      if (!parentoffset) parentoffset = 0;
+      return Math.max(backup, offset, parentoffset, 0);
     }
@@ -132,3 +135,4 @@
     value: function getBoundsForNode(node) {
-      var pageOffset = arguments.length <= 1 || arguments[1] === undefined ? mouseMath.pageOffset : arguments[1];
+      var win = arguments.length <= 1 || arguments[1] === undefined ? window : arguments[1];
+      var pageOffset = arguments.length <= 2 || arguments[2] === undefined ? mouseMath.pageOffset : arguments[2];
 
@@ -138,4 +142,4 @@ if (!node.getBoundingClientRect) return node;
       var rect = node.getBoundingClientRect();
-      var left = rect.left + pageOffset('left', iOS);
-      var top = rect.top + pageOffset('top', iOS);
+      var left = rect.left + pageOffset('left', iOS, win);
+      var top = rect.top + pageOffset('top', iOS, win);
 
@@ -142,0 +146,0 @@ return {

build/Selectable.js

@@ -15,2 +15,10 @@ 'use strict';
 
+var _ReferenceableContainer = require('./ReferenceableContainer.jsx');
+
+var _ReferenceableContainer2 = _interopRequireDefault(_ReferenceableContainer);
+
+var _verifyComponent = require('./verifyComponent.js');
+
+var _verifyComponent2 = _interopRequireDefault(_verifyComponent);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,8 +30,18 @@
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint react/no-multi-comp:0 */
 
+
 function Selectable(Component, options) {
   var _class, _temp;
 
-  var displayName = Component.displayName || Component.name || 'Component';
+  var useContainer = (0, _verifyComponent2.default)(Component);
+  var componentDisplayName = Component.displayName || Component.name || 'Component';
+  var displayName = void 0;
+  var ReferenceableContainer = void 0;
+  if (useContainer) {
+    displayName = 'Selectable(ReferenceableContainer(' + componentDisplayName + '))';
+    ReferenceableContainer = (0, _ReferenceableContainer2.default)(Component, componentDisplayName);
+  } else {
+    displayName = 'Selectable(' + componentDisplayName + ')';
+  }
   var unregister = function unregister() {
@@ -43,2 +61,3 @@ return null;
       };
+      _this.selectItem = _this.selectItem.bind(_this);
       return _this;
@@ -50,6 +69,6 @@ }
       value: function componentDidMount() {
-        if (!this.context || !this.context.registerSelectable) return;
+        if (!this.context || !this.context.selectionManager) return;
         var key = options.key(this.props);
-        this.context.registerSelectable(this, key, options.value(this.props), this.selectItem.bind(this));
-        unregister = this.context.unregisterSelectable.bind(null, this, key);
+        this.context.selectionManager.registerSelectable(this, key, options.value(this.props), this.selectItem, options.cacheBounds);
+        unregister = this.context.selectionManager.unregisterSelectable.bind(this.context.selectionManager, this, key);
       }
@@ -72,2 +91,5 @@ }, {
       value: function render() {
+        if (useContainer) {
+          return _react2.default.createElement(ReferenceableContainer, _extends({}, this.props, { selected: this.state.selected }));
+        }
         return _react2.default.createElement(Component, _extends({}, this.props, { selected: this.state.selected }));
@@ -78,5 +100,4 @@ }
     return _class;
-  }(_react2.default.Component), _class.displayName = 'Selectable(' + displayName + ')', _class.contextTypes = {
-    registerSelectable: _react.PropTypes.func,
-    unregisterSelectable: _react.PropTypes.func
+  }(_react2.default.Component), _class.displayName = displayName, _class.contextTypes = {
+    selectionManager: _react.PropTypes.object
   }, _temp;
@@ -83,0 +104,0 @@ }

build/Selection.js

@@ -11,6 +11,2 @@ 'use strict';
 
-var _mouseMath = require('./mouseMath.js');
-
-var _mouseMath2 = _interopRequireDefault(_mouseMath);
-
 var _debug = require('./debug.js');
@@ -20,2 +16,18 @@
 
+var _InputManager = require('./InputManager.js');
+
+var _InputManager2 = _interopRequireDefault(_InputManager);
+
+var _SelectionManager = require('./SelectionManager.js');
+
+var _SelectionManager2 = _interopRequireDefault(_SelectionManager);
+
+var _verifyComponent = require('./verifyComponent.js');
+
+var _verifyComponent2 = _interopRequireDefault(_verifyComponent);
+
+var _ReferenceableContainer = require('./ReferenceableContainer.jsx');
+
+var _ReferenceableContainer2 = _interopRequireDefault(_ReferenceableContainer);
+
 var _react = require('react');
@@ -25,4 +37,2 @@
 
-var _reactDom = require('react-dom');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -40,4 +50,2 @@
   var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
-  var _options$containerDiv = options.containerDiv;
-  var containerDiv = _options$containerDiv === undefined ? true : _options$containerDiv;
   var _options$sorter = options.sorter;
@@ -51,5 +59,14 @@ var sorter = _options$sorter === undefined ? function (a, b) {
   } : _options$nodevalue;
+  // always force a containerDiv if a stateless functional component is passed in
 
-  if (!Component) throw new Error("Component is undefined");
-  var displayName = Component.displayName || Component.name || 'Component';
+  var useContainer = (0, _verifyComponent2.default)(Component);
+  var componentDisplayName = Component.displayName || Component.name || 'Component';
+  var displayName = void 0;
+  var ReferenceableContainer = void 0;
+  if (useContainer) {
+    displayName = 'Selection(ReferenceableContainer(' + componentDisplayName + '))';
+    ReferenceableContainer = (0, _ReferenceableContainer2.default)(Component, componentDisplayName);
+  } else {
+    displayName = 'Selection(' + componentDisplayName + ')';
+  }
 
@@ -64,34 +81,2 @@ return _temp = _class = function (_React$Component) {
 
-      _this.touchStart = _this.touchStart.bind(_this);
-      _this.touchEnd = _this.touchEnd.bind(_this);
-      _this.touchMove = _this.touchMove.bind(_this);
-      _this.touchCancel = _this.touchCancel.bind(_this);
-
-      _this.mouseDown = _this.mouseDown.bind(_this);
-      _this.mouseUp = _this.mouseUp.bind(_this);
-      _this.mouseMove = _this.mouseMove.bind(_this);
-      _this.click = _this.click.bind(_this);
-      _this.mouseDownData = null;
-      _this.clickTolerance = 2;
-      _this.handlers = {
-        stopmouseup: function stopmouseup() {
-          return null;
-        },
-        stopmousemove: function stopmousemove() {
-          return null;
-        },
-        stoptouchend: function stoptouchend() {
-          return null;
-        },
-        stoptouchmove: function stoptouchmove() {
-          return null;
-        },
-        stoptouchcancel: function stoptouchcancel() {
-          return null;
-        }
-      };
-      _this.selectables = {};
-      _this.selectableKeys = [];
-      _this.sortedNodes = [];
-      _this.containerDiv = containerDiv;
       _this.state = {
@@ -104,2 +89,4 @@ selecting: false,
       };
+      _this.selectionManager = new _SelectionManager2.default(_this, props);
+      _this.makeInputManager = _this.makeInputManager.bind(_this);
       return _this;
@@ -114,3 +101,3 @@ }
         if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.selection) {
-          console.log('updatestate: ', selecting, nodes, values);
+          _debug2.default.log('updatestate: ', selecting, nodes, values);
         }
@@ -125,3 +112,3 @@ var newnodes = nodes === null ? this.state.selectedNodes : nodes;
         });
-        if (this.props.onSelectSlot || this.props.onFinishSelect) {
+        if (this.props.onSelectSlot && this.props.constantSelect) {
           (function () {
@@ -137,3 +124,3 @@ var nodelist = Object.keys(newnodes).map(function (key) {
             if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.selection) {
-              console.log('updatestate onSelectSlot', values, nodes, valuelist, nodelist, _this2.bounds);
+              _debug2.default.log('updatestate onSelectSlot', values, nodes, valuelist, nodelist, _this2.bounds);
             }
@@ -165,3 +152,3 @@ if (_this2.props.onSelectSlot) {
         if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.selection) {
-          console.log('finishselect', newvalues, newnodes, valuelist, nodelist, this.bounds);
+          _debug2.default.log('finishselect', newvalues, newnodes, valuelist, nodelist, this.bounds);
         }
@@ -177,28 +164,4 @@ this.props.onFinishSelect(newvalues, function () {
       value: function getChildContext() {
-        var _this3 = this;
-
         return {
-          registerSelectable: function registerSelectable(component, key, value, callback) {
-            if (!_this3.selectables.hasOwnProperty(key)) {
-              _this3.selectableKeys.push(key);
-              _this3.sortedNodes.push({ component: component, key: key, value: value, callback: callback });
-            }
-            if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.registration) {
-              console.log('registered: ' + key, value);
-            }
-            _this3.selectables[key] = { component: component, value: value, callback: callback };
-          },
-          unregisterSelectable: function unregisterSelectable(component, key) {
-            delete _this3.selectables[key];
-            _this3.selectableKeys = _this3.selectableKeys.filter(function (itemKey) {
-              return itemKey !== key;
-            });
-            if (_this3.state.selectedNodes[key]) {
-              var nodes = _this3.state.selectedNodes;
-              var values = _this3.state.selectedValues;
-              delete nodes[key];
-              delete values[key];
-              _this3.updateState(null, nodes, values);
-            }
-          },
+          selectionManager: this.selectionManager,
           selectedNodes: this.state.selectedNodes,
@@ -209,150 +172,36 @@ selectedValues: this.state.selectedValues
     }, {
-      key: 'addListener',
-      value: function addListener(node, type, handler) {
-        var _this4 = this;
-
-        node.addEventListener(type, handler);
-        this.handlers['stop' + type] = function () {
-          node.removeEventListener(type, handler);
-          _this4.handlers['stop' + type] = function () {
-            return null;
-          };
-        };
-      }
-    }, {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
-        if (this.handlers.stopmousedown) {
-          this.handlers.stopmousedown();
+        if (this.inputManager) {
+          this.inputManager.unmount();
         }
-        if (this.handlers.stopmouseup) {
-          this.handlers.stopmouseup();
-        }
-        if (this.handlers.stopmousemove) {
-          this.handlers.stopmousemove();
-        }
-        if (this.handlers.stoptouchend) {
-          this.handlers.stoptouchend();
-        }
-        if (this.handlers.stoptouchmove) {
-          this.handlers.stoptouchmove();
-        }
-        if (this.handlers.stoptouchcancel) {
-          this.handlers.stoptouchcancel();
-        }
       }
     }, {
-      key: 'touchStart',
-      value: function touchStart(e) {
-        var _this5 = this;
-
-        this.startSelectHandler(e, this.props.onTouchStart, 'touchstart', function () {
-          _this5.addListener(document, 'touchend', _this5.touchEnd);
-          _this5.addListener(document, 'touchmove', _this5.touchMove);
-        });
-      }
-    }, {
-      key: 'mouseDown',
-      value: function mouseDown(e) {
-        var _this6 = this;
-
-        this.startSelectHandler(e, this.props.onMouseDown, 'mousedown', function () {
-          _this6.addListener(document, 'mouseup', _this6.mouseUp);
-          _this6.addListener(document, 'mousemove', _this6.mouseMove);
-        });
-      }
-    }, {
-      key: 'startSelectHandler',
-      value: function startSelectHandler(e, priorHandler, eventname, newEvents) {
-        var invalid = e.touches && e.touches.length > 1;
-        if (!this.props.selectable || invalid) {
-          if (priorHandler) {
-            priorHandler(e);
+      key: 'invalid',
+      value: function invalid(e, eventname) {
+        if (eventname === 'touchstart') {
+          if (this.props.onTouchStart) {
+            this.props.onTouchStart(e);
           }
-          return;
-        }
-        if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.clicks) {
-          console.log(eventname);
-        }
-        if (!this.props.selectable) return;
-        if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.clicks) {
-          console.log(eventname + ': selectable');
-        }
-        if (!this.node) {
-          this.node = (0, _reactDom.findDOMNode)(this.ref);
-          this.bounds = _mouseMath2.default.getBoundsForNode(this.node);
-        }
-        var coords = _mouseMath2.default.getCoordinates(e, e.touches[0].identifier);
-        console.log(coords);
-        if (e.which === 3 || e.button === 2 || !_mouseMath2.default.contains(this.node, coords.clientX, coords.clientY)) {
-          if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.clicks) {
-            console.log(eventname + ': buttons or not contained');
+        } else {
+          if (this.props.onMouseDown) {
+            this.props.onMouseDown(e);
           }
-          return;
         }
-        if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.clicks) {
-          console.log(eventname + ': left click');
-        }
-        if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.bounds) {
-          console.log(eventname + ': bounds', this.bounds, e.pageY, e.pageX);
-        }
-        if (!_mouseMath2.default.objectsCollide(this.bounds, {
-          top: coords.pageY,
-          left: coords.pageX
-        })) return;
-        if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.clicks) {
-          console.log(eventname + ': maybe select');
-        }
-
-        this.mouseDownData = {
-          x: coords.pageX,
-          y: coords.pageY,
-          clientX: coords.clientX,
-          clientY: coords.clientY,
-          touchID: e.touches ? e.touches[0].identifier : false
-        };
-
-        if (this.props.constantSelect) {
-          this._selectRect = _mouseMath2.default.createSelectRect(coords, this.mouseDownData);
-          this.selectNodes(e);
-        }
-
-        e.preventDefault();
-
-        newEvents();
       }
     }, {
-      key: 'click',
-      value: function click(e) {
-        if (!this.props.selectable) {
-          if (this.props.onClick) {
-            this.props.onClick(e);
-          }
-          return;
+      key: 'start',
+      value: function start(bounds, mouseDownData, selectionRectangle) {
+        this.bounds = bounds;
+        this.mouseDownData = mouseDownData;
+        if (this.props.constantSelect) {
+          this.selectionManager.select(selectionRectangle, this.state, this.props);
+        } else {
+          this.selectionManager.deselect(this.state);
         }
-        if (!this.mouseDownData) return;
-        this.handlers.stopmouseup();
-        this.handlers.stopmousemove();
-        this._selectRect = _mouseMath2.default.createSelectRect(e, this.mouseDownData);
-        if (this.props.constantSelect && !this.props.preserveSelection) {
-          this.deselectNodes();
-          return;
-        }
-        this.selectNodes();
       }
     }, {
-      key: 'touchEnd',
-      value: function touchEnd(e) {
-        this.handlers.stoptouchmove();
-        this.handlers.stoptouchend();
-
-        if (!this.mouseDownData) return;
-        this.endSelect(e);
-      }
-    }, {
-      key: 'touchCancel',
-      value: function touchCancel() {
-        this.handlers.stoptouchmove();
-        this.handlers.stoptouchend();
-        this.deselectNodes();
+      key: 'cancel',
+      value: function cancel() {
+        this.selectionManager.deselect(this.state);
         this.propagateFinishedSelect();
@@ -362,42 +211,15 @@ this.setState({ selecting: false });
     }, {
-      key: 'mouseUp',
-      value: function mouseUp(e) {
-        this.handlers.stopmouseup();
-        this.handlers.stopmousemove();
-
-        if (!this.mouseDownData) return;
-        this.endSelect(e);
-      }
-    }, {
-      key: 'endSelect',
-      value: function endSelect(e) {
-        if (_mouseMath2.default.isClick(e, this.mouseDownData, this.clickTolerance)) {
-          if (this.state.selecting) {
-            this.setState({ selecting: false });
-          }
-          return;
-        }
-
+      key: 'end',
+      value: function end(e, mouseDownData, selectionRectangle) {
         if (this.props.constantSelect && !this.props.preserveSelection) {
           this.propagateFinishedSelect();
-          this.deselectNodes();
+          this.selectionManager.deselect(this.state);
           return;
         }
-        this.selectNodes();
+        this.selectionManager.select(selectionRectangle, this.state, this.props);
+        this.propagateFinishedSelect();
       }
     }, {
-      key: 'touchMove',
-      value: function touchMove(e) {
-        if (!this.mouseDownData) return;
-        this.expandSelect(e);
-      }
-    }, {
-      key: 'mouseMove',
-      value: function mouseMove(e) {
-        if (!this.mouseDownData) return;
-        this.expandSelect(e);
-      }
-    }, {
-      key: 'expandSelect',
-      value: function expandSelect(e) {
+      key: 'change',
+      value: function change(selectionRectangle) {
         var old = this.state.selecting;
@@ -409,119 +231,27 @@
 
-        var coords = _mouseMath2.default.getCoordinates(e, this.mouseDownData.touchID);
-        if (!_mouseMath2.default.isClick(coords, this.mouseDownData, this.clickTolerance)) {
-          this._selectRect = _mouseMath2.default.createSelectRect(coords, this.mouseDownData);
-        }
         if (this.props.constantSelect) {
-          this.selectNodes();
+          this.selectionManager.select(selectionRectangle, this.state, this.props);
         }
       }
     }, {
-      key: 'deselectNodes',
-      value: function deselectNodes() {
-        var _this7 = this;
+      key: 'makeInputManager',
+      value: function makeInputManager(ref) {
+        var inputManager = arguments.length <= 1 || arguments[1] === undefined ? _InputManager2.default : arguments[1];
 
-        var changed = false;
-        Object.keys(this.state.selectedNodes).forEach(function (key) {
-          changed = true;
-          _this7.selectables[key].callback(false, {}, {});
-        });
-        if (changed) {
-          this.updateState(false, {}, {});
-        }
+        if (!ref) return;
+        if (this.ref === ref) return;
+        if (this.inputManager) this.inputManager.unmount();
+        this.ref = ref;
+        this.inputManager = new inputManager(ref, this, this);
       }
     }, {
-      key: 'selectNodes',
-      value: function selectNodes() {
-        var _this8 = this;
-
-        var nodes = _extends({}, this.state.selectedNodes);
-        var values = _extends({}, this.state.selectedValues);
-        var changedNodes = [];
-        var selectedIndices = [];
-        var saveNode = function saveNode(node, bounds) {
-          if (nodes[node.key] !== undefined) return;
-          if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.selection) {
-            console.log('select: ' + node.key);
-          }
-          nodes[node.key] = { node: node.component, bounds: bounds };
-          values[node.key] = node.value;
-          changedNodes.push([true, node]);
-        };
-
-        this.sortedNodes.forEach(function (node, idx) {
-          var domnode = (0, _reactDom.findDOMNode)(node.component);
-          var key = node.key;
-          var bounds = _mouseMath2.default.getBoundsForNode(domnode);
-          if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.bounds) {
-            console.log('node ' + key + ' bounds', bounds);
-          }
-          if (!domnode || !_mouseMath2.default.objectsCollide(_this8._selectRect, bounds, _this8.clickTolerance, key)) {
-            if (nodes[key] === undefined) return;
-            if (_debug2.default.DEBUGGING.debug && _debug2.default.DEBUGGING.selection) {
-              console.log('deselect: ' + key);
-            }
-            delete nodes[key];
-            delete values[key];
-            changedNodes.push([false, node]);
-            return;
-          }
-          selectedIndices.push(idx);
-          saveNode(node, bounds);
-        });
-        if (this.props.selectIntermediates) {
-          (function () {
-            var min = Math.min.apply(Math, selectedIndices);
-            var max = Math.max.apply(Math, selectedIndices);
-            var filled = Array.apply(min, Array(max - min)).map(function (x, y) {
-              return min + y + 1;
-            });
-            filled.unshift(min);
-            var diff = filled.filter(function (val) {
-              return selectedIndices.indexOf(val) === -1;
-            });
-            diff.forEach(function (idx) {
-              return saveNode(_this8.sortedNodes[idx], _mouseMath2.default.getBoundsForNode((0, _reactDom.findDOMNode)(_this8.sortedNodes[idx].component)));
-            });
-          })();
-        }
-        if (changedNodes.length) {
-          changedNodes.forEach(function (item) {
-            item[1].callback(item[0], nodes, values);
-          });
-          this.updateState(null, nodes, values);
-        }
-      }
-    }, {
       key: 'render',
       value: function render() {
-        var _this9 = this;
-
-        if (this.containerDiv) {
-          return _react2.default.createElement(
-            'div',
-            {
-              onMouseDown: this.mouseDown,
-              onClick: this.click,
-              onTouchStart: this.touchStart,
-              onTouchMove: this.touchMove,
-              onTouchEnd: this.touchEnd,
-              onTouchCancel: this.touchCancel
-            },
-            _react2.default.createElement(Component, _extends({}, this.props, this.state, {
-              ref: function ref(_ref) {
-                _this9.ref = _ref;
-              }
-            }))
-          );
+        if (useContainer) {
+          return _react2.default.createElement(ReferenceableContainer, _extends({}, this.props, this.state, {
+            ref: this.makeInputManager
+          }));
         }
         return _react2.default.createElement(Component, _extends({}, this.props, this.state, {
-          onMouseDown: this.mouseDown,
-          onClick: this.click,
-          onTouchStart: this.touchStart,
-          onTouchMove: this.touchMove,
-          onTouchEnd: this.touchEnd,
-          onTouchCancel: this.touchCancel,
-          ref: function ref(_ref2) {
-            _this9.ref = _ref2;
-          }
+          ref: this.makeInputManager
         }));
@@ -532,3 +262,3 @@ }
     return _class;
-  }(_react2.default.Component), _class.displayName = 'Selection(' + displayName + ')', _class.propTypes = {
+  }(_react2.default.Component), _class.displayName = displayName, _class.propTypes = {
     clickTolerance: _react.PropTypes.number,
@@ -542,6 +272,5 @@ constantSelect: _react.PropTypes.bool,
     onMouseDown: _react.PropTypes.func,
-    onTouchStart: _react.PropTypes.func,
-    onClick: _react.PropTypes.func
+    onTouchStart: _react.PropTypes.func
   }, _class.defaultProps = {
-    clickTolerance: 5,
+    clickTolerance: 2,
     constantSelect: false,
@@ -552,4 +281,3 @@ selectable: false,
   }, _class.childContextTypes = {
-    registerSelectable: _react.PropTypes.func,
-    unregisterSelectable: _react.PropTypes.func,
+    selectionManager: _react.PropTypes.object,
     selectedNodes: _react.PropTypes.object,
@@ -556,0 +284,0 @@ selectedValues: _react.PropTypes.object

CHANGELOG.md

@@ -0,1 +1,12 @@
+0.3.0 / 2016-06-19
+==================
+- remove IE9 support.  React crashes on setting state in a Selectable component.
+  This is unfixable.
+- fully unit test every line of code
+- verify all assumptions about browser-specific behavior in regards to bounds,
+  events (mouse and touch)
+- add support for stateless functional components
+- remove any addition of <div>s to the DOM, so CSS and structure is not broken
+- split off selection and input handling from the main code.  Modular=maintainable
+
 0.2.0 / 2016-06-14
@@ -2,0 +13,0 @@ ==================

package.json

 {
   "name": "react-selection-hoc",
   "author": "Gregory Beaver",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Make any React-based collection of similar components selectable",
@@ -15,3 +15,3 @@ "main": "build/index.js",
     "clean:examples": "rimraf examples/static",
-    "test": "karma start --single-run",
+    "test": "karma start karma.noie.conf.js && karma start karma.ie.conf.js",
     "local-test": "./local-test.env",
@@ -18,0 +18,0 @@ "test-cov": "babel-node isparta cover --report html --report text node_modules/.bin/_mocha",

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 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

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

Found 3 instances in 1 package

Improved metrics

Total package byte prevSize

1030752

increased by1.27%

Number of package files

27

increased by42.11%

Lines of code

1117

increased by22.88%

Number of low supply chain risk alerts

5

decreased by-28.57%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes