Socket
Socket
Sign inDemoInstall

react-sortable-hoc

Package Overview
Dependencies
11
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.7.1 to 1.8.0

19

CHANGELOG.md

@@ -5,5 +5,20 @@ # Change Log

<a name="1.8.0"></a>
# [1.8.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.7.1...v1.8.0) (2019-03-18)
### Bug Fixes
* copy canvas content into cloned node ([43ad122](https://github.com/clauderic/react-sortable-hoc/commit/43ad122))
* added prop-types to peerDependencies ([0e855c5](https://github.com/clauderic/react-sortable-hoc/commit/0e855c5))
* get updated index after updateBeforeSortStart ([4471a0a](https://github.com/clauderic/react-sortable-hoc/commit/4471a0a))
* replace process.env.NODE_ENV in UMD builds ([16135df](https://github.com/clauderic/react-sortable-hoc/commit/16135df))
### Features
* Detect scroll container automatically ([#507](https://github.com/clauderic/react-sortable-hoc/issues/507)) ([6572921](https://github.com/clauderic/react-sortable-hoc/commit/6572921))
<a name="1.7.1"></a>
## [1.7.1](https://github.com/clauderic/react-sortable-hoc/compare/v1.1.0...v1.7.1) (2019-03-06)
## [1.7.1](https://github.com/clauderic/react-sortable-hoc/compare/v1.7.0...v1.7.1) (2019-03-06)

@@ -16,3 +31,3 @@ ### Bug Fixes

# [1.7.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.1.0...v1.7.0) (2019-03-06)
# [1.7.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.6.1...v1.7.0) (2019-03-06)

@@ -19,0 +34,0 @@ ### Bug Fixes

727

dist/react-sortable-hoc.esm.js

@@ -79,2 +79,8 @@ import _extends from '@babel/runtime/helpers/esm/extends';

function arrayMove(array, from, to) {
if (process.env.NODE_ENV !== 'production') {
if (typeof console !== 'undefined') {
console.warn("Deprecation warning: arrayMove will no longer be exported by 'react-sortable-hoc' in the next major release. Please install the `array-move` package locally instead. https://www.npmjs.com/package/array-move");
}
}
array = array.slice();

@@ -98,5 +104,5 @@ array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);

var events = {
start: ['touchstart', 'mousedown'],
end: ['touchend', 'touchcancel', 'mouseup'],
move: ['touchmove', 'mousemove'],
end: ['touchend', 'touchcancel', 'mouseup']
start: ['touchstart', 'mousedown']
};

@@ -119,2 +125,13 @@ var vendorPrefix = function () {

}();
function setInlineStyles(node, styles) {
Object.keys(styles).forEach(function (key) {
node.style[key] = styles[key];
});
}
function setTranslate3d(node, translate) {
node.style["".concat(vendorPrefix, "Transform")] = translate == null ? '' : "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
}
function setTransitionDuration(node, duration) {
node.style["".concat(vendorPrefix, "TransitionDuration")] = duration == null ? '' : "".concat(duration, "ms");
}
function closest(el, fn) {

@@ -146,6 +163,6 @@ while (el) {

return {
top: getPixelValue(style.marginTop),
bottom: getPixelValue(style.marginBottom),
left: getPixelValue(style.marginLeft),
right: getPixelValue(style.marginRight),
bottom: getPixelValue(style.marginBottom),
left: getPixelValue(style.marginLeft)
top: getPixelValue(style.marginTop)
};

@@ -180,4 +197,4 @@ }

var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
top: 0,
left: 0
left: 0,
top: 0
};

@@ -190,4 +207,4 @@

var nodeOffset = {
top: offset.top + node.offsetTop,
left: offset.left + node.offsetLeft
left: offset.left + node.offsetLeft,
top: offset.top + node.offsetTop
};

@@ -201,2 +218,3 @@

}
function getLockPixelOffset(_ref) {

@@ -231,2 +249,244 @@ var lockOffset = _ref.lockOffset,

function getLockPixelOffsets(_ref2) {
var height = _ref2.height,
width = _ref2.width,
lockOffset = _ref2.lockOffset;
var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
invariant(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
var _offsets = _slicedToArray(offsets, 2),
minLockOffset = _offsets[0],
maxLockOffset = _offsets[1];
return [getLockPixelOffset({
height: height,
lockOffset: minLockOffset,
width: width
}), getLockPixelOffset({
height: height,
lockOffset: maxLockOffset,
width: width
})];
}
function isScrollable(el) {
var computedStyle = window.getComputedStyle(el);
var overflowRegex = /(auto|scroll)/;
var properties = ['overflow', 'overflowX', 'overflowY'];
return properties.find(function (property) {
return overflowRegex.test(computedStyle[property]);
});
}
function getScrollingParent(el) {
if (!el) {
return null;
} else if (isScrollable(el)) {
return el;
} else {
return getScrollingParent(el.parentNode);
}
}
var NodeType = {
Anchor: 'A',
Button: 'BUTTON',
Canvas: 'CANVAS',
Input: 'INPUT',
Option: 'OPTION',
Textarea: 'TEXTAREA',
Select: 'SELECT'
};
function sortableHandle(WrappedComponent) {
var _class, _temp;
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
withRef: false
};
return _temp = _class = function (_React$Component) {
_inherits(WithSortableHandle, _React$Component);
function WithSortableHandle() {
_classCallCheck(this, WithSortableHandle);
return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableHandle).apply(this, arguments));
}
_createClass(WithSortableHandle, [{
key: "componentDidMount",
value: function componentDidMount() {
var node = findDOMNode(this);
node.sortableHandle = true;
}
}, {
key: "getWrappedInstance",
value: function getWrappedInstance() {
invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
return this.refs.wrappedInstance;
}
}, {
key: "render",
value: function render() {
var ref = config.withRef ? 'wrappedInstance' : null;
return createElement(WrappedComponent, _extends({
ref: ref
}, this.props));
}
}]);
return WithSortableHandle;
}(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
}
function isSortableHandle(node) {
return node.sortableHandle != null;
}
var AutoScroller = function () {
function AutoScroller(container, onScrollCallback) {
_classCallCheck(this, AutoScroller);
this.container = container;
this.onScrollCallback = onScrollCallback;
}
_createClass(AutoScroller, [{
key: "clear",
value: function clear() {
clearInterval(this.interval);
this.interval = null;
}
}, {
key: "update",
value: function update(_ref) {
var _this = this;
var translate = _ref.translate,
minTranslate = _ref.minTranslate,
maxTranslate = _ref.maxTranslate,
width = _ref.width,
height = _ref.height;
var direction = {
x: 0,
y: 0
};
var speed = {
x: 1,
y: 1
};
var acceleration = {
x: 10,
y: 10
};
var _this$container = this.container,
scrollTop = _this$container.scrollTop,
scrollLeft = _this$container.scrollLeft,
scrollHeight = _this$container.scrollHeight,
scrollWidth = _this$container.scrollWidth,
clientHeight = _this$container.clientHeight,
clientWidth = _this$container.clientWidth;
var isTop = scrollTop === 0;
var isBottom = scrollHeight - scrollTop - clientHeight === 0;
var isLeft = scrollLeft === 0;
var isRight = scrollWidth - scrollLeft - clientWidth === 0;
if (translate.y >= maxTranslate.y - height / 2 && !isBottom) {
direction.y = 1;
speed.y = acceleration.y * Math.abs((maxTranslate.y - height / 2 - translate.y) / height);
} else if (translate.x >= maxTranslate.x - width / 2 && !isRight) {
direction.x = 1;
speed.x = acceleration.x * Math.abs((maxTranslate.x - width / 2 - translate.x) / width);
} else if (translate.y <= minTranslate.y + height / 2 && !isTop) {
direction.y = -1;
speed.y = acceleration.y * Math.abs((translate.y - height / 2 - minTranslate.y) / height);
} else if (translate.x <= minTranslate.x + width / 2 && !isLeft) {
direction.x = -1;
speed.x = acceleration.x * Math.abs((translate.x - width / 2 - minTranslate.x) / width);
}
if (this.interval) {
this.clear();
this.isAutoScrolling = false;
}
if (direction.x !== 0 || direction.y !== 0) {
this.interval = setInterval(function () {
_this.isAutoScrolling = true;
var offset = {
left: speed.x * direction.x,
top: speed.y * direction.y
};
_this.container.scrollTop += offset.top;
_this.container.scrollLeft += offset.left;
_this.onScrollCallback(offset);
}, 5);
}
}
}]);
return AutoScroller;
}();
function defaultGetHelperDimensions(_ref) {
var node = _ref.node;
return {
height: node.offsetHeight,
width: node.offsetWidth
};
}
function defaultShouldCancelStart(event) {
var disabledElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
if (disabledElements.indexOf(event.target.tagName) !== -1) {
return true;
}
return false;
}
var propTypes = {
axis: PropTypes.oneOf(['x', 'y', 'xy']),
contentWindow: PropTypes.any,
disableAutoscroll: PropTypes.bool,
distance: PropTypes.number,
getContainer: PropTypes.func,
getHelperDimensions: PropTypes.func,
helperClass: PropTypes.string,
helperContainer: PropTypes.oneOfType([PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)]),
hideSortableGhost: PropTypes.bool,
lockAxis: PropTypes.string,
lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
lockToContainerEdges: PropTypes.bool,
onSortEnd: PropTypes.func,
onSortMove: PropTypes.func,
onSortOver: PropTypes.func,
onSortStart: PropTypes.func,
pressDelay: PropTypes.number,
pressThreshold: PropTypes.number,
shouldCancelStart: PropTypes.func,
transitionDuration: PropTypes.number,
updateBeforeSortStart: PropTypes.func,
useDragHandle: PropTypes.bool,
useWindowAsScrollContainer: PropTypes.bool
};
var defaultProps = {
axis: 'y',
disableAutoscroll: false,
distance: 0,
getHelperDimensions: defaultGetHelperDimensions,
hideSortableGhost: true,
lockOffset: '50%',
lockToContainerEdges: false,
pressDelay: 0,
pressThreshold: 5,
shouldCancelStart: defaultShouldCancelStart,
transitionDuration: 300,
useWindowAsScrollContainer: false
};
var omittedProps = Object.keys(propTypes);
function validateProps(props) {
invariant(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
}
function _finallyRethrows(body, finalizer) {

@@ -270,4 +530,4 @@ try {

_this._touched = true;
_this._pos = getPosition(event);
_this.touched = true;
_this.position = getPosition(event);
var node = closest(event.target, function (el) {

@@ -288,5 +548,3 @@ return el.sortableInfo != null;

if (useDragHandle && !closest(event.target, function (el) {
return el.sortableHandle != null;
})) {
if (useDragHandle && !closest(event.target, isSortableHandle)) {
return;

@@ -296,7 +554,7 @@ }

_this.manager.active = {
index: index,
collection: collection
collection: collection,
index: index
};
if (!isTouchEvent(event) && event.target.tagName.toLowerCase() === 'a') {
if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) {
event.preventDefault();

@@ -326,7 +584,7 @@ }

if (!_this.state.sorting && _this._touched && !_this._awaitingUpdateBeforeSortStart) {
if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) {
var position = getPosition(event);
var delta = {
x: _this._pos.x - position.x,
y: _this._pos.y - position.y
x: _this.position.x - position.x,
y: _this.position.y - position.y
};

@@ -336,3 +594,3 @@ var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y);

if (!distance && (!pressThreshold || pressThreshold && combinedDelta >= pressThreshold)) {
if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) {
clearTimeout(_this.cancelTimer);

@@ -347,3 +605,3 @@ _this.cancelTimer = setTimeout(_this.cancel, 0);

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleEnd", function () {
_this._touched = false;
_this.touched = false;

@@ -373,10 +631,11 @@ _this.cancel();

var _temp7 = function _temp7() {
var index = _node.sortableInfo.index;
var margin = getElementMargin(_node);
var containerBoundingRect = _this.container.getBoundingClientRect();
var containerBoundingRect = _this.scrollContainer.getBoundingClientRect();
var dimensions = _getHelperDimensions({
index: _index,
node: _node,
collection: _collection
collection: _collection,
index: index,
node: _node
});

@@ -394,4 +653,4 @@

_this.containerBoundingRect = containerBoundingRect;
_this.index = _index;
_this.newIndex = _index;
_this.index = index;
_this.newIndex = index;
_this.axis = {

@@ -404,34 +663,43 @@ x: _axis.indexOf('x') >= 0,

_this.initialScroll = {
top: _this.container.scrollTop,
left: _this.container.scrollLeft
left: _this.scrollContainer.scrollLeft,
top: _this.scrollContainer.scrollTop
};
_this.initialWindowScroll = {
top: window.pageYOffset,
left: window.pageXOffset
left: window.pageXOffset,
top: window.pageYOffset
};
var fields = _node.querySelectorAll('input, textarea, select');
var fields = _node.querySelectorAll('input, textarea, select, canvas');
var clonedNode = _node.cloneNode(true);
var clonedFields = _toConsumableArray(clonedNode.querySelectorAll('input, textarea, select'));
var clonedFields = _toConsumableArray(clonedNode.querySelectorAll('input, textarea, select, canvas'));
clonedFields.forEach(function (field, i) {
if (field.type !== 'file' && fields[_index]) {
if (field.type !== 'file' && fields[index]) {
field.value = fields[i].value;
}
if (field.tagName === NodeType.Canvas) {
var destCtx = field.getContext('2d');
destCtx.drawImage(fields[index], 0, 0);
}
});
_this.helper = _this.helperContainer.appendChild(clonedNode);
_this.helper.style.position = 'fixed';
_this.helper.style.top = "".concat(_this.boundingClientRect.top - margin.top, "px");
_this.helper.style.left = "".concat(_this.boundingClientRect.left - margin.left, "px");
_this.helper.style.width = "".concat(_this.width, "px");
_this.helper.style.height = "".concat(_this.height, "px");
_this.helper.style.boxSizing = 'border-box';
_this.helper.style.pointerEvents = 'none';
setInlineStyles(_this.helper, {
boxSizing: 'border-box',
height: "".concat(_this.height, "px"),
left: "".concat(_this.boundingClientRect.left - margin.left, "px"),
pointerEvents: 'none',
position: 'fixed',
top: "".concat(_this.boundingClientRect.top - margin.top, "px"),
width: "".concat(_this.width, "px")
});
if (_hideSortableGhost) {
_this.sortableGhost = _node;
_node.style.visibility = 'hidden';
_node.style.opacity = 0;
setInlineStyles(_node, {
opacity: 0,
visibility: 'hidden'
});
}

@@ -453,5 +721,5 @@

if (_helperClass) {
var _this$helper$classLis;
(_this$helper$classLis = _this.helper.classList).add.apply(_this$helper$classLis, _toConsumableArray(_helperClass.split(' ')));
_helperClass.split(' ').forEach(function (className) {
return _this.helper.classList.add(className);
});
}

@@ -469,3 +737,3 @@

sorting: true,
sortingIndex: _index
sortingIndex: index
});

@@ -475,5 +743,5 @@

_onSortStart({
node: _node,
index: _index,
collection: _collection
collection: _collection,
index: index,
node: _node
}, event);

@@ -493,3 +761,2 @@ }

_collection = active.collection;
var _index = _node.sortableInfo.index;

@@ -501,6 +768,7 @@ var _temp8 = function () {

var _temp9 = _finallyRethrows(function () {
var index = _node.sortableInfo.index;
return Promise.resolve(updateBeforeSortStart({
node: _node,
index: _index,
collection: _collection
collection: _collection,
index: index,
node: _node
}, event)).then(function () {});

@@ -531,3 +799,3 @@ }, function (_wasThrown, _result) {

_this.updatePosition(event);
_this.updateHelperPosition(event);

@@ -548,2 +816,3 @@ _this.animateNodes();

var collection = _this.manager.active.collection;
var nodes = _this.manager.refs[collection];

@@ -562,8 +831,8 @@ if (_this.listenerNode) {

if (hideSortableGhost && _this.sortableGhost) {
_this.sortableGhost.style.visibility = '';
_this.sortableGhost.style.opacity = '';
setInlineStyles(_this.sortableGhost, {
opacity: '',
visibility: ''
});
}
var nodes = _this.manager.refs[collection];
for (var i = 0, len = nodes.length; i < len; i++) {

@@ -573,8 +842,8 @@ var _node2 = nodes[i];

_node2.edgeOffset = null;
el.style["".concat(vendorPrefix, "Transform")] = '';
el.style["".concat(vendorPrefix, "TransitionDuration")] = '';
setTranslate3d(el, null);
setTransitionDuration(el, null);
}
clearInterval(_this.autoscrollInterval);
_this.autoscrollInterval = null;
_this.autoScroller.clear();
_this.manager.active = null;

@@ -589,9 +858,9 @@

onSortEnd({
oldIndex: _this.index,
collection: collection,
newIndex: _this.newIndex,
collection: collection
oldIndex: _this.index
}, event);
}
_this._touched = false;
_this.touched = false;
});

@@ -606,72 +875,26 @@

var translate = _this.translate;
var direction = {
x: 0,
y: 0
};
var speed = {
x: 1,
y: 1
};
var acceleration = {
x: 10,
y: 10
};
var _this$scrollContainer = _this.scrollContainer,
scrollTop = _this$scrollContainer.scrollTop,
scrollLeft = _this$scrollContainer.scrollLeft,
scrollHeight = _this$scrollContainer.scrollHeight,
scrollWidth = _this$scrollContainer.scrollWidth,
clientHeight = _this$scrollContainer.clientHeight,
clientWidth = _this$scrollContainer.clientWidth;
var isTop = scrollTop === 0;
var isBottom = scrollHeight - scrollTop - clientHeight === 0;
var isLeft = scrollLeft === 0;
var isRight = scrollWidth - scrollLeft - clientWidth === 0;
_this.autoScroller.update({
height: _this.height,
maxTranslate: _this.maxTranslate,
minTranslate: _this.minTranslate,
translate: _this.translate,
width: _this.width
});
});
if (translate.y >= _this.maxTranslate.y - _this.height / 2 && !isBottom) {
direction.y = 1;
speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.height / 2 - translate.y) / _this.height);
} else if (translate.x >= _this.maxTranslate.x - _this.width / 2 && !isRight) {
direction.x = 1;
speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.width / 2 - translate.x) / _this.width);
} else if (translate.y <= _this.minTranslate.y + _this.height / 2 && !isTop) {
direction.y = -1;
speed.y = acceleration.y * Math.abs((translate.y - _this.height / 2 - _this.minTranslate.y) / _this.height);
} else if (translate.x <= _this.minTranslate.x + _this.width / 2 && !isLeft) {
direction.x = -1;
speed.x = acceleration.x * Math.abs((translate.x - _this.width / 2 - _this.minTranslate.x) / _this.width);
}
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onAutoScroll", function (offset) {
_this.translate.x += offset.left;
_this.translate.y += offset.top;
if (_this.autoscrollInterval) {
clearInterval(_this.autoscrollInterval);
_this.autoscrollInterval = null;
_this.isAutoScrolling = false;
}
if (direction.x !== 0 || direction.y !== 0) {
_this.autoscrollInterval = setInterval(function () {
_this.isAutoScrolling = true;
var offset = {
left: speed.x * direction.x,
top: speed.y * direction.y
};
_this.scrollContainer.scrollTop += offset.top;
_this.scrollContainer.scrollLeft += offset.left;
_this.translate.x += offset.left;
_this.translate.y += offset.top;
_this.animateNodes();
}, 5);
}
_this.animateNodes();
});
validateProps(props);
_this.state = {};
_this.manager = new Manager();
_this.events = {
start: _this.handleStart,
end: _this.handleEnd,
move: _this.handleMove,
end: _this.handleEnd
start: _this.handleStart
};
invariant(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
_this.state = {};
return _this;

@@ -699,15 +922,9 @@ }

_this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
_this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : _this2.container;
var _loop = function _loop(key) {
if (_this2.events.hasOwnProperty(key)) {
events[key].forEach(function (eventName) {
return _this2.container.addEventListener(eventName, _this2.events[key], false);
});
}
};
for (var key in _this2.events) {
_loop(key);
}
_this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container) || _this2.container;
_this2.autoScroller = new AutoScroller(_this2.scrollContainer, _this2.onAutoScroll);
Object.keys(_this2.events).forEach(function (key) {
return events[key].forEach(function (eventName) {
return _this2.container.addEventListener(eventName, _this2.events[key], false);
});
});
});

@@ -721,43 +938,15 @@ }

if (this.container) {
var _loop2 = function _loop2(key) {
if (_this3.events.hasOwnProperty(key)) {
events[key].forEach(function (eventName) {
return _this3.container.removeEventListener(eventName, _this3.events[key]);
});
}
};
for (var key in this.events) {
_loop2(key);
}
Object.keys(this.events).forEach(function (key) {
return events[key].forEach(function (eventName) {
return _this3.container.removeEventListener(eventName, _this3.events[key]);
});
});
}
}
}, {
key: "getLockPixelOffsets",
value: function getLockPixelOffsets() {
var width = this.width,
height = this.height;
var lockOffset = this.props.lockOffset;
var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
invariant(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
var _offsets = _slicedToArray(offsets, 2),
minLockOffset = _offsets[0],
maxLockOffset = _offsets[1];
return [getLockPixelOffset({
lockOffset: minLockOffset,
width: width,
height: height
}), getLockPixelOffset({
lockOffset: maxLockOffset,
width: width,
height: height
})];
}
}, {
key: "updatePosition",
value: function updatePosition(event) {
key: "updateHelperPosition",
value: function updateHelperPosition(event) {
var _this$props5 = this.props,
lockAxis = _this$props5.lockAxis,
lockOffset = _this$props5.lockOffset,
lockToContainerEdges = _this$props5.lockToContainerEdges;

@@ -774,6 +963,10 @@ var offset = getPosition(event);

if (lockToContainerEdges) {
var _this$getLockPixelOff = this.getLockPixelOffsets(),
_this$getLockPixelOff2 = _slicedToArray(_this$getLockPixelOff, 2),
minLockOffset = _this$getLockPixelOff2[0],
maxLockOffset = _this$getLockPixelOff2[1];
var _getLockPixelOffsets = getLockPixelOffsets({
height: this.height,
lockOffset: lockOffset,
width: this.width
}),
_getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2),
minLockOffset = _getLockPixelOffsets2[0],
maxLockOffset = _getLockPixelOffsets2[1];

@@ -798,3 +991,3 @@ var minOffset = {

this.helper.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px, 0)");
setTranslate3d(this.helper, translate);
}

@@ -810,4 +1003,4 @@ }, {

var containerScrollDelta = {
left: this.container.scrollLeft - this.initialScroll.left,
top: this.container.scrollTop - this.initialScroll.top
left: this.scrollContainer.scrollLeft - this.initialScroll.left,
top: this.scrollContainer.scrollTop - this.initialScroll.top
};

@@ -819,4 +1012,4 @@ var sortingOffset = {

var windowScrollDelta = {
top: window.pageYOffset - this.initialWindowScroll.top,
left: window.pageXOffset - this.initialWindowScroll.left
left: window.pageXOffset - this.initialWindowScroll.left,
top: window.pageYOffset - this.initialWindowScroll.top
};

@@ -828,8 +1021,8 @@ var prevIndex = this.newIndex;

var _node3 = nodes[i].node;
var _index2 = _node3.sortableInfo.index;
var index = _node3.sortableInfo.index;
var width = _node3.offsetWidth;
var height = _node3.offsetHeight;
var offset = {
width: this.width > width ? width / 2 : this.width / 2,
height: this.height > height ? height / 2 : this.height / 2
height: this.height > height ? height / 2 : this.height / 2,
width: this.width > width ? width / 2 : this.width / 2
};

@@ -854,7 +1047,9 @@ var translate = {

if (_index2 === this.index) {
if (index === this.index) {
if (hideSortableGhost) {
this.sortableGhost = _node3;
_node3.style.visibility = 'hidden';
_node3.style.opacity = 0;
setInlineStyles(_node3, {
opacity: 0,
visibility: 'hidden'
});
}

@@ -866,3 +1061,3 @@

if (transitionDuration) {
_node3.style["".concat(vendorPrefix, "TransitionDuration")] = "".concat(transitionDuration, "ms");
setTransitionDuration(_node3, transitionDuration);
}

@@ -872,3 +1067,3 @@

if (this.axis.y) {
if (_index2 < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
translate.x = this.width + this.marginOffset.x;

@@ -884,5 +1079,5 @@

if (this.newIndex === null) {
this.newIndex = _index2;
this.newIndex = index;
}
} else if (_index2 > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
} else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
translate.x = -(this.width + this.marginOffset.x);

@@ -897,13 +1092,13 @@

this.newIndex = _index2;
this.newIndex = index;
}
} else {
if (_index2 > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
translate.x = -(this.width + this.marginOffset.x);
this.newIndex = _index2;
} else if (_index2 < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
this.newIndex = index;
} else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
translate.x = this.width + this.marginOffset.x;
if (this.newIndex == null) {
this.newIndex = _index2;
this.newIndex = index;
}

@@ -913,10 +1108,10 @@ }

} else if (this.axis.y) {
if (_index2 > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
translate.y = -(this.height + this.marginOffset.y);
this.newIndex = _index2;
} else if (_index2 < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
this.newIndex = index;
} else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
translate.y = this.height + this.marginOffset.y;
if (this.newIndex == null) {
this.newIndex = _index2;
this.newIndex = index;
}

@@ -926,3 +1121,3 @@ }

_node3.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
setTranslate3d(_node3, translate);
}

@@ -936,6 +1131,6 @@

onSortOver({
collection: this.manager.active.collection,
index: this.index,
newIndex: this.newIndex,
oldIndex: prevIndex,
index: this.index,
collection: this.manager.active.collection
oldIndex: prevIndex
});

@@ -967,3 +1162,3 @@ }

ref: ref
}, omit(this.props, 'contentWindow', 'useWindowAsScrollContainer', 'distance', 'helperClass', 'hideSortableGhost', 'transitionDuration', 'useDragHandle', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'updateBeforeSortStart', 'onSortStart', 'onSortMove', 'onSortEnd', 'axis', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'getContainer', 'getHelperDimensions', 'helperContainer', 'disableAutoscroll')));
}, omit(this.props, omittedProps)));
}

@@ -984,54 +1179,3 @@ }, {

return WithSortableContainer;
}(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", {
axis: 'y',
transitionDuration: 300,
pressDelay: 0,
pressThreshold: 5,
distance: 0,
useWindowAsScrollContainer: false,
hideSortableGhost: true,
shouldCancelStart: function shouldCancelStart(event) {
var disabledElements = ['input', 'textarea', 'select', 'option', 'button'];
if (disabledElements.indexOf(event.target.tagName.toLowerCase()) !== -1) {
return true;
}
return false;
},
lockToContainerEdges: false,
lockOffset: '50%',
getHelperDimensions: function getHelperDimensions(_ref) {
var node = _ref.node;
return {
width: node.offsetWidth,
height: node.offsetHeight
};
},
disableAutoscroll: false
}), _defineProperty(_class, "propTypes", {
axis: PropTypes.oneOf(['x', 'y', 'xy']),
distance: PropTypes.number,
lockAxis: PropTypes.string,
helperClass: PropTypes.string,
transitionDuration: PropTypes.number,
contentWindow: PropTypes.any,
updateBeforeSortStart: PropTypes.func,
onSortStart: PropTypes.func,
onSortMove: PropTypes.func,
onSortOver: PropTypes.func,
onSortEnd: PropTypes.func,
shouldCancelStart: PropTypes.func,
pressDelay: PropTypes.number,
pressThreshold: PropTypes.number,
useDragHandle: PropTypes.bool,
useWindowAsScrollContainer: PropTypes.bool,
hideSortableGhost: PropTypes.bool,
lockToContainerEdges: PropTypes.bool,
lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
getContainer: PropTypes.func,
getHelperDimensions: PropTypes.func,
helperContainer: PropTypes.oneOfType([PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)]),
disableAutoscroll: PropTypes.bool
}), _defineProperty(_class, "childContextTypes", {
}(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", {
manager: PropTypes.object.isRequired

@@ -1041,2 +1185,8 @@ }), _temp;

var propTypes$1 = {
index: PropTypes.number.isRequired,
collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
disabled: PropTypes.bool
};
var omittedProps$1 = Object.keys(propTypes$1);
function sortableElement(WrappedComponent) {

@@ -1094,5 +1244,5 @@ var _class, _temp;

node.sortableInfo = {
index: index,
collection: collection,
disabled: disabled,
index: index,
manager: this.context.manager

@@ -1124,3 +1274,3 @@ };

ref: ref
}, omit(this.props, 'collection', 'disabled', 'index')));
}, omit(this.props, omittedProps$1)));
}

@@ -1132,7 +1282,3 @@ }]);

manager: PropTypes.object.isRequired
}), _defineProperty(_class, "propTypes", {
index: PropTypes.number.isRequired,
collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
disabled: PropTypes.bool
}), _defineProperty(_class, "defaultProps", {
}), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", {
collection: 0

@@ -1142,43 +1288,2 @@ }), _temp;

function sortableHandle(WrappedComponent) {
var _class, _temp;
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
withRef: false
};
return _temp = _class = function (_React$Component) {
_inherits(WithSortableHandle, _React$Component);
function WithSortableHandle() {
_classCallCheck(this, WithSortableHandle);
return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableHandle).apply(this, arguments));
}
_createClass(WithSortableHandle, [{
key: "componentDidMount",
value: function componentDidMount() {
var node = findDOMNode(this);
node.sortableHandle = true;
}
}, {
key: "getWrappedInstance",
value: function getWrappedInstance() {
invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
return this.refs.wrappedInstance;
}
}, {
key: "render",
value: function render() {
var ref = config.withRef ? 'wrappedInstance' : null;
return createElement(WrappedComponent, _extends({
ref: ref
}, this.props));
}
}]);
return WithSortableHandle;
}(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
}
export { sortableContainer as SortableContainer, sortableContainer, sortableElement as SortableElement, sortableElement, sortableHandle as SortableHandle, sortableHandle, arrayMove };

727

dist/react-sortable-hoc.js

@@ -85,2 +85,8 @@ 'use strict';

function arrayMove(array, from, to) {
if (process.env.NODE_ENV !== 'production') {
if (typeof console !== 'undefined') {
console.warn("Deprecation warning: arrayMove will no longer be exported by 'react-sortable-hoc' in the next major release. Please install the `array-move` package locally instead. https://www.npmjs.com/package/array-move");
}
}
array = array.slice();

@@ -104,5 +110,5 @@ array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);

var events = {
start: ['touchstart', 'mousedown'],
end: ['touchend', 'touchcancel', 'mouseup'],
move: ['touchmove', 'mousemove'],
end: ['touchend', 'touchcancel', 'mouseup']
start: ['touchstart', 'mousedown']
};

@@ -125,2 +131,13 @@ var vendorPrefix = function () {

}();
function setInlineStyles(node, styles) {
Object.keys(styles).forEach(function (key) {
node.style[key] = styles[key];
});
}
function setTranslate3d(node, translate) {
node.style["".concat(vendorPrefix, "Transform")] = translate == null ? '' : "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
}
function setTransitionDuration(node, duration) {
node.style["".concat(vendorPrefix, "TransitionDuration")] = duration == null ? '' : "".concat(duration, "ms");
}
function closest(el, fn) {

@@ -152,6 +169,6 @@ while (el) {

return {
top: getPixelValue(style.marginTop),
bottom: getPixelValue(style.marginBottom),
left: getPixelValue(style.marginLeft),
right: getPixelValue(style.marginRight),
bottom: getPixelValue(style.marginBottom),
left: getPixelValue(style.marginLeft)
top: getPixelValue(style.marginTop)
};

@@ -186,4 +203,4 @@ }

var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
top: 0,
left: 0
left: 0,
top: 0
};

@@ -196,4 +213,4 @@

var nodeOffset = {
top: offset.top + node.offsetTop,
left: offset.left + node.offsetLeft
left: offset.left + node.offsetLeft,
top: offset.top + node.offsetTop
};

@@ -207,2 +224,3 @@

}
function getLockPixelOffset(_ref) {

@@ -237,2 +255,244 @@ var lockOffset = _ref.lockOffset,

function getLockPixelOffsets(_ref2) {
var height = _ref2.height,
width = _ref2.width,
lockOffset = _ref2.lockOffset;
var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
invariant(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
var _offsets = _slicedToArray(offsets, 2),
minLockOffset = _offsets[0],
maxLockOffset = _offsets[1];
return [getLockPixelOffset({
height: height,
lockOffset: minLockOffset,
width: width
}), getLockPixelOffset({
height: height,
lockOffset: maxLockOffset,
width: width
})];
}
function isScrollable(el) {
var computedStyle = window.getComputedStyle(el);
var overflowRegex = /(auto|scroll)/;
var properties = ['overflow', 'overflowX', 'overflowY'];
return properties.find(function (property) {
return overflowRegex.test(computedStyle[property]);
});
}
function getScrollingParent(el) {
if (!el) {
return null;
} else if (isScrollable(el)) {
return el;
} else {
return getScrollingParent(el.parentNode);
}
}
var NodeType = {
Anchor: 'A',
Button: 'BUTTON',
Canvas: 'CANVAS',
Input: 'INPUT',
Option: 'OPTION',
Textarea: 'TEXTAREA',
Select: 'SELECT'
};
function sortableHandle(WrappedComponent) {
var _class, _temp;
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
withRef: false
};
return _temp = _class = function (_React$Component) {
_inherits(WithSortableHandle, _React$Component);
function WithSortableHandle() {
_classCallCheck(this, WithSortableHandle);
return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableHandle).apply(this, arguments));
}
_createClass(WithSortableHandle, [{
key: "componentDidMount",
value: function componentDidMount() {
var node = reactDom.findDOMNode(this);
node.sortableHandle = true;
}
}, {
key: "getWrappedInstance",
value: function getWrappedInstance() {
invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
return this.refs.wrappedInstance;
}
}, {
key: "render",
value: function render() {
var ref = config.withRef ? 'wrappedInstance' : null;
return React.createElement(WrappedComponent, _extends({
ref: ref
}, this.props));
}
}]);
return WithSortableHandle;
}(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
}
function isSortableHandle(node) {
return node.sortableHandle != null;
}
var AutoScroller = function () {
function AutoScroller(container, onScrollCallback) {
_classCallCheck(this, AutoScroller);
this.container = container;
this.onScrollCallback = onScrollCallback;
}
_createClass(AutoScroller, [{
key: "clear",
value: function clear() {
clearInterval(this.interval);
this.interval = null;
}
}, {
key: "update",
value: function update(_ref) {
var _this = this;
var translate = _ref.translate,
minTranslate = _ref.minTranslate,
maxTranslate = _ref.maxTranslate,
width = _ref.width,
height = _ref.height;
var direction = {
x: 0,
y: 0
};
var speed = {
x: 1,
y: 1
};
var acceleration = {
x: 10,
y: 10
};
var _this$container = this.container,
scrollTop = _this$container.scrollTop,
scrollLeft = _this$container.scrollLeft,
scrollHeight = _this$container.scrollHeight,
scrollWidth = _this$container.scrollWidth,
clientHeight = _this$container.clientHeight,
clientWidth = _this$container.clientWidth;
var isTop = scrollTop === 0;
var isBottom = scrollHeight - scrollTop - clientHeight === 0;
var isLeft = scrollLeft === 0;
var isRight = scrollWidth - scrollLeft - clientWidth === 0;
if (translate.y >= maxTranslate.y - height / 2 && !isBottom) {
direction.y = 1;
speed.y = acceleration.y * Math.abs((maxTranslate.y - height / 2 - translate.y) / height);
} else if (translate.x >= maxTranslate.x - width / 2 && !isRight) {
direction.x = 1;
speed.x = acceleration.x * Math.abs((maxTranslate.x - width / 2 - translate.x) / width);
} else if (translate.y <= minTranslate.y + height / 2 && !isTop) {
direction.y = -1;
speed.y = acceleration.y * Math.abs((translate.y - height / 2 - minTranslate.y) / height);
} else if (translate.x <= minTranslate.x + width / 2 && !isLeft) {
direction.x = -1;
speed.x = acceleration.x * Math.abs((translate.x - width / 2 - minTranslate.x) / width);
}
if (this.interval) {
this.clear();
this.isAutoScrolling = false;
}
if (direction.x !== 0 || direction.y !== 0) {
this.interval = setInterval(function () {
_this.isAutoScrolling = true;
var offset = {
left: speed.x * direction.x,
top: speed.y * direction.y
};
_this.container.scrollTop += offset.top;
_this.container.scrollLeft += offset.left;
_this.onScrollCallback(offset);
}, 5);
}
}
}]);
return AutoScroller;
}();
function defaultGetHelperDimensions(_ref) {
var node = _ref.node;
return {
height: node.offsetHeight,
width: node.offsetWidth
};
}
function defaultShouldCancelStart(event) {
var disabledElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
if (disabledElements.indexOf(event.target.tagName) !== -1) {
return true;
}
return false;
}
var propTypes = {
axis: PropTypes.oneOf(['x', 'y', 'xy']),
contentWindow: PropTypes.any,
disableAutoscroll: PropTypes.bool,
distance: PropTypes.number,
getContainer: PropTypes.func,
getHelperDimensions: PropTypes.func,
helperClass: PropTypes.string,
helperContainer: PropTypes.oneOfType([PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)]),
hideSortableGhost: PropTypes.bool,
lockAxis: PropTypes.string,
lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
lockToContainerEdges: PropTypes.bool,
onSortEnd: PropTypes.func,
onSortMove: PropTypes.func,
onSortOver: PropTypes.func,
onSortStart: PropTypes.func,
pressDelay: PropTypes.number,
pressThreshold: PropTypes.number,
shouldCancelStart: PropTypes.func,
transitionDuration: PropTypes.number,
updateBeforeSortStart: PropTypes.func,
useDragHandle: PropTypes.bool,
useWindowAsScrollContainer: PropTypes.bool
};
var defaultProps = {
axis: 'y',
disableAutoscroll: false,
distance: 0,
getHelperDimensions: defaultGetHelperDimensions,
hideSortableGhost: true,
lockOffset: '50%',
lockToContainerEdges: false,
pressDelay: 0,
pressThreshold: 5,
shouldCancelStart: defaultShouldCancelStart,
transitionDuration: 300,
useWindowAsScrollContainer: false
};
var omittedProps = Object.keys(propTypes);
function validateProps(props) {
invariant(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
}
function _finallyRethrows(body, finalizer) {

@@ -276,4 +536,4 @@ try {

_this._touched = true;
_this._pos = getPosition(event);
_this.touched = true;
_this.position = getPosition(event);
var node = closest(event.target, function (el) {

@@ -294,5 +554,3 @@ return el.sortableInfo != null;

if (useDragHandle && !closest(event.target, function (el) {
return el.sortableHandle != null;
})) {
if (useDragHandle && !closest(event.target, isSortableHandle)) {
return;

@@ -302,7 +560,7 @@ }

_this.manager.active = {
index: index,
collection: collection
collection: collection,
index: index
};
if (!isTouchEvent(event) && event.target.tagName.toLowerCase() === 'a') {
if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) {
event.preventDefault();

@@ -332,7 +590,7 @@ }

if (!_this.state.sorting && _this._touched && !_this._awaitingUpdateBeforeSortStart) {
if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) {
var position = getPosition(event);
var delta = {
x: _this._pos.x - position.x,
y: _this._pos.y - position.y
x: _this.position.x - position.x,
y: _this.position.y - position.y
};

@@ -342,3 +600,3 @@ var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y);

if (!distance && (!pressThreshold || pressThreshold && combinedDelta >= pressThreshold)) {
if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) {
clearTimeout(_this.cancelTimer);

@@ -353,3 +611,3 @@ _this.cancelTimer = setTimeout(_this.cancel, 0);

_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleEnd", function () {
_this._touched = false;
_this.touched = false;

@@ -379,10 +637,11 @@ _this.cancel();

var _temp7 = function _temp7() {
var index = _node.sortableInfo.index;
var margin = getElementMargin(_node);
var containerBoundingRect = _this.container.getBoundingClientRect();
var containerBoundingRect = _this.scrollContainer.getBoundingClientRect();
var dimensions = _getHelperDimensions({
index: _index,
node: _node,
collection: _collection
collection: _collection,
index: index,
node: _node
});

@@ -400,4 +659,4 @@

_this.containerBoundingRect = containerBoundingRect;
_this.index = _index;
_this.newIndex = _index;
_this.index = index;
_this.newIndex = index;
_this.axis = {

@@ -410,34 +669,43 @@ x: _axis.indexOf('x') >= 0,

_this.initialScroll = {
top: _this.container.scrollTop,
left: _this.container.scrollLeft
left: _this.scrollContainer.scrollLeft,
top: _this.scrollContainer.scrollTop
};
_this.initialWindowScroll = {
top: window.pageYOffset,
left: window.pageXOffset
left: window.pageXOffset,
top: window.pageYOffset
};
var fields = _node.querySelectorAll('input, textarea, select');
var fields = _node.querySelectorAll('input, textarea, select, canvas');
var clonedNode = _node.cloneNode(true);
var clonedFields = _toConsumableArray(clonedNode.querySelectorAll('input, textarea, select'));
var clonedFields = _toConsumableArray(clonedNode.querySelectorAll('input, textarea, select, canvas'));
clonedFields.forEach(function (field, i) {
if (field.type !== 'file' && fields[_index]) {
if (field.type !== 'file' && fields[index]) {
field.value = fields[i].value;
}
if (field.tagName === NodeType.Canvas) {
var destCtx = field.getContext('2d');
destCtx.drawImage(fields[index], 0, 0);
}
});
_this.helper = _this.helperContainer.appendChild(clonedNode);
_this.helper.style.position = 'fixed';
_this.helper.style.top = "".concat(_this.boundingClientRect.top - margin.top, "px");
_this.helper.style.left = "".concat(_this.boundingClientRect.left - margin.left, "px");
_this.helper.style.width = "".concat(_this.width, "px");
_this.helper.style.height = "".concat(_this.height, "px");
_this.helper.style.boxSizing = 'border-box';
_this.helper.style.pointerEvents = 'none';
setInlineStyles(_this.helper, {
boxSizing: 'border-box',
height: "".concat(_this.height, "px"),
left: "".concat(_this.boundingClientRect.left - margin.left, "px"),
pointerEvents: 'none',
position: 'fixed',
top: "".concat(_this.boundingClientRect.top - margin.top, "px"),
width: "".concat(_this.width, "px")
});
if (_hideSortableGhost) {
_this.sortableGhost = _node;
_node.style.visibility = 'hidden';
_node.style.opacity = 0;
setInlineStyles(_node, {
opacity: 0,
visibility: 'hidden'
});
}

@@ -459,5 +727,5 @@

if (_helperClass) {
var _this$helper$classLis;
(_this$helper$classLis = _this.helper.classList).add.apply(_this$helper$classLis, _toConsumableArray(_helperClass.split(' ')));
_helperClass.split(' ').forEach(function (className) {
return _this.helper.classList.add(className);
});
}

@@ -475,3 +743,3 @@

sorting: true,
sortingIndex: _index
sortingIndex: index
});

@@ -481,5 +749,5 @@

_onSortStart({
node: _node,
index: _index,
collection: _collection
collection: _collection,
index: index,
node: _node
}, event);

@@ -499,3 +767,2 @@ }

_collection = active.collection;
var _index = _node.sortableInfo.index;

@@ -507,6 +774,7 @@ var _temp8 = function () {

var _temp9 = _finallyRethrows(function () {
var index = _node.sortableInfo.index;
return Promise.resolve(updateBeforeSortStart({
node: _node,
index: _index,
collection: _collection
collection: _collection,
index: index,
node: _node
}, event)).then(function () {});

@@ -537,3 +805,3 @@ }, function (_wasThrown, _result) {

_this.updatePosition(event);
_this.updateHelperPosition(event);

@@ -554,2 +822,3 @@ _this.animateNodes();

var collection = _this.manager.active.collection;
var nodes = _this.manager.refs[collection];

@@ -568,8 +837,8 @@ if (_this.listenerNode) {

if (hideSortableGhost && _this.sortableGhost) {
_this.sortableGhost.style.visibility = '';
_this.sortableGhost.style.opacity = '';
setInlineStyles(_this.sortableGhost, {
opacity: '',
visibility: ''
});
}
var nodes = _this.manager.refs[collection];
for (var i = 0, len = nodes.length; i < len; i++) {

@@ -579,8 +848,8 @@ var _node2 = nodes[i];

_node2.edgeOffset = null;
el.style["".concat(vendorPrefix, "Transform")] = '';
el.style["".concat(vendorPrefix, "TransitionDuration")] = '';
setTranslate3d(el, null);
setTransitionDuration(el, null);
}
clearInterval(_this.autoscrollInterval);
_this.autoscrollInterval = null;
_this.autoScroller.clear();
_this.manager.active = null;

@@ -595,9 +864,9 @@

onSortEnd({
oldIndex: _this.index,
collection: collection,
newIndex: _this.newIndex,
collection: collection
oldIndex: _this.index
}, event);
}
_this._touched = false;
_this.touched = false;
});

@@ -612,72 +881,26 @@

var translate = _this.translate;
var direction = {
x: 0,
y: 0
};
var speed = {
x: 1,
y: 1
};
var acceleration = {
x: 10,
y: 10
};
var _this$scrollContainer = _this.scrollContainer,
scrollTop = _this$scrollContainer.scrollTop,
scrollLeft = _this$scrollContainer.scrollLeft,
scrollHeight = _this$scrollContainer.scrollHeight,
scrollWidth = _this$scrollContainer.scrollWidth,
clientHeight = _this$scrollContainer.clientHeight,
clientWidth = _this$scrollContainer.clientWidth;
var isTop = scrollTop === 0;
var isBottom = scrollHeight - scrollTop - clientHeight === 0;
var isLeft = scrollLeft === 0;
var isRight = scrollWidth - scrollLeft - clientWidth === 0;
_this.autoScroller.update({
height: _this.height,
maxTranslate: _this.maxTranslate,
minTranslate: _this.minTranslate,
translate: _this.translate,
width: _this.width
});
});
if (translate.y >= _this.maxTranslate.y - _this.height / 2 && !isBottom) {
direction.y = 1;
speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.height / 2 - translate.y) / _this.height);
} else if (translate.x >= _this.maxTranslate.x - _this.width / 2 && !isRight) {
direction.x = 1;
speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.width / 2 - translate.x) / _this.width);
} else if (translate.y <= _this.minTranslate.y + _this.height / 2 && !isTop) {
direction.y = -1;
speed.y = acceleration.y * Math.abs((translate.y - _this.height / 2 - _this.minTranslate.y) / _this.height);
} else if (translate.x <= _this.minTranslate.x + _this.width / 2 && !isLeft) {
direction.x = -1;
speed.x = acceleration.x * Math.abs((translate.x - _this.width / 2 - _this.minTranslate.x) / _this.width);
}
_defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "onAutoScroll", function (offset) {
_this.translate.x += offset.left;
_this.translate.y += offset.top;
if (_this.autoscrollInterval) {
clearInterval(_this.autoscrollInterval);
_this.autoscrollInterval = null;
_this.isAutoScrolling = false;
}
if (direction.x !== 0 || direction.y !== 0) {
_this.autoscrollInterval = setInterval(function () {
_this.isAutoScrolling = true;
var offset = {
left: speed.x * direction.x,
top: speed.y * direction.y
};
_this.scrollContainer.scrollTop += offset.top;
_this.scrollContainer.scrollLeft += offset.left;
_this.translate.x += offset.left;
_this.translate.y += offset.top;
_this.animateNodes();
}, 5);
}
_this.animateNodes();
});
validateProps(props);
_this.state = {};
_this.manager = new Manager();
_this.events = {
start: _this.handleStart,
end: _this.handleEnd,
move: _this.handleMove,
end: _this.handleEnd
start: _this.handleStart
};
invariant(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
_this.state = {};
return _this;

@@ -705,15 +928,9 @@ }

_this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
_this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : _this2.container;
var _loop = function _loop(key) {
if (_this2.events.hasOwnProperty(key)) {
events[key].forEach(function (eventName) {
return _this2.container.addEventListener(eventName, _this2.events[key], false);
});
}
};
for (var key in _this2.events) {
_loop(key);
}
_this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container) || _this2.container;
_this2.autoScroller = new AutoScroller(_this2.scrollContainer, _this2.onAutoScroll);
Object.keys(_this2.events).forEach(function (key) {
return events[key].forEach(function (eventName) {
return _this2.container.addEventListener(eventName, _this2.events[key], false);
});
});
});

@@ -727,43 +944,15 @@ }

if (this.container) {
var _loop2 = function _loop2(key) {
if (_this3.events.hasOwnProperty(key)) {
events[key].forEach(function (eventName) {
return _this3.container.removeEventListener(eventName, _this3.events[key]);
});
}
};
for (var key in this.events) {
_loop2(key);
}
Object.keys(this.events).forEach(function (key) {
return events[key].forEach(function (eventName) {
return _this3.container.removeEventListener(eventName, _this3.events[key]);
});
});
}
}
}, {
key: "getLockPixelOffsets",
value: function getLockPixelOffsets() {
var width = this.width,
height = this.height;
var lockOffset = this.props.lockOffset;
var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
invariant(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
var _offsets = _slicedToArray(offsets, 2),
minLockOffset = _offsets[0],
maxLockOffset = _offsets[1];
return [getLockPixelOffset({
lockOffset: minLockOffset,
width: width,
height: height
}), getLockPixelOffset({
lockOffset: maxLockOffset,
width: width,
height: height
})];
}
}, {
key: "updatePosition",
value: function updatePosition(event) {
key: "updateHelperPosition",
value: function updateHelperPosition(event) {
var _this$props5 = this.props,
lockAxis = _this$props5.lockAxis,
lockOffset = _this$props5.lockOffset,
lockToContainerEdges = _this$props5.lockToContainerEdges;

@@ -780,6 +969,10 @@ var offset = getPosition(event);

if (lockToContainerEdges) {
var _this$getLockPixelOff = this.getLockPixelOffsets(),
_this$getLockPixelOff2 = _slicedToArray(_this$getLockPixelOff, 2),
minLockOffset = _this$getLockPixelOff2[0],
maxLockOffset = _this$getLockPixelOff2[1];
var _getLockPixelOffsets = getLockPixelOffsets({
height: this.height,
lockOffset: lockOffset,
width: this.width
}),
_getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2),
minLockOffset = _getLockPixelOffsets2[0],
maxLockOffset = _getLockPixelOffsets2[1];

@@ -804,3 +997,3 @@ var minOffset = {

this.helper.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px, 0)");
setTranslate3d(this.helper, translate);
}

@@ -816,4 +1009,4 @@ }, {

var containerScrollDelta = {
left: this.container.scrollLeft - this.initialScroll.left,
top: this.container.scrollTop - this.initialScroll.top
left: this.scrollContainer.scrollLeft - this.initialScroll.left,
top: this.scrollContainer.scrollTop - this.initialScroll.top
};

@@ -825,4 +1018,4 @@ var sortingOffset = {

var windowScrollDelta = {
top: window.pageYOffset - this.initialWindowScroll.top,
left: window.pageXOffset - this.initialWindowScroll.left
left: window.pageXOffset - this.initialWindowScroll.left,
top: window.pageYOffset - this.initialWindowScroll.top
};

@@ -834,8 +1027,8 @@ var prevIndex = this.newIndex;

var _node3 = nodes[i].node;
var _index2 = _node3.sortableInfo.index;
var index = _node3.sortableInfo.index;
var width = _node3.offsetWidth;
var height = _node3.offsetHeight;
var offset = {
width: this.width > width ? width / 2 : this.width / 2,
height: this.height > height ? height / 2 : this.height / 2
height: this.height > height ? height / 2 : this.height / 2,
width: this.width > width ? width / 2 : this.width / 2
};

@@ -860,7 +1053,9 @@ var translate = {

if (_index2 === this.index) {
if (index === this.index) {
if (hideSortableGhost) {
this.sortableGhost = _node3;
_node3.style.visibility = 'hidden';
_node3.style.opacity = 0;
setInlineStyles(_node3, {
opacity: 0,
visibility: 'hidden'
});
}

@@ -872,3 +1067,3 @@

if (transitionDuration) {
_node3.style["".concat(vendorPrefix, "TransitionDuration")] = "".concat(transitionDuration, "ms");
setTransitionDuration(_node3, transitionDuration);
}

@@ -878,3 +1073,3 @@

if (this.axis.y) {
if (_index2 < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
translate.x = this.width + this.marginOffset.x;

@@ -890,5 +1085,5 @@

if (this.newIndex === null) {
this.newIndex = _index2;
this.newIndex = index;
}
} else if (_index2 > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
} else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
translate.x = -(this.width + this.marginOffset.x);

@@ -903,13 +1098,13 @@

this.newIndex = _index2;
this.newIndex = index;
}
} else {
if (_index2 > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
translate.x = -(this.width + this.marginOffset.x);
this.newIndex = _index2;
} else if (_index2 < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
this.newIndex = index;
} else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
translate.x = this.width + this.marginOffset.x;
if (this.newIndex == null) {
this.newIndex = _index2;
this.newIndex = index;
}

@@ -919,10 +1114,10 @@ }

} else if (this.axis.y) {
if (_index2 > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
translate.y = -(this.height + this.marginOffset.y);
this.newIndex = _index2;
} else if (_index2 < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
this.newIndex = index;
} else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
translate.y = this.height + this.marginOffset.y;
if (this.newIndex == null) {
this.newIndex = _index2;
this.newIndex = index;
}

@@ -932,3 +1127,3 @@ }

_node3.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
setTranslate3d(_node3, translate);
}

@@ -942,6 +1137,6 @@

onSortOver({
collection: this.manager.active.collection,
index: this.index,
newIndex: this.newIndex,
oldIndex: prevIndex,
index: this.index,
collection: this.manager.active.collection
oldIndex: prevIndex
});

@@ -973,3 +1168,3 @@ }

ref: ref
}, omit(this.props, 'contentWindow', 'useWindowAsScrollContainer', 'distance', 'helperClass', 'hideSortableGhost', 'transitionDuration', 'useDragHandle', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'updateBeforeSortStart', 'onSortStart', 'onSortMove', 'onSortEnd', 'axis', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'getContainer', 'getHelperDimensions', 'helperContainer', 'disableAutoscroll')));
}, omit(this.props, omittedProps)));
}

@@ -990,54 +1185,3 @@ }, {

return WithSortableContainer;
}(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", {
axis: 'y',
transitionDuration: 300,
pressDelay: 0,
pressThreshold: 5,
distance: 0,
useWindowAsScrollContainer: false,
hideSortableGhost: true,
shouldCancelStart: function shouldCancelStart(event) {
var disabledElements = ['input', 'textarea', 'select', 'option', 'button'];
if (disabledElements.indexOf(event.target.tagName.toLowerCase()) !== -1) {
return true;
}
return false;
},
lockToContainerEdges: false,
lockOffset: '50%',
getHelperDimensions: function getHelperDimensions(_ref) {
var node = _ref.node;
return {
width: node.offsetWidth,
height: node.offsetHeight
};
},
disableAutoscroll: false
}), _defineProperty(_class, "propTypes", {
axis: PropTypes.oneOf(['x', 'y', 'xy']),
distance: PropTypes.number,
lockAxis: PropTypes.string,
helperClass: PropTypes.string,
transitionDuration: PropTypes.number,
contentWindow: PropTypes.any,
updateBeforeSortStart: PropTypes.func,
onSortStart: PropTypes.func,
onSortMove: PropTypes.func,
onSortOver: PropTypes.func,
onSortEnd: PropTypes.func,
shouldCancelStart: PropTypes.func,
pressDelay: PropTypes.number,
pressThreshold: PropTypes.number,
useDragHandle: PropTypes.bool,
useWindowAsScrollContainer: PropTypes.bool,
hideSortableGhost: PropTypes.bool,
lockToContainerEdges: PropTypes.bool,
lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
getContainer: PropTypes.func,
getHelperDimensions: PropTypes.func,
helperContainer: PropTypes.oneOfType([PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)]),
disableAutoscroll: PropTypes.bool
}), _defineProperty(_class, "childContextTypes", {
}(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", {
manager: PropTypes.object.isRequired

@@ -1047,2 +1191,8 @@ }), _temp;

var propTypes$1 = {
index: PropTypes.number.isRequired,
collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
disabled: PropTypes.bool
};
var omittedProps$1 = Object.keys(propTypes$1);
function sortableElement(WrappedComponent) {

@@ -1100,5 +1250,5 @@ var _class, _temp;

node.sortableInfo = {
index: index,
collection: collection,
disabled: disabled,
index: index,
manager: this.context.manager

@@ -1130,3 +1280,3 @@ };

ref: ref
}, omit(this.props, 'collection', 'disabled', 'index')));
}, omit(this.props, omittedProps$1)));
}

@@ -1138,7 +1288,3 @@ }]);

manager: PropTypes.object.isRequired
}), _defineProperty(_class, "propTypes", {
index: PropTypes.number.isRequired,
collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
disabled: PropTypes.bool
}), _defineProperty(_class, "defaultProps", {
}), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", {
collection: 0

@@ -1148,43 +1294,2 @@ }), _temp;

function sortableHandle(WrappedComponent) {
var _class, _temp;
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
withRef: false
};
return _temp = _class = function (_React$Component) {
_inherits(WithSortableHandle, _React$Component);
function WithSortableHandle() {
_classCallCheck(this, WithSortableHandle);
return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableHandle).apply(this, arguments));
}
_createClass(WithSortableHandle, [{
key: "componentDidMount",
value: function componentDidMount() {
var node = reactDom.findDOMNode(this);
node.sortableHandle = true;
}
}, {
key: "getWrappedInstance",
value: function getWrappedInstance() {
invariant(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
return this.refs.wrappedInstance;
}
}, {
key: "render",
value: function render() {
var ref = config.withRef ? 'wrappedInstance' : null;
return React.createElement(WrappedComponent, _extends({
ref: ref
}, this.props));
}
}]);
return WithSortableHandle;
}(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
}
exports.SortableContainer = sortableContainer;

@@ -1191,0 +1296,0 @@ exports.sortableContainer = sortableContainer;

742

dist/react-sortable-hoc.umd.js

@@ -242,17 +242,4 @@ (function (global, factory) {

/**
* Use invariant() to assert state which your program assumes to be true.
*
* Provide sprintf-style format (only %s is supported) and arguments
* to provide information about what broke and what you were
* expecting.
*
* The invariant message will be stripped in production, but the invariant
* will remain to ensure logic does not differ in production.
*/
var NODE_ENV = process.env.NODE_ENV;
var invariant = function(condition, format, a, b, c, d, e, f) {
if (NODE_ENV !== 'production') {
{
if (format === undefined) {

@@ -349,2 +336,8 @@ throw new Error('invariant requires an error message argument');

function arrayMove(array, from, to) {
{
if (typeof console !== 'undefined') {
console.warn("Deprecation warning: arrayMove will no longer be exported by 'react-sortable-hoc' in the next major release. Please install the `array-move` package locally instead. https://www.npmjs.com/package/array-move");
}
}
array = array.slice();

@@ -368,5 +361,5 @@ array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);

var events = {
start: ['touchstart', 'mousedown'],
end: ['touchend', 'touchcancel', 'mouseup'],
move: ['touchmove', 'mousemove'],
end: ['touchend', 'touchcancel', 'mouseup']
start: ['touchstart', 'mousedown']
};

@@ -389,2 +382,13 @@ var vendorPrefix = function () {

}();
function setInlineStyles(node, styles) {
Object.keys(styles).forEach(function (key) {
node.style[key] = styles[key];
});
}
function setTranslate3d(node, translate) {
node.style["".concat(vendorPrefix, "Transform")] = translate == null ? '' : "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
}
function setTransitionDuration(node, duration) {
node.style["".concat(vendorPrefix, "TransitionDuration")] = duration == null ? '' : "".concat(duration, "ms");
}
function closest(el, fn) {

@@ -416,6 +420,6 @@ while (el) {

return {
top: getPixelValue(style.marginTop),
bottom: getPixelValue(style.marginBottom),
left: getPixelValue(style.marginLeft),
right: getPixelValue(style.marginRight),
bottom: getPixelValue(style.marginBottom),
left: getPixelValue(style.marginLeft)
top: getPixelValue(style.marginTop)
};

@@ -450,4 +454,4 @@ }

var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
top: 0,
left: 0
left: 0,
top: 0
};

@@ -460,4 +464,4 @@

var nodeOffset = {
top: offset.top + node.offsetTop,
left: offset.left + node.offsetLeft
left: offset.left + node.offsetLeft,
top: offset.top + node.offsetTop
};

@@ -471,2 +475,3 @@

}
function getLockPixelOffset(_ref) {

@@ -501,2 +506,244 @@ var lockOffset = _ref.lockOffset,

function getLockPixelOffsets(_ref2) {
var height = _ref2.height,
width = _ref2.width,
lockOffset = _ref2.lockOffset;
var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
invariant_1(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
var _offsets = slicedToArray(offsets, 2),
minLockOffset = _offsets[0],
maxLockOffset = _offsets[1];
return [getLockPixelOffset({
height: height,
lockOffset: minLockOffset,
width: width
}), getLockPixelOffset({
height: height,
lockOffset: maxLockOffset,
width: width
})];
}
function isScrollable(el) {
var computedStyle = window.getComputedStyle(el);
var overflowRegex = /(auto|scroll)/;
var properties = ['overflow', 'overflowX', 'overflowY'];
return properties.find(function (property) {
return overflowRegex.test(computedStyle[property]);
});
}
function getScrollingParent(el) {
if (!el) {
return null;
} else if (isScrollable(el)) {
return el;
} else {
return getScrollingParent(el.parentNode);
}
}
var NodeType = {
Anchor: 'A',
Button: 'BUTTON',
Canvas: 'CANVAS',
Input: 'INPUT',
Option: 'OPTION',
Textarea: 'TEXTAREA',
Select: 'SELECT'
};
function sortableHandle(WrappedComponent) {
var _class, _temp;
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
withRef: false
};
return _temp = _class = function (_React$Component) {
inherits(WithSortableHandle, _React$Component);
function WithSortableHandle() {
classCallCheck(this, WithSortableHandle);
return possibleConstructorReturn(this, getPrototypeOf(WithSortableHandle).apply(this, arguments));
}
createClass(WithSortableHandle, [{
key: "componentDidMount",
value: function componentDidMount() {
var node = reactDom.findDOMNode(this);
node.sortableHandle = true;
}
}, {
key: "getWrappedInstance",
value: function getWrappedInstance() {
invariant_1(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
return this.refs.wrappedInstance;
}
}, {
key: "render",
value: function render() {
var ref = config.withRef ? 'wrappedInstance' : null;
return React.createElement(WrappedComponent, _extends_1({
ref: ref
}, this.props));
}
}]);
return WithSortableHandle;
}(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
}
function isSortableHandle(node) {
return node.sortableHandle != null;
}
var AutoScroller = function () {
function AutoScroller(container, onScrollCallback) {
classCallCheck(this, AutoScroller);
this.container = container;
this.onScrollCallback = onScrollCallback;
}
createClass(AutoScroller, [{
key: "clear",
value: function clear() {
clearInterval(this.interval);
this.interval = null;
}
}, {
key: "update",
value: function update(_ref) {
var _this = this;
var translate = _ref.translate,
minTranslate = _ref.minTranslate,
maxTranslate = _ref.maxTranslate,
width = _ref.width,
height = _ref.height;
var direction = {
x: 0,
y: 0
};
var speed = {
x: 1,
y: 1
};
var acceleration = {
x: 10,
y: 10
};
var _this$container = this.container,
scrollTop = _this$container.scrollTop,
scrollLeft = _this$container.scrollLeft,
scrollHeight = _this$container.scrollHeight,
scrollWidth = _this$container.scrollWidth,
clientHeight = _this$container.clientHeight,
clientWidth = _this$container.clientWidth;
var isTop = scrollTop === 0;
var isBottom = scrollHeight - scrollTop - clientHeight === 0;
var isLeft = scrollLeft === 0;
var isRight = scrollWidth - scrollLeft - clientWidth === 0;
if (translate.y >= maxTranslate.y - height / 2 && !isBottom) {
direction.y = 1;
speed.y = acceleration.y * Math.abs((maxTranslate.y - height / 2 - translate.y) / height);
} else if (translate.x >= maxTranslate.x - width / 2 && !isRight) {
direction.x = 1;
speed.x = acceleration.x * Math.abs((maxTranslate.x - width / 2 - translate.x) / width);
} else if (translate.y <= minTranslate.y + height / 2 && !isTop) {
direction.y = -1;
speed.y = acceleration.y * Math.abs((translate.y - height / 2 - minTranslate.y) / height);
} else if (translate.x <= minTranslate.x + width / 2 && !isLeft) {
direction.x = -1;
speed.x = acceleration.x * Math.abs((translate.x - width / 2 - minTranslate.x) / width);
}
if (this.interval) {
this.clear();
this.isAutoScrolling = false;
}
if (direction.x !== 0 || direction.y !== 0) {
this.interval = setInterval(function () {
_this.isAutoScrolling = true;
var offset = {
left: speed.x * direction.x,
top: speed.y * direction.y
};
_this.container.scrollTop += offset.top;
_this.container.scrollLeft += offset.left;
_this.onScrollCallback(offset);
}, 5);
}
}
}]);
return AutoScroller;
}();
function defaultGetHelperDimensions(_ref) {
var node = _ref.node;
return {
height: node.offsetHeight,
width: node.offsetWidth
};
}
function defaultShouldCancelStart(event) {
var disabledElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button];
if (disabledElements.indexOf(event.target.tagName) !== -1) {
return true;
}
return false;
}
var propTypes = {
axis: PropTypes.oneOf(['x', 'y', 'xy']),
contentWindow: PropTypes.any,
disableAutoscroll: PropTypes.bool,
distance: PropTypes.number,
getContainer: PropTypes.func,
getHelperDimensions: PropTypes.func,
helperClass: PropTypes.string,
helperContainer: PropTypes.oneOfType([PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)]),
hideSortableGhost: PropTypes.bool,
lockAxis: PropTypes.string,
lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
lockToContainerEdges: PropTypes.bool,
onSortEnd: PropTypes.func,
onSortMove: PropTypes.func,
onSortOver: PropTypes.func,
onSortStart: PropTypes.func,
pressDelay: PropTypes.number,
pressThreshold: PropTypes.number,
shouldCancelStart: PropTypes.func,
transitionDuration: PropTypes.number,
updateBeforeSortStart: PropTypes.func,
useDragHandle: PropTypes.bool,
useWindowAsScrollContainer: PropTypes.bool
};
var defaultProps = {
axis: 'y',
disableAutoscroll: false,
distance: 0,
getHelperDimensions: defaultGetHelperDimensions,
hideSortableGhost: true,
lockOffset: '50%',
lockToContainerEdges: false,
pressDelay: 0,
pressThreshold: 5,
shouldCancelStart: defaultShouldCancelStart,
transitionDuration: 300,
useWindowAsScrollContainer: false
};
var omittedProps = Object.keys(propTypes);
function validateProps(props) {
invariant_1(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
}
function _finallyRethrows(body, finalizer) {

@@ -540,4 +787,4 @@ try {

_this._touched = true;
_this._pos = getPosition(event);
_this.touched = true;
_this.position = getPosition(event);
var node = closest(event.target, function (el) {

@@ -558,5 +805,3 @@ return el.sortableInfo != null;

if (useDragHandle && !closest(event.target, function (el) {
return el.sortableHandle != null;
})) {
if (useDragHandle && !closest(event.target, isSortableHandle)) {
return;

@@ -566,7 +811,7 @@ }

_this.manager.active = {
index: index,
collection: collection
collection: collection,
index: index
};
if (!isTouchEvent(event) && event.target.tagName.toLowerCase() === 'a') {
if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) {
event.preventDefault();

@@ -596,7 +841,7 @@ }

if (!_this.state.sorting && _this._touched && !_this._awaitingUpdateBeforeSortStart) {
if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) {
var position = getPosition(event);
var delta = {
x: _this._pos.x - position.x,
y: _this._pos.y - position.y
x: _this.position.x - position.x,
y: _this.position.y - position.y
};

@@ -606,3 +851,3 @@ var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y);

if (!distance && (!pressThreshold || pressThreshold && combinedDelta >= pressThreshold)) {
if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) {
clearTimeout(_this.cancelTimer);

@@ -617,3 +862,3 @@ _this.cancelTimer = setTimeout(_this.cancel, 0);

defineProperty(assertThisInitialized(assertThisInitialized(_this)), "handleEnd", function () {
_this._touched = false;
_this.touched = false;

@@ -643,10 +888,11 @@ _this.cancel();

var _temp7 = function _temp7() {
var index = _node.sortableInfo.index;
var margin = getElementMargin(_node);
var containerBoundingRect = _this.container.getBoundingClientRect();
var containerBoundingRect = _this.scrollContainer.getBoundingClientRect();
var dimensions = _getHelperDimensions({
index: _index,
node: _node,
collection: _collection
collection: _collection,
index: index,
node: _node
});

@@ -664,4 +910,4 @@

_this.containerBoundingRect = containerBoundingRect;
_this.index = _index;
_this.newIndex = _index;
_this.index = index;
_this.newIndex = index;
_this.axis = {

@@ -674,34 +920,43 @@ x: _axis.indexOf('x') >= 0,

_this.initialScroll = {
top: _this.container.scrollTop,
left: _this.container.scrollLeft
left: _this.scrollContainer.scrollLeft,
top: _this.scrollContainer.scrollTop
};
_this.initialWindowScroll = {
top: window.pageYOffset,
left: window.pageXOffset
left: window.pageXOffset,
top: window.pageYOffset
};
var fields = _node.querySelectorAll('input, textarea, select');
var fields = _node.querySelectorAll('input, textarea, select, canvas');
var clonedNode = _node.cloneNode(true);
var clonedFields = toConsumableArray(clonedNode.querySelectorAll('input, textarea, select'));
var clonedFields = toConsumableArray(clonedNode.querySelectorAll('input, textarea, select, canvas'));
clonedFields.forEach(function (field, i) {
if (field.type !== 'file' && fields[_index]) {
if (field.type !== 'file' && fields[index]) {
field.value = fields[i].value;
}
if (field.tagName === NodeType.Canvas) {
var destCtx = field.getContext('2d');
destCtx.drawImage(fields[index], 0, 0);
}
});
_this.helper = _this.helperContainer.appendChild(clonedNode);
_this.helper.style.position = 'fixed';
_this.helper.style.top = "".concat(_this.boundingClientRect.top - margin.top, "px");
_this.helper.style.left = "".concat(_this.boundingClientRect.left - margin.left, "px");
_this.helper.style.width = "".concat(_this.width, "px");
_this.helper.style.height = "".concat(_this.height, "px");
_this.helper.style.boxSizing = 'border-box';
_this.helper.style.pointerEvents = 'none';
setInlineStyles(_this.helper, {
boxSizing: 'border-box',
height: "".concat(_this.height, "px"),
left: "".concat(_this.boundingClientRect.left - margin.left, "px"),
pointerEvents: 'none',
position: 'fixed',
top: "".concat(_this.boundingClientRect.top - margin.top, "px"),
width: "".concat(_this.width, "px")
});
if (_hideSortableGhost) {
_this.sortableGhost = _node;
_node.style.visibility = 'hidden';
_node.style.opacity = 0;
setInlineStyles(_node, {
opacity: 0,
visibility: 'hidden'
});
}

@@ -723,5 +978,5 @@

if (_helperClass) {
var _this$helper$classLis;
(_this$helper$classLis = _this.helper.classList).add.apply(_this$helper$classLis, toConsumableArray(_helperClass.split(' ')));
_helperClass.split(' ').forEach(function (className) {
return _this.helper.classList.add(className);
});
}

@@ -739,3 +994,3 @@

sorting: true,
sortingIndex: _index
sortingIndex: index
});

@@ -745,5 +1000,5 @@

_onSortStart({
node: _node,
index: _index,
collection: _collection
collection: _collection,
index: index,
node: _node
}, event);

@@ -763,3 +1018,2 @@ }

_collection = active.collection;
var _index = _node.sortableInfo.index;

@@ -771,6 +1025,7 @@ var _temp8 = function () {

var _temp9 = _finallyRethrows(function () {
var index = _node.sortableInfo.index;
return Promise.resolve(updateBeforeSortStart({
node: _node,
index: _index,
collection: _collection
collection: _collection,
index: index,
node: _node
}, event)).then(function () {});

@@ -801,3 +1056,3 @@ }, function (_wasThrown, _result) {

_this.updatePosition(event);
_this.updateHelperPosition(event);

@@ -818,2 +1073,3 @@ _this.animateNodes();

var collection = _this.manager.active.collection;
var nodes = _this.manager.refs[collection];

@@ -832,8 +1088,8 @@ if (_this.listenerNode) {

if (hideSortableGhost && _this.sortableGhost) {
_this.sortableGhost.style.visibility = '';
_this.sortableGhost.style.opacity = '';
setInlineStyles(_this.sortableGhost, {
opacity: '',
visibility: ''
});
}
var nodes = _this.manager.refs[collection];
for (var i = 0, len = nodes.length; i < len; i++) {

@@ -843,8 +1099,8 @@ var _node2 = nodes[i];

_node2.edgeOffset = null;
el.style["".concat(vendorPrefix, "Transform")] = '';
el.style["".concat(vendorPrefix, "TransitionDuration")] = '';
setTranslate3d(el, null);
setTransitionDuration(el, null);
}
clearInterval(_this.autoscrollInterval);
_this.autoscrollInterval = null;
_this.autoScroller.clear();
_this.manager.active = null;

@@ -859,9 +1115,9 @@

onSortEnd({
oldIndex: _this.index,
collection: collection,
newIndex: _this.newIndex,
collection: collection
oldIndex: _this.index
}, event);
}
_this._touched = false;
_this.touched = false;
});

@@ -876,72 +1132,26 @@

var translate = _this.translate;
var direction = {
x: 0,
y: 0
};
var speed = {
x: 1,
y: 1
};
var acceleration = {
x: 10,
y: 10
};
var _this$scrollContainer = _this.scrollContainer,
scrollTop = _this$scrollContainer.scrollTop,
scrollLeft = _this$scrollContainer.scrollLeft,
scrollHeight = _this$scrollContainer.scrollHeight,
scrollWidth = _this$scrollContainer.scrollWidth,
clientHeight = _this$scrollContainer.clientHeight,
clientWidth = _this$scrollContainer.clientWidth;
var isTop = scrollTop === 0;
var isBottom = scrollHeight - scrollTop - clientHeight === 0;
var isLeft = scrollLeft === 0;
var isRight = scrollWidth - scrollLeft - clientWidth === 0;
_this.autoScroller.update({
height: _this.height,
maxTranslate: _this.maxTranslate,
minTranslate: _this.minTranslate,
translate: _this.translate,
width: _this.width
});
});
if (translate.y >= _this.maxTranslate.y - _this.height / 2 && !isBottom) {
direction.y = 1;
speed.y = acceleration.y * Math.abs((_this.maxTranslate.y - _this.height / 2 - translate.y) / _this.height);
} else if (translate.x >= _this.maxTranslate.x - _this.width / 2 && !isRight) {
direction.x = 1;
speed.x = acceleration.x * Math.abs((_this.maxTranslate.x - _this.width / 2 - translate.x) / _this.width);
} else if (translate.y <= _this.minTranslate.y + _this.height / 2 && !isTop) {
direction.y = -1;
speed.y = acceleration.y * Math.abs((translate.y - _this.height / 2 - _this.minTranslate.y) / _this.height);
} else if (translate.x <= _this.minTranslate.x + _this.width / 2 && !isLeft) {
direction.x = -1;
speed.x = acceleration.x * Math.abs((translate.x - _this.width / 2 - _this.minTranslate.x) / _this.width);
}
defineProperty(assertThisInitialized(assertThisInitialized(_this)), "onAutoScroll", function (offset) {
_this.translate.x += offset.left;
_this.translate.y += offset.top;
if (_this.autoscrollInterval) {
clearInterval(_this.autoscrollInterval);
_this.autoscrollInterval = null;
_this.isAutoScrolling = false;
}
if (direction.x !== 0 || direction.y !== 0) {
_this.autoscrollInterval = setInterval(function () {
_this.isAutoScrolling = true;
var offset = {
left: speed.x * direction.x,
top: speed.y * direction.y
};
_this.scrollContainer.scrollTop += offset.top;
_this.scrollContainer.scrollLeft += offset.left;
_this.translate.x += offset.left;
_this.translate.y += offset.top;
_this.animateNodes();
}, 5);
}
_this.animateNodes();
});
validateProps(props);
_this.state = {};
_this.manager = new Manager();
_this.events = {
start: _this.handleStart,
end: _this.handleEnd,
move: _this.handleMove,
end: _this.handleEnd
start: _this.handleStart
};
invariant_1(!(props.distance && props.pressDelay), 'Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time.');
_this.state = {};
return _this;

@@ -969,15 +1179,9 @@ }

_this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow;
_this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : _this2.container;
var _loop = function _loop(key) {
if (_this2.events.hasOwnProperty(key)) {
events[key].forEach(function (eventName) {
return _this2.container.addEventListener(eventName, _this2.events[key], false);
});
}
};
for (var key in _this2.events) {
_loop(key);
}
_this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container) || _this2.container;
_this2.autoScroller = new AutoScroller(_this2.scrollContainer, _this2.onAutoScroll);
Object.keys(_this2.events).forEach(function (key) {
return events[key].forEach(function (eventName) {
return _this2.container.addEventListener(eventName, _this2.events[key], false);
});
});
});

@@ -991,43 +1195,15 @@ }

if (this.container) {
var _loop2 = function _loop2(key) {
if (_this3.events.hasOwnProperty(key)) {
events[key].forEach(function (eventName) {
return _this3.container.removeEventListener(eventName, _this3.events[key]);
});
}
};
for (var key in this.events) {
_loop2(key);
}
Object.keys(this.events).forEach(function (key) {
return events[key].forEach(function (eventName) {
return _this3.container.removeEventListener(eventName, _this3.events[key]);
});
});
}
}
}, {
key: "getLockPixelOffsets",
value: function getLockPixelOffsets() {
var width = this.width,
height = this.height;
var lockOffset = this.props.lockOffset;
var offsets = Array.isArray(lockOffset) ? lockOffset : [lockOffset, lockOffset];
invariant_1(offsets.length === 2, 'lockOffset prop of SortableContainer should be a single ' + 'value or an array of exactly two values. Given %s', lockOffset);
var _offsets = slicedToArray(offsets, 2),
minLockOffset = _offsets[0],
maxLockOffset = _offsets[1];
return [getLockPixelOffset({
lockOffset: minLockOffset,
width: width,
height: height
}), getLockPixelOffset({
lockOffset: maxLockOffset,
width: width,
height: height
})];
}
}, {
key: "updatePosition",
value: function updatePosition(event) {
key: "updateHelperPosition",
value: function updateHelperPosition(event) {
var _this$props5 = this.props,
lockAxis = _this$props5.lockAxis,
lockOffset = _this$props5.lockOffset,
lockToContainerEdges = _this$props5.lockToContainerEdges;

@@ -1044,6 +1220,10 @@ var offset = getPosition(event);

if (lockToContainerEdges) {
var _this$getLockPixelOff = this.getLockPixelOffsets(),
_this$getLockPixelOff2 = slicedToArray(_this$getLockPixelOff, 2),
minLockOffset = _this$getLockPixelOff2[0],
maxLockOffset = _this$getLockPixelOff2[1];
var _getLockPixelOffsets = getLockPixelOffsets({
height: this.height,
lockOffset: lockOffset,
width: this.width
}),
_getLockPixelOffsets2 = slicedToArray(_getLockPixelOffsets, 2),
minLockOffset = _getLockPixelOffsets2[0],
maxLockOffset = _getLockPixelOffsets2[1];

@@ -1068,3 +1248,3 @@ var minOffset = {

this.helper.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px, 0)");
setTranslate3d(this.helper, translate);
}

@@ -1080,4 +1260,4 @@ }, {

var containerScrollDelta = {
left: this.container.scrollLeft - this.initialScroll.left,
top: this.container.scrollTop - this.initialScroll.top
left: this.scrollContainer.scrollLeft - this.initialScroll.left,
top: this.scrollContainer.scrollTop - this.initialScroll.top
};

@@ -1089,4 +1269,4 @@ var sortingOffset = {

var windowScrollDelta = {
top: window.pageYOffset - this.initialWindowScroll.top,
left: window.pageXOffset - this.initialWindowScroll.left
left: window.pageXOffset - this.initialWindowScroll.left,
top: window.pageYOffset - this.initialWindowScroll.top
};

@@ -1098,8 +1278,8 @@ var prevIndex = this.newIndex;

var _node3 = nodes[i].node;
var _index2 = _node3.sortableInfo.index;
var index = _node3.sortableInfo.index;
var width = _node3.offsetWidth;
var height = _node3.offsetHeight;
var offset = {
width: this.width > width ? width / 2 : this.width / 2,
height: this.height > height ? height / 2 : this.height / 2
height: this.height > height ? height / 2 : this.height / 2,
width: this.width > width ? width / 2 : this.width / 2
};

@@ -1124,7 +1304,9 @@ var translate = {

if (_index2 === this.index) {
if (index === this.index) {
if (hideSortableGhost) {
this.sortableGhost = _node3;
_node3.style.visibility = 'hidden';
_node3.style.opacity = 0;
setInlineStyles(_node3, {
opacity: 0,
visibility: 'hidden'
});
}

@@ -1136,3 +1318,3 @@

if (transitionDuration) {
_node3.style["".concat(vendorPrefix, "TransitionDuration")] = "".concat(transitionDuration, "ms");
setTransitionDuration(_node3, transitionDuration);
}

@@ -1142,3 +1324,3 @@

if (this.axis.y) {
if (_index2 < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
if (index < this.index && (sortingOffset.left + windowScrollDelta.left - offset.width <= edgeOffset.left && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height || sortingOffset.top + windowScrollDelta.top + offset.height <= edgeOffset.top)) {
translate.x = this.width + this.marginOffset.x;

@@ -1154,5 +1336,5 @@

if (this.newIndex === null) {
this.newIndex = _index2;
this.newIndex = index;
}
} else if (_index2 > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
} else if (index > this.index && (sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top || sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top + height)) {
translate.x = -(this.width + this.marginOffset.x);

@@ -1167,13 +1349,13 @@

this.newIndex = _index2;
this.newIndex = index;
}
} else {
if (_index2 > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
if (index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) {
translate.x = -(this.width + this.marginOffset.x);
this.newIndex = _index2;
} else if (_index2 < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
this.newIndex = index;
} else if (index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) {
translate.x = this.width + this.marginOffset.x;
if (this.newIndex == null) {
this.newIndex = _index2;
this.newIndex = index;
}

@@ -1183,10 +1365,10 @@ }

} else if (this.axis.y) {
if (_index2 > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
if (index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) {
translate.y = -(this.height + this.marginOffset.y);
this.newIndex = _index2;
} else if (_index2 < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
this.newIndex = index;
} else if (index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) {
translate.y = this.height + this.marginOffset.y;
if (this.newIndex == null) {
this.newIndex = _index2;
this.newIndex = index;
}

@@ -1196,3 +1378,3 @@ }

_node3.style["".concat(vendorPrefix, "Transform")] = "translate3d(".concat(translate.x, "px,").concat(translate.y, "px,0)");
setTranslate3d(_node3, translate);
}

@@ -1206,6 +1388,6 @@

onSortOver({
collection: this.manager.active.collection,
index: this.index,
newIndex: this.newIndex,
oldIndex: prevIndex,
index: this.index,
collection: this.manager.active.collection
oldIndex: prevIndex
});

@@ -1237,3 +1419,3 @@ }

ref: ref
}, omit(this.props, 'contentWindow', 'useWindowAsScrollContainer', 'distance', 'helperClass', 'hideSortableGhost', 'transitionDuration', 'useDragHandle', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'updateBeforeSortStart', 'onSortStart', 'onSortMove', 'onSortEnd', 'axis', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'getContainer', 'getHelperDimensions', 'helperContainer', 'disableAutoscroll')));
}, omit(this.props, omittedProps)));
}

@@ -1254,54 +1436,3 @@ }, {

return WithSortableContainer;
}(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), defineProperty(_class, "defaultProps", {
axis: 'y',
transitionDuration: 300,
pressDelay: 0,
pressThreshold: 5,
distance: 0,
useWindowAsScrollContainer: false,
hideSortableGhost: true,
shouldCancelStart: function shouldCancelStart(event) {
var disabledElements = ['input', 'textarea', 'select', 'option', 'button'];
if (disabledElements.indexOf(event.target.tagName.toLowerCase()) !== -1) {
return true;
}
return false;
},
lockToContainerEdges: false,
lockOffset: '50%',
getHelperDimensions: function getHelperDimensions(_ref) {
var node = _ref.node;
return {
width: node.offsetWidth,
height: node.offsetHeight
};
},
disableAutoscroll: false
}), defineProperty(_class, "propTypes", {
axis: PropTypes.oneOf(['x', 'y', 'xy']),
distance: PropTypes.number,
lockAxis: PropTypes.string,
helperClass: PropTypes.string,
transitionDuration: PropTypes.number,
contentWindow: PropTypes.any,
updateBeforeSortStart: PropTypes.func,
onSortStart: PropTypes.func,
onSortMove: PropTypes.func,
onSortOver: PropTypes.func,
onSortEnd: PropTypes.func,
shouldCancelStart: PropTypes.func,
pressDelay: PropTypes.number,
pressThreshold: PropTypes.number,
useDragHandle: PropTypes.bool,
useWindowAsScrollContainer: PropTypes.bool,
hideSortableGhost: PropTypes.bool,
lockToContainerEdges: PropTypes.bool,
lockOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
getContainer: PropTypes.func,
getHelperDimensions: PropTypes.func,
helperContainer: PropTypes.oneOfType([PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)]),
disableAutoscroll: PropTypes.bool
}), defineProperty(_class, "childContextTypes", {
}(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), defineProperty(_class, "defaultProps", defaultProps), defineProperty(_class, "propTypes", propTypes), defineProperty(_class, "childContextTypes", {
manager: PropTypes.object.isRequired

@@ -1311,2 +1442,8 @@ }), _temp;

var propTypes$1 = {
index: PropTypes.number.isRequired,
collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
disabled: PropTypes.bool
};
var omittedProps$1 = Object.keys(propTypes$1);
function sortableElement(WrappedComponent) {

@@ -1364,5 +1501,5 @@ var _class, _temp;

node.sortableInfo = {
index: index,
collection: collection,
disabled: disabled,
index: index,
manager: this.context.manager

@@ -1394,3 +1531,3 @@ };

ref: ref
}, omit(this.props, 'collection', 'disabled', 'index')));
}, omit(this.props, omittedProps$1)));
}

@@ -1402,7 +1539,3 @@ }]);

manager: PropTypes.object.isRequired
}), defineProperty(_class, "propTypes", {
index: PropTypes.number.isRequired,
collection: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
disabled: PropTypes.bool
}), defineProperty(_class, "defaultProps", {
}), defineProperty(_class, "propTypes", propTypes$1), defineProperty(_class, "defaultProps", {
collection: 0

@@ -1412,43 +1545,2 @@ }), _temp;

function sortableHandle(WrappedComponent) {
var _class, _temp;
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
withRef: false
};
return _temp = _class = function (_React$Component) {
inherits(WithSortableHandle, _React$Component);
function WithSortableHandle() {
classCallCheck(this, WithSortableHandle);
return possibleConstructorReturn(this, getPrototypeOf(WithSortableHandle).apply(this, arguments));
}
createClass(WithSortableHandle, [{
key: "componentDidMount",
value: function componentDidMount() {
var node = reactDom.findDOMNode(this);
node.sortableHandle = true;
}
}, {
key: "getWrappedInstance",
value: function getWrappedInstance() {
invariant_1(config.withRef, 'To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call');
return this.refs.wrappedInstance;
}
}, {
key: "render",
value: function render() {
var ref = config.withRef ? 'wrappedInstance' : null;
return React.createElement(WrappedComponent, _extends_1({
ref: ref
}, this.props));
}
}]);
return WithSortableHandle;
}(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableHandle', WrappedComponent)), _temp;
}
exports.SortableContainer = sortableContainer;

@@ -1455,0 +1547,0 @@ exports.sortableContainer = sortableContainer;

2

dist/react-sortable-hoc.umd.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-dom"],t):t((e=e||self).SortableHOC={},e.React,e.PropTypes,e.ReactDOM)}(this,function(e,r,i,a){"use strict";function t(e,t){return e(t={exports:{}},t.exports),t.exports}i=i&&i.hasOwnProperty("default")?i.default:i;var s=t(function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},t.apply(this,arguments)}e.exports=t});var n=function(e){if(Array.isArray(e))return e};var o=function(e,t){var n=[],o=!0,r=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){r=!0,i=e}finally{try{o||null==s.return||s.return()}finally{if(r)throw i}}return n};var l=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")};var p=function(e,t){return n(e)||o(e,t)||l()};var c=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}};var u=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)};var f=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")};var x=function(e){return c(e)||u(e)||f()};var h=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")};function d(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var y=function(e,t,n){return t&&d(e.prototype,t),n&&d(e,n),e},g=t(function(t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=o=function(e){return n(e)}:t.exports=o=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},o(e)}t.exports=o});var v=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e};var b=function(e,t){return!t||"object"!==g(t)&&"function"!=typeof t?v(e):t},w=t(function(t){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(e)}t.exports=n}),m=t(function(n){function o(e,t){return n.exports=o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},o(e,t)}n.exports=o});var S=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)};var O=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},T=process.env.NODE_ENV,C=function(e,t,n,o,r,i,a,s){if("production"!==T&&void 0===t)throw new Error("invariant requires an error message argument");if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,i,a,s],u=0;(l=new Error(t.replace(/%s/g,function(){return c[u++]}))).name="Invariant Violation"}throw l.framesToPop=1,l}},I=function(){function e(){h(this,e),O(this,"refs",{})}return y(e,[{key:"add",value:function(e,t){this.refs[e]||(this.refs[e]=[]),this.refs[e].push(t)}},{key:"remove",value:function(e,t){var n=this.getIndex(e,t);-1!==n&&this.refs[e].splice(n,1)}},{key:"isActive",value:function(){return this.active}},{key:"getActive",value:function(){var t=this;return this.refs[this.active.collection].find(function(e){return e.node.sortableInfo.index==t.active.index})}},{key:"getIndex",value:function(e,t){return this.refs[e].indexOf(t)}},{key:"getOrderedRefs",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.active.collection;return this.refs[e].sort(E)}}]),e}();function E(e,t){return e.node.sortableInfo.index-t.node.sortableInfo.index}function k(n){for(var e=arguments.length,o=new Array(1<e?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return Object.keys(n).reduce(function(e,t){return-1===o.indexOf(t)&&(e[t]=n[t]),e},{})}var R={start:["touchstart","mousedown"],move:["touchmove","mousemove"],end:["touchend","touchcancel","mouseup"]},A=function(){if("undefined"==typeof window||"undefined"==typeof document)return"";var e=window.getComputedStyle(document.documentElement,"")||["-moz-hidden-iframe"],t=(Array.prototype.slice.call(e).join("").match(/-(moz|webkit|ms)-/)||""===e.OLink&&["","o"])[1];switch(t){case"ms":return"ms";default:return t&&t.length?t[0].toUpperCase()+t.substr(1):""}}();function D(e,t){for(;e;){if(t(e))return e;e=e.parentNode}return null}function M(e,t,n){return Math.max(e,Math.min(n,t))}function W(e){return"px"===e.substr(-2)?parseFloat(e):0}function P(e,t){var n=t.displayName||t.name;return n?"".concat(e,"(").concat(n,")"):e}function N(e){return e.touches&&e.touches.length?{x:e.touches[0].pageX,y:e.touches[0].pageY}:e.changedTouches&&e.changedTouches.length?{x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY}:{x:e.pageX,y:e.pageY}}function H(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{top:0,left:0};if(e){var o={top:n.top+e.offsetTop,left:n.left+e.offsetLeft};return e.parentNode===t?o:H(e.parentNode,t,o)}}function L(e){var t=e.lockOffset,n=e.width,o=e.height,r=t,i=t,a="px";if("string"==typeof t){var s=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(t);C(null!==s,'lockOffset value should be a number or a string of a number followed by "px" or "%". Given %s',t),r=parseFloat(t),i=parseFloat(t),a=s[1]}return C(isFinite(r)&&isFinite(i),"lockOffset value should be a finite. Given %s",t),"%"===a&&(r=r*n/100,i=i*o/100),{x:r,y:i}}function _(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(e){var m;return h(this,t),m=b(this,w(t).call(this,e)),O(v(v(m)),"handleStart",function(e){var t=m.props,n=t.distance,o=t.shouldCancelStart;if(2!==e.button&&!o(e)){m._touched=!0,m._pos=N(e);var r,i=D(e.target,function(e){return null!=e.sortableInfo});if(i&&i.sortableInfo&&m.nodeIsChild(i)&&!m.state.sorting){var a=m.props.useDragHandle,s=i.sortableInfo,l=s.index,c=s.collection;if(s.disabled)return;if(a&&!D(e.target,function(e){return null!=e.sortableHandle}))return;m.manager.active={index:l,collection:c},(r=e).touches&&r.touches.length||r.changedTouches&&r.changedTouches.length||"a"!==e.target.tagName.toLowerCase()||e.preventDefault(),n||(0===m.props.pressDelay?m.handlePress(e):m.pressTimer=setTimeout(function(){return m.handlePress(e)},m.props.pressDelay))}}}),O(v(v(m)),"nodeIsChild",function(e){return e.sortableInfo.manager===m.manager}),O(v(v(m)),"handleMove",function(e){var t=m.props,n=t.distance,o=t.pressThreshold;if(!m.state.sorting&&m._touched&&!m._awaitingUpdateBeforeSortStart){var r=N(e),i={x:m._pos.x-r.x,y:m._pos.y-r.y},a=Math.abs(i.x)+Math.abs(i.y);m.delta=i,n||o&&!(o&&o<=a)?n&&n<=a&&m.manager.isActive()&&m.handlePress(e):(clearTimeout(m.cancelTimer),m.cancelTimer=setTimeout(m.cancel,0))}}),O(v(v(m)),"handleEnd",function(){m._touched=!1,m.cancel()}),O(v(v(m)),"cancel",function(){var e=m.props.distance;m.state.sorting||(e||clearTimeout(m.pressTimer),m.manager.active=null)}),O(v(v(m)),"handlePress",function(v){try{var r=m.manager.getActive(),e=function(){if(r){var e=function(){var e,t,n=(e=p,{top:W((t=window.getComputedStyle(e)).marginTop),right:W(t.marginRight),bottom:W(t.marginBottom),left:W(t.marginLeft)}),o=m.container.getBoundingClientRect(),r=c({index:g,node:p,collection:y});m.node=p,m.margin=n,m.width=r.width,m.height=r.height,m.marginOffset={x:m.margin.left+m.margin.right,y:Math.max(m.margin.top,m.margin.bottom)},m.boundingClientRect=p.getBoundingClientRect(),m.containerBoundingRect=o,m.index=g,m.newIndex=g,m.axis={x:0<=l.indexOf("x"),y:0<=l.indexOf("y")},m.offsetEdge=H(p,m.container),m.initialOffset=N(v),m.initialScroll={top:m.container.scrollTop,left:m.container.scrollLeft},m.initialWindowScroll={top:window.pageYOffset,left:window.pageXOffset};var i,a=p.querySelectorAll("input, textarea, select"),s=p.cloneNode(!0);(x(s.querySelectorAll("input, textarea, select")).forEach(function(e,t){"file"!==e.type&&a[g]&&(e.value=a[t].value)}),m.helper=m.helperContainer.appendChild(s),m.helper.style.position="fixed",m.helper.style.top="".concat(m.boundingClientRect.top-n.top,"px"),m.helper.style.left="".concat(m.boundingClientRect.left-n.left,"px"),m.helper.style.width="".concat(m.width,"px"),m.helper.style.height="".concat(m.height,"px"),m.helper.style.boxSizing="border-box",m.helper.style.pointerEvents="none",f&&((m.sortableGhost=p).style.visibility="hidden",p.style.opacity=0),m.minTranslate={},m.maxTranslate={},m.axis.x&&(m.minTranslate.x=(d?0:o.left)-m.boundingClientRect.left-m.width/2,m.maxTranslate.x=(d?m.contentWindow.innerWidth:o.left+o.width)-m.boundingClientRect.left-m.width/2),m.axis.y&&(m.minTranslate.y=(d?0:o.top)-m.boundingClientRect.top-m.height/2,m.maxTranslate.y=(d?m.contentWindow.innerHeight:o.top+o.height)-m.boundingClientRect.top-m.height/2),u)&&(i=m.helper.classList).add.apply(i,x(u.split(" ")));m.listenerNode=v.touches?p:m.contentWindow,R.move.forEach(function(e){return m.listenerNode.addEventListener(e,m.handleSortMove,!1)}),R.end.forEach(function(e){return m.listenerNode.addEventListener(e,m.handleSortEnd,!1)}),m.setState({sorting:!0,sortingIndex:g}),h&&h({node:p,index:g,collection:y},v)},t=m.props,l=t.axis,c=t.getHelperDimensions,u=t.helperClass,f=t.hideSortableGhost,n=t.updateBeforeSortStart,h=t.onSortStart,d=t.useWindowAsScrollContainer,p=r.node,y=r.collection,g=p.sortableInfo.index,o=function(){if("function"==typeof n){m._awaitingUpdateBeforeSortStart=!0;var e=function(e,t){try{var n=e()}catch(e){return t(!0,e)}return n&&n.then?n.then(t.bind(null,!1),t.bind(null,!0)):t(!1,value)}(function(){return Promise.resolve(n({node:p,index:g,collection:y},v)).then(function(){})},function(e,t){if(m._awaitingUpdateBeforeSortStart=!1,e)throw t;return t});if(e&&e.then)return e.then(function(){})}}();return o&&o.then?o.then(e):e()}}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}),O(v(v(m)),"handleSortMove",function(e){var t=m.props.onSortMove;e.preventDefault(),m.updatePosition(e),m.animateNodes(),m.autoscroll(),t&&t(e)}),O(v(v(m)),"handleSortEnd",function(e){var t=m.props,n=t.hideSortableGhost,o=t.onSortEnd,r=m.manager.active.collection;m.listenerNode&&(R.move.forEach(function(e){return m.listenerNode.removeEventListener(e,m.handleSortMove)}),R.end.forEach(function(e){return m.listenerNode.removeEventListener(e,m.handleSortEnd)})),m.helper.parentNode.removeChild(m.helper),n&&m.sortableGhost&&(m.sortableGhost.style.visibility="",m.sortableGhost.style.opacity="");for(var i=m.manager.refs[r],a=0,s=i.length;a<s;a++){var l=i[a],c=l.node;l.edgeOffset=null,c.style["".concat(A,"Transform")]="",c.style["".concat(A,"TransitionDuration")]=""}clearInterval(m.autoscrollInterval),m.autoscrollInterval=null,m.manager.active=null,m.setState({sorting:!1,sortingIndex:null}),"function"==typeof o&&o({oldIndex:m.index,newIndex:m.newIndex,collection:r},e),m._touched=!1}),O(v(v(m)),"autoscroll",function(){if(!m.props.disableAutoscroll){var e=m.translate,n={x:0,y:0},o={x:1,y:1},t=10,r=10,i=m.scrollContainer,a=i.scrollTop,s=i.scrollLeft,l=i.scrollHeight,c=i.scrollWidth,u=0===a,f=l-a-i.clientHeight==0,h=0===s,d=c-s-i.clientWidth==0;e.y>=m.maxTranslate.y-m.height/2&&!f?(n.y=1,o.y=r*Math.abs((m.maxTranslate.y-m.height/2-e.y)/m.height)):e.x>=m.maxTranslate.x-m.width/2&&!d?(n.x=1,o.x=t*Math.abs((m.maxTranslate.x-m.width/2-e.x)/m.width)):e.y<=m.minTranslate.y+m.height/2&&!u?(n.y=-1,o.y=r*Math.abs((e.y-m.height/2-m.minTranslate.y)/m.height)):e.x<=m.minTranslate.x+m.width/2&&!h&&(n.x=-1,o.x=t*Math.abs((e.x-m.width/2-m.minTranslate.x)/m.width)),m.autoscrollInterval&&(clearInterval(m.autoscrollInterval),m.autoscrollInterval=null,m.isAutoScrolling=!1),0===n.x&&0===n.y||(m.autoscrollInterval=setInterval(function(){m.isAutoScrolling=!0;var e=o.x*n.x,t=o.y*n.y;m.scrollContainer.scrollTop+=t,m.scrollContainer.scrollLeft+=e,m.translate.x+=e,m.translate.y+=t,m.animateNodes()},5))}}),m.manager=new I,m.events={start:m.handleStart,move:m.handleMove,end:m.handleEnd},C(!(e.distance&&e.pressDelay),"Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time."),m.state={},m}return S(t,e),y(t,[{key:"getChildContext",value:function(){return{manager:this.manager}}},{key:"componentDidMount",value:function(){var r=this,i=this.props.useWindowAsScrollContainer,e=this.getContainer();Promise.resolve(e).then(function(e){r.container=e,r.document=r.container.ownerDocument||document;var t=r.props.contentWindow||r.document.defaultView||window;r.contentWindow="function"==typeof t?t():t,r.scrollContainer=i?r.document.scrollingElement||r.document.documentElement:r.container;var n=function(t){r.events.hasOwnProperty(t)&&R[t].forEach(function(e){return r.container.addEventListener(e,r.events[t],!1)})};for(var o in r.events)n(o)})}},{key:"componentWillUnmount",value:function(){var n=this;if(this.container){var e=function(t){n.events.hasOwnProperty(t)&&R[t].forEach(function(e){return n.container.removeEventListener(e,n.events[t])})};for(var t in this.events)e(t)}}},{key:"getLockPixelOffsets",value:function(){var e=this.width,t=this.height,n=this.props.lockOffset,o=Array.isArray(n)?n:[n,n];C(2===o.length,"lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given %s",n);var r=p(o,2),i=r[0],a=r[1];return[L({lockOffset:i,width:e,height:t}),L({lockOffset:a,width:e,height:t})]}},{key:"updatePosition",value:function(e){var t=this.props,n=t.lockAxis,o=t.lockToContainerEdges,r=N(e),i={x:r.x-this.initialOffset.x,y:r.y-this.initialOffset.y};if(i.y-=window.pageYOffset-this.initialWindowScroll.top,i.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=i,o){var a=this.getLockPixelOffsets(),s=p(a,2),l=s[0],c=s[1],u=this.width/2-l.x,f=this.height/2-l.y,h=this.width/2-c.x,d=this.height/2-c.y;i.x=M(this.minTranslate.x+u,this.maxTranslate.x-h,i.x),i.y=M(this.minTranslate.y+f,this.maxTranslate.y-d,i.y)}"x"===n?i.y=0:"y"===n&&(i.x=0),this.helper.style["".concat(A,"Transform")]="translate3d(".concat(i.x,"px,").concat(i.y,"px, 0)")}},{key:"animateNodes",value:function(){var e=this.props,t=e.transitionDuration,n=e.hideSortableGhost,o=e.onSortOver,r=this.manager.getOrderedRefs(),i=this.container.scrollLeft-this.initialScroll.left,a=this.container.scrollTop-this.initialScroll.top,s=this.offsetEdge.left+this.translate.x+i,l=this.offsetEdge.top+this.translate.y+a,c=window.pageYOffset-this.initialWindowScroll.top,u=window.pageXOffset-this.initialWindowScroll.left,f=this.newIndex;this.newIndex=null;for(var h=0,d=r.length;h<d;h++){var p=r[h].node,y=p.sortableInfo.index,g=p.offsetWidth,v=p.offsetHeight,m=this.width>g?g/2:this.width/2,x=this.height>v?v/2:this.height/2,b={x:0,y:0},w=r[h].edgeOffset;w||(w=H(p,this.container),r[h].edgeOffset=w);var S=h<r.length-1&&r[h+1],O=0<h&&r[h-1];S&&!S.edgeOffset&&(S.edgeOffset=H(S.node,this.container)),y!==this.index?(t&&(p.style["".concat(A,"TransitionDuration")]="".concat(t,"ms")),this.axis.x?this.axis.y?y<this.index&&(s+u-m<=w.left&&l+c<=w.top+x||l+c+x<=w.top)?(b.x=this.width+this.marginOffset.x,w.left+b.x>this.containerBoundingRect.width-m&&S&&(b.x=S.edgeOffset.left-w.left,b.y=S.edgeOffset.top-w.top),null===this.newIndex&&(this.newIndex=y)):y>this.index&&(s+u+m>=w.left&&l+c+x>=w.top||l+c+x>=w.top+v)&&(b.x=-(this.width+this.marginOffset.x),w.left+b.x<this.containerBoundingRect.left+m&&O&&(b.x=O.edgeOffset.left-w.left,b.y=O.edgeOffset.top-w.top),this.newIndex=y):y>this.index&&s+u+m>=w.left?(b.x=-(this.width+this.marginOffset.x),this.newIndex=y):y<this.index&&s+u<=w.left+m&&(b.x=this.width+this.marginOffset.x,null==this.newIndex&&(this.newIndex=y)):this.axis.y&&(y>this.index&&l+c+x>=w.top?(b.y=-(this.height+this.marginOffset.y),this.newIndex=y):y<this.index&&l+c<=w.top+x&&(b.y=this.height+this.marginOffset.y,null==this.newIndex&&(this.newIndex=y))),p.style["".concat(A,"Transform")]="translate3d(".concat(b.x,"px,").concat(b.y,"px,0)")):n&&((this.sortableGhost=p).style.visibility="hidden",p.style.opacity=0)}null==this.newIndex&&(this.newIndex=this.index),o&&this.newIndex!==f&&o({newIndex:this.newIndex,oldIndex:f,index:this.index,collection:this.manager.active.collection})}},{key:"getWrappedInstance",value:function(){return C(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call"),this.refs.wrappedInstance}},{key:"getContainer",value:function(){var e=this.props.getContainer;return"function"!=typeof e?a.findDOMNode(this):e(o.withRef?this.getWrappedInstance():void 0)}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},k(this.props,"contentWindow","useWindowAsScrollContainer","distance","helperClass","hideSortableGhost","transitionDuration","useDragHandle","pressDelay","pressThreshold","shouldCancelStart","updateBeforeSortStart","onSortStart","onSortMove","onSortEnd","axis","lockAxis","lockOffset","lockToContainerEdges","getContainer","getHelperDimensions","helperContainer","disableAutoscroll")))}},{key:"helperContainer",get:function(){var e=this.props.helperContainer;return"function"==typeof e?e():this.props.helperContainer||this.document.body}}]),t}(r.Component),O(e,"displayName",P("sortableList",n)),O(e,"defaultProps",{axis:"y",transitionDuration:300,pressDelay:0,pressThreshold:5,distance:0,useWindowAsScrollContainer:!1,hideSortableGhost:!0,shouldCancelStart:function(e){return-1!==["input","textarea","select","option","button"].indexOf(e.target.tagName.toLowerCase())},lockToContainerEdges:!1,lockOffset:"50%",getHelperDimensions:function(e){var t=e.node;return{width:t.offsetWidth,height:t.offsetHeight}},disableAutoscroll:!1}),O(e,"propTypes",{axis:i.oneOf(["x","y","xy"]),distance:i.number,lockAxis:i.string,helperClass:i.string,transitionDuration:i.number,contentWindow:i.any,updateBeforeSortStart:i.func,onSortStart:i.func,onSortMove:i.func,onSortOver:i.func,onSortEnd:i.func,shouldCancelStart:i.func,pressDelay:i.number,pressThreshold:i.number,useDragHandle:i.bool,useWindowAsScrollContainer:i.bool,hideSortableGhost:i.bool,lockToContainerEdges:i.bool,lockOffset:i.oneOfType([i.number,i.string,i.arrayOf(i.oneOfType([i.number,i.string]))]),getContainer:i.func,getHelperDimensions:i.func,helperContainer:i.oneOfType([i.func,"undefined"==typeof HTMLElement?i.any:i.instanceOf(HTMLElement)]),disableAutoscroll:i.bool}),O(e,"childContextTypes",{manager:i.object.isRequired}),t}function j(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return h(this,t),b(this,w(t).apply(this,arguments))}return S(t,e),y(t,[{key:"componentDidMount",value:function(){this.register()}},{key:"componentDidUpdate",value:function(e){this.node&&(e.index!==this.props.index&&(this.node.sortableInfo.index=this.props.index),e.disabled!==this.props.disabled&&(this.node.sortableInfo.disabled=this.props.disabled)),e.collection!==this.props.collection&&(this.unregister(e.collection),this.register())}},{key:"componentWillUnmount",value:function(){this.unregister()}},{key:"register",value:function(){var e=this.props,t=e.collection,n=e.disabled,o=e.index,r=a.findDOMNode(this);r.sortableInfo={index:o,collection:t,disabled:n,manager:this.context.manager},this.node=r,this.ref={node:r},this.context.manager.add(t,this.ref)}},{key:"unregister",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.props.collection;this.context.manager.remove(e,this.ref)}},{key:"getWrappedInstance",value:function(){return C(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},k(this.props,"collection","disabled","index")))}}]),t}(r.Component),O(e,"displayName",P("sortableElement",n)),O(e,"contextTypes",{manager:i.object.isRequired}),O(e,"propTypes",{index:i.number.isRequired,collection:i.oneOfType([i.number,i.string]),disabled:i.bool}),O(e,"defaultProps",{collection:0}),t}function G(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return h(this,t),b(this,w(t).apply(this,arguments))}return S(t,e),y(t,[{key:"componentDidMount",value:function(){a.findDOMNode(this).sortableHandle=!0}},{key:"getWrappedInstance",value:function(){return C(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},this.props))}}]),t}(r.Component),O(e,"displayName",P("sortableHandle",n)),t}e.SortableContainer=_,e.sortableContainer=_,e.SortableElement=j,e.sortableElement=j,e.SortableHandle=G,e.sortableHandle=G,e.arrayMove=function(e,t,n){return(e=e.slice()).splice(n<0?e.length+n:n,0,e.splice(t,1)[0]),e},Object.defineProperty(e,"__esModule",{value:!0})});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","react-dom"],t):t((e=e||self).SortableHOC={},e.React,e.PropTypes,e.ReactDOM)}(this,function(e,r,i,a){"use strict";function t(e,t){return e(t={exports:{}},t.exports),t.exports}i=i&&i.hasOwnProperty("default")?i.default:i;var s=t(function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},t.apply(this,arguments)}e.exports=t});var n=function(e){if(Array.isArray(e))return e};var o=function(e,t){var n=[],o=!0,r=!1,i=void 0;try{for(var a,s=e[Symbol.iterator]();!(o=(a=s.next()).done)&&(n.push(a.value),!t||n.length!==t);o=!0);}catch(e){r=!0,i=e}finally{try{o||null==s.return||s.return()}finally{if(r)throw i}}return n};var l=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")};var y=function(e,t){return n(e)||o(e,t)||l()};var c=function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}};var u=function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)};var f=function(){throw new TypeError("Invalid attempt to spread non-iterable instance")};var m=function(e){return c(e)||u(e)||f()};var h=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")};function d(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}var p=function(e,t,n){return t&&d(e.prototype,t),n&&d(e,n),e},g=t(function(t){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e){return"function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?t.exports=o=function(e){return n(e)}:t.exports=o=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":n(e)},o(e)}t.exports=o});var x=function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e};var b=function(e,t){return!t||"object"!==g(t)&&"function"!=typeof t?x(e):t},w=t(function(t){function n(e){return t.exports=n=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},n(e)}t.exports=n}),v=t(function(n){function o(e,t){return n.exports=o=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},o(e,t)}n.exports=o});var S=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&v(e,t)};var O=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},T=function(e,t,n,o,r,i,a,s){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,o,r,i,a,s],u=0;(l=new Error(t.replace(/%s/g,function(){return c[u++]}))).name="Invariant Violation"}throw l.framesToPop=1,l}},C=function(){function e(){h(this,e),O(this,"refs",{})}return p(e,[{key:"add",value:function(e,t){this.refs[e]||(this.refs[e]=[]),this.refs[e].push(t)}},{key:"remove",value:function(e,t){var n=this.getIndex(e,t);-1!==n&&this.refs[e].splice(n,1)}},{key:"isActive",value:function(){return this.active}},{key:"getActive",value:function(){var t=this;return this.refs[this.active.collection].find(function(e){return e.node.sortableInfo.index==t.active.index})}},{key:"getIndex",value:function(e,t){return this.refs[e].indexOf(t)}},{key:"getOrderedRefs",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.active.collection;return this.refs[e].sort(I)}}]),e}();function I(e,t){return e.node.sortableInfo.index-t.node.sortableInfo.index}function k(n){for(var e=arguments.length,o=new Array(1<e?e-1:0),t=1;t<e;t++)o[t-1]=arguments[t];return Object.keys(n).reduce(function(e,t){return-1===o.indexOf(t)&&(e[t]=n[t]),e},{})}var E={end:["touchend","touchcancel","mouseup"],move:["touchmove","mousemove"],start:["touchstart","mousedown"]},A=function(){if("undefined"==typeof window||"undefined"==typeof document)return"";var e=window.getComputedStyle(document.documentElement,"")||["-moz-hidden-iframe"],t=(Array.prototype.slice.call(e).join("").match(/-(moz|webkit|ms)-/)||""===e.OLink&&["","o"])[1];switch(t){case"ms":return"ms";default:return t&&t.length?t[0].toUpperCase()+t.substr(1):""}}();function R(t,n){Object.keys(n).forEach(function(e){t.style[e]=n[e]})}function N(e,t){e.style["".concat(A,"Transform")]=null==t?"":"translate3d(".concat(t.x,"px,").concat(t.y,"px,0)")}function M(e,t){e.style["".concat(A,"TransitionDuration")]=null==t?"":"".concat(t,"ms")}function D(e,t){for(;e;){if(t(e))return e;e=e.parentNode}return null}function W(e,t,n){return Math.max(e,Math.min(n,t))}function j(e){return"px"===e.substr(-2)?parseFloat(e):0}function P(e,t){var n=t.displayName||t.name;return n?"".concat(e,"(").concat(n,")"):e}function H(e){return e.touches&&e.touches.length?{x:e.touches[0].pageX,y:e.touches[0].pageY}:e.changedTouches&&e.changedTouches.length?{x:e.changedTouches[0].pageX,y:e.changedTouches[0].pageY}:{x:e.pageX,y:e.pageY}}function L(e,t){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:{left:0,top:0};if(e){var o={left:n.left+e.offsetLeft,top:n.top+e.offsetTop};return e.parentNode===t?o:L(e.parentNode,t,o)}}function _(e){var t=e.lockOffset,n=e.width,o=e.height,r=t,i=t,a="px";if("string"==typeof t){var s=/^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(t);T(null!==s,'lockOffset value should be a number or a string of a number followed by "px" or "%". Given %s',t),r=parseFloat(t),i=parseFloat(t),a=s[1]}return T(isFinite(r)&&isFinite(i),"lockOffset value should be a finite. Given %s",t),"%"===a&&(r=r*n/100,i=i*o/100),{x:r,y:i}}function B(e){return e?(t=e,n=window.getComputedStyle(t),o=/(auto|scroll)/,["overflow","overflowX","overflowY"].find(function(e){return o.test(n[e])})?e:B(e.parentNode)):null;var t,n,o}var G="A",U="BUTTON",q="CANVAS",X="INPUT",Y="OPTION",F="TEXTAREA",z="SELECT";function V(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return h(this,t),b(this,w(t).apply(this,arguments))}return S(t,e),p(t,[{key:"componentDidMount",value:function(){a.findDOMNode(this).sortableHandle=!0}},{key:"getWrappedInstance",value:function(){return T(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableHandle() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},this.props))}}]),t}(r.Component),O(e,"displayName",P("sortableHandle",n)),t}function $(e){return null!=e.sortableHandle}var J=function(){function n(e,t){h(this,n),this.container=e,this.onScrollCallback=t}return p(n,[{key:"clear",value:function(){clearInterval(this.interval),this.interval=null}},{key:"update",value:function(e){var t=this,n=e.translate,o=e.minTranslate,r=e.maxTranslate,i=e.width,a=e.height,s={x:0,y:0},l={x:1,y:1},c=10,u=10,f=this.container,h=f.scrollTop,d=f.scrollLeft,p=f.scrollHeight,y=f.scrollWidth,g=0===h,v=p-h-f.clientHeight==0,m=0===d,x=y-d-f.clientWidth==0;n.y>=r.y-a/2&&!v?(s.y=1,l.y=u*Math.abs((r.y-a/2-n.y)/a)):n.x>=r.x-i/2&&!x?(s.x=1,l.x=c*Math.abs((r.x-i/2-n.x)/i)):n.y<=o.y+a/2&&!g?(s.y=-1,l.y=u*Math.abs((n.y-a/2-o.y)/a)):n.x<=o.x+i/2&&!m&&(s.x=-1,l.x=c*Math.abs((n.x-i/2-o.x)/i)),this.interval&&(this.clear(),this.isAutoScrolling=!1),0===s.x&&0===s.y||(this.interval=setInterval(function(){t.isAutoScrolling=!0;var e={left:l.x*s.x,top:l.y*s.y};t.container.scrollTop+=e.top,t.container.scrollLeft+=e.left,t.onScrollCallback(e)},5))}}]),n}();var K={axis:i.oneOf(["x","y","xy"]),contentWindow:i.any,disableAutoscroll:i.bool,distance:i.number,getContainer:i.func,getHelperDimensions:i.func,helperClass:i.string,helperContainer:i.oneOfType([i.func,"undefined"==typeof HTMLElement?i.any:i.instanceOf(HTMLElement)]),hideSortableGhost:i.bool,lockAxis:i.string,lockOffset:i.oneOfType([i.number,i.string,i.arrayOf(i.oneOfType([i.number,i.string]))]),lockToContainerEdges:i.bool,onSortEnd:i.func,onSortMove:i.func,onSortOver:i.func,onSortStart:i.func,pressDelay:i.number,pressThreshold:i.number,shouldCancelStart:i.func,transitionDuration:i.number,updateBeforeSortStart:i.func,useDragHandle:i.bool,useWindowAsScrollContainer:i.bool},Q={axis:"y",disableAutoscroll:!1,distance:0,getHelperDimensions:function(e){var t=e.node;return{height:t.offsetHeight,width:t.offsetWidth}},hideSortableGhost:!0,lockOffset:"50%",lockToContainerEdges:!1,pressDelay:0,pressThreshold:5,shouldCancelStart:function(e){return-1!==[X,F,z,Y,U].indexOf(e.target.tagName)},transitionDuration:300,useWindowAsScrollContainer:!1},Z=Object.keys(K);function ee(t){var e,n,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return n=e=function(e){function n(e){var v,t;return h(this,n),v=b(this,w(n).call(this,e)),O(x(x(v)),"handleStart",function(e){var t=v.props,n=t.distance,o=t.shouldCancelStart;if(2!==e.button&&!o(e)){v.touched=!0,v.position=H(e);var r,i=D(e.target,function(e){return null!=e.sortableInfo});if(i&&i.sortableInfo&&v.nodeIsChild(i)&&!v.state.sorting){var a=v.props.useDragHandle,s=i.sortableInfo,l=s.index,c=s.collection;if(s.disabled)return;if(a&&!D(e.target,$))return;v.manager.active={collection:c,index:l},(r=e).touches&&r.touches.length||r.changedTouches&&r.changedTouches.length||e.target.tagName!==G||e.preventDefault(),n||(0===v.props.pressDelay?v.handlePress(e):v.pressTimer=setTimeout(function(){return v.handlePress(e)},v.props.pressDelay))}}}),O(x(x(v)),"nodeIsChild",function(e){return e.sortableInfo.manager===v.manager}),O(x(x(v)),"handleMove",function(e){var t=v.props,n=t.distance,o=t.pressThreshold;if(!v.state.sorting&&v.touched&&!v._awaitingUpdateBeforeSortStart){var r=H(e),i={x:v.position.x-r.x,y:v.position.y-r.y},a=Math.abs(i.x)+Math.abs(i.y);v.delta=i,n||o&&!(o<=a)?n&&n<=a&&v.manager.isActive()&&v.handlePress(e):(clearTimeout(v.cancelTimer),v.cancelTimer=setTimeout(v.cancel,0))}}),O(x(x(v)),"handleEnd",function(){v.touched=!1,v.cancel()}),O(x(x(v)),"cancel",function(){var e=v.props.distance;v.state.sorting||(e||clearTimeout(v.pressTimer),v.manager.active=null)}),O(x(x(v)),"handlePress",function(g){try{var r=v.manager.getActive(),e=function(){if(r){var e=function(){var e,t,n=p.sortableInfo.index,o=(e=p,{bottom:j((t=window.getComputedStyle(e)).marginBottom),left:j(t.marginLeft),right:j(t.marginRight),top:j(t.marginTop)}),r=v.scrollContainer.getBoundingClientRect(),i=c({collection:y,index:n,node:p});v.node=p,v.margin=o,v.width=i.width,v.height=i.height,v.marginOffset={x:v.margin.left+v.margin.right,y:Math.max(v.margin.top,v.margin.bottom)},v.boundingClientRect=p.getBoundingClientRect(),v.containerBoundingRect=r,v.index=n,v.newIndex=n,v.axis={x:0<=l.indexOf("x"),y:0<=l.indexOf("y")},v.offsetEdge=L(p,v.container),v.initialOffset=H(g),v.initialScroll={left:v.scrollContainer.scrollLeft,top:v.scrollContainer.scrollTop},v.initialWindowScroll={left:window.pageXOffset,top:window.pageYOffset};var a=p.querySelectorAll("input, textarea, select, canvas"),s=p.cloneNode(!0);m(s.querySelectorAll("input, textarea, select, canvas")).forEach(function(e,t){("file"!==e.type&&a[n]&&(e.value=a[t].value),e.tagName===q)&&e.getContext("2d").drawImage(a[n],0,0)}),v.helper=v.helperContainer.appendChild(s),R(v.helper,{boxSizing:"border-box",height:"".concat(v.height,"px"),left:"".concat(v.boundingClientRect.left-o.left,"px"),pointerEvents:"none",position:"fixed",top:"".concat(v.boundingClientRect.top-o.top,"px"),width:"".concat(v.width,"px")}),f&&R(v.sortableGhost=p,{opacity:0,visibility:"hidden"}),v.minTranslate={},v.maxTranslate={},v.axis.x&&(v.minTranslate.x=(d?0:r.left)-v.boundingClientRect.left-v.width/2,v.maxTranslate.x=(d?v.contentWindow.innerWidth:r.left+r.width)-v.boundingClientRect.left-v.width/2),v.axis.y&&(v.minTranslate.y=(d?0:r.top)-v.boundingClientRect.top-v.height/2,v.maxTranslate.y=(d?v.contentWindow.innerHeight:r.top+r.height)-v.boundingClientRect.top-v.height/2),u&&u.split(" ").forEach(function(e){return v.helper.classList.add(e)}),v.listenerNode=g.touches?p:v.contentWindow,E.move.forEach(function(e){return v.listenerNode.addEventListener(e,v.handleSortMove,!1)}),E.end.forEach(function(e){return v.listenerNode.addEventListener(e,v.handleSortEnd,!1)}),v.setState({sorting:!0,sortingIndex:n}),h&&h({collection:y,index:n,node:p},g)},t=v.props,l=t.axis,c=t.getHelperDimensions,u=t.helperClass,f=t.hideSortableGhost,n=t.updateBeforeSortStart,h=t.onSortStart,d=t.useWindowAsScrollContainer,p=r.node,y=r.collection,o=function(){if("function"==typeof n){v._awaitingUpdateBeforeSortStart=!0;var e=function(e,t){try{var n=e()}catch(e){return t(!0,e)}return n&&n.then?n.then(t.bind(null,!1),t.bind(null,!0)):t(!1,value)}(function(){var e=p.sortableInfo.index;return Promise.resolve(n({collection:y,index:e,node:p},g)).then(function(){})},function(e,t){if(v._awaitingUpdateBeforeSortStart=!1,e)throw t;return t});if(e&&e.then)return e.then(function(){})}}();return o&&o.then?o.then(e):e()}}();return Promise.resolve(e&&e.then?e.then(function(){}):void 0)}catch(e){return Promise.reject(e)}}),O(x(x(v)),"handleSortMove",function(e){var t=v.props.onSortMove;e.preventDefault(),v.updateHelperPosition(e),v.animateNodes(),v.autoscroll(),t&&t(e)}),O(x(x(v)),"handleSortEnd",function(e){var t=v.props,n=t.hideSortableGhost,o=t.onSortEnd,r=v.manager.active.collection,i=v.manager.refs[r];v.listenerNode&&(E.move.forEach(function(e){return v.listenerNode.removeEventListener(e,v.handleSortMove)}),E.end.forEach(function(e){return v.listenerNode.removeEventListener(e,v.handleSortEnd)})),v.helper.parentNode.removeChild(v.helper),n&&v.sortableGhost&&R(v.sortableGhost,{opacity:"",visibility:""});for(var a=0,s=i.length;a<s;a++){var l=i[a],c=l.node;N(c,l.edgeOffset=null),M(c,null)}v.autoScroller.clear(),v.manager.active=null,v.setState({sorting:!1,sortingIndex:null}),"function"==typeof o&&o({collection:r,newIndex:v.newIndex,oldIndex:v.index},e),v.touched=!1}),O(x(x(v)),"autoscroll",function(){v.props.disableAutoscroll||v.autoScroller.update({height:v.height,maxTranslate:v.maxTranslate,minTranslate:v.minTranslate,translate:v.translate,width:v.width})}),O(x(x(v)),"onAutoScroll",function(e){v.translate.x+=e.left,v.translate.y+=e.top,v.animateNodes()}),T(!((t=e).distance&&t.pressDelay),"Attempted to set both `pressDelay` and `distance` on SortableContainer, you may only use one or the other, not both at the same time."),v.state={},v.manager=new C,v.events={end:v.handleEnd,move:v.handleMove,start:v.handleStart},v}return S(n,e),p(n,[{key:"getChildContext",value:function(){return{manager:this.manager}}},{key:"componentDidMount",value:function(){var n=this,o=this.props.useWindowAsScrollContainer,e=this.getContainer();Promise.resolve(e).then(function(e){n.container=e,n.document=n.container.ownerDocument||document;var t=n.props.contentWindow||n.document.defaultView||window;n.contentWindow="function"==typeof t?t():t,n.scrollContainer=o?n.document.scrollingElement||n.document.documentElement:B(n.container)||n.container,n.autoScroller=new J(n.scrollContainer,n.onAutoScroll),Object.keys(n.events).forEach(function(t){return E[t].forEach(function(e){return n.container.addEventListener(e,n.events[t],!1)})})})}},{key:"componentWillUnmount",value:function(){var n=this;this.container&&Object.keys(this.events).forEach(function(t){return E[t].forEach(function(e){return n.container.removeEventListener(e,n.events[t])})})}},{key:"updateHelperPosition",value:function(e){var t=this.props,n=t.lockAxis,o=t.lockOffset,r=t.lockToContainerEdges,i=H(e),a={x:i.x-this.initialOffset.x,y:i.y-this.initialOffset.y};if(a.y-=window.pageYOffset-this.initialWindowScroll.top,a.x-=window.pageXOffset-this.initialWindowScroll.left,this.translate=a,r){var s=function(e){var t=e.height,n=e.width,o=e.lockOffset,r=Array.isArray(o)?o:[o,o];T(2===r.length,"lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given %s",o);var i=y(r,2),a=i[0],s=i[1];return[_({height:t,lockOffset:a,width:n}),_({height:t,lockOffset:s,width:n})]}({height:this.height,lockOffset:o,width:this.width}),l=y(s,2),c=l[0],u=l[1],f=this.width/2-c.x,h=this.height/2-c.y,d=this.width/2-u.x,p=this.height/2-u.y;a.x=W(this.minTranslate.x+f,this.maxTranslate.x-d,a.x),a.y=W(this.minTranslate.y+h,this.maxTranslate.y-p,a.y)}"x"===n?a.y=0:"y"===n&&(a.x=0),N(this.helper,a)}},{key:"animateNodes",value:function(){var e=this.props,t=e.transitionDuration,n=e.hideSortableGhost,o=e.onSortOver,r=this.manager.getOrderedRefs(),i=this.scrollContainer.scrollLeft-this.initialScroll.left,a=this.scrollContainer.scrollTop-this.initialScroll.top,s=this.offsetEdge.left+this.translate.x+i,l=this.offsetEdge.top+this.translate.y+a,c=window.pageXOffset-this.initialWindowScroll.left,u=window.pageYOffset-this.initialWindowScroll.top,f=this.newIndex;this.newIndex=null;for(var h=0,d=r.length;h<d;h++){var p=r[h].node,y=p.sortableInfo.index,g=p.offsetWidth,v=p.offsetHeight,m=this.height>v?v/2:this.height/2,x=this.width>g?g/2:this.width/2,b={x:0,y:0},w=r[h].edgeOffset;w||(w=L(p,this.container),r[h].edgeOffset=w);var S=h<r.length-1&&r[h+1],O=0<h&&r[h-1];S&&!S.edgeOffset&&(S.edgeOffset=L(S.node,this.container)),y!==this.index?(t&&M(p,t),this.axis.x?this.axis.y?y<this.index&&(s+c-x<=w.left&&l+u<=w.top+m||l+u+m<=w.top)?(b.x=this.width+this.marginOffset.x,w.left+b.x>this.containerBoundingRect.width-x&&S&&(b.x=S.edgeOffset.left-w.left,b.y=S.edgeOffset.top-w.top),null===this.newIndex&&(this.newIndex=y)):y>this.index&&(s+c+x>=w.left&&l+u+m>=w.top||l+u+m>=w.top+v)&&(b.x=-(this.width+this.marginOffset.x),w.left+b.x<this.containerBoundingRect.left+x&&O&&(b.x=O.edgeOffset.left-w.left,b.y=O.edgeOffset.top-w.top),this.newIndex=y):y>this.index&&s+c+x>=w.left?(b.x=-(this.width+this.marginOffset.x),this.newIndex=y):y<this.index&&s+c<=w.left+x&&(b.x=this.width+this.marginOffset.x,null==this.newIndex&&(this.newIndex=y)):this.axis.y&&(y>this.index&&l+u+m>=w.top?(b.y=-(this.height+this.marginOffset.y),this.newIndex=y):y<this.index&&l+u<=w.top+m&&(b.y=this.height+this.marginOffset.y,null==this.newIndex&&(this.newIndex=y))),N(p,b)):n&&R(this.sortableGhost=p,{opacity:0,visibility:"hidden"})}null==this.newIndex&&(this.newIndex=this.index),o&&this.newIndex!==f&&o({collection:this.manager.active.collection,index:this.index,newIndex:this.newIndex,oldIndex:f})}},{key:"getWrappedInstance",value:function(){return T(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableContainer() call"),this.refs.wrappedInstance}},{key:"getContainer",value:function(){var e=this.props.getContainer;return"function"!=typeof e?a.findDOMNode(this):e(o.withRef?this.getWrappedInstance():void 0)}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(t,s({ref:e},k(this.props,Z)))}},{key:"helperContainer",get:function(){var e=this.props.helperContainer;return"function"==typeof e?e():this.props.helperContainer||this.document.body}}]),n}(r.Component),O(e,"displayName",P("sortableList",t)),O(e,"defaultProps",Q),O(e,"propTypes",K),O(e,"childContextTypes",{manager:i.object.isRequired}),n}var te={index:i.number.isRequired,collection:i.oneOfType([i.number,i.string]),disabled:i.bool},ne=Object.keys(te);function oe(n){var e,t,o=1<arguments.length&&void 0!==arguments[1]?arguments[1]:{withRef:!1};return t=e=function(e){function t(){return h(this,t),b(this,w(t).apply(this,arguments))}return S(t,e),p(t,[{key:"componentDidMount",value:function(){this.register()}},{key:"componentDidUpdate",value:function(e){this.node&&(e.index!==this.props.index&&(this.node.sortableInfo.index=this.props.index),e.disabled!==this.props.disabled&&(this.node.sortableInfo.disabled=this.props.disabled)),e.collection!==this.props.collection&&(this.unregister(e.collection),this.register())}},{key:"componentWillUnmount",value:function(){this.unregister()}},{key:"register",value:function(){var e=this.props,t=e.collection,n=e.disabled,o=e.index,r=a.findDOMNode(this);r.sortableInfo={collection:t,disabled:n,index:o,manager:this.context.manager},this.node=r,this.ref={node:r},this.context.manager.add(t,this.ref)}},{key:"unregister",value:function(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:this.props.collection;this.context.manager.remove(e,this.ref)}},{key:"getWrappedInstance",value:function(){return T(o.withRef,"To access the wrapped instance, you need to pass in {withRef: true} as the second argument of the SortableElement() call"),this.refs.wrappedInstance}},{key:"render",value:function(){var e=o.withRef?"wrappedInstance":null;return r.createElement(n,s({ref:e},k(this.props,ne)))}}]),t}(r.Component),O(e,"displayName",P("sortableElement",n)),O(e,"contextTypes",{manager:i.object.isRequired}),O(e,"propTypes",te),O(e,"defaultProps",{collection:0}),t}e.SortableContainer=ee,e.sortableContainer=ee,e.SortableElement=oe,e.sortableElement=oe,e.SortableHandle=V,e.sortableHandle=V,e.arrayMove=function(e,t,n){return(e=e.slice()).splice(n<0?e.length+n:n,0,e.splice(t,1)[0]),e},Object.defineProperty(e,"__esModule",{value:!0})});

2

examples/basic.js
import React, {Component} from 'react';
import {render} from 'react-dom';
import {sortableContainer, sortableElement} from 'react-sortable-hoc';
import {arrayMove} from 'array-move';
import arrayMove from 'array-move';

@@ -6,0 +6,0 @@ const SortableItem = sortableElement(({value}) => <li>{value}</li>);

11

package.json
{
"name": "react-sortable-hoc",
"version": "1.7.1",
"version": "1.8.0",
"description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list",

@@ -57,2 +57,3 @@ "author": {

"peerDependencies": {
"prop-types": "^15.5.7",
"react": "^0.14.0 || ^15.0.0 || ^16.0.0",

@@ -67,4 +68,6 @@ "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0"

"@babel/preset-react": "^7.0.0",
"@storybook/addon-options": "^4.1.4",
"@storybook/react": "^4.1.4",
"@storybook/addon-options": "^5.0.1",
"@storybook/react": "^5.0.2",
"@storybook/theming": "^5.0.1",
"array-move": "^1.0.0",
"autoprefixer": "^6.3.6",

@@ -94,2 +97,3 @@ "babel-loader": "^8.0.5",

"react-virtualized": "^9.2.2",
"react-window": "^1.6.2",
"rollup": "^1.0.0",

@@ -100,2 +104,3 @@ "rollup-plugin-babel": "^4.2.0",

"rollup-plugin-node-resolve": "^4.0.0",
"rollup-plugin-replace": "^2.1.0",
"rollup-plugin-uglify": "^6.0.0",

@@ -102,0 +107,0 @@ "sass-loader": "^7.1.0",

13

README.md

@@ -1,2 +0,2 @@

# React Sortable (HOC)
# <img src="https://user-images.githubusercontent.com/1416436/54170652-dfd59d80-444d-11e9-9c51-658638c0454b.png" width="400" alt="React Sortable HOC" />

@@ -53,7 +53,4 @@ > A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.

import {render} from 'react-dom';
import {
SortableContainer,
SortableElement,
arrayMove,
} from 'react-sortable-hoc';
import {SortableContainer, SortableElement} from 'react-sortable-hoc';
import arrayMove from 'array-move';

@@ -193,4 +190,6 @@ const SortableItem = SortableElement(({value}) => <li>{value}</li>);

If believe you've found an issue, please [report it](https://github.com/clauderic/react-sortable-hoc/issues) along with any relevant details to reproduce it. The easiest way to do so is to fork this [jsfiddle](https://jsfiddle.net/clauderic/6r7r2cva/).
If believe you've found an issue, please [report it](https://github.com/clauderic/react-sortable-hoc/issues) along with any relevant details to reproduce it. The easiest way to do so is to fork the `react-sortable-hoc` basic setup sandbox on [CodeSandbox](https://codesandbox.io/s/o104x95y86):
[![Edit o104x95y86](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/o104x95y86)
## Asking for help

@@ -197,0 +196,0 @@

6

rollup.config.js

@@ -0,1 +1,2 @@

import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';

@@ -55,2 +56,7 @@ import commonjs from 'rollup-plugin-commonjs';

),
replace({
'process.env.NODE_ENV': JSON.stringify(
minify ? 'production' : 'development',
),
}),
commonjs(),

@@ -57,0 +63,0 @@ minify && uglify(),

1

types/index.d.ts

@@ -91,2 +91,3 @@ import * as React from 'react';

| React.ComponentClass<P>
| React.SFC<P>
| WrappedComponentFactory<P>;

@@ -93,0 +94,0 @@ 

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc