react-sortable-hoc - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/commonjs/Manager.js

@@ -45,3 +45,6 @@ 'use strict';
 
-			return (0, _sortBy2.default)(this.refs[collection], 'index');
+			return (0, _sortBy2.default)(this.refs[collection], function (_ref) {
+				var node = _ref.node;
+				return node.sortableInfo.index;
+			});
 		}
@@ -62,4 +65,5 @@ }, {
 
-			return (0, _find2.default)(this.refs[this.active.collection], function (ref) {
-				return ref.index == _this.active.index;
+			return (0, _find2.default)(this.refs[this.active.collection], function (_ref2) {
+				var node = _ref2.node;
+				return node.sortableInfo.index == _this.active.index;
 			});
@@ -66,0 +70,0 @@ }

dist/commonjs/SortableContainer/index.js

@@ -33,4 +33,2 @@ 'use strict';
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -52,4 +50,2 @@
 		function _class() {
-			var _this$events;
-
 			_classCallCheck(this, _class);
@@ -73,3 +69,5 @@
 
-					if (useDragHandle && !e.target.sortableHandle) return;
+					if (useDragHandle && !(0, _utils.closest)(e.target, function (el) {
+						return el.sortableHandle != null;
+					})) return;
 
@@ -83,3 +81,3 @@ _this.manager.active = { index: index, collection: collection };
 
-			_this.cancel = function () {
+			_this.cancel = function (e) {
 				if (!_this.state.sorting) {
@@ -99,7 +97,8 @@ clearTimeout(_this.pressTimer);
 					var helperClass = _this$props.helperClass;
+					var hideSortableGhost = _this$props.hideSortableGhost;
 					var useWindowAsScrollContainer = _this$props.useWindowAsScrollContainer;
 					var node = active.node;
-					var index = active.index;
 					var collection = active.collection;
 
+					var index = node.sortableInfo.index;
 
@@ -127,2 +126,6 @@ var containerBoundingRect = _this.container.getBoundingClientRect();
 
+					if (hideSortableGhost) {
+						node.style.visibility = 'hidden';
+					}
+
 					if (axis == 'x') {
@@ -140,5 +143,9 @@ _this.minTranslate = (useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
 
-					_this.listenerNode = _utils.touchSupport ? node : _this.contentWindow;
-					_this.listenerNode.addEventListener(_utils.events.move, _this.handleSortMove);
-					_this.listenerNode.addEventListener(_utils.events.end, _this.handleSortEnd);
+					_this.listenerNode = e.touches ? node : _this.contentWindow;
+					_utils.events.move.forEach(function (eventName) {
+						return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
+					});
+					_utils.events.end.forEach(function (eventName) {
+						return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
+					});
 
@@ -175,4 +182,8 @@ _this.setState({
 				if (_this.listenerNode) {
-					_this.listenerNode.removeEventListener(_utils.events.move, _this.handleSortMove);
-					_this.listenerNode.removeEventListener(_utils.events.end, _this.handleSortEnd);
+					_utils.events.move.forEach(function (eventName) {
+						return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
+					});
+					_utils.events.end.forEach(function (eventName) {
+						return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
+					});
 				}
@@ -191,3 +202,3 @@
 					var el = node.node;
-
+					var index = el.sortableInfo.index;
 					node.edgeOffset = null; // Clear the cached offsetTop / offsetLeft value
@@ -252,3 +263,7 @@
 			_this.manager = new _Manager2.default();
-			_this.events = (_this$events = {}, _defineProperty(_this$events, _utils.events.start, _this.handleStart), _defineProperty(_this$events, _utils.events.move, _this.cancel), _defineProperty(_this$events, _utils.events.end, _this.cancel), _this$events);
+			_this.events = {
+				start: _this.handleStart,
+				move: _this.cancel,
+				end: _this.cancel
+			};
 			return _this;
@@ -267,2 +282,4 @@ }
 			value: function componentDidMount() {
+				var _this2 = this;
+
 				var contentWindow = this.props.contentWindow;
@@ -276,4 +293,10 @@
 
+				var _loop = function _loop(key) {
+					_utils.events[key].forEach(function (eventName) {
+						return _this2.container.addEventListener(eventName, _this2.events[key], false);
+					});
+				};
+
 				for (var key in this.events) {
-					this.container.addEventListener(key, this.events[key]);
+					_loop(key);
 				}
@@ -284,4 +307,12 @@ }
 			value: function componentWillUnmount() {
+				var _this3 = this;
+
+				var _loop2 = function _loop2(key) {
+					_utils.events[key].forEach(function (eventName) {
+						return _this3.container.removeEventListener(eventName, _this3.events[key]);
+					});
+				};
+
 				for (var key in this.events) {
-					this.container.removeEventListener(key, this.events[key]);
+					_loop2(key);
 				}
@@ -307,4 +338,4 @@ }
 				return {
-					x: _utils.touchSupport ? e.touches[0].clientX : e.clientX,
-					y: _utils.touchSupport ? e.touches[0].clientY : e.clientY
+					x: e.touches ? e.touches[0].clientX : e.clientX,
+					y: e.touches ? e.touches[0].clientY : e.clientY
 				};
@@ -363,5 +394,5 @@ }
 					var node = _nodes$i.node;
-					var index = _nodes$i.index;
 					var edgeOffset = _nodes$i.edgeOffset;
 
+					var index = node.sortableInfo.index;
 					var dimension = axis == 'x' ? node.offsetWidth : node.offsetHeight;
@@ -368,0 +399,0 @@ var offset = this.dimension > dimension ? dimension / 2 : this.dimension / 2;

dist/commonjs/SortableElement/index.js

@@ -56,7 +56,7 @@ 'use strict';
                 if (!disabled) {
-                    var node = (0, _reactDom.findDOMNode)(this);
+                    var node = this.node = (0, _reactDom.findDOMNode)(this);
 
                     node.sortableInfo = { index: index, collection: collection };
 
-                    this.ref = { index: index, node: node };
+                    this.ref = { node: node };
                     this.context.manager.add(collection, this.ref);
@@ -66,2 +66,11 @@ }
         }, {
+            key: 'componentWillReceiveProps',
+            value: function componentWillReceiveProps(nextProps) {
+                var index = this.props.index;
+
+                if (index !== nextProps.index && this.node) {
+                    this.node.sortableInfo.index = nextProps.index;
+                }
+            }
+        }, {
             key: 'componentWillUnmount',
@@ -68,0 +77,0 @@ value: function componentWillUnmount() {

dist/commonjs/utils.js

@@ -19,8 +19,6 @@ 'use strict';
 
-var touchSupport = exports.touchSupport = Boolean('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
-
 var events = exports.events = {
-    start: touchSupport ? 'touchstart' : 'mousedown',
-    move: touchSupport ? 'touchmove' : 'mousemove',
-    end: touchSupport ? 'touchend' : 'mouseup'
+    start: ['touchstart', 'mousedown'],
+    move: ['touchmove', 'mousemove'],
+    end: ['touchend', 'mouseup']
 };
@@ -27,0 +25,0 @@

dist/es6/Manager.js

@@ -27,3 +27,6 @@ import find from 'lodash/find';
 
-			return sortBy(this.refs[collection], 'index');
+			return sortBy(this.refs[collection], function (_ref) {
+				var node = _ref.node;
+				return node.sortableInfo.index;
+			});
 		}
@@ -44,4 +47,5 @@ }, {
 
-			return find(this.refs[this.active.collection], function (ref) {
-				return ref.index == _this.active.index;
+			return find(this.refs[this.active.collection], function (_ref2) {
+				var node = _ref2.node;
+				return node.sortableInfo.index == _this.active.index;
 			});
@@ -48,0 +52,0 @@ }

dist/es6/SortableContainer/index.js

 import React, { Component, PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import Manager from '../Manager';
-import { closest, events, touchSupport, vendorPrefix } from '../utils';
+import { closest, events, vendorPrefix } from '../utils';
 import invariant from 'invariant';
@@ -17,4 +17,2 @@
 		function _class() {
-			var _this$events;
-
 			babelHelpers.classCallCheck(this, _class);
@@ -38,3 +36,5 @@
 
-					if (useDragHandle && !e.target.sortableHandle) return;
+					if (useDragHandle && !closest(e.target, function (el) {
+						return el.sortableHandle != null;
+					})) return;
 
@@ -48,3 +48,3 @@ _this.manager.active = { index: index, collection: collection };
 
-			_this.cancel = function () {
+			_this.cancel = function (e) {
 				if (!_this.state.sorting) {
@@ -64,7 +64,8 @@ clearTimeout(_this.pressTimer);
 					var helperClass = _this$props.helperClass;
+					var hideSortableGhost = _this$props.hideSortableGhost;
 					var useWindowAsScrollContainer = _this$props.useWindowAsScrollContainer;
 					var node = active.node;
-					var index = active.index;
 					var collection = active.collection;
 
+					var index = node.sortableInfo.index;
 
@@ -92,2 +93,6 @@ var containerBoundingRect = _this.container.getBoundingClientRect();
 
+					if (hideSortableGhost) {
+						node.style.visibility = 'hidden';
+					}
+
 					if (axis == 'x') {
@@ -105,5 +110,9 @@ _this.minTranslate = (useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2;
 
-					_this.listenerNode = touchSupport ? node : _this.contentWindow;
-					_this.listenerNode.addEventListener(events.move, _this.handleSortMove);
-					_this.listenerNode.addEventListener(events.end, _this.handleSortEnd);
+					_this.listenerNode = e.touches ? node : _this.contentWindow;
+					events.move.forEach(function (eventName) {
+						return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false);
+					});
+					events.end.forEach(function (eventName) {
+						return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false);
+					});
 
@@ -140,4 +149,8 @@ _this.setState({
 				if (_this.listenerNode) {
-					_this.listenerNode.removeEventListener(events.move, _this.handleSortMove);
-					_this.listenerNode.removeEventListener(events.end, _this.handleSortEnd);
+					events.move.forEach(function (eventName) {
+						return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove);
+					});
+					events.end.forEach(function (eventName) {
+						return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd);
+					});
 				}
@@ -156,3 +169,3 @@
 					var el = node.node;
-
+					var index = el.sortableInfo.index;
 					node.edgeOffset = null; // Clear the cached offsetTop / offsetLeft value
@@ -217,3 +230,7 @@
 			_this.manager = new Manager();
-			_this.events = (_this$events = {}, babelHelpers.defineProperty(_this$events, events.start, _this.handleStart), babelHelpers.defineProperty(_this$events, events.move, _this.cancel), babelHelpers.defineProperty(_this$events, events.end, _this.cancel), _this$events);
+			_this.events = {
+				start: _this.handleStart,
+				move: _this.cancel,
+				end: _this.cancel
+			};
 			return _this;
@@ -232,2 +249,4 @@ }
 			value: function componentDidMount() {
+				var _this2 = this;
+
 				var contentWindow = this.props.contentWindow;
@@ -241,4 +260,10 @@
 
+				var _loop = function _loop(key) {
+					events[key].forEach(function (eventName) {
+						return _this2.container.addEventListener(eventName, _this2.events[key], false);
+					});
+				};
+
 				for (var key in this.events) {
-					this.container.addEventListener(key, this.events[key]);
+					_loop(key);
 				}
@@ -249,4 +274,12 @@ }
 			value: function componentWillUnmount() {
+				var _this3 = this;
+
+				var _loop2 = function _loop2(key) {
+					events[key].forEach(function (eventName) {
+						return _this3.container.removeEventListener(eventName, _this3.events[key]);
+					});
+				};
+
 				for (var key in this.events) {
-					this.container.removeEventListener(key, this.events[key]);
+					_loop2(key);
 				}
@@ -272,4 +305,4 @@ }
 				return {
-					x: touchSupport ? e.touches[0].clientX : e.clientX,
-					y: touchSupport ? e.touches[0].clientY : e.clientY
+					x: e.touches ? e.touches[0].clientX : e.clientX,
+					y: e.touches ? e.touches[0].clientY : e.clientY
 				};
@@ -328,5 +361,5 @@ }
 					var node = _nodes$i.node;
-					var index = _nodes$i.index;
 					var edgeOffset = _nodes$i.edgeOffset;
 
+					var index = node.sortableInfo.index;
 					var dimension = axis == 'x' ? node.offsetWidth : node.offsetHeight;
@@ -333,0 +366,0 @@ var offset = this.dimension > dimension ? dimension / 2 : this.dimension / 2;

dist/es6/SortableElement/index.js

@@ -29,7 +29,7 @@ import React, { Component, PropTypes } from 'react';
                 if (!disabled) {
-                    var node = findDOMNode(this);
+                    var node = this.node = findDOMNode(this);
 
                     node.sortableInfo = { index: index, collection: collection };
 
-                    this.ref = { index: index, node: node };
+                    this.ref = { node: node };
                     this.context.manager.add(collection, this.ref);
@@ -39,2 +39,11 @@ }
         }, {
+            key: 'componentWillReceiveProps',
+            value: function componentWillReceiveProps(nextProps) {
+                var index = this.props.index;
+
+                if (index !== nextProps.index && this.node) {
+                    this.node.sortableInfo.index = nextProps.index;
+                }
+            }
+        }, {
             key: 'componentWillUnmount',
@@ -41,0 +50,0 @@ value: function componentWillUnmount() {

dist/es6/utils.js

@@ -12,8 +12,6 @@ export function arrayMove(array, previousIndex, newIndex) {
 
-export var touchSupport = Boolean('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
-
 export var events = {
-    start: touchSupport ? 'touchstart' : 'mousedown',
-    move: touchSupport ? 'touchmove' : 'mousemove',
-    end: touchSupport ? 'touchend' : 'mouseup'
+    start: ['touchstart', 'mousedown'],
+    move: ['touchmove', 'mousemove'],
+    end: ['touchend', 'mouseup']
 };
@@ -20,0 +18,0 @@

package.json

 {
   "name": "react-sortable-hoc",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",
@@ -5,0 +5,0 @@ "author": {

No alert changes

Improved metrics

Total package byte prevSize

663987

increased by0.71%

Lines of code

6109

increased by2.05%

No dependency changes