react-sortable-hoc
Advanced tools
react-sortable-hoc - npm Package Compare versions
Comparing version 0.0.1 to 0.0.2
@@ -47,4 +47,2 @@ 'use strict'; | ||
| var manager = new _Manager2.default(); | ||
| return _temp = _class = function (_Component) { | ||
@@ -67,3 +65,3 @@ _inherits(_class, _Component); | ||
| if (node) { | ||
| if (node && !_this.state.sorting && node.sortableInfo) { | ||
| var useDragHandle = _this.props.useDragHandle; | ||
@@ -77,3 +75,3 @@ var _node$sortableInfo = node.sortableInfo; | ||
| manager.active = { index: index, collection: collection }; | ||
| _this.manager.active = { index: index, collection: collection }; | ||
| _this.pressTimer = setTimeout(function () { | ||
@@ -88,3 +86,3 @@ return _this.handlePress(e); | ||
| clearTimeout(_this.pressTimer); | ||
| manager.active = null; | ||
| _this.manager.active = null; | ||
| } | ||
@@ -94,3 +92,3 @@ }; | ||
| _this.handlePress = function (e) { | ||
| var active = manager.getActive(); | ||
| var active = _this.manager.getActive(); | ||
@@ -116,2 +114,3 @@ if (active) { | ||
| _this.index = index; | ||
| _this.newIndex = index; | ||
@@ -170,3 +169,3 @@ var edge = _this.edge = axis == 'x' ? 'Left' : 'Top'; | ||
| var onSortEnd = _this$props2.onSortEnd; | ||
| var collection = manager.active.collection; | ||
| var collection = _this.manager.active.collection; | ||
@@ -187,3 +186,3 @@ // Remove the event listeners if the node is still in the DOM | ||
| var nodes = manager.refs[collection]; | ||
| var nodes = _this.manager.refs[collection]; | ||
| for (var i = 0, len = nodes.length; i < len; i++) { | ||
@@ -213,3 +212,3 @@ var node = nodes[i]; | ||
| // Update state | ||
| manager.active = null; | ||
| _this.manager.active = null; | ||
| _this.setState({ | ||
@@ -252,2 +251,3 @@ sorting: false, | ||
| _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); | ||
@@ -261,3 +261,3 @@ return _this; | ||
| return { | ||
| manager: manager | ||
| manager: this.manager | ||
| }; | ||
@@ -277,3 +277,3 @@ } | ||
| for (var key in this.events) { | ||
| this.document.addEventListener(key, this.events[key]); | ||
| this.container.addEventListener(key, this.events[key]); | ||
| } | ||
@@ -285,3 +285,3 @@ } | ||
| for (var key in this.events) { | ||
| this.document.removeEventListener(key, this.events[key]); | ||
| this.container.removeEventListener(key, this.events[key]); | ||
| } | ||
@@ -354,3 +354,3 @@ } | ||
| var nodes = manager.getOrderedRefs(); | ||
| var nodes = this.manager.getOrderedRefs(); | ||
| var deltaScroll = this.scrollContainer['scroll' + this.edge] - this.initialScroll; | ||
@@ -357,0 +357,0 @@ var sortingOffset = this.offsetEdge + this.translate + deltaScroll; |
@@ -30,3 +30,9 @@ 'use strict'; | ||
| var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; | ||
| return pre[0].toUpperCase() + pre.substr(1); | ||
| switch (pre) { | ||
| case 'ms': | ||
| return 'ms'; | ||
| default: | ||
| return pre[0].toUpperCase() + pre.substr(1); | ||
| } | ||
| }(); | ||
@@ -33,0 +39,0 @@ |
@@ -13,4 +13,2 @@ import React, { Component, PropTypes } from 'react'; | ||
| var manager = new Manager(); | ||
| return _temp = _class = function (_Component) { | ||
@@ -33,3 +31,3 @@ babelHelpers.inherits(_class, _Component); | ||
| if (node) { | ||
| if (node && !_this.state.sorting && node.sortableInfo) { | ||
| var useDragHandle = _this.props.useDragHandle; | ||
@@ -43,3 +41,3 @@ var _node$sortableInfo = node.sortableInfo; | ||
| manager.active = { index: index, collection: collection }; | ||
| _this.manager.active = { index: index, collection: collection }; | ||
| _this.pressTimer = setTimeout(function () { | ||
@@ -54,3 +52,3 @@ return _this.handlePress(e); | ||
| clearTimeout(_this.pressTimer); | ||
| manager.active = null; | ||
| _this.manager.active = null; | ||
| } | ||
@@ -60,3 +58,3 @@ }; | ||
| _this.handlePress = function (e) { | ||
| var active = manager.getActive(); | ||
| var active = _this.manager.getActive(); | ||
@@ -82,2 +80,3 @@ if (active) { | ||
| _this.index = index; | ||
| _this.newIndex = index; | ||
@@ -136,3 +135,3 @@ var edge = _this.edge = axis == 'x' ? 'Left' : 'Top'; | ||
| var onSortEnd = _this$props2.onSortEnd; | ||
| var collection = manager.active.collection; | ||
| var collection = _this.manager.active.collection; | ||
@@ -153,3 +152,3 @@ // Remove the event listeners if the node is still in the DOM | ||
| var nodes = manager.refs[collection]; | ||
| var nodes = _this.manager.refs[collection]; | ||
| for (var i = 0, len = nodes.length; i < len; i++) { | ||
@@ -179,3 +178,3 @@ var node = nodes[i]; | ||
| // Update state | ||
| manager.active = null; | ||
| _this.manager.active = null; | ||
| _this.setState({ | ||
@@ -218,2 +217,3 @@ sorting: false, | ||
| _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); | ||
@@ -227,3 +227,3 @@ return _this; | ||
| return { | ||
| manager: manager | ||
| manager: this.manager | ||
| }; | ||
@@ -243,3 +243,3 @@ } | ||
| for (var key in this.events) { | ||
| this.document.addEventListener(key, this.events[key]); | ||
| this.container.addEventListener(key, this.events[key]); | ||
| } | ||
@@ -251,3 +251,3 @@ } | ||
| for (var key in this.events) { | ||
| this.document.removeEventListener(key, this.events[key]); | ||
| this.container.removeEventListener(key, this.events[key]); | ||
| } | ||
@@ -320,3 +320,3 @@ } | ||
| var nodes = manager.getOrderedRefs(); | ||
| var nodes = this.manager.getOrderedRefs(); | ||
| var deltaScroll = this.scrollContainer['scroll' + this.edge] - this.initialScroll; | ||
@@ -323,0 +323,0 @@ var sortingOffset = this.offsetEdge + this.translate + deltaScroll; |
@@ -23,3 +23,9 @@ export function arrayMove(array, previousIndex, newIndex) { | ||
| var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; | ||
| return pre[0].toUpperCase() + pre.substr(1); | ||
| switch (pre) { | ||
| case 'ms': | ||
| return 'ms'; | ||
| default: | ||
| return pre[0].toUpperCase() + pre.substr(1); | ||
| } | ||
| }(); | ||
@@ -26,0 +32,0 @@ |
| { | ||
| "name": "react-sortable-hoc", | ||
| "version": "0.0.1", | ||
| "version": "0.0.2", | ||
| "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list", | ||
@@ -5,0 +5,0 @@ "author": { |
| # React Sortable (HOC) | ||
| > A set of higher-order components to turn any list into an animated, touch-friendly, sortable list. | ||
| [](https://www.npmjs.com/package/react-sortable-hoc) | ||
@@ -11,5 +13,5 @@ [](https://github.com/clauderic/react-sortable-hoc/blob/master/LICENSE) | ||
| --------------- | ||
| * **Higher Order Components** – Integrates with your existing components | ||
| * **Drag handle, auto-scrolling, locked axis, events, and more!** | ||
| * **Suuuper smooth animations** – Chasing the 60FPS dream 🌈 | ||
| * **Higher Order Components** – Integrates with your existing components | ||
| * **Drag handle, locked axis, events, and more!** | ||
| * **Works with React Virtualized, React-Infinite, etc.** | ||
@@ -111,2 +113,5 @@ * **Horizontal or vertical lists** ↔ ↕ | ||
| | disabled | Boolean | `false` | | Whether the element should be sortable or not | | ||
| Why shoud I use this? | ||
| -------------------- | ||
| There are already a number of great Drag & Drop libraries out there (for instance, [react-dnd](https://github.com/gaearon/react-dnd/) is fantastic). If those libraries fit your needs, you should definitely give them a try first. However, most of those libraries rely on the HTML5 Drag & Drop API, which has some severe limitations. For instance, things rapidly become tricky if you need to support touch devices, if you need to lock dragging to an axis, or want to animate the nodes as they're being sorted. React Sortable HOC aims to provide a simple set of higher-order components to fill those gaps. If you're looking for a dead-simple, mobile-friendly way to add sortable functionality to your lists, then you're in the right place. | ||
@@ -113,0 +118,0 @@ Dependencies |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.35%
659296
- Lines of code
- increased by0.3%
5986
- Number of lines in readme file
- increased by3.94%
132