From 82a3c8044268888f1a269ee4de775b1db7002e03 Mon Sep 17 00:00:00 2001 From: Oleg Date: Tue, 4 Feb 2020 16:21:01 -0500 Subject: [PATCH 01/12] Add files via upload add ability to override scroll container --- src/SortableContainer/index.js | 2 +- src/utils.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index e555d8433..abebb5e68 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -91,7 +91,7 @@ export default function sortableContainer( this.scrollContainer = useWindowAsScrollContainer ? this.document.scrollingElement || this.document.documentElement - : getScrollingParent(this.container) || this.container; + : getScrollingParent(this.container, this.props.scrollContainer) || this.container; this.autoScroller = new AutoScroller( this.scrollContainer, diff --git a/src/utils.js b/src/utils.js index b62704ea4..e9ffb4244 100644 --- a/src/utils.js +++ b/src/utils.js @@ -249,7 +249,10 @@ function isScrollable(el) { ); } -export function getScrollingParent(el) { +export function getScrollingParent(el, container = false) { + if (container) { + return document.querySelector(container) + } if (!(el instanceof HTMLElement)) { return null; } else if (isScrollable(el)) { From c0784ddecff80b285614a0103555501baa8c7546 Mon Sep 17 00:00:00 2001 From: Oleg Date: Tue, 4 Feb 2020 16:46:00 -0500 Subject: [PATCH 02/12] Add files via upload build --- dist/react-sortable-hoc.esm.js | 1593 ++++++++++++++++++++++++ dist/react-sortable-hoc.js | 1605 ++++++++++++++++++++++++ dist/react-sortable-hoc.umd.js | 1863 ++++++++++++++++++++++++++++ dist/react-sortable-hoc.umd.min.js | 1 + 4 files changed, 5062 insertions(+) create mode 100644 dist/react-sortable-hoc.esm.js create mode 100644 dist/react-sortable-hoc.js create mode 100644 dist/react-sortable-hoc.umd.js create mode 100644 dist/react-sortable-hoc.umd.min.js diff --git a/dist/react-sortable-hoc.esm.js b/dist/react-sortable-hoc.esm.js new file mode 100644 index 000000000..4ba228a97 --- /dev/null +++ b/dist/react-sortable-hoc.esm.js @@ -0,0 +1,1593 @@ +import _extends from '@babel/runtime/helpers/esm/extends'; +import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'; +import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck'; +import _createClass from '@babel/runtime/helpers/esm/createClass'; +import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn'; +import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf'; +import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized'; +import _inherits from '@babel/runtime/helpers/esm/inherits'; +import _defineProperty from '@babel/runtime/helpers/esm/defineProperty'; +import { createElement, Component } from 'react'; +import PropTypes from 'prop-types'; +import { findDOMNode } from 'react-dom'; +import invariant from 'invariant'; +import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray'; + +var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; +}(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] +}; +var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +}(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; +} +function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } +} +function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; +} +function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; +} +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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); +} + +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(WithSortableContainer).call(this, props)); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread({}, event, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0, + visibility: 'hidden' + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '', + visibility: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread({}, defaultKeyCodes, {}, customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0, + visibility: 'hidden' + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableElement).apply(this, arguments)); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; +} + +export { sortableContainer as SortableContainer, sortableElement as SortableElement, sortableHandle as SortableHandle, arrayMove, sortableContainer, sortableElement, sortableHandle }; diff --git a/dist/react-sortable-hoc.js b/dist/react-sortable-hoc.js new file mode 100644 index 000000000..ee891ea79 --- /dev/null +++ b/dist/react-sortable-hoc.js @@ -0,0 +1,1605 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } + +var _extends = _interopDefault(require('@babel/runtime/helpers/extends')); +var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray')); +var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck')); +var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass')); +var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn')); +var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf')); +var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized')); +var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits')); +var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty')); +var React = require('react'); +var PropTypes = _interopDefault(require('prop-types')); +var reactDom = require('react-dom'); +var invariant = _interopDefault(require('invariant')); +var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray')); + +var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; +}(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] +}; +var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +}(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; +} +function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } +} +function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; +} +function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; +} +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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); +} + +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(WithSortableContainer).call(this, props)); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread({}, event, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0, + visibility: 'hidden' + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '', + visibility: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread({}, defaultKeyCodes, {}, customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0, + visibility: 'hidden' + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableElement).apply(this, arguments)); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; +} + +exports.SortableContainer = sortableContainer; +exports.SortableElement = sortableElement; +exports.SortableHandle = sortableHandle; +exports.arrayMove = arrayMove; +exports.sortableContainer = sortableContainer; +exports.sortableElement = sortableElement; +exports.sortableHandle = sortableHandle; diff --git a/dist/react-sortable-hoc.umd.js b/dist/react-sortable-hoc.umd.js new file mode 100644 index 000000000..06320a032 --- /dev/null +++ b/dist/react-sortable-hoc.umd.js @@ -0,0 +1,1863 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-dom')) : + typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) : + (global = global || self, factory(global.SortableHOC = {}, global.React, global.PropTypes, global.ReactDOM)); +}(this, (function (exports, React, PropTypes, reactDom) { 'use strict'; + + PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; + + function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; + } + + var _extends_1 = createCommonjsModule(function (module) { + function _extends() { + module.exports = _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } + + module.exports = _extends; + }); + + function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; + } + + var arrayWithHoles = _arrayWithHoles; + + function _iterableToArrayLimit(arr, i) { + if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { + return; + } + + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; + } + + var iterableToArrayLimit = _iterableToArrayLimit; + + function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance"); + } + + var nonIterableRest = _nonIterableRest; + + function _slicedToArray(arr, i) { + return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest(); + } + + var slicedToArray = _slicedToArray; + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + var classCallCheck = _classCallCheck; + + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + var createClass = _createClass; + + var _typeof_1 = createCommonjsModule(function (module) { + function _typeof(obj) { + "@babel/helpers - typeof"; + + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + module.exports = _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + module.exports = _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); + } + + module.exports = _typeof; + }); + + function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; + } + + var assertThisInitialized = _assertThisInitialized; + + function _possibleConstructorReturn(self, call) { + if (call && (_typeof_1(call) === "object" || typeof call === "function")) { + return call; + } + + return assertThisInitialized(self); + } + + var possibleConstructorReturn = _possibleConstructorReturn; + + var getPrototypeOf = createCommonjsModule(function (module) { + function _getPrototypeOf(o) { + module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); + } + + module.exports = _getPrototypeOf; + }); + + var setPrototypeOf = createCommonjsModule(function (module) { + function _setPrototypeOf(o, p) { + module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf(o, p); + } + + module.exports = _setPrototypeOf; + }); + + function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + if (superClass) setPrototypeOf(subClass, superClass); + } + + var inherits = _inherits; + + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; + } + + var defineProperty = _defineProperty; + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + var invariant = function(condition, format, a, b, c, d, e, f) { + { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + } + + if (!condition) { + var error; + if (format === undefined) { + error = new Error( + 'Minified exception occurred; use the non-minified dev environment ' + + 'for the full error message and additional helpful warnings.' + ); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error( + format.replace(/%s/g, function() { return args[argIndex++]; }) + ); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } + }; + + var invariant_1 = invariant; + + var Manager = function () { + function Manager() { + classCallCheck(this, Manager); + + defineProperty(this, "refs", {}); + } + + createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; + }(); + + function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; + } + + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { + arr2[i] = arr[i]; + } + + return arr2; + } + } + + var arrayWithoutHoles = _arrayWithoutHoles; + + function _iterableToArray(iter) { + if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); + } + + var iterableToArray = _iterableToArray; + + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance"); + } + + var nonIterableSpread = _nonIterableSpread; + + function _toConsumableArray(arr) { + return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread(); + } + + var toConsumableArray = _toConsumableArray; + + 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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; + } + function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); + } + var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] + }; + var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } + }(); + 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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; + } + function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); + } + + function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; + } + + function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; + } + function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; + } + function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; + } + function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } + } + function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; + } + function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); + } + function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } + } + function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant_1(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant_1(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; + } + 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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } + } + function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; + } + var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 + }; + var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' + }; + function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; + } + + 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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool + }; + var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] + }; + var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + + function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + + function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); + } + + function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + inherits(WithSortableContainer, _React$Component); + + function WithSortableContainer(props) { + var _this; + + classCallCheck(this, WithSortableContainer); + + _this = possibleConstructorReturn(this, getPrototypeOf(WithSortableContainer).call(this, props)); + + defineProperty(assertThisInitialized(_this), "state", {}); + + defineProperty(assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + defineProperty(assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + defineProperty(assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + defineProperty(assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + defineProperty(assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + defineProperty(assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread({}, event, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0, + visibility: 'hidden' + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + defineProperty(assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + defineProperty(assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '', + visibility: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + defineProperty(assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + defineProperty(assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + defineProperty(assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread({}, defaultKeyCodes, {}, customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + defineProperty(assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + defineProperty(assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + defineProperty(assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + defineProperty(assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + defineProperty(assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0, + visibility: 'hidden' + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends_1({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), defineProperty(_class, "defaultProps", defaultProps), defineProperty(_class, "propTypes", propTypes), defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + inherits(WithSortableElement, _React$Component); + + function WithSortableElement() { + classCallCheck(this, WithSortableElement); + + return possibleConstructorReturn(this, getPrototypeOf(WithSortableElement).apply(this, arguments)); + } + + createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends_1({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), defineProperty(_class, "propTypes", propTypes$1), defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; + } + + exports.SortableContainer = sortableContainer; + exports.SortableElement = sortableElement; + exports.SortableHandle = sortableHandle; + exports.arrayMove = arrayMove; + exports.sortableContainer = sortableContainer; + exports.sortableElement = sortableElement; + exports.sortableHandle = sortableHandle; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); diff --git a/dist/react-sortable-hoc.umd.min.js b/dist/react-sortable-hoc.umd.min.js new file mode 100644 index 000000000..f833ee3d5 --- /dev/null +++ b/dist/react-sortable-hoc.umd.min.js @@ -0,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=r.y-a/2&&!v?(s.y=1,l.y=d*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&&!y?(s.y=-1,l.y=d*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 Q={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,keyboardSortingTransitionDuration:i.number,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,keyCodes:i.shape({lift:i.arrayOf(i.number),drop:i.arrayOf(i.number),cancel:i.arrayOf(i.number),up:i.arrayOf(i.number),down:i.arrayOf(i.number)}),shouldCancelStart:i.func,transitionDuration:i.number,updateBeforeSortStart:i.func,useDragHandle:i.bool,useWindowAsScrollContainer:i.bool},Z={lift:[X],drop:[X],cancel:[B],up:[U,q],down:[F,Y]},ee={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,keyCodes:Z,shouldCancelStart:function(e){return-1!==[V.Input,V.Textarea,V.Select,V.Option,V.Button].indexOf(e.target.tagName)||!!M(e.target,function(e){return"true"===e.contentEditable})},transitionDuration:300,useWindowAsScrollContainer:!1},te=Object.keys(Q);function ne(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)}return n}function oe(t){for(var e=1;ey?y/2:this.height/2,m=this.width>g?g/2:this.width/2,x=c&&p>this.index&&p<=d,b=c&&pthis.containerBoundingRect.width-m&&O&&(w.x=O.edgeOffset.left-S.left,w.y=O.edgeOffset.top-S.top),null===this.newIndex&&(this.newIndex=p)):(x||p>this.index&&(s+i.left+m>=S.left&&l+i.top+v>=S.top||l+i.top+v>=S.top+y))&&(w.x=-(this.width+this.marginOffset.x),S.left+w.xthis.index&&s+i.left+m>=S.left?(w.x=-(this.width+this.marginOffset.x),this.newIndex=p):(b||pthis.index&&l+i.top+v>=S.top?(w.y=-(this.height+this.marginOffset.y),this.newIndex=p):(b||p Date: Thu, 25 Feb 2021 17:35:27 +0300 Subject: [PATCH 03/12] bug/VISME-2771-image-icon-transparent-image-during-dragging-with-react-sortable-hoc - removed inline updating the visibility of sortable ghost element --- dist/react-sortable-hoc.esm.js | 1593 ------------------------ dist/react-sortable-hoc.js | 1605 ------------------------ dist/react-sortable-hoc.umd.js | 1863 ---------------------------- dist/react-sortable-hoc.umd.min.js | 1 - src/SortableContainer/index.js | 9 +- src/utils.js | 2 +- 6 files changed, 6 insertions(+), 5067 deletions(-) delete mode 100644 dist/react-sortable-hoc.esm.js delete mode 100644 dist/react-sortable-hoc.js delete mode 100644 dist/react-sortable-hoc.umd.js delete mode 100644 dist/react-sortable-hoc.umd.min.js diff --git a/dist/react-sortable-hoc.esm.js b/dist/react-sortable-hoc.esm.js deleted file mode 100644 index 4ba228a97..000000000 --- a/dist/react-sortable-hoc.esm.js +++ /dev/null @@ -1,1593 +0,0 @@ -import _extends from '@babel/runtime/helpers/esm/extends'; -import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'; -import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck'; -import _createClass from '@babel/runtime/helpers/esm/createClass'; -import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn'; -import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf'; -import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized'; -import _inherits from '@babel/runtime/helpers/esm/inherits'; -import _defineProperty from '@babel/runtime/helpers/esm/defineProperty'; -import { createElement, Component } from 'react'; -import PropTypes from 'prop-types'; -import { findDOMNode } from 'react-dom'; -import invariant from 'invariant'; -import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray'; - -var Manager = function () { - function Manager() { - _classCallCheck(this, Manager); - - _defineProperty(this, "refs", {}); - } - - _createClass(Manager, [{ - key: "add", - value: function add(collection, ref) { - if (!this.refs[collection]) { - this.refs[collection] = []; - } - - this.refs[collection].push(ref); - } - }, { - key: "remove", - value: function remove(collection, ref) { - var index = this.getIndex(collection, ref); - - if (index !== -1) { - this.refs[collection].splice(index, 1); - } - } - }, { - key: "isActive", - value: function isActive() { - return this.active; - } - }, { - key: "getActive", - value: function getActive() { - var _this = this; - - return this.refs[this.active.collection].find(function (_ref) { - var node = _ref.node; - return node.sortableInfo.index == _this.active.index; - }); - } - }, { - key: "getIndex", - value: function getIndex(collection, ref) { - return this.refs[collection].indexOf(ref); - } - }, { - key: "getOrderedRefs", - value: function getOrderedRefs() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; - return this.refs[collection].sort(sortByIndex); - } - }]); - - return Manager; -}(); - -function sortByIndex(_ref2, _ref3) { - var index1 = _ref2.node.sortableInfo.index; - var index2 = _ref3.node.sortableInfo.index; - return index1 - index2; -} - -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(); - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); - return array; -} -function omit(obj, keysToOmit) { - return Object.keys(obj).reduce(function (acc, key) { - if (keysToOmit.indexOf(key) === -1) { - acc[key] = obj[key]; - } - - return acc; - }, {}); -} -var events = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'] -}; -var vendorPrefix = function () { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return ''; - } - - var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; - var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; - - switch (pre) { - case 'ms': - return 'ms'; - - default: - return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; - } -}(); -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) { - while (el) { - if (fn(el)) { - return el; - } - - el = el.parentNode; - } - - return null; -} -function limit(min, max, value) { - return Math.max(min, Math.min(value, max)); -} - -function getPixelValue(stringValue) { - if (stringValue.substr(-2) === 'px') { - return parseFloat(stringValue); - } - - return 0; -} - -function getElementMargin(element) { - var style = window.getComputedStyle(element); - return { - bottom: getPixelValue(style.marginBottom), - left: getPixelValue(style.marginLeft), - right: getPixelValue(style.marginRight), - top: getPixelValue(style.marginTop) - }; -} -function provideDisplayName(prefix, Component) { - var componentName = Component.displayName || Component.name; - return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; -} -function getScrollAdjustedBoundingClientRect(node, scrollDelta) { - var boundingClientRect = node.getBoundingClientRect(); - return { - top: boundingClientRect.top + scrollDelta.top, - left: boundingClientRect.left + scrollDelta.left - }; -} -function getPosition(event) { - if (event.touches && event.touches.length) { - return { - x: event.touches[0].pageX, - y: event.touches[0].pageY - }; - } else if (event.changedTouches && event.changedTouches.length) { - return { - x: event.changedTouches[0].pageX, - y: event.changedTouches[0].pageY - }; - } else { - return { - x: event.pageX, - y: event.pageY - }; - } -} -function isTouchEvent(event) { - return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; -} -function getEdgeOffset(node, parent) { - var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { - left: 0, - top: 0 - }; - - if (!node) { - return undefined; - } - - var nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop - }; - - if (node.parentNode === parent) { - return nodeOffset; - } - - return getEdgeOffset(node.parentNode, parent, nodeOffset); -} -function getTargetIndex(newIndex, prevIndex, oldIndex) { - if (newIndex < oldIndex && newIndex > prevIndex) { - return newIndex - 1; - } else if (newIndex > oldIndex && newIndex < prevIndex) { - return newIndex + 1; - } else { - return newIndex; - } -} -function getLockPixelOffset(_ref) { - var lockOffset = _ref.lockOffset, - width = _ref.width, - height = _ref.height; - var offsetX = lockOffset; - var offsetY = lockOffset; - var unit = 'px'; - - if (typeof lockOffset === 'string') { - var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); - invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); - offsetX = parseFloat(lockOffset); - offsetY = parseFloat(lockOffset); - unit = match[1]; - } - - invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); - - if (unit === '%') { - offsetX = offsetX * width / 100; - offsetY = offsetY * height / 100; - } - - return { - x: offsetX, - y: offsetY - }; -} -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) { - var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - if (container) { - return document.querySelector(container); - } - - if (!(el instanceof HTMLElement)) { - return null; - } else if (isScrollable(el)) { - return el; - } else { - return getScrollingParent(el.parentNode); - } -} -function getContainerGridGap(element) { - var style = window.getComputedStyle(element); - - if (style.display === 'grid') { - return { - x: getPixelValue(style.gridColumnGap), - y: getPixelValue(style.gridRowGap) - }; - } - - return { - x: 0, - y: 0 - }; -} -var KEYCODE = { - TAB: 9, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40 -}; -var NodeType = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT' -}; -function cloneNode(node) { - var selector = 'input, textarea, select, canvas, [contenteditable]'; - var fields = node.querySelectorAll(selector); - var clonedNode = node.cloneNode(true); - - var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); - - clonedFields.forEach(function (field, i) { - if (field.type !== 'file') { - field.value = fields[i].value; - } - - if (field.type === 'radio' && field.name) { - field.name = "__sortableClone__".concat(field.name); - } - - if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { - var destCtx = field.getContext('2d'); - destCtx.drawImage(fields[i], 0, 0); - } - }); - return clonedNode; -} - -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() { - if (this.interval == null) { - return; - } - - 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; - - if (interactiveElements.indexOf(event.target.tagName) !== -1) { - return true; - } - - if (closest(event.target, function (el) { - return el.contentEditable === 'true'; - })) { - 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, - keyboardSortingTransitionDuration: PropTypes.number, - 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, - keyCodes: PropTypes.shape({ - lift: PropTypes.arrayOf(PropTypes.number), - drop: PropTypes.arrayOf(PropTypes.number), - cancel: PropTypes.arrayOf(PropTypes.number), - up: PropTypes.arrayOf(PropTypes.number), - down: PropTypes.arrayOf(PropTypes.number) - }), - shouldCancelStart: PropTypes.func, - transitionDuration: PropTypes.number, - updateBeforeSortStart: PropTypes.func, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool -}; -var defaultKeyCodes = { - lift: [KEYCODE.SPACE], - drop: [KEYCODE.SPACE], - cancel: [KEYCODE.ESC], - up: [KEYCODE.UP, KEYCODE.LEFT], - down: [KEYCODE.DOWN, KEYCODE.RIGHT] -}; -var defaultProps = { - axis: 'y', - disableAutoscroll: false, - distance: 0, - getHelperDimensions: defaultGetHelperDimensions, - hideSortableGhost: true, - lockOffset: '50%', - lockToContainerEdges: false, - pressDelay: 0, - pressThreshold: 5, - keyCodes: defaultKeyCodes, - 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _finallyRethrows(body, finalizer) { - try { - var result = body(); - } catch (e) { - return finalizer(true, e); - } - - if (result && result.then) { - return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); - } - - return finalizer(false, result); -} - -function sortableContainer(WrappedComponent) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableContainer, _React$Component); - - function WithSortableContainer(props) { - var _this; - - _classCallCheck(this, WithSortableContainer); - - _this = _possibleConstructorReturn(this, _getPrototypeOf(WithSortableContainer).call(this, props)); - - _defineProperty(_assertThisInitialized(_this), "state", {}); - - _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { - var _this$props = _this.props, - distance = _this$props.distance, - shouldCancelStart = _this$props.shouldCancelStart; - - if (event.button === 2 || shouldCancelStart(event)) { - return; - } - - _this.touched = true; - _this.position = getPosition(event); - var node = closest(event.target, function (el) { - return el.sortableInfo != null; - }); - - if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { - var useDragHandle = _this.props.useDragHandle; - var _node$sortableInfo = node.sortableInfo, - index = _node$sortableInfo.index, - collection = _node$sortableInfo.collection, - disabled = _node$sortableInfo.disabled; - - if (disabled) { - return; - } - - if (useDragHandle && !closest(event.target, isSortableHandle)) { - return; - } - - _this.manager.active = { - collection: collection, - index: index - }; - - if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { - event.preventDefault(); - } - - if (!distance) { - if (_this.props.pressDelay === 0) { - _this.handlePress(event); - } else { - _this.pressTimer = setTimeout(function () { - return _this.handlePress(event); - }, _this.props.pressDelay); - } - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { - return node.sortableInfo.manager === _this.manager; - }); - - _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { - var _this$props2 = _this.props, - distance = _this$props2.distance, - pressThreshold = _this$props2.pressThreshold; - - if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { - var position = getPosition(event); - var delta = { - x: _this.position.x - position.x, - y: _this.position.y - position.y - }; - var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); - _this.delta = delta; - - if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { - clearTimeout(_this.cancelTimer); - _this.cancelTimer = setTimeout(_this.cancel, 0); - } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { - _this.handlePress(event); - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { - _this.touched = false; - - _this.cancel(); - }); - - _defineProperty(_assertThisInitialized(_this), "cancel", function () { - var distance = _this.props.distance; - var sorting = _this.state.sorting; - - if (!sorting) { - if (!distance) { - clearTimeout(_this.pressTimer); - } - - _this.manager.active = null; - } - }); - - _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { - try { - var active = _this.manager.getActive(); - - var _temp6 = function () { - if (active) { - var _temp7 = function _temp7() { - var index = _node.sortableInfo.index; - var margin = getElementMargin(_node); - var gridGap = getContainerGridGap(_this.container); - - var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); - - var dimensions = _getHelperDimensions({ - index: index, - node: _node, - collection: _collection - }); - - _this.node = _node; - _this.margin = margin; - _this.gridGap = gridGap; - _this.width = dimensions.width; - _this.height = dimensions.height; - _this.marginOffset = { - x: _this.margin.left + _this.margin.right + _this.gridGap.x, - y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) - }; - _this.boundingClientRect = _node.getBoundingClientRect(); - _this.containerBoundingRect = containerBoundingRect; - _this.index = index; - _this.newIndex = index; - _this.axis = { - x: _axis.indexOf('x') >= 0, - y: _axis.indexOf('y') >= 0 - }; - _this.offsetEdge = getEdgeOffset(_node, _this.container); - - if (_isKeySorting) { - _this.initialOffset = getPosition(_objectSpread({}, event, { - pageX: _this.boundingClientRect.left, - pageY: _this.boundingClientRect.top - })); - } else { - _this.initialOffset = getPosition(event); - } - - _this.initialScroll = { - left: _this.scrollContainer.scrollLeft, - top: _this.scrollContainer.scrollTop - }; - _this.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset - }; - _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); - 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 (_isKeySorting) { - _this.helper.focus(); - } - - if (_hideSortableGhost) { - _this.sortableGhost = _node; - setInlineStyles(_node, { - opacity: 0, - visibility: 'hidden' - }); - } - - _this.minTranslate = {}; - _this.maxTranslate = {}; - - if (_isKeySorting) { - var _ref = _useWindowAsScrollContainer ? { - top: 0, - left: 0, - width: _this.contentWindow.innerWidth, - height: _this.contentWindow.innerHeight - } : _this.containerBoundingRect, - containerTop = _ref.top, - containerLeft = _ref.left, - containerWidth = _ref.width, - containerHeight = _ref.height; - - var containerBottom = containerTop + containerHeight; - var containerRight = containerLeft + containerWidth; - - if (_this.axis.x) { - _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; - _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); - } - - if (_this.axis.y) { - _this.minTranslate.y = containerTop - _this.boundingClientRect.top; - _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); - } - } else { - if (_this.axis.x) { - _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; - _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; - } - - if (_this.axis.y) { - _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; - _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; - } - } - - if (_helperClass) { - _helperClass.split(' ').forEach(function (className) { - return _this.helper.classList.add(className); - }); - } - - _this.listenerNode = event.touches ? _node : _this.contentWindow; - - if (_isKeySorting) { - _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); - }); - } - - _this.setState({ - sorting: true, - sortingIndex: index - }); - - if (_onSortStart) { - _onSortStart({ - node: _node, - index: index, - collection: _collection, - isKeySorting: _isKeySorting, - nodes: _this.manager.getOrderedRefs(), - helper: _this.helper - }, event); - } - - if (_isKeySorting) { - _this.keyMove(0); - } - }; - - var _this$props3 = _this.props, - _axis = _this$props3.axis, - _getHelperDimensions = _this$props3.getHelperDimensions, - _helperClass = _this$props3.helperClass, - _hideSortableGhost = _this$props3.hideSortableGhost, - updateBeforeSortStart = _this$props3.updateBeforeSortStart, - _onSortStart = _this$props3.onSortStart, - _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; - var _node = active.node, - _collection = active.collection; - var _isKeySorting = _this.manager.isKeySorting; - - var _temp8 = function () { - if (typeof updateBeforeSortStart === 'function') { - _this._awaitingUpdateBeforeSortStart = true; - - var _temp9 = _finallyRethrows(function () { - var index = _node.sortableInfo.index; - return Promise.resolve(updateBeforeSortStart({ - collection: _collection, - index: index, - node: _node, - isKeySorting: _isKeySorting - }, event)).then(function () {}); - }, function (_wasThrown, _result) { - _this._awaitingUpdateBeforeSortStart = false; - if (_wasThrown) throw _result; - return _result; - }); - - if (_temp9 && _temp9.then) return _temp9.then(function () {}); - } - }(); - - return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); - } - }(); - - return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); - } catch (e) { - return Promise.reject(e); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { - var onSortMove = _this.props.onSortMove; - - if (typeof event.preventDefault === 'function') { - event.preventDefault(); - } - - _this.updateHelperPosition(event); - - _this.animateNodes(); - - _this.autoscroll(); - - if (onSortMove) { - onSortMove(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { - var _this$props4 = _this.props, - hideSortableGhost = _this$props4.hideSortableGhost, - onSortEnd = _this$props4.onSortEnd; - var _this$manager = _this.manager, - collection = _this$manager.active.collection, - isKeySorting = _this$manager.isKeySorting; - - var nodes = _this.manager.getOrderedRefs(); - - if (_this.listenerNode) { - if (isKeySorting) { - _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); - }); - } - } - - _this.helper.parentNode.removeChild(_this.helper); - - if (hideSortableGhost && _this.sortableGhost) { - setInlineStyles(_this.sortableGhost, { - opacity: '', - visibility: '' - }); - } - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node2 = nodes[i]; - var el = _node2.node; - _node2.edgeOffset = null; - _node2.boundingClientRect = null; - setTranslate3d(el, null); - setTransitionDuration(el, null); - _node2.translate = null; - } - - _this.autoScroller.clear(); - - _this.manager.active = null; - _this.manager.isKeySorting = false; - - _this.setState({ - sorting: false, - sortingIndex: null - }); - - if (typeof onSortEnd === 'function') { - onSortEnd({ - collection: collection, - newIndex: _this.newIndex, - oldIndex: _this.index, - isKeySorting: isKeySorting, - nodes: nodes - }, event); - } - - _this.touched = false; - }); - - _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { - var disableAutoscroll = _this.props.disableAutoscroll; - var isKeySorting = _this.manager.isKeySorting; - - if (disableAutoscroll) { - _this.autoScroller.clear(); - - return; - } - - if (isKeySorting) { - var translate = _objectSpread({}, _this.translate); - - var scrollX = 0; - var scrollY = 0; - - if (_this.axis.x) { - translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); - scrollX = _this.translate.x - translate.x; - } - - if (_this.axis.y) { - translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); - scrollY = _this.translate.y - translate.y; - } - - _this.translate = translate; - setTranslate3d(_this.helper, _this.translate); - _this.scrollContainer.scrollLeft += scrollX; - _this.scrollContainer.scrollTop += scrollY; - return; - } - - _this.autoScroller.update({ - height: _this.height, - maxTranslate: _this.maxTranslate, - minTranslate: _this.minTranslate, - translate: _this.translate, - width: _this.width - }); - }); - - _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { - _this.translate.x += offset.left; - _this.translate.y += offset.top; - - _this.animateNodes(); - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { - var keyCode = event.keyCode; - var _this$props5 = _this.props, - shouldCancelStart = _this$props5.shouldCancelStart, - _this$props5$keyCodes = _this$props5.keyCodes, - customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; - - var keyCodes = _objectSpread({}, defaultKeyCodes, {}, customKeyCodes); - - if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - - if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { - _this.keyLift(event); - } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { - _this.keyDrop(event); - } else if (keyCodes.cancel.includes(keyCode)) { - _this.newIndex = _this.manager.active.index; - - _this.keyDrop(event); - } else if (keyCodes.up.includes(keyCode)) { - _this.keyMove(-1); - } else if (keyCodes.down.includes(keyCode)) { - _this.keyMove(1); - } - }); - - _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - var _node$sortableInfo2 = node.sortableInfo, - index = _node$sortableInfo2.index, - collection = _node$sortableInfo2.collection; - _this.initialFocusedNode = target; - _this.manager.isKeySorting = true; - _this.manager.active = { - index: index, - collection: collection - }; - - _this.handlePress(event); - }); - - _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { - var nodes = _this.manager.getOrderedRefs(); - - var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; - var newIndex = _this.newIndex + shift; - var prevIndex = _this.newIndex; - - if (newIndex < 0 || newIndex > lastIndex) { - return; - } - - _this.prevIndex = prevIndex; - _this.newIndex = newIndex; - var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); - var target = nodes.find(function (_ref2) { - var node = _ref2.node; - return node.sortableInfo.index === targetIndex; - }); - var targetNode = target.node; - var scrollDelta = _this.containerScrollDelta; - var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); - var targetTranslate = target.translate || { - x: 0, - y: 0 - }; - var targetPosition = { - top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, - left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left - }; - var shouldAdjustForSize = prevIndex < newIndex; - var sizeAdjustment = { - x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, - y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 - }; - - _this.handleSortMove({ - pageX: targetPosition.left + sizeAdjustment.x, - pageY: targetPosition.top + sizeAdjustment.y, - ignoreTransition: shift === 0 - }); - }); - - _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { - _this.handleSortEnd(event); - - if (_this.initialFocusedNode) { - _this.initialFocusedNode.focus(); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { - if (_this.manager.active) { - _this.keyDrop(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { - var useDragHandle = _this.props.useDragHandle; - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); - }); - - validateProps(props); - _this.manager = new Manager(); - _this.events = { - end: _this.handleEnd, - move: _this.handleMove, - start: _this.handleStart - }; - return _this; - } - - _createClass(WithSortableContainer, [{ - key: "getChildContext", - value: function getChildContext() { - return { - manager: this.manager - }; - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - var container = this.getContainer(); - Promise.resolve(container).then(function (containerNode) { - _this2.container = containerNode; - _this2.document = _this2.container.ownerDocument || document; - var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; - _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; - _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); - }); - }); - - _this2.container.addEventListener('keydown', _this2.handleKeyDown); - }); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - var _this3 = this; - - if (this.helper && this.helper.parentNode) { - this.helper.parentNode.removeChild(this.helper); - } - - if (!this.container) { - return; - } - - Object.keys(this.events).forEach(function (key) { - return events[key].forEach(function (eventName) { - return _this3.container.removeEventListener(eventName, _this3.events[key]); - }); - }); - this.container.removeEventListener('keydown', this.handleKeyDown); - } - }, { - key: "updateHelperPosition", - value: function updateHelperPosition(event) { - var _this$props6 = this.props, - lockAxis = _this$props6.lockAxis, - lockOffset = _this$props6.lockOffset, - lockToContainerEdges = _this$props6.lockToContainerEdges, - transitionDuration = _this$props6.transitionDuration, - _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, - keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; - var isKeySorting = this.manager.isKeySorting; - var ignoreTransition = event.ignoreTransition; - var offset = getPosition(event); - var translate = { - x: offset.x - this.initialOffset.x, - y: offset.y - this.initialOffset.y - }; - translate.y -= window.pageYOffset - this.initialWindowScroll.top; - translate.x -= window.pageXOffset - this.initialWindowScroll.left; - this.translate = translate; - - if (lockToContainerEdges) { - var _getLockPixelOffsets = getLockPixelOffsets({ - height: this.height, - lockOffset: lockOffset, - width: this.width - }), - _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), - minLockOffset = _getLockPixelOffsets2[0], - maxLockOffset = _getLockPixelOffsets2[1]; - - var minOffset = { - x: this.width / 2 - minLockOffset.x, - y: this.height / 2 - minLockOffset.y - }; - var maxOffset = { - x: this.width / 2 - maxLockOffset.x, - y: this.height / 2 - maxLockOffset.y - }; - translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); - translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); - } - - if (lockAxis === 'x') { - translate.y = 0; - } else if (lockAxis === 'y') { - translate.x = 0; - } - - if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { - setTransitionDuration(this.helper, keyboardSortingTransitionDuration); - } - - setTranslate3d(this.helper, translate); - } - }, { - key: "animateNodes", - value: function animateNodes() { - var _this$props7 = this.props, - transitionDuration = _this$props7.transitionDuration, - hideSortableGhost = _this$props7.hideSortableGhost, - onSortOver = _this$props7.onSortOver; - var containerScrollDelta = this.containerScrollDelta, - windowScrollDelta = this.windowScrollDelta; - var nodes = this.manager.getOrderedRefs(); - var sortingOffset = { - left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, - top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top - }; - var isKeySorting = this.manager.isKeySorting; - var prevIndex = this.newIndex; - this.newIndex = null; - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node3 = nodes[i].node; - var index = _node3.sortableInfo.index; - var width = _node3.offsetWidth; - var height = _node3.offsetHeight; - var offset = { - height: this.height > height ? height / 2 : this.height / 2, - width: this.width > width ? width / 2 : this.width / 2 - }; - var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; - var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; - var translate = { - x: 0, - y: 0 - }; - var edgeOffset = nodes[i].edgeOffset; - - if (!edgeOffset) { - edgeOffset = getEdgeOffset(_node3, this.container); - nodes[i].edgeOffset = edgeOffset; - - if (isKeySorting) { - nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); - } - } - - var nextNode = i < nodes.length - 1 && nodes[i + 1]; - var prevNode = i > 0 && nodes[i - 1]; - - if (nextNode && !nextNode.edgeOffset) { - nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); - - if (isKeySorting) { - nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); - } - } - - if (index === this.index) { - if (hideSortableGhost) { - this.sortableGhost = _node3; - setInlineStyles(_node3, { - opacity: 0, - visibility: 'hidden' - }); - } - - continue; - } - - if (transitionDuration) { - setTransitionDuration(_node3, transitionDuration); - } - - if (this.axis.x) { - if (this.axis.y) { - if (mustShiftForward || 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; - - if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { - if (nextNode) { - translate.x = nextNode.edgeOffset.left - edgeOffset.left; - translate.y = nextNode.edgeOffset.top - edgeOffset.top; - } - } - - if (this.newIndex === null) { - this.newIndex = index; - } - } else if (mustShiftBackward || 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); - - if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { - if (prevNode) { - translate.x = prevNode.edgeOffset.left - edgeOffset.left; - translate.y = prevNode.edgeOffset.top - edgeOffset.top; - } - } - - this.newIndex = index; - } - } else { - if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { - translate.x = -(this.width + this.marginOffset.x); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { - translate.x = this.width + this.marginOffset.x; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - } else if (this.axis.y) { - if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { - translate.y = -(this.height + this.marginOffset.y); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { - translate.y = this.height + this.marginOffset.y; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - - setTranslate3d(_node3, translate); - nodes[i].translate = translate; - } - - if (this.newIndex == null) { - this.newIndex = this.index; - } - - if (isKeySorting) { - this.newIndex = prevIndex; - } - - var oldIndex = isKeySorting ? this.prevIndex : prevIndex; - - if (onSortOver && this.newIndex !== oldIndex) { - onSortOver({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: oldIndex, - isKeySorting: isKeySorting, - nodes: nodes, - helper: this.helper - }); - } - } - }, { - 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 SortableContainer() call'); - return this.refs.wrappedInstance; - } - }, { - key: "getContainer", - value: function getContainer() { - var getContainer = this.props.getContainer; - - if (typeof getContainer !== 'function') { - return findDOMNode(this); - } - - return getContainer(config.withRef ? this.getWrappedInstance() : undefined); - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps))); - } - }, { - key: "helperContainer", - get: function get() { - var helperContainer = this.props.helperContainer; - - if (typeof helperContainer === 'function') { - return helperContainer(); - } - - return this.props.helperContainer || this.document.body; - } - }, { - key: "containerScrollDelta", - get: function get() { - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - - if (useWindowAsScrollContainer) { - return { - left: 0, - top: 0 - }; - } - - return { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top - }; - } - }, { - key: "windowScrollDelta", - get: function get() { - return { - left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, - top: this.contentWindow.pageYOffset - this.initialWindowScroll.top - }; - } - }]); - - return WithSortableContainer; - }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { - manager: PropTypes.object.isRequired - }), _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) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableElement, _React$Component); - - function WithSortableElement() { - _classCallCheck(this, WithSortableElement); - - return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableElement).apply(this, arguments)); - } - - _createClass(WithSortableElement, [{ - key: "componentDidMount", - value: function componentDidMount() { - this.register(); - } - }, { - key: "componentDidUpdate", - value: function componentDidUpdate(prevProps) { - if (this.node) { - if (prevProps.index !== this.props.index) { - this.node.sortableInfo.index = this.props.index; - } - - if (prevProps.disabled !== this.props.disabled) { - this.node.sortableInfo.disabled = this.props.disabled; - } - } - - if (prevProps.collection !== this.props.collection) { - this.unregister(prevProps.collection); - this.register(); - } - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - this.unregister(); - } - }, { - key: "register", - value: function register() { - var _this$props = this.props, - collection = _this$props.collection, - disabled = _this$props.disabled, - index = _this$props.index; - var node = findDOMNode(this); - node.sortableInfo = { - collection: collection, - disabled: disabled, - index: index, - manager: this.context.manager - }; - this.node = node; - this.ref = { - node: node - }; - this.context.manager.add(collection, this.ref); - } - }, { - key: "unregister", - value: function unregister() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; - this.context.manager.remove(collection, this.ref); - } - }, { - 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 SortableElement() call'); - return this.refs.wrappedInstance; - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps$1))); - } - }]); - - return WithSortableElement; - }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { - manager: PropTypes.object.isRequired - }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { - collection: 0 - }), _temp; -} - -export { sortableContainer as SortableContainer, sortableElement as SortableElement, sortableHandle as SortableHandle, arrayMove, sortableContainer, sortableElement, sortableHandle }; diff --git a/dist/react-sortable-hoc.js b/dist/react-sortable-hoc.js deleted file mode 100644 index ee891ea79..000000000 --- a/dist/react-sortable-hoc.js +++ /dev/null @@ -1,1605 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } - -var _extends = _interopDefault(require('@babel/runtime/helpers/extends')); -var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray')); -var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck')); -var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass')); -var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn')); -var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf')); -var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized')); -var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits')); -var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty')); -var React = require('react'); -var PropTypes = _interopDefault(require('prop-types')); -var reactDom = require('react-dom'); -var invariant = _interopDefault(require('invariant')); -var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray')); - -var Manager = function () { - function Manager() { - _classCallCheck(this, Manager); - - _defineProperty(this, "refs", {}); - } - - _createClass(Manager, [{ - key: "add", - value: function add(collection, ref) { - if (!this.refs[collection]) { - this.refs[collection] = []; - } - - this.refs[collection].push(ref); - } - }, { - key: "remove", - value: function remove(collection, ref) { - var index = this.getIndex(collection, ref); - - if (index !== -1) { - this.refs[collection].splice(index, 1); - } - } - }, { - key: "isActive", - value: function isActive() { - return this.active; - } - }, { - key: "getActive", - value: function getActive() { - var _this = this; - - return this.refs[this.active.collection].find(function (_ref) { - var node = _ref.node; - return node.sortableInfo.index == _this.active.index; - }); - } - }, { - key: "getIndex", - value: function getIndex(collection, ref) { - return this.refs[collection].indexOf(ref); - } - }, { - key: "getOrderedRefs", - value: function getOrderedRefs() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; - return this.refs[collection].sort(sortByIndex); - } - }]); - - return Manager; -}(); - -function sortByIndex(_ref2, _ref3) { - var index1 = _ref2.node.sortableInfo.index; - var index2 = _ref3.node.sortableInfo.index; - return index1 - index2; -} - -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(); - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); - return array; -} -function omit(obj, keysToOmit) { - return Object.keys(obj).reduce(function (acc, key) { - if (keysToOmit.indexOf(key) === -1) { - acc[key] = obj[key]; - } - - return acc; - }, {}); -} -var events = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'] -}; -var vendorPrefix = function () { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return ''; - } - - var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; - var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; - - switch (pre) { - case 'ms': - return 'ms'; - - default: - return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; - } -}(); -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) { - while (el) { - if (fn(el)) { - return el; - } - - el = el.parentNode; - } - - return null; -} -function limit(min, max, value) { - return Math.max(min, Math.min(value, max)); -} - -function getPixelValue(stringValue) { - if (stringValue.substr(-2) === 'px') { - return parseFloat(stringValue); - } - - return 0; -} - -function getElementMargin(element) { - var style = window.getComputedStyle(element); - return { - bottom: getPixelValue(style.marginBottom), - left: getPixelValue(style.marginLeft), - right: getPixelValue(style.marginRight), - top: getPixelValue(style.marginTop) - }; -} -function provideDisplayName(prefix, Component) { - var componentName = Component.displayName || Component.name; - return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; -} -function getScrollAdjustedBoundingClientRect(node, scrollDelta) { - var boundingClientRect = node.getBoundingClientRect(); - return { - top: boundingClientRect.top + scrollDelta.top, - left: boundingClientRect.left + scrollDelta.left - }; -} -function getPosition(event) { - if (event.touches && event.touches.length) { - return { - x: event.touches[0].pageX, - y: event.touches[0].pageY - }; - } else if (event.changedTouches && event.changedTouches.length) { - return { - x: event.changedTouches[0].pageX, - y: event.changedTouches[0].pageY - }; - } else { - return { - x: event.pageX, - y: event.pageY - }; - } -} -function isTouchEvent(event) { - return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; -} -function getEdgeOffset(node, parent) { - var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { - left: 0, - top: 0 - }; - - if (!node) { - return undefined; - } - - var nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop - }; - - if (node.parentNode === parent) { - return nodeOffset; - } - - return getEdgeOffset(node.parentNode, parent, nodeOffset); -} -function getTargetIndex(newIndex, prevIndex, oldIndex) { - if (newIndex < oldIndex && newIndex > prevIndex) { - return newIndex - 1; - } else if (newIndex > oldIndex && newIndex < prevIndex) { - return newIndex + 1; - } else { - return newIndex; - } -} -function getLockPixelOffset(_ref) { - var lockOffset = _ref.lockOffset, - width = _ref.width, - height = _ref.height; - var offsetX = lockOffset; - var offsetY = lockOffset; - var unit = 'px'; - - if (typeof lockOffset === 'string') { - var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); - invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); - offsetX = parseFloat(lockOffset); - offsetY = parseFloat(lockOffset); - unit = match[1]; - } - - invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); - - if (unit === '%') { - offsetX = offsetX * width / 100; - offsetY = offsetY * height / 100; - } - - return { - x: offsetX, - y: offsetY - }; -} -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) { - var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - if (container) { - return document.querySelector(container); - } - - if (!(el instanceof HTMLElement)) { - return null; - } else if (isScrollable(el)) { - return el; - } else { - return getScrollingParent(el.parentNode); - } -} -function getContainerGridGap(element) { - var style = window.getComputedStyle(element); - - if (style.display === 'grid') { - return { - x: getPixelValue(style.gridColumnGap), - y: getPixelValue(style.gridRowGap) - }; - } - - return { - x: 0, - y: 0 - }; -} -var KEYCODE = { - TAB: 9, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40 -}; -var NodeType = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT' -}; -function cloneNode(node) { - var selector = 'input, textarea, select, canvas, [contenteditable]'; - var fields = node.querySelectorAll(selector); - var clonedNode = node.cloneNode(true); - - var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); - - clonedFields.forEach(function (field, i) { - if (field.type !== 'file') { - field.value = fields[i].value; - } - - if (field.type === 'radio' && field.name) { - field.name = "__sortableClone__".concat(field.name); - } - - if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { - var destCtx = field.getContext('2d'); - destCtx.drawImage(fields[i], 0, 0); - } - }); - return clonedNode; -} - -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() { - if (this.interval == null) { - return; - } - - 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; - - if (interactiveElements.indexOf(event.target.tagName) !== -1) { - return true; - } - - if (closest(event.target, function (el) { - return el.contentEditable === 'true'; - })) { - 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, - keyboardSortingTransitionDuration: PropTypes.number, - 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, - keyCodes: PropTypes.shape({ - lift: PropTypes.arrayOf(PropTypes.number), - drop: PropTypes.arrayOf(PropTypes.number), - cancel: PropTypes.arrayOf(PropTypes.number), - up: PropTypes.arrayOf(PropTypes.number), - down: PropTypes.arrayOf(PropTypes.number) - }), - shouldCancelStart: PropTypes.func, - transitionDuration: PropTypes.number, - updateBeforeSortStart: PropTypes.func, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool -}; -var defaultKeyCodes = { - lift: [KEYCODE.SPACE], - drop: [KEYCODE.SPACE], - cancel: [KEYCODE.ESC], - up: [KEYCODE.UP, KEYCODE.LEFT], - down: [KEYCODE.DOWN, KEYCODE.RIGHT] -}; -var defaultProps = { - axis: 'y', - disableAutoscroll: false, - distance: 0, - getHelperDimensions: defaultGetHelperDimensions, - hideSortableGhost: true, - lockOffset: '50%', - lockToContainerEdges: false, - pressDelay: 0, - pressThreshold: 5, - keyCodes: defaultKeyCodes, - 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _finallyRethrows(body, finalizer) { - try { - var result = body(); - } catch (e) { - return finalizer(true, e); - } - - if (result && result.then) { - return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); - } - - return finalizer(false, result); -} - -function sortableContainer(WrappedComponent) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableContainer, _React$Component); - - function WithSortableContainer(props) { - var _this; - - _classCallCheck(this, WithSortableContainer); - - _this = _possibleConstructorReturn(this, _getPrototypeOf(WithSortableContainer).call(this, props)); - - _defineProperty(_assertThisInitialized(_this), "state", {}); - - _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { - var _this$props = _this.props, - distance = _this$props.distance, - shouldCancelStart = _this$props.shouldCancelStart; - - if (event.button === 2 || shouldCancelStart(event)) { - return; - } - - _this.touched = true; - _this.position = getPosition(event); - var node = closest(event.target, function (el) { - return el.sortableInfo != null; - }); - - if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { - var useDragHandle = _this.props.useDragHandle; - var _node$sortableInfo = node.sortableInfo, - index = _node$sortableInfo.index, - collection = _node$sortableInfo.collection, - disabled = _node$sortableInfo.disabled; - - if (disabled) { - return; - } - - if (useDragHandle && !closest(event.target, isSortableHandle)) { - return; - } - - _this.manager.active = { - collection: collection, - index: index - }; - - if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { - event.preventDefault(); - } - - if (!distance) { - if (_this.props.pressDelay === 0) { - _this.handlePress(event); - } else { - _this.pressTimer = setTimeout(function () { - return _this.handlePress(event); - }, _this.props.pressDelay); - } - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { - return node.sortableInfo.manager === _this.manager; - }); - - _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { - var _this$props2 = _this.props, - distance = _this$props2.distance, - pressThreshold = _this$props2.pressThreshold; - - if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { - var position = getPosition(event); - var delta = { - x: _this.position.x - position.x, - y: _this.position.y - position.y - }; - var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); - _this.delta = delta; - - if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { - clearTimeout(_this.cancelTimer); - _this.cancelTimer = setTimeout(_this.cancel, 0); - } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { - _this.handlePress(event); - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { - _this.touched = false; - - _this.cancel(); - }); - - _defineProperty(_assertThisInitialized(_this), "cancel", function () { - var distance = _this.props.distance; - var sorting = _this.state.sorting; - - if (!sorting) { - if (!distance) { - clearTimeout(_this.pressTimer); - } - - _this.manager.active = null; - } - }); - - _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { - try { - var active = _this.manager.getActive(); - - var _temp6 = function () { - if (active) { - var _temp7 = function _temp7() { - var index = _node.sortableInfo.index; - var margin = getElementMargin(_node); - var gridGap = getContainerGridGap(_this.container); - - var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); - - var dimensions = _getHelperDimensions({ - index: index, - node: _node, - collection: _collection - }); - - _this.node = _node; - _this.margin = margin; - _this.gridGap = gridGap; - _this.width = dimensions.width; - _this.height = dimensions.height; - _this.marginOffset = { - x: _this.margin.left + _this.margin.right + _this.gridGap.x, - y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) - }; - _this.boundingClientRect = _node.getBoundingClientRect(); - _this.containerBoundingRect = containerBoundingRect; - _this.index = index; - _this.newIndex = index; - _this.axis = { - x: _axis.indexOf('x') >= 0, - y: _axis.indexOf('y') >= 0 - }; - _this.offsetEdge = getEdgeOffset(_node, _this.container); - - if (_isKeySorting) { - _this.initialOffset = getPosition(_objectSpread({}, event, { - pageX: _this.boundingClientRect.left, - pageY: _this.boundingClientRect.top - })); - } else { - _this.initialOffset = getPosition(event); - } - - _this.initialScroll = { - left: _this.scrollContainer.scrollLeft, - top: _this.scrollContainer.scrollTop - }; - _this.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset - }; - _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); - 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 (_isKeySorting) { - _this.helper.focus(); - } - - if (_hideSortableGhost) { - _this.sortableGhost = _node; - setInlineStyles(_node, { - opacity: 0, - visibility: 'hidden' - }); - } - - _this.minTranslate = {}; - _this.maxTranslate = {}; - - if (_isKeySorting) { - var _ref = _useWindowAsScrollContainer ? { - top: 0, - left: 0, - width: _this.contentWindow.innerWidth, - height: _this.contentWindow.innerHeight - } : _this.containerBoundingRect, - containerTop = _ref.top, - containerLeft = _ref.left, - containerWidth = _ref.width, - containerHeight = _ref.height; - - var containerBottom = containerTop + containerHeight; - var containerRight = containerLeft + containerWidth; - - if (_this.axis.x) { - _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; - _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); - } - - if (_this.axis.y) { - _this.minTranslate.y = containerTop - _this.boundingClientRect.top; - _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); - } - } else { - if (_this.axis.x) { - _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; - _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; - } - - if (_this.axis.y) { - _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; - _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; - } - } - - if (_helperClass) { - _helperClass.split(' ').forEach(function (className) { - return _this.helper.classList.add(className); - }); - } - - _this.listenerNode = event.touches ? _node : _this.contentWindow; - - if (_isKeySorting) { - _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); - }); - } - - _this.setState({ - sorting: true, - sortingIndex: index - }); - - if (_onSortStart) { - _onSortStart({ - node: _node, - index: index, - collection: _collection, - isKeySorting: _isKeySorting, - nodes: _this.manager.getOrderedRefs(), - helper: _this.helper - }, event); - } - - if (_isKeySorting) { - _this.keyMove(0); - } - }; - - var _this$props3 = _this.props, - _axis = _this$props3.axis, - _getHelperDimensions = _this$props3.getHelperDimensions, - _helperClass = _this$props3.helperClass, - _hideSortableGhost = _this$props3.hideSortableGhost, - updateBeforeSortStart = _this$props3.updateBeforeSortStart, - _onSortStart = _this$props3.onSortStart, - _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; - var _node = active.node, - _collection = active.collection; - var _isKeySorting = _this.manager.isKeySorting; - - var _temp8 = function () { - if (typeof updateBeforeSortStart === 'function') { - _this._awaitingUpdateBeforeSortStart = true; - - var _temp9 = _finallyRethrows(function () { - var index = _node.sortableInfo.index; - return Promise.resolve(updateBeforeSortStart({ - collection: _collection, - index: index, - node: _node, - isKeySorting: _isKeySorting - }, event)).then(function () {}); - }, function (_wasThrown, _result) { - _this._awaitingUpdateBeforeSortStart = false; - if (_wasThrown) throw _result; - return _result; - }); - - if (_temp9 && _temp9.then) return _temp9.then(function () {}); - } - }(); - - return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); - } - }(); - - return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); - } catch (e) { - return Promise.reject(e); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { - var onSortMove = _this.props.onSortMove; - - if (typeof event.preventDefault === 'function') { - event.preventDefault(); - } - - _this.updateHelperPosition(event); - - _this.animateNodes(); - - _this.autoscroll(); - - if (onSortMove) { - onSortMove(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { - var _this$props4 = _this.props, - hideSortableGhost = _this$props4.hideSortableGhost, - onSortEnd = _this$props4.onSortEnd; - var _this$manager = _this.manager, - collection = _this$manager.active.collection, - isKeySorting = _this$manager.isKeySorting; - - var nodes = _this.manager.getOrderedRefs(); - - if (_this.listenerNode) { - if (isKeySorting) { - _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); - }); - } - } - - _this.helper.parentNode.removeChild(_this.helper); - - if (hideSortableGhost && _this.sortableGhost) { - setInlineStyles(_this.sortableGhost, { - opacity: '', - visibility: '' - }); - } - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node2 = nodes[i]; - var el = _node2.node; - _node2.edgeOffset = null; - _node2.boundingClientRect = null; - setTranslate3d(el, null); - setTransitionDuration(el, null); - _node2.translate = null; - } - - _this.autoScroller.clear(); - - _this.manager.active = null; - _this.manager.isKeySorting = false; - - _this.setState({ - sorting: false, - sortingIndex: null - }); - - if (typeof onSortEnd === 'function') { - onSortEnd({ - collection: collection, - newIndex: _this.newIndex, - oldIndex: _this.index, - isKeySorting: isKeySorting, - nodes: nodes - }, event); - } - - _this.touched = false; - }); - - _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { - var disableAutoscroll = _this.props.disableAutoscroll; - var isKeySorting = _this.manager.isKeySorting; - - if (disableAutoscroll) { - _this.autoScroller.clear(); - - return; - } - - if (isKeySorting) { - var translate = _objectSpread({}, _this.translate); - - var scrollX = 0; - var scrollY = 0; - - if (_this.axis.x) { - translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); - scrollX = _this.translate.x - translate.x; - } - - if (_this.axis.y) { - translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); - scrollY = _this.translate.y - translate.y; - } - - _this.translate = translate; - setTranslate3d(_this.helper, _this.translate); - _this.scrollContainer.scrollLeft += scrollX; - _this.scrollContainer.scrollTop += scrollY; - return; - } - - _this.autoScroller.update({ - height: _this.height, - maxTranslate: _this.maxTranslate, - minTranslate: _this.minTranslate, - translate: _this.translate, - width: _this.width - }); - }); - - _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { - _this.translate.x += offset.left; - _this.translate.y += offset.top; - - _this.animateNodes(); - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { - var keyCode = event.keyCode; - var _this$props5 = _this.props, - shouldCancelStart = _this$props5.shouldCancelStart, - _this$props5$keyCodes = _this$props5.keyCodes, - customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; - - var keyCodes = _objectSpread({}, defaultKeyCodes, {}, customKeyCodes); - - if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - - if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { - _this.keyLift(event); - } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { - _this.keyDrop(event); - } else if (keyCodes.cancel.includes(keyCode)) { - _this.newIndex = _this.manager.active.index; - - _this.keyDrop(event); - } else if (keyCodes.up.includes(keyCode)) { - _this.keyMove(-1); - } else if (keyCodes.down.includes(keyCode)) { - _this.keyMove(1); - } - }); - - _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - var _node$sortableInfo2 = node.sortableInfo, - index = _node$sortableInfo2.index, - collection = _node$sortableInfo2.collection; - _this.initialFocusedNode = target; - _this.manager.isKeySorting = true; - _this.manager.active = { - index: index, - collection: collection - }; - - _this.handlePress(event); - }); - - _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { - var nodes = _this.manager.getOrderedRefs(); - - var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; - var newIndex = _this.newIndex + shift; - var prevIndex = _this.newIndex; - - if (newIndex < 0 || newIndex > lastIndex) { - return; - } - - _this.prevIndex = prevIndex; - _this.newIndex = newIndex; - var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); - var target = nodes.find(function (_ref2) { - var node = _ref2.node; - return node.sortableInfo.index === targetIndex; - }); - var targetNode = target.node; - var scrollDelta = _this.containerScrollDelta; - var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); - var targetTranslate = target.translate || { - x: 0, - y: 0 - }; - var targetPosition = { - top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, - left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left - }; - var shouldAdjustForSize = prevIndex < newIndex; - var sizeAdjustment = { - x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, - y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 - }; - - _this.handleSortMove({ - pageX: targetPosition.left + sizeAdjustment.x, - pageY: targetPosition.top + sizeAdjustment.y, - ignoreTransition: shift === 0 - }); - }); - - _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { - _this.handleSortEnd(event); - - if (_this.initialFocusedNode) { - _this.initialFocusedNode.focus(); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { - if (_this.manager.active) { - _this.keyDrop(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { - var useDragHandle = _this.props.useDragHandle; - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); - }); - - validateProps(props); - _this.manager = new Manager(); - _this.events = { - end: _this.handleEnd, - move: _this.handleMove, - start: _this.handleStart - }; - return _this; - } - - _createClass(WithSortableContainer, [{ - key: "getChildContext", - value: function getChildContext() { - return { - manager: this.manager - }; - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - var container = this.getContainer(); - Promise.resolve(container).then(function (containerNode) { - _this2.container = containerNode; - _this2.document = _this2.container.ownerDocument || document; - var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; - _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; - _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); - }); - }); - - _this2.container.addEventListener('keydown', _this2.handleKeyDown); - }); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - var _this3 = this; - - if (this.helper && this.helper.parentNode) { - this.helper.parentNode.removeChild(this.helper); - } - - if (!this.container) { - return; - } - - Object.keys(this.events).forEach(function (key) { - return events[key].forEach(function (eventName) { - return _this3.container.removeEventListener(eventName, _this3.events[key]); - }); - }); - this.container.removeEventListener('keydown', this.handleKeyDown); - } - }, { - key: "updateHelperPosition", - value: function updateHelperPosition(event) { - var _this$props6 = this.props, - lockAxis = _this$props6.lockAxis, - lockOffset = _this$props6.lockOffset, - lockToContainerEdges = _this$props6.lockToContainerEdges, - transitionDuration = _this$props6.transitionDuration, - _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, - keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; - var isKeySorting = this.manager.isKeySorting; - var ignoreTransition = event.ignoreTransition; - var offset = getPosition(event); - var translate = { - x: offset.x - this.initialOffset.x, - y: offset.y - this.initialOffset.y - }; - translate.y -= window.pageYOffset - this.initialWindowScroll.top; - translate.x -= window.pageXOffset - this.initialWindowScroll.left; - this.translate = translate; - - if (lockToContainerEdges) { - var _getLockPixelOffsets = getLockPixelOffsets({ - height: this.height, - lockOffset: lockOffset, - width: this.width - }), - _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), - minLockOffset = _getLockPixelOffsets2[0], - maxLockOffset = _getLockPixelOffsets2[1]; - - var minOffset = { - x: this.width / 2 - minLockOffset.x, - y: this.height / 2 - minLockOffset.y - }; - var maxOffset = { - x: this.width / 2 - maxLockOffset.x, - y: this.height / 2 - maxLockOffset.y - }; - translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); - translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); - } - - if (lockAxis === 'x') { - translate.y = 0; - } else if (lockAxis === 'y') { - translate.x = 0; - } - - if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { - setTransitionDuration(this.helper, keyboardSortingTransitionDuration); - } - - setTranslate3d(this.helper, translate); - } - }, { - key: "animateNodes", - value: function animateNodes() { - var _this$props7 = this.props, - transitionDuration = _this$props7.transitionDuration, - hideSortableGhost = _this$props7.hideSortableGhost, - onSortOver = _this$props7.onSortOver; - var containerScrollDelta = this.containerScrollDelta, - windowScrollDelta = this.windowScrollDelta; - var nodes = this.manager.getOrderedRefs(); - var sortingOffset = { - left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, - top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top - }; - var isKeySorting = this.manager.isKeySorting; - var prevIndex = this.newIndex; - this.newIndex = null; - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node3 = nodes[i].node; - var index = _node3.sortableInfo.index; - var width = _node3.offsetWidth; - var height = _node3.offsetHeight; - var offset = { - height: this.height > height ? height / 2 : this.height / 2, - width: this.width > width ? width / 2 : this.width / 2 - }; - var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; - var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; - var translate = { - x: 0, - y: 0 - }; - var edgeOffset = nodes[i].edgeOffset; - - if (!edgeOffset) { - edgeOffset = getEdgeOffset(_node3, this.container); - nodes[i].edgeOffset = edgeOffset; - - if (isKeySorting) { - nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); - } - } - - var nextNode = i < nodes.length - 1 && nodes[i + 1]; - var prevNode = i > 0 && nodes[i - 1]; - - if (nextNode && !nextNode.edgeOffset) { - nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); - - if (isKeySorting) { - nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); - } - } - - if (index === this.index) { - if (hideSortableGhost) { - this.sortableGhost = _node3; - setInlineStyles(_node3, { - opacity: 0, - visibility: 'hidden' - }); - } - - continue; - } - - if (transitionDuration) { - setTransitionDuration(_node3, transitionDuration); - } - - if (this.axis.x) { - if (this.axis.y) { - if (mustShiftForward || 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; - - if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { - if (nextNode) { - translate.x = nextNode.edgeOffset.left - edgeOffset.left; - translate.y = nextNode.edgeOffset.top - edgeOffset.top; - } - } - - if (this.newIndex === null) { - this.newIndex = index; - } - } else if (mustShiftBackward || 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); - - if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { - if (prevNode) { - translate.x = prevNode.edgeOffset.left - edgeOffset.left; - translate.y = prevNode.edgeOffset.top - edgeOffset.top; - } - } - - this.newIndex = index; - } - } else { - if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { - translate.x = -(this.width + this.marginOffset.x); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { - translate.x = this.width + this.marginOffset.x; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - } else if (this.axis.y) { - if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { - translate.y = -(this.height + this.marginOffset.y); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { - translate.y = this.height + this.marginOffset.y; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - - setTranslate3d(_node3, translate); - nodes[i].translate = translate; - } - - if (this.newIndex == null) { - this.newIndex = this.index; - } - - if (isKeySorting) { - this.newIndex = prevIndex; - } - - var oldIndex = isKeySorting ? this.prevIndex : prevIndex; - - if (onSortOver && this.newIndex !== oldIndex) { - onSortOver({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: oldIndex, - isKeySorting: isKeySorting, - nodes: nodes, - helper: this.helper - }); - } - } - }, { - 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 SortableContainer() call'); - return this.refs.wrappedInstance; - } - }, { - key: "getContainer", - value: function getContainer() { - var getContainer = this.props.getContainer; - - if (typeof getContainer !== 'function') { - return reactDom.findDOMNode(this); - } - - return getContainer(config.withRef ? this.getWrappedInstance() : undefined); - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps))); - } - }, { - key: "helperContainer", - get: function get() { - var helperContainer = this.props.helperContainer; - - if (typeof helperContainer === 'function') { - return helperContainer(); - } - - return this.props.helperContainer || this.document.body; - } - }, { - key: "containerScrollDelta", - get: function get() { - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - - if (useWindowAsScrollContainer) { - return { - left: 0, - top: 0 - }; - } - - return { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top - }; - } - }, { - key: "windowScrollDelta", - get: function get() { - return { - left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, - top: this.contentWindow.pageYOffset - this.initialWindowScroll.top - }; - } - }]); - - return WithSortableContainer; - }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { - manager: PropTypes.object.isRequired - }), _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) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableElement, _React$Component); - - function WithSortableElement() { - _classCallCheck(this, WithSortableElement); - - return _possibleConstructorReturn(this, _getPrototypeOf(WithSortableElement).apply(this, arguments)); - } - - _createClass(WithSortableElement, [{ - key: "componentDidMount", - value: function componentDidMount() { - this.register(); - } - }, { - key: "componentDidUpdate", - value: function componentDidUpdate(prevProps) { - if (this.node) { - if (prevProps.index !== this.props.index) { - this.node.sortableInfo.index = this.props.index; - } - - if (prevProps.disabled !== this.props.disabled) { - this.node.sortableInfo.disabled = this.props.disabled; - } - } - - if (prevProps.collection !== this.props.collection) { - this.unregister(prevProps.collection); - this.register(); - } - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - this.unregister(); - } - }, { - key: "register", - value: function register() { - var _this$props = this.props, - collection = _this$props.collection, - disabled = _this$props.disabled, - index = _this$props.index; - var node = reactDom.findDOMNode(this); - node.sortableInfo = { - collection: collection, - disabled: disabled, - index: index, - manager: this.context.manager - }; - this.node = node; - this.ref = { - node: node - }; - this.context.manager.add(collection, this.ref); - } - }, { - key: "unregister", - value: function unregister() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; - this.context.manager.remove(collection, this.ref); - } - }, { - 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 SortableElement() call'); - return this.refs.wrappedInstance; - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps$1))); - } - }]); - - return WithSortableElement; - }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { - manager: PropTypes.object.isRequired - }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { - collection: 0 - }), _temp; -} - -exports.SortableContainer = sortableContainer; -exports.SortableElement = sortableElement; -exports.SortableHandle = sortableHandle; -exports.arrayMove = arrayMove; -exports.sortableContainer = sortableContainer; -exports.sortableElement = sortableElement; -exports.sortableHandle = sortableHandle; diff --git a/dist/react-sortable-hoc.umd.js b/dist/react-sortable-hoc.umd.js deleted file mode 100644 index 06320a032..000000000 --- a/dist/react-sortable-hoc.umd.js +++ /dev/null @@ -1,1863 +0,0 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-dom')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) : - (global = global || self, factory(global.SortableHOC = {}, global.React, global.PropTypes, global.ReactDOM)); -}(this, (function (exports, React, PropTypes, reactDom) { 'use strict'; - - PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes; - - function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; - } - - var _extends_1 = createCommonjsModule(function (module) { - function _extends() { - module.exports = _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - return _extends.apply(this, arguments); - } - - module.exports = _extends; - }); - - function _arrayWithHoles(arr) { - if (Array.isArray(arr)) return arr; - } - - var arrayWithHoles = _arrayWithHoles; - - function _iterableToArrayLimit(arr, i) { - if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { - return; - } - - var _arr = []; - var _n = true; - var _d = false; - var _e = undefined; - - try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { - _arr.push(_s.value); - - if (i && _arr.length === i) break; - } - } catch (err) { - _d = true; - _e = err; - } finally { - try { - if (!_n && _i["return"] != null) _i["return"](); - } finally { - if (_d) throw _e; - } - } - - return _arr; - } - - var iterableToArrayLimit = _iterableToArrayLimit; - - function _nonIterableRest() { - throw new TypeError("Invalid attempt to destructure non-iterable instance"); - } - - var nonIterableRest = _nonIterableRest; - - function _slicedToArray(arr, i) { - return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest(); - } - - var slicedToArray = _slicedToArray; - - function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } - - var classCallCheck = _classCallCheck; - - function _defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); - return Constructor; - } - - var createClass = _createClass; - - var _typeof_1 = createCommonjsModule(function (module) { - function _typeof(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - module.exports = _typeof = function _typeof(obj) { - return typeof obj; - }; - } else { - module.exports = _typeof = function _typeof(obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - } - - return _typeof(obj); - } - - module.exports = _typeof; - }); - - function _assertThisInitialized(self) { - if (self === void 0) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return self; - } - - var assertThisInitialized = _assertThisInitialized; - - function _possibleConstructorReturn(self, call) { - if (call && (_typeof_1(call) === "object" || typeof call === "function")) { - return call; - } - - return assertThisInitialized(self); - } - - var possibleConstructorReturn = _possibleConstructorReturn; - - var getPrototypeOf = createCommonjsModule(function (module) { - function _getPrototypeOf(o) { - module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { - return o.__proto__ || Object.getPrototypeOf(o); - }; - return _getPrototypeOf(o); - } - - module.exports = _getPrototypeOf; - }); - - var setPrototypeOf = createCommonjsModule(function (module) { - function _setPrototypeOf(o, p) { - module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; - }; - - return _setPrototypeOf(o, p); - } - - module.exports = _setPrototypeOf; - }); - - function _inherits(subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function"); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - writable: true, - configurable: true - } - }); - if (superClass) setPrototypeOf(subClass, superClass); - } - - var inherits = _inherits; - - function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; - } - - var defineProperty = _defineProperty; - - /** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - - var invariant = function(condition, format, a, b, c, d, e, f) { - { - if (format === undefined) { - throw new Error('invariant requires an error message argument'); - } - } - - if (!condition) { - var error; - if (format === undefined) { - error = new Error( - 'Minified exception occurred; use the non-minified dev environment ' + - 'for the full error message and additional helpful warnings.' - ); - } else { - var args = [a, b, c, d, e, f]; - var argIndex = 0; - error = new Error( - format.replace(/%s/g, function() { return args[argIndex++]; }) - ); - error.name = 'Invariant Violation'; - } - - error.framesToPop = 1; // we don't care about invariant's own frame - throw error; - } - }; - - var invariant_1 = invariant; - - var Manager = function () { - function Manager() { - classCallCheck(this, Manager); - - defineProperty(this, "refs", {}); - } - - createClass(Manager, [{ - key: "add", - value: function add(collection, ref) { - if (!this.refs[collection]) { - this.refs[collection] = []; - } - - this.refs[collection].push(ref); - } - }, { - key: "remove", - value: function remove(collection, ref) { - var index = this.getIndex(collection, ref); - - if (index !== -1) { - this.refs[collection].splice(index, 1); - } - } - }, { - key: "isActive", - value: function isActive() { - return this.active; - } - }, { - key: "getActive", - value: function getActive() { - var _this = this; - - return this.refs[this.active.collection].find(function (_ref) { - var node = _ref.node; - return node.sortableInfo.index == _this.active.index; - }); - } - }, { - key: "getIndex", - value: function getIndex(collection, ref) { - return this.refs[collection].indexOf(ref); - } - }, { - key: "getOrderedRefs", - value: function getOrderedRefs() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; - return this.refs[collection].sort(sortByIndex); - } - }]); - - return Manager; - }(); - - function sortByIndex(_ref2, _ref3) { - var index1 = _ref2.node.sortableInfo.index; - var index2 = _ref3.node.sortableInfo.index; - return index1 - index2; - } - - function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) { - for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { - arr2[i] = arr[i]; - } - - return arr2; - } - } - - var arrayWithoutHoles = _arrayWithoutHoles; - - function _iterableToArray(iter) { - if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); - } - - var iterableToArray = _iterableToArray; - - function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance"); - } - - var nonIterableSpread = _nonIterableSpread; - - function _toConsumableArray(arr) { - return arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread(); - } - - var toConsumableArray = _toConsumableArray; - - 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(); - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); - return array; - } - function omit(obj, keysToOmit) { - return Object.keys(obj).reduce(function (acc, key) { - if (keysToOmit.indexOf(key) === -1) { - acc[key] = obj[key]; - } - - return acc; - }, {}); - } - var events = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'] - }; - var vendorPrefix = function () { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return ''; - } - - var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; - var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; - - switch (pre) { - case 'ms': - return 'ms'; - - default: - return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; - } - }(); - 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) { - while (el) { - if (fn(el)) { - return el; - } - - el = el.parentNode; - } - - return null; - } - function limit(min, max, value) { - return Math.max(min, Math.min(value, max)); - } - - function getPixelValue(stringValue) { - if (stringValue.substr(-2) === 'px') { - return parseFloat(stringValue); - } - - return 0; - } - - function getElementMargin(element) { - var style = window.getComputedStyle(element); - return { - bottom: getPixelValue(style.marginBottom), - left: getPixelValue(style.marginLeft), - right: getPixelValue(style.marginRight), - top: getPixelValue(style.marginTop) - }; - } - function provideDisplayName(prefix, Component) { - var componentName = Component.displayName || Component.name; - return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; - } - function getScrollAdjustedBoundingClientRect(node, scrollDelta) { - var boundingClientRect = node.getBoundingClientRect(); - return { - top: boundingClientRect.top + scrollDelta.top, - left: boundingClientRect.left + scrollDelta.left - }; - } - function getPosition(event) { - if (event.touches && event.touches.length) { - return { - x: event.touches[0].pageX, - y: event.touches[0].pageY - }; - } else if (event.changedTouches && event.changedTouches.length) { - return { - x: event.changedTouches[0].pageX, - y: event.changedTouches[0].pageY - }; - } else { - return { - x: event.pageX, - y: event.pageY - }; - } - } - function isTouchEvent(event) { - return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; - } - function getEdgeOffset(node, parent) { - var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { - left: 0, - top: 0 - }; - - if (!node) { - return undefined; - } - - var nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop - }; - - if (node.parentNode === parent) { - return nodeOffset; - } - - return getEdgeOffset(node.parentNode, parent, nodeOffset); - } - function getTargetIndex(newIndex, prevIndex, oldIndex) { - if (newIndex < oldIndex && newIndex > prevIndex) { - return newIndex - 1; - } else if (newIndex > oldIndex && newIndex < prevIndex) { - return newIndex + 1; - } else { - return newIndex; - } - } - function getLockPixelOffset(_ref) { - var lockOffset = _ref.lockOffset, - width = _ref.width, - height = _ref.height; - var offsetX = lockOffset; - var offsetY = lockOffset; - var unit = 'px'; - - if (typeof lockOffset === 'string') { - var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); - invariant_1(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); - offsetX = parseFloat(lockOffset); - offsetY = parseFloat(lockOffset); - unit = match[1]; - } - - invariant_1(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); - - if (unit === '%') { - offsetX = offsetX * width / 100; - offsetY = offsetY * height / 100; - } - - return { - x: offsetX, - y: offsetY - }; - } - 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) { - var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - if (container) { - return document.querySelector(container); - } - - if (!(el instanceof HTMLElement)) { - return null; - } else if (isScrollable(el)) { - return el; - } else { - return getScrollingParent(el.parentNode); - } - } - function getContainerGridGap(element) { - var style = window.getComputedStyle(element); - - if (style.display === 'grid') { - return { - x: getPixelValue(style.gridColumnGap), - y: getPixelValue(style.gridRowGap) - }; - } - - return { - x: 0, - y: 0 - }; - } - var KEYCODE = { - TAB: 9, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40 - }; - var NodeType = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT' - }; - function cloneNode(node) { - var selector = 'input, textarea, select, canvas, [contenteditable]'; - var fields = node.querySelectorAll(selector); - var clonedNode = node.cloneNode(true); - - var clonedFields = toConsumableArray(clonedNode.querySelectorAll(selector)); - - clonedFields.forEach(function (field, i) { - if (field.type !== 'file') { - field.value = fields[i].value; - } - - if (field.type === 'radio' && field.name) { - field.name = "__sortableClone__".concat(field.name); - } - - if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { - var destCtx = field.getContext('2d'); - destCtx.drawImage(fields[i], 0, 0); - } - }); - return clonedNode; - } - - 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() { - if (this.interval == null) { - return; - } - - 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; - - if (interactiveElements.indexOf(event.target.tagName) !== -1) { - return true; - } - - if (closest(event.target, function (el) { - return el.contentEditable === 'true'; - })) { - 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, - keyboardSortingTransitionDuration: PropTypes.number, - 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, - keyCodes: PropTypes.shape({ - lift: PropTypes.arrayOf(PropTypes.number), - drop: PropTypes.arrayOf(PropTypes.number), - cancel: PropTypes.arrayOf(PropTypes.number), - up: PropTypes.arrayOf(PropTypes.number), - down: PropTypes.arrayOf(PropTypes.number) - }), - shouldCancelStart: PropTypes.func, - transitionDuration: PropTypes.number, - updateBeforeSortStart: PropTypes.func, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool - }; - var defaultKeyCodes = { - lift: [KEYCODE.SPACE], - drop: [KEYCODE.SPACE], - cancel: [KEYCODE.ESC], - up: [KEYCODE.UP, KEYCODE.LEFT], - down: [KEYCODE.DOWN, KEYCODE.RIGHT] - }; - var defaultProps = { - axis: 'y', - disableAutoscroll: false, - distance: 0, - getHelperDimensions: defaultGetHelperDimensions, - hideSortableGhost: true, - lockOffset: '50%', - lockToContainerEdges: false, - pressDelay: 0, - pressThreshold: 5, - keyCodes: defaultKeyCodes, - 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - - function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - - function _finallyRethrows(body, finalizer) { - try { - var result = body(); - } catch (e) { - return finalizer(true, e); - } - - if (result && result.then) { - return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); - } - - return finalizer(false, result); - } - - function sortableContainer(WrappedComponent) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - inherits(WithSortableContainer, _React$Component); - - function WithSortableContainer(props) { - var _this; - - classCallCheck(this, WithSortableContainer); - - _this = possibleConstructorReturn(this, getPrototypeOf(WithSortableContainer).call(this, props)); - - defineProperty(assertThisInitialized(_this), "state", {}); - - defineProperty(assertThisInitialized(_this), "handleStart", function (event) { - var _this$props = _this.props, - distance = _this$props.distance, - shouldCancelStart = _this$props.shouldCancelStart; - - if (event.button === 2 || shouldCancelStart(event)) { - return; - } - - _this.touched = true; - _this.position = getPosition(event); - var node = closest(event.target, function (el) { - return el.sortableInfo != null; - }); - - if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { - var useDragHandle = _this.props.useDragHandle; - var _node$sortableInfo = node.sortableInfo, - index = _node$sortableInfo.index, - collection = _node$sortableInfo.collection, - disabled = _node$sortableInfo.disabled; - - if (disabled) { - return; - } - - if (useDragHandle && !closest(event.target, isSortableHandle)) { - return; - } - - _this.manager.active = { - collection: collection, - index: index - }; - - if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { - event.preventDefault(); - } - - if (!distance) { - if (_this.props.pressDelay === 0) { - _this.handlePress(event); - } else { - _this.pressTimer = setTimeout(function () { - return _this.handlePress(event); - }, _this.props.pressDelay); - } - } - } - }); - - defineProperty(assertThisInitialized(_this), "nodeIsChild", function (node) { - return node.sortableInfo.manager === _this.manager; - }); - - defineProperty(assertThisInitialized(_this), "handleMove", function (event) { - var _this$props2 = _this.props, - distance = _this$props2.distance, - pressThreshold = _this$props2.pressThreshold; - - if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { - var position = getPosition(event); - var delta = { - x: _this.position.x - position.x, - y: _this.position.y - position.y - }; - var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); - _this.delta = delta; - - if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { - clearTimeout(_this.cancelTimer); - _this.cancelTimer = setTimeout(_this.cancel, 0); - } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { - _this.handlePress(event); - } - } - }); - - defineProperty(assertThisInitialized(_this), "handleEnd", function () { - _this.touched = false; - - _this.cancel(); - }); - - defineProperty(assertThisInitialized(_this), "cancel", function () { - var distance = _this.props.distance; - var sorting = _this.state.sorting; - - if (!sorting) { - if (!distance) { - clearTimeout(_this.pressTimer); - } - - _this.manager.active = null; - } - }); - - defineProperty(assertThisInitialized(_this), "handlePress", function (event) { - try { - var active = _this.manager.getActive(); - - var _temp6 = function () { - if (active) { - var _temp7 = function _temp7() { - var index = _node.sortableInfo.index; - var margin = getElementMargin(_node); - var gridGap = getContainerGridGap(_this.container); - - var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); - - var dimensions = _getHelperDimensions({ - index: index, - node: _node, - collection: _collection - }); - - _this.node = _node; - _this.margin = margin; - _this.gridGap = gridGap; - _this.width = dimensions.width; - _this.height = dimensions.height; - _this.marginOffset = { - x: _this.margin.left + _this.margin.right + _this.gridGap.x, - y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) - }; - _this.boundingClientRect = _node.getBoundingClientRect(); - _this.containerBoundingRect = containerBoundingRect; - _this.index = index; - _this.newIndex = index; - _this.axis = { - x: _axis.indexOf('x') >= 0, - y: _axis.indexOf('y') >= 0 - }; - _this.offsetEdge = getEdgeOffset(_node, _this.container); - - if (_isKeySorting) { - _this.initialOffset = getPosition(_objectSpread({}, event, { - pageX: _this.boundingClientRect.left, - pageY: _this.boundingClientRect.top - })); - } else { - _this.initialOffset = getPosition(event); - } - - _this.initialScroll = { - left: _this.scrollContainer.scrollLeft, - top: _this.scrollContainer.scrollTop - }; - _this.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset - }; - _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); - 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 (_isKeySorting) { - _this.helper.focus(); - } - - if (_hideSortableGhost) { - _this.sortableGhost = _node; - setInlineStyles(_node, { - opacity: 0, - visibility: 'hidden' - }); - } - - _this.minTranslate = {}; - _this.maxTranslate = {}; - - if (_isKeySorting) { - var _ref = _useWindowAsScrollContainer ? { - top: 0, - left: 0, - width: _this.contentWindow.innerWidth, - height: _this.contentWindow.innerHeight - } : _this.containerBoundingRect, - containerTop = _ref.top, - containerLeft = _ref.left, - containerWidth = _ref.width, - containerHeight = _ref.height; - - var containerBottom = containerTop + containerHeight; - var containerRight = containerLeft + containerWidth; - - if (_this.axis.x) { - _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; - _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); - } - - if (_this.axis.y) { - _this.minTranslate.y = containerTop - _this.boundingClientRect.top; - _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); - } - } else { - if (_this.axis.x) { - _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; - _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; - } - - if (_this.axis.y) { - _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; - _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; - } - } - - if (_helperClass) { - _helperClass.split(' ').forEach(function (className) { - return _this.helper.classList.add(className); - }); - } - - _this.listenerNode = event.touches ? _node : _this.contentWindow; - - if (_isKeySorting) { - _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); - }); - } - - _this.setState({ - sorting: true, - sortingIndex: index - }); - - if (_onSortStart) { - _onSortStart({ - node: _node, - index: index, - collection: _collection, - isKeySorting: _isKeySorting, - nodes: _this.manager.getOrderedRefs(), - helper: _this.helper - }, event); - } - - if (_isKeySorting) { - _this.keyMove(0); - } - }; - - var _this$props3 = _this.props, - _axis = _this$props3.axis, - _getHelperDimensions = _this$props3.getHelperDimensions, - _helperClass = _this$props3.helperClass, - _hideSortableGhost = _this$props3.hideSortableGhost, - updateBeforeSortStart = _this$props3.updateBeforeSortStart, - _onSortStart = _this$props3.onSortStart, - _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; - var _node = active.node, - _collection = active.collection; - var _isKeySorting = _this.manager.isKeySorting; - - var _temp8 = function () { - if (typeof updateBeforeSortStart === 'function') { - _this._awaitingUpdateBeforeSortStart = true; - - var _temp9 = _finallyRethrows(function () { - var index = _node.sortableInfo.index; - return Promise.resolve(updateBeforeSortStart({ - collection: _collection, - index: index, - node: _node, - isKeySorting: _isKeySorting - }, event)).then(function () {}); - }, function (_wasThrown, _result) { - _this._awaitingUpdateBeforeSortStart = false; - if (_wasThrown) throw _result; - return _result; - }); - - if (_temp9 && _temp9.then) return _temp9.then(function () {}); - } - }(); - - return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); - } - }(); - - return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); - } catch (e) { - return Promise.reject(e); - } - }); - - defineProperty(assertThisInitialized(_this), "handleSortMove", function (event) { - var onSortMove = _this.props.onSortMove; - - if (typeof event.preventDefault === 'function') { - event.preventDefault(); - } - - _this.updateHelperPosition(event); - - _this.animateNodes(); - - _this.autoscroll(); - - if (onSortMove) { - onSortMove(event); - } - }); - - defineProperty(assertThisInitialized(_this), "handleSortEnd", function (event) { - var _this$props4 = _this.props, - hideSortableGhost = _this$props4.hideSortableGhost, - onSortEnd = _this$props4.onSortEnd; - var _this$manager = _this.manager, - collection = _this$manager.active.collection, - isKeySorting = _this$manager.isKeySorting; - - var nodes = _this.manager.getOrderedRefs(); - - if (_this.listenerNode) { - if (isKeySorting) { - _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); - }); - } - } - - _this.helper.parentNode.removeChild(_this.helper); - - if (hideSortableGhost && _this.sortableGhost) { - setInlineStyles(_this.sortableGhost, { - opacity: '', - visibility: '' - }); - } - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node2 = nodes[i]; - var el = _node2.node; - _node2.edgeOffset = null; - _node2.boundingClientRect = null; - setTranslate3d(el, null); - setTransitionDuration(el, null); - _node2.translate = null; - } - - _this.autoScroller.clear(); - - _this.manager.active = null; - _this.manager.isKeySorting = false; - - _this.setState({ - sorting: false, - sortingIndex: null - }); - - if (typeof onSortEnd === 'function') { - onSortEnd({ - collection: collection, - newIndex: _this.newIndex, - oldIndex: _this.index, - isKeySorting: isKeySorting, - nodes: nodes - }, event); - } - - _this.touched = false; - }); - - defineProperty(assertThisInitialized(_this), "autoscroll", function () { - var disableAutoscroll = _this.props.disableAutoscroll; - var isKeySorting = _this.manager.isKeySorting; - - if (disableAutoscroll) { - _this.autoScroller.clear(); - - return; - } - - if (isKeySorting) { - var translate = _objectSpread({}, _this.translate); - - var scrollX = 0; - var scrollY = 0; - - if (_this.axis.x) { - translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); - scrollX = _this.translate.x - translate.x; - } - - if (_this.axis.y) { - translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); - scrollY = _this.translate.y - translate.y; - } - - _this.translate = translate; - setTranslate3d(_this.helper, _this.translate); - _this.scrollContainer.scrollLeft += scrollX; - _this.scrollContainer.scrollTop += scrollY; - return; - } - - _this.autoScroller.update({ - height: _this.height, - maxTranslate: _this.maxTranslate, - minTranslate: _this.minTranslate, - translate: _this.translate, - width: _this.width - }); - }); - - defineProperty(assertThisInitialized(_this), "onAutoScroll", function (offset) { - _this.translate.x += offset.left; - _this.translate.y += offset.top; - - _this.animateNodes(); - }); - - defineProperty(assertThisInitialized(_this), "handleKeyDown", function (event) { - var keyCode = event.keyCode; - var _this$props5 = _this.props, - shouldCancelStart = _this$props5.shouldCancelStart, - _this$props5$keyCodes = _this$props5.keyCodes, - customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; - - var keyCodes = _objectSpread({}, defaultKeyCodes, {}, customKeyCodes); - - if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - - if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { - _this.keyLift(event); - } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { - _this.keyDrop(event); - } else if (keyCodes.cancel.includes(keyCode)) { - _this.newIndex = _this.manager.active.index; - - _this.keyDrop(event); - } else if (keyCodes.up.includes(keyCode)) { - _this.keyMove(-1); - } else if (keyCodes.down.includes(keyCode)) { - _this.keyMove(1); - } - }); - - defineProperty(assertThisInitialized(_this), "keyLift", function (event) { - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - var _node$sortableInfo2 = node.sortableInfo, - index = _node$sortableInfo2.index, - collection = _node$sortableInfo2.collection; - _this.initialFocusedNode = target; - _this.manager.isKeySorting = true; - _this.manager.active = { - index: index, - collection: collection - }; - - _this.handlePress(event); - }); - - defineProperty(assertThisInitialized(_this), "keyMove", function (shift) { - var nodes = _this.manager.getOrderedRefs(); - - var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; - var newIndex = _this.newIndex + shift; - var prevIndex = _this.newIndex; - - if (newIndex < 0 || newIndex > lastIndex) { - return; - } - - _this.prevIndex = prevIndex; - _this.newIndex = newIndex; - var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); - var target = nodes.find(function (_ref2) { - var node = _ref2.node; - return node.sortableInfo.index === targetIndex; - }); - var targetNode = target.node; - var scrollDelta = _this.containerScrollDelta; - var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); - var targetTranslate = target.translate || { - x: 0, - y: 0 - }; - var targetPosition = { - top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, - left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left - }; - var shouldAdjustForSize = prevIndex < newIndex; - var sizeAdjustment = { - x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, - y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 - }; - - _this.handleSortMove({ - pageX: targetPosition.left + sizeAdjustment.x, - pageY: targetPosition.top + sizeAdjustment.y, - ignoreTransition: shift === 0 - }); - }); - - defineProperty(assertThisInitialized(_this), "keyDrop", function (event) { - _this.handleSortEnd(event); - - if (_this.initialFocusedNode) { - _this.initialFocusedNode.focus(); - } - }); - - defineProperty(assertThisInitialized(_this), "handleKeyEnd", function (event) { - if (_this.manager.active) { - _this.keyDrop(event); - } - }); - - defineProperty(assertThisInitialized(_this), "isValidSortingTarget", function (event) { - var useDragHandle = _this.props.useDragHandle; - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); - }); - - validateProps(props); - _this.manager = new Manager(); - _this.events = { - end: _this.handleEnd, - move: _this.handleMove, - start: _this.handleStart - }; - return _this; - } - - createClass(WithSortableContainer, [{ - key: "getChildContext", - value: function getChildContext() { - return { - manager: this.manager - }; - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - var container = this.getContainer(); - Promise.resolve(container).then(function (containerNode) { - _this2.container = containerNode; - _this2.document = _this2.container.ownerDocument || document; - var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; - _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; - _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); - }); - }); - - _this2.container.addEventListener('keydown', _this2.handleKeyDown); - }); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - var _this3 = this; - - if (this.helper && this.helper.parentNode) { - this.helper.parentNode.removeChild(this.helper); - } - - if (!this.container) { - return; - } - - Object.keys(this.events).forEach(function (key) { - return events[key].forEach(function (eventName) { - return _this3.container.removeEventListener(eventName, _this3.events[key]); - }); - }); - this.container.removeEventListener('keydown', this.handleKeyDown); - } - }, { - key: "updateHelperPosition", - value: function updateHelperPosition(event) { - var _this$props6 = this.props, - lockAxis = _this$props6.lockAxis, - lockOffset = _this$props6.lockOffset, - lockToContainerEdges = _this$props6.lockToContainerEdges, - transitionDuration = _this$props6.transitionDuration, - _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, - keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; - var isKeySorting = this.manager.isKeySorting; - var ignoreTransition = event.ignoreTransition; - var offset = getPosition(event); - var translate = { - x: offset.x - this.initialOffset.x, - y: offset.y - this.initialOffset.y - }; - translate.y -= window.pageYOffset - this.initialWindowScroll.top; - translate.x -= window.pageXOffset - this.initialWindowScroll.left; - this.translate = translate; - - if (lockToContainerEdges) { - var _getLockPixelOffsets = getLockPixelOffsets({ - height: this.height, - lockOffset: lockOffset, - width: this.width - }), - _getLockPixelOffsets2 = slicedToArray(_getLockPixelOffsets, 2), - minLockOffset = _getLockPixelOffsets2[0], - maxLockOffset = _getLockPixelOffsets2[1]; - - var minOffset = { - x: this.width / 2 - minLockOffset.x, - y: this.height / 2 - minLockOffset.y - }; - var maxOffset = { - x: this.width / 2 - maxLockOffset.x, - y: this.height / 2 - maxLockOffset.y - }; - translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); - translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); - } - - if (lockAxis === 'x') { - translate.y = 0; - } else if (lockAxis === 'y') { - translate.x = 0; - } - - if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { - setTransitionDuration(this.helper, keyboardSortingTransitionDuration); - } - - setTranslate3d(this.helper, translate); - } - }, { - key: "animateNodes", - value: function animateNodes() { - var _this$props7 = this.props, - transitionDuration = _this$props7.transitionDuration, - hideSortableGhost = _this$props7.hideSortableGhost, - onSortOver = _this$props7.onSortOver; - var containerScrollDelta = this.containerScrollDelta, - windowScrollDelta = this.windowScrollDelta; - var nodes = this.manager.getOrderedRefs(); - var sortingOffset = { - left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, - top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top - }; - var isKeySorting = this.manager.isKeySorting; - var prevIndex = this.newIndex; - this.newIndex = null; - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node3 = nodes[i].node; - var index = _node3.sortableInfo.index; - var width = _node3.offsetWidth; - var height = _node3.offsetHeight; - var offset = { - height: this.height > height ? height / 2 : this.height / 2, - width: this.width > width ? width / 2 : this.width / 2 - }; - var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; - var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; - var translate = { - x: 0, - y: 0 - }; - var edgeOffset = nodes[i].edgeOffset; - - if (!edgeOffset) { - edgeOffset = getEdgeOffset(_node3, this.container); - nodes[i].edgeOffset = edgeOffset; - - if (isKeySorting) { - nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); - } - } - - var nextNode = i < nodes.length - 1 && nodes[i + 1]; - var prevNode = i > 0 && nodes[i - 1]; - - if (nextNode && !nextNode.edgeOffset) { - nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); - - if (isKeySorting) { - nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); - } - } - - if (index === this.index) { - if (hideSortableGhost) { - this.sortableGhost = _node3; - setInlineStyles(_node3, { - opacity: 0, - visibility: 'hidden' - }); - } - - continue; - } - - if (transitionDuration) { - setTransitionDuration(_node3, transitionDuration); - } - - if (this.axis.x) { - if (this.axis.y) { - if (mustShiftForward || 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; - - if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { - if (nextNode) { - translate.x = nextNode.edgeOffset.left - edgeOffset.left; - translate.y = nextNode.edgeOffset.top - edgeOffset.top; - } - } - - if (this.newIndex === null) { - this.newIndex = index; - } - } else if (mustShiftBackward || 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); - - if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { - if (prevNode) { - translate.x = prevNode.edgeOffset.left - edgeOffset.left; - translate.y = prevNode.edgeOffset.top - edgeOffset.top; - } - } - - this.newIndex = index; - } - } else { - if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { - translate.x = -(this.width + this.marginOffset.x); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { - translate.x = this.width + this.marginOffset.x; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - } else if (this.axis.y) { - if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { - translate.y = -(this.height + this.marginOffset.y); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { - translate.y = this.height + this.marginOffset.y; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - - setTranslate3d(_node3, translate); - nodes[i].translate = translate; - } - - if (this.newIndex == null) { - this.newIndex = this.index; - } - - if (isKeySorting) { - this.newIndex = prevIndex; - } - - var oldIndex = isKeySorting ? this.prevIndex : prevIndex; - - if (onSortOver && this.newIndex !== oldIndex) { - onSortOver({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: oldIndex, - isKeySorting: isKeySorting, - nodes: nodes, - helper: this.helper - }); - } - } - }, { - 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 SortableContainer() call'); - return this.refs.wrappedInstance; - } - }, { - key: "getContainer", - value: function getContainer() { - var getContainer = this.props.getContainer; - - if (typeof getContainer !== 'function') { - return reactDom.findDOMNode(this); - } - - return getContainer(config.withRef ? this.getWrappedInstance() : undefined); - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends_1({ - ref: ref - }, omit(this.props, omittedProps))); - } - }, { - key: "helperContainer", - get: function get() { - var helperContainer = this.props.helperContainer; - - if (typeof helperContainer === 'function') { - return helperContainer(); - } - - return this.props.helperContainer || this.document.body; - } - }, { - key: "containerScrollDelta", - get: function get() { - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - - if (useWindowAsScrollContainer) { - return { - left: 0, - top: 0 - }; - } - - return { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top - }; - } - }, { - key: "windowScrollDelta", - get: function get() { - return { - left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, - top: this.contentWindow.pageYOffset - this.initialWindowScroll.top - }; - } - }]); - - return WithSortableContainer; - }(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), defineProperty(_class, "defaultProps", defaultProps), defineProperty(_class, "propTypes", propTypes), defineProperty(_class, "childContextTypes", { - manager: PropTypes.object.isRequired - }), _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) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - inherits(WithSortableElement, _React$Component); - - function WithSortableElement() { - classCallCheck(this, WithSortableElement); - - return possibleConstructorReturn(this, getPrototypeOf(WithSortableElement).apply(this, arguments)); - } - - createClass(WithSortableElement, [{ - key: "componentDidMount", - value: function componentDidMount() { - this.register(); - } - }, { - key: "componentDidUpdate", - value: function componentDidUpdate(prevProps) { - if (this.node) { - if (prevProps.index !== this.props.index) { - this.node.sortableInfo.index = this.props.index; - } - - if (prevProps.disabled !== this.props.disabled) { - this.node.sortableInfo.disabled = this.props.disabled; - } - } - - if (prevProps.collection !== this.props.collection) { - this.unregister(prevProps.collection); - this.register(); - } - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - this.unregister(); - } - }, { - key: "register", - value: function register() { - var _this$props = this.props, - collection = _this$props.collection, - disabled = _this$props.disabled, - index = _this$props.index; - var node = reactDom.findDOMNode(this); - node.sortableInfo = { - collection: collection, - disabled: disabled, - index: index, - manager: this.context.manager - }; - this.node = node; - this.ref = { - node: node - }; - this.context.manager.add(collection, this.ref); - } - }, { - key: "unregister", - value: function unregister() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; - this.context.manager.remove(collection, this.ref); - } - }, { - 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 SortableElement() call'); - return this.refs.wrappedInstance; - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends_1({ - ref: ref - }, omit(this.props, omittedProps$1))); - } - }]); - - return WithSortableElement; - }(React.Component), defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), defineProperty(_class, "contextTypes", { - manager: PropTypes.object.isRequired - }), defineProperty(_class, "propTypes", propTypes$1), defineProperty(_class, "defaultProps", { - collection: 0 - }), _temp; - } - - exports.SortableContainer = sortableContainer; - exports.SortableElement = sortableElement; - exports.SortableHandle = sortableHandle; - exports.arrayMove = arrayMove; - exports.sortableContainer = sortableContainer; - exports.sortableElement = sortableElement; - exports.sortableHandle = sortableHandle; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); diff --git a/dist/react-sortable-hoc.umd.min.js b/dist/react-sortable-hoc.umd.min.js deleted file mode 100644 index f833ee3d5..000000000 --- a/dist/react-sortable-hoc.umd.min.js +++ /dev/null @@ -1 +0,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=r.y-a/2&&!v?(s.y=1,l.y=d*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&&!y?(s.y=-1,l.y=d*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 Q={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,keyboardSortingTransitionDuration:i.number,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,keyCodes:i.shape({lift:i.arrayOf(i.number),drop:i.arrayOf(i.number),cancel:i.arrayOf(i.number),up:i.arrayOf(i.number),down:i.arrayOf(i.number)}),shouldCancelStart:i.func,transitionDuration:i.number,updateBeforeSortStart:i.func,useDragHandle:i.bool,useWindowAsScrollContainer:i.bool},Z={lift:[X],drop:[X],cancel:[B],up:[U,q],down:[F,Y]},ee={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,keyCodes:Z,shouldCancelStart:function(e){return-1!==[V.Input,V.Textarea,V.Select,V.Option,V.Button].indexOf(e.target.tagName)||!!M(e.target,function(e){return"true"===e.contentEditable})},transitionDuration:300,useWindowAsScrollContainer:!1},te=Object.keys(Q);function ne(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)}return n}function oe(t){for(var e=1;ey?y/2:this.height/2,m=this.width>g?g/2:this.width/2,x=c&&p>this.index&&p<=d,b=c&&pthis.containerBoundingRect.width-m&&O&&(w.x=O.edgeOffset.left-S.left,w.y=O.edgeOffset.top-S.top),null===this.newIndex&&(this.newIndex=p)):(x||p>this.index&&(s+i.left+m>=S.left&&l+i.top+v>=S.top||l+i.top+v>=S.top+y))&&(w.x=-(this.width+this.marginOffset.x),S.left+w.xthis.index&&s+i.left+m>=S.left?(w.x=-(this.width+this.marginOffset.x),this.newIndex=p):(b||pthis.index&&l+i.top+v>=S.top?(w.y=-(this.height+this.marginOffset.y),this.newIndex=p):(b||p Date: Thu, 4 Mar 2021 13:18:22 -0500 Subject: [PATCH 04/12] Add files via upload adding prebuilt files --- dist/react-sortable-hoc.esm.js | 1605 ++++++++++++++++++++++ dist/react-sortable-hoc.js | 1617 ++++++++++++++++++++++ dist/react-sortable-hoc.umd.js | 1996 ++++++++++++++++++++++++++++ dist/react-sortable-hoc.umd.min.js | 1 + 4 files changed, 5219 insertions(+) create mode 100644 dist/react-sortable-hoc.esm.js create mode 100644 dist/react-sortable-hoc.js create mode 100644 dist/react-sortable-hoc.umd.js create mode 100644 dist/react-sortable-hoc.umd.min.js diff --git a/dist/react-sortable-hoc.esm.js b/dist/react-sortable-hoc.esm.js new file mode 100644 index 000000000..cfbb3f1e1 --- /dev/null +++ b/dist/react-sortable-hoc.esm.js @@ -0,0 +1,1605 @@ +import _extends from '@babel/runtime/helpers/esm/extends'; +import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'; +import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck'; +import _createClass from '@babel/runtime/helpers/esm/createClass'; +import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized'; +import _inherits from '@babel/runtime/helpers/esm/inherits'; +import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn'; +import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf'; +import _defineProperty from '@babel/runtime/helpers/esm/defineProperty'; +import { createElement, Component } from 'react'; +import PropTypes from 'prop-types'; +import { findDOMNode } from 'react-dom'; +import invariant from 'invariant'; +import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray'; + +var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; +}(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] +}; +var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +}(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; +} +function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } +} +function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; +} +function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; +} +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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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); + + var _super = _createSuper(WithSortableHandle); + + function WithSortableHandle() { + _classCallCheck(this, WithSortableHandle); + + return _super.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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); +} + +function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + var _super = _createSuper$1(WithSortableContainer); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0 + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0 + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _temp; +} + +function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + var _super = _createSuper$2(WithSortableElement); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _super.apply(this, arguments); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; +} + +export { sortableContainer as SortableContainer, sortableElement as SortableElement, sortableHandle as SortableHandle, arrayMove, sortableContainer, sortableElement, sortableHandle }; diff --git a/dist/react-sortable-hoc.js b/dist/react-sortable-hoc.js new file mode 100644 index 000000000..6400f6bcf --- /dev/null +++ b/dist/react-sortable-hoc.js @@ -0,0 +1,1617 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } + +var _extends = _interopDefault(require('@babel/runtime/helpers/extends')); +var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray')); +var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck')); +var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass')); +var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized')); +var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits')); +var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn')); +var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf')); +var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty')); +var React = require('react'); +var PropTypes = _interopDefault(require('prop-types')); +var reactDom = require('react-dom'); +var invariant = _interopDefault(require('invariant')); +var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray')); + +var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; +}(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] +}; +var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +}(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; +} +function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } +} +function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; +} +function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; +} +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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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); + + var _super = _createSuper(WithSortableHandle); + + function WithSortableHandle() { + _classCallCheck(this, WithSortableHandle); + + return _super.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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); +} + +function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + var _super = _createSuper$1(WithSortableContainer); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0 + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0 + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _temp; +} + +function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + var _super = _createSuper$2(WithSortableElement); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _super.apply(this, arguments); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; +} + +exports.SortableContainer = sortableContainer; +exports.SortableElement = sortableElement; +exports.SortableHandle = sortableHandle; +exports.arrayMove = arrayMove; +exports.sortableContainer = sortableContainer; +exports.sortableElement = sortableElement; +exports.sortableHandle = sortableHandle; diff --git a/dist/react-sortable-hoc.umd.js b/dist/react-sortable-hoc.umd.js new file mode 100644 index 000000000..817c49108 --- /dev/null +++ b/dist/react-sortable-hoc.umd.js @@ -0,0 +1,1996 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-dom')) : + typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) : + (global = global || self, factory(global.SortableHOC = {}, global.React, global.PropTypes, global.ReactDOM)); +}(this, (function (exports, React, PropTypes, reactDom) { 'use strict'; + + PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes; + + function unwrapExports (x) { + return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; + } + + function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; + } + + var _extends_1 = createCommonjsModule(function (module) { + function _extends() { + module.exports = _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + return _extends.apply(this, arguments); + } + + module.exports = _extends; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _extends = unwrapExports(_extends_1); + + var arrayWithHoles = createCommonjsModule(function (module) { + function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; + } + + module.exports = _arrayWithHoles; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(arrayWithHoles); + + var iterableToArrayLimit = createCommonjsModule(function (module) { + function _iterableToArrayLimit(arr, i) { + if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; + } + + module.exports = _iterableToArrayLimit; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(iterableToArrayLimit); + + var arrayLikeToArray = createCommonjsModule(function (module) { + function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } + + return arr2; + } + + module.exports = _arrayLikeToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(arrayLikeToArray); + + var unsupportedIterableToArray = createCommonjsModule(function (module) { + function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen); + } + + module.exports = _unsupportedIterableToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(unsupportedIterableToArray); + + var nonIterableRest = createCommonjsModule(function (module) { + function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + module.exports = _nonIterableRest; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(nonIterableRest); + + var slicedToArray = createCommonjsModule(function (module) { + function _slicedToArray(arr, i) { + return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest(); + } + + module.exports = _slicedToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _slicedToArray = unwrapExports(slicedToArray); + + var classCallCheck = createCommonjsModule(function (module) { + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + module.exports = _classCallCheck; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _classCallCheck = unwrapExports(classCallCheck); + + var createClass = createCommonjsModule(function (module) { + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + module.exports = _createClass; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _createClass = unwrapExports(createClass); + + var assertThisInitialized = createCommonjsModule(function (module) { + function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; + } + + module.exports = _assertThisInitialized; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _assertThisInitialized = unwrapExports(assertThisInitialized); + + var setPrototypeOf = createCommonjsModule(function (module) { + function _setPrototypeOf(o, p) { + module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + return _setPrototypeOf(o, p); + } + + module.exports = _setPrototypeOf; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(setPrototypeOf); + + var inherits = createCommonjsModule(function (module) { + function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + if (superClass) setPrototypeOf(subClass, superClass); + } + + module.exports = _inherits; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _inherits = unwrapExports(inherits); + + var _typeof_1 = createCommonjsModule(function (module) { + function _typeof(obj) { + "@babel/helpers - typeof"; + + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + module.exports = _typeof = function _typeof(obj) { + return typeof obj; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + } else { + module.exports = _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + } + + return _typeof(obj); + } + + module.exports = _typeof; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(_typeof_1); + + var possibleConstructorReturn = createCommonjsModule(function (module) { + var _typeof = _typeof_1["default"]; + + + + function _possibleConstructorReturn(self, call) { + if (call && (_typeof(call) === "object" || typeof call === "function")) { + return call; + } + + return assertThisInitialized(self); + } + + module.exports = _possibleConstructorReturn; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _possibleConstructorReturn = unwrapExports(possibleConstructorReturn); + + var getPrototypeOf = createCommonjsModule(function (module) { + function _getPrototypeOf(o) { + module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + module.exports["default"] = module.exports, module.exports.__esModule = true; + return _getPrototypeOf(o); + } + + module.exports = _getPrototypeOf; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _getPrototypeOf = unwrapExports(getPrototypeOf); + + var defineProperty = createCommonjsModule(function (module) { + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; + } + + module.exports = _defineProperty; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _defineProperty = unwrapExports(defineProperty); + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + var invariant = function(condition, format, a, b, c, d, e, f) { + { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + } + + if (!condition) { + var error; + if (format === undefined) { + error = new Error( + 'Minified exception occurred; use the non-minified dev environment ' + + 'for the full error message and additional helpful warnings.' + ); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error( + format.replace(/%s/g, function() { return args[argIndex++]; }) + ); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } + }; + + var invariant_1 = invariant; + + var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; + }(); + + function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; + } + + var arrayWithoutHoles = createCommonjsModule(function (module) { + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return arrayLikeToArray(arr); + } + + module.exports = _arrayWithoutHoles; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(arrayWithoutHoles); + + var iterableToArray = createCommonjsModule(function (module) { + function _iterableToArray(iter) { + if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); + } + + module.exports = _iterableToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(iterableToArray); + + var nonIterableSpread = createCommonjsModule(function (module) { + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + module.exports = _nonIterableSpread; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(nonIterableSpread); + + var toConsumableArray = createCommonjsModule(function (module) { + function _toConsumableArray(arr) { + return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread(); + } + + module.exports = _toConsumableArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _toConsumableArray = unwrapExports(toConsumableArray); + + 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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; + } + function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); + } + var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] + }; + var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } + }(); + 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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; + } + function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); + } + + function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; + } + + function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; + } + function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; + } + function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; + } + function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } + } + function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; + } + function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); + } + function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } + } + function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant_1(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant_1(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; + } + 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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } + } + function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; + } + var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 + }; + var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' + }; + function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; + } + + function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + + function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + 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); + + var _super = _createSuper(WithSortableHandle); + + function WithSortableHandle() { + _classCallCheck(this, WithSortableHandle); + + return _super.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({ + 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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool + }; + var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] + }; + var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + + function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + + function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); + } + + function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + + function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + var _super = _createSuper$1(WithSortableContainer); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0 + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0 + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _temp; + } + + function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + + function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + 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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + var _super = _createSuper$2(WithSortableElement); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _super.apply(this, arguments); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; + } + + exports.SortableContainer = sortableContainer; + exports.SortableElement = sortableElement; + exports.SortableHandle = sortableHandle; + exports.arrayMove = arrayMove; + exports.sortableContainer = sortableContainer; + exports.sortableElement = sortableElement; + exports.sortableHandle = sortableHandle; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); diff --git a/dist/react-sortable-hoc.umd.min.js b/dist/react-sortable-hoc.umd.min.js new file mode 100644 index 000000000..04d1c2006 --- /dev/null +++ b/dist/react-sortable-hoc.umd.min.js @@ -0,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,i,a,s){"use strict";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e,t){return e(t={exports:{}},t.exports),t.exports}a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a;var l=t(n(function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,o=new Array(t);n=r.y-a/2&&!g?(s.y=1,l.y=u*Math.abs((r.y-a/2-n.y)/a)):n.x>=r.x-i/2&&!m?(s.x=1,l.x=c*Math.abs((r.x-i/2-n.x)/i)):n.y<=o.y+a/2&&!y?(s.y=-1,l.y=u*Math.abs((n.y-a/2-o.y)/a)):n.x<=o.x+i/2&&!v&&(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 ne={axis:a.oneOf(["x","y","xy"]),contentWindow:a.any,disableAutoscroll:a.bool,distance:a.number,getContainer:a.func,getHelperDimensions:a.func,helperClass:a.string,helperContainer:a.oneOfType([a.func,"undefined"==typeof HTMLElement?a.any:a.instanceOf(HTMLElement)]),hideSortableGhost:a.bool,keyboardSortingTransitionDuration:a.number,lockAxis:a.string,lockOffset:a.oneOfType([a.number,a.string,a.arrayOf(a.oneOfType([a.number,a.string]))]),lockToContainerEdges:a.bool,onSortEnd:a.func,onSortMove:a.func,onSortOver:a.func,onSortStart:a.func,pressDelay:a.number,pressThreshold:a.number,keyCodes:a.shape({lift:a.arrayOf(a.number),drop:a.arrayOf(a.number),cancel:a.arrayOf(a.number),up:a.arrayOf(a.number),down:a.arrayOf(a.number)}),shouldCancelStart:a.func,transitionDuration:a.number,updateBeforeSortStart:a.func,useDragHandle:a.bool,useWindowAsScrollContainer:a.bool},oe={lift:[Y],drop:[Y],cancel:[q],up:[V,F],down:[$,z]},re={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,keyCodes:oe,shouldCancelStart:function(e){return-1!==[J.Input,J.Textarea,J.Select,J.Option,J.Button].indexOf(e.target.tagName)||!!P(e.target,function(e){return"true"===e.contentEditable})},transitionDuration:300,useWindowAsScrollContainer:!1},ie=Object.keys(ne);function ae(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)}return n}function se(t){for(var e=1;ey?y/2:this.height/2,v=this.width>x?x/2:this.width/2,m=c&&h>this.index&&h<=u,b=c&&hthis.containerBoundingRect.width-v&&O&&(w.x=O.edgeOffset.left-S.left,w.y=O.edgeOffset.top-S.top),null===this.newIndex&&(this.newIndex=h)):(m||h>this.index&&(s+i.left+v>=S.left&&l+i.top+g>=S.top||l+i.top+g>=S.top+y))&&(w.x=-(this.width+this.marginOffset.x),S.left+w.xthis.index&&s+i.left+v>=S.left?(w.x=-(this.width+this.marginOffset.x),this.newIndex=h):(b||hthis.index&&l+i.top+g>=S.top?(w.y=-(this.height+this.marginOffset.y),this.newIndex=h):(b||h Date: Thu, 4 Mar 2021 16:15:19 -0500 Subject: [PATCH 05/12] Update .gitignore --- .gitignore | 1 - 1 file changed, 1 deletion(-) diff --git a/.gitignore b/.gitignore index d88833ad6..51acaeb24 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,5 @@ *.DS_Store node_modules -dist styles.min.css styles.min.css.map coverage From d7cc3195a478377626edba78aaf548b43d491185 Mon Sep 17 00:00:00 2001 From: Khabibullin Rustam Date: Tue, 25 Jan 2022 22:54:46 +0700 Subject: [PATCH 06/12] fix transform scale issue when Sortable container has transform scale, getEdgeOffset do wrong offset calculation --- src/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/utils.js b/src/utils.js index 4b884b755..0afd149eb 100644 --- a/src/utils.js +++ b/src/utils.js @@ -161,8 +161,8 @@ export function getEdgeOffset(node, parent, offset = {left: 0, top: 0}) { // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested const nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop, + left: offset.left + node.getBoundingClientRect().left, + top: offset.top + node.getBoundingClientRect().top, }; if (node.parentNode === parent) { From f96bb31365fac82cfd327d36fbf2cae50b42ddac Mon Sep 17 00:00:00 2001 From: Khabibullin Rustam Date: Thu, 27 Jan 2022 12:43:28 +0700 Subject: [PATCH 07/12] fix different height drag issue --- src/SortableContainer/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index 9852f9926..da5730805 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -640,8 +640,8 @@ export default function sortableContainer( for (let i = 0, len = nodes.length; i < len; i++) { const {node} = nodes[i]; const {index} = node.sortableInfo; - const width = node.offsetWidth; - const height = node.offsetHeight; + const width = node.getBoundingClientRect().width; + const height = node.getBoundingClientRect().height; const offset = { height: this.height > height ? height / 2 : this.height / 2, width: this.width > width ? width / 2 : this.width / 2, @@ -793,9 +793,7 @@ export default function sortableContainer( } else if (this.axis.y) { if ( mustShiftBackward || - (index > this.index && - sortingOffset.top + windowScrollDelta.top + offset.height >= - edgeOffset.top) + (index > this.index && sortingOffset.top + windowScrollDelta.top + this.boundingClientRect.height >= edgeOffset.top + offset.height) ) { translate.y = -(this.height + this.marginOffset.y); this.newIndex = index; From 012653ee72c5e46870c78bc4d5b67e8cd8787d35 Mon Sep 17 00:00:00 2001 From: rustam Date: Fri, 28 Jan 2022 10:51:07 +0700 Subject: [PATCH 08/12] VISME-fix-drag-sort-scale-issue-new-build --- dist/react-sortable-hoc.esm.js | 1618 +--------- dist/react-sortable-hoc.js | 1625 +--------- dist/react-sortable-hoc.umd.js | 4496 ++++++++++++++++------------ dist/react-sortable-hoc.umd.min.js | 1581 +++++++++- src/SortableContainer/index.js | 10 +- src/utils.js | 4 +- 6 files changed, 4115 insertions(+), 5219 deletions(-) diff --git a/dist/react-sortable-hoc.esm.js b/dist/react-sortable-hoc.esm.js index cfbb3f1e1..b65ce8b36 100644 --- a/dist/react-sortable-hoc.esm.js +++ b/dist/react-sortable-hoc.esm.js @@ -1,1605 +1,13 @@ -import _extends from '@babel/runtime/helpers/esm/extends'; -import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'; -import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck'; -import _createClass from '@babel/runtime/helpers/esm/createClass'; -import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized'; -import _inherits from '@babel/runtime/helpers/esm/inherits'; -import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn'; -import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf'; -import _defineProperty from '@babel/runtime/helpers/esm/defineProperty'; -import { createElement, Component } from 'react'; -import PropTypes from 'prop-types'; -import { findDOMNode } from 'react-dom'; -import invariant from 'invariant'; -import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray'; - -var Manager = function () { - function Manager() { - _classCallCheck(this, Manager); - - _defineProperty(this, "refs", {}); - } - - _createClass(Manager, [{ - key: "add", - value: function add(collection, ref) { - if (!this.refs[collection]) { - this.refs[collection] = []; - } - - this.refs[collection].push(ref); - } - }, { - key: "remove", - value: function remove(collection, ref) { - var index = this.getIndex(collection, ref); - - if (index !== -1) { - this.refs[collection].splice(index, 1); - } - } - }, { - key: "isActive", - value: function isActive() { - return this.active; - } - }, { - key: "getActive", - value: function getActive() { - var _this = this; - - return this.refs[this.active.collection].find(function (_ref) { - var node = _ref.node; - return node.sortableInfo.index == _this.active.index; - }); - } - }, { - key: "getIndex", - value: function getIndex(collection, ref) { - return this.refs[collection].indexOf(ref); - } - }, { - key: "getOrderedRefs", - value: function getOrderedRefs() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; - return this.refs[collection].sort(sortByIndex); - } - }]); - - return Manager; -}(); - -function sortByIndex(_ref2, _ref3) { - var index1 = _ref2.node.sortableInfo.index; - var index2 = _ref3.node.sortableInfo.index; - return index1 - index2; -} - -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(); - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); - return array; -} -function omit(obj, keysToOmit) { - return Object.keys(obj).reduce(function (acc, key) { - if (keysToOmit.indexOf(key) === -1) { - acc[key] = obj[key]; - } - - return acc; - }, {}); -} -var events = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'] -}; -var vendorPrefix = function () { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return ''; - } - - var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; - var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; - - switch (pre) { - case 'ms': - return 'ms'; - - default: - return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; - } -}(); -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) { - while (el) { - if (fn(el)) { - return el; - } - - el = el.parentNode; - } - - return null; -} -function limit(min, max, value) { - return Math.max(min, Math.min(value, max)); -} - -function getPixelValue(stringValue) { - if (stringValue.substr(-2) === 'px') { - return parseFloat(stringValue); - } - - return 0; -} - -function getElementMargin(element) { - var style = window.getComputedStyle(element); - return { - bottom: getPixelValue(style.marginBottom), - left: getPixelValue(style.marginLeft), - right: getPixelValue(style.marginRight), - top: getPixelValue(style.marginTop) - }; -} -function provideDisplayName(prefix, Component) { - var componentName = Component.displayName || Component.name; - return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; -} -function getScrollAdjustedBoundingClientRect(node, scrollDelta) { - var boundingClientRect = node.getBoundingClientRect(); - return { - top: boundingClientRect.top + scrollDelta.top, - left: boundingClientRect.left + scrollDelta.left - }; -} -function getPosition(event) { - if (event.touches && event.touches.length) { - return { - x: event.touches[0].pageX, - y: event.touches[0].pageY - }; - } else if (event.changedTouches && event.changedTouches.length) { - return { - x: event.changedTouches[0].pageX, - y: event.changedTouches[0].pageY - }; - } else { - return { - x: event.pageX, - y: event.pageY - }; - } -} -function isTouchEvent(event) { - return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; -} -function getEdgeOffset(node, parent) { - var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { - left: 0, - top: 0 - }; - - if (!node) { - return undefined; - } - - var nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop - }; - - if (node.parentNode === parent) { - return nodeOffset; - } - - return getEdgeOffset(node.parentNode, parent, nodeOffset); -} -function getTargetIndex(newIndex, prevIndex, oldIndex) { - if (newIndex < oldIndex && newIndex > prevIndex) { - return newIndex - 1; - } else if (newIndex > oldIndex && newIndex < prevIndex) { - return newIndex + 1; - } else { - return newIndex; - } -} -function getLockPixelOffset(_ref) { - var lockOffset = _ref.lockOffset, - width = _ref.width, - height = _ref.height; - var offsetX = lockOffset; - var offsetY = lockOffset; - var unit = 'px'; - - if (typeof lockOffset === 'string') { - var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); - invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); - offsetX = parseFloat(lockOffset); - offsetY = parseFloat(lockOffset); - unit = match[1]; - } - - invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); - - if (unit === '%') { - offsetX = offsetX * width / 100; - offsetY = offsetY * height / 100; - } - - return { - x: offsetX, - y: offsetY - }; -} -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) { - var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - if (container) { - return document.querySelector(container); - } - - if (!(el instanceof HTMLElement)) { - return null; - } else if (isScrollable(el)) { - return el; - } else { - return getScrollingParent(el.parentNode); - } -} -function getContainerGridGap(element) { - var style = window.getComputedStyle(element); - - if (style.display === 'grid') { - return { - x: getPixelValue(style.gridColumnGap), - y: getPixelValue(style.gridRowGap) - }; - } - - return { - x: 0, - y: 0 - }; -} -var KEYCODE = { - TAB: 9, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40 -}; -var NodeType = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT' -}; -function cloneNode(node) { - var selector = 'input, textarea, select, canvas, [contenteditable]'; - var fields = node.querySelectorAll(selector); - var clonedNode = node.cloneNode(true); - - var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); - - clonedFields.forEach(function (field, i) { - if (field.type !== 'file') { - field.value = fields[i].value; - } - - if (field.type === 'radio' && field.name) { - field.name = "__sortableClone__".concat(field.name); - } - - if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { - var destCtx = field.getContext('2d'); - destCtx.drawImage(fields[i], 0, 0); - } - }); - return clonedNode; -} - -function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -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); - - var _super = _createSuper(WithSortableHandle); - - function WithSortableHandle() { - _classCallCheck(this, WithSortableHandle); - - return _super.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() { - if (this.interval == null) { - return; - } - - 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; - - if (interactiveElements.indexOf(event.target.tagName) !== -1) { - return true; - } - - if (closest(event.target, function (el) { - return el.contentEditable === 'true'; - })) { - 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, - keyboardSortingTransitionDuration: PropTypes.number, - 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, - keyCodes: PropTypes.shape({ - lift: PropTypes.arrayOf(PropTypes.number), - drop: PropTypes.arrayOf(PropTypes.number), - cancel: PropTypes.arrayOf(PropTypes.number), - up: PropTypes.arrayOf(PropTypes.number), - down: PropTypes.arrayOf(PropTypes.number) - }), - shouldCancelStart: PropTypes.func, - transitionDuration: PropTypes.number, - updateBeforeSortStart: PropTypes.func, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool -}; -var defaultKeyCodes = { - lift: [KEYCODE.SPACE], - drop: [KEYCODE.SPACE], - cancel: [KEYCODE.ESC], - up: [KEYCODE.UP, KEYCODE.LEFT], - down: [KEYCODE.DOWN, KEYCODE.RIGHT] -}; -var defaultProps = { - axis: 'y', - disableAutoscroll: false, - distance: 0, - getHelperDimensions: defaultGetHelperDimensions, - hideSortableGhost: true, - lockOffset: '50%', - lockToContainerEdges: false, - pressDelay: 0, - pressThreshold: 5, - keyCodes: defaultKeyCodes, - 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _finallyRethrows(body, finalizer) { - try { - var result = body(); - } catch (e) { - return finalizer(true, e); - } - - if (result && result.then) { - return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); - } - - return finalizer(false, result); -} - -function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -function sortableContainer(WrappedComponent) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableContainer, _React$Component); - - var _super = _createSuper$1(WithSortableContainer); - - function WithSortableContainer(props) { - var _this; - - _classCallCheck(this, WithSortableContainer); - - _this = _super.call(this, props); - - _defineProperty(_assertThisInitialized(_this), "state", {}); - - _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { - var _this$props = _this.props, - distance = _this$props.distance, - shouldCancelStart = _this$props.shouldCancelStart; - - if (event.button === 2 || shouldCancelStart(event)) { - return; - } - - _this.touched = true; - _this.position = getPosition(event); - var node = closest(event.target, function (el) { - return el.sortableInfo != null; - }); - - if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { - var useDragHandle = _this.props.useDragHandle; - var _node$sortableInfo = node.sortableInfo, - index = _node$sortableInfo.index, - collection = _node$sortableInfo.collection, - disabled = _node$sortableInfo.disabled; - - if (disabled) { - return; - } - - if (useDragHandle && !closest(event.target, isSortableHandle)) { - return; - } - - _this.manager.active = { - collection: collection, - index: index - }; - - if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { - event.preventDefault(); - } - - if (!distance) { - if (_this.props.pressDelay === 0) { - _this.handlePress(event); - } else { - _this.pressTimer = setTimeout(function () { - return _this.handlePress(event); - }, _this.props.pressDelay); - } - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { - return node.sortableInfo.manager === _this.manager; - }); - - _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { - var _this$props2 = _this.props, - distance = _this$props2.distance, - pressThreshold = _this$props2.pressThreshold; - - if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { - var position = getPosition(event); - var delta = { - x: _this.position.x - position.x, - y: _this.position.y - position.y - }; - var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); - _this.delta = delta; - - if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { - clearTimeout(_this.cancelTimer); - _this.cancelTimer = setTimeout(_this.cancel, 0); - } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { - _this.handlePress(event); - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { - _this.touched = false; - - _this.cancel(); - }); - - _defineProperty(_assertThisInitialized(_this), "cancel", function () { - var distance = _this.props.distance; - var sorting = _this.state.sorting; - - if (!sorting) { - if (!distance) { - clearTimeout(_this.pressTimer); - } - - _this.manager.active = null; - } - }); - - _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { - try { - var active = _this.manager.getActive(); - - var _temp6 = function () { - if (active) { - var _temp7 = function _temp7() { - var index = _node.sortableInfo.index; - var margin = getElementMargin(_node); - var gridGap = getContainerGridGap(_this.container); - - var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); - - var dimensions = _getHelperDimensions({ - index: index, - node: _node, - collection: _collection - }); - - _this.node = _node; - _this.margin = margin; - _this.gridGap = gridGap; - _this.width = dimensions.width; - _this.height = dimensions.height; - _this.marginOffset = { - x: _this.margin.left + _this.margin.right + _this.gridGap.x, - y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) - }; - _this.boundingClientRect = _node.getBoundingClientRect(); - _this.containerBoundingRect = containerBoundingRect; - _this.index = index; - _this.newIndex = index; - _this.axis = { - x: _axis.indexOf('x') >= 0, - y: _axis.indexOf('y') >= 0 - }; - _this.offsetEdge = getEdgeOffset(_node, _this.container); - - if (_isKeySorting) { - _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { - pageX: _this.boundingClientRect.left, - pageY: _this.boundingClientRect.top - })); - } else { - _this.initialOffset = getPosition(event); - } - - _this.initialScroll = { - left: _this.scrollContainer.scrollLeft, - top: _this.scrollContainer.scrollTop - }; - _this.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset - }; - _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); - 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 (_isKeySorting) { - _this.helper.focus(); - } - - if (_hideSortableGhost) { - _this.sortableGhost = _node; - setInlineStyles(_node, { - opacity: 0 - }); - } - - _this.minTranslate = {}; - _this.maxTranslate = {}; - - if (_isKeySorting) { - var _ref = _useWindowAsScrollContainer ? { - top: 0, - left: 0, - width: _this.contentWindow.innerWidth, - height: _this.contentWindow.innerHeight - } : _this.containerBoundingRect, - containerTop = _ref.top, - containerLeft = _ref.left, - containerWidth = _ref.width, - containerHeight = _ref.height; - - var containerBottom = containerTop + containerHeight; - var containerRight = containerLeft + containerWidth; - - if (_this.axis.x) { - _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; - _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); - } - - if (_this.axis.y) { - _this.minTranslate.y = containerTop - _this.boundingClientRect.top; - _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); - } - } else { - if (_this.axis.x) { - _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; - _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; - } - - if (_this.axis.y) { - _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; - _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; - } - } - - if (_helperClass) { - _helperClass.split(' ').forEach(function (className) { - return _this.helper.classList.add(className); - }); - } - - _this.listenerNode = event.touches ? _node : _this.contentWindow; - - if (_isKeySorting) { - _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); - }); - } - - _this.setState({ - sorting: true, - sortingIndex: index - }); - - if (_onSortStart) { - _onSortStart({ - node: _node, - index: index, - collection: _collection, - isKeySorting: _isKeySorting, - nodes: _this.manager.getOrderedRefs(), - helper: _this.helper - }, event); - } - - if (_isKeySorting) { - _this.keyMove(0); - } - }; - - var _this$props3 = _this.props, - _axis = _this$props3.axis, - _getHelperDimensions = _this$props3.getHelperDimensions, - _helperClass = _this$props3.helperClass, - _hideSortableGhost = _this$props3.hideSortableGhost, - updateBeforeSortStart = _this$props3.updateBeforeSortStart, - _onSortStart = _this$props3.onSortStart, - _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; - var _node = active.node, - _collection = active.collection; - var _isKeySorting = _this.manager.isKeySorting; - - var _temp8 = function () { - if (typeof updateBeforeSortStart === 'function') { - _this._awaitingUpdateBeforeSortStart = true; - - var _temp9 = _finallyRethrows(function () { - var index = _node.sortableInfo.index; - return Promise.resolve(updateBeforeSortStart({ - collection: _collection, - index: index, - node: _node, - isKeySorting: _isKeySorting - }, event)).then(function () {}); - }, function (_wasThrown, _result) { - _this._awaitingUpdateBeforeSortStart = false; - if (_wasThrown) throw _result; - return _result; - }); - - if (_temp9 && _temp9.then) return _temp9.then(function () {}); - } - }(); - - return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); - } - }(); - - return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); - } catch (e) { - return Promise.reject(e); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { - var onSortMove = _this.props.onSortMove; - - if (typeof event.preventDefault === 'function') { - event.preventDefault(); - } - - _this.updateHelperPosition(event); - - _this.animateNodes(); - - _this.autoscroll(); - - if (onSortMove) { - onSortMove(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { - var _this$props4 = _this.props, - hideSortableGhost = _this$props4.hideSortableGhost, - onSortEnd = _this$props4.onSortEnd; - var _this$manager = _this.manager, - collection = _this$manager.active.collection, - isKeySorting = _this$manager.isKeySorting; - - var nodes = _this.manager.getOrderedRefs(); - - if (_this.listenerNode) { - if (isKeySorting) { - _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); - }); - } - } - - _this.helper.parentNode.removeChild(_this.helper); - - if (hideSortableGhost && _this.sortableGhost) { - setInlineStyles(_this.sortableGhost, { - opacity: '' - }); - } - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node2 = nodes[i]; - var el = _node2.node; - _node2.edgeOffset = null; - _node2.boundingClientRect = null; - setTranslate3d(el, null); - setTransitionDuration(el, null); - _node2.translate = null; - } - - _this.autoScroller.clear(); - - _this.manager.active = null; - _this.manager.isKeySorting = false; - - _this.setState({ - sorting: false, - sortingIndex: null - }); - - if (typeof onSortEnd === 'function') { - onSortEnd({ - collection: collection, - newIndex: _this.newIndex, - oldIndex: _this.index, - isKeySorting: isKeySorting, - nodes: nodes - }, event); - } - - _this.touched = false; - }); - - _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { - var disableAutoscroll = _this.props.disableAutoscroll; - var isKeySorting = _this.manager.isKeySorting; - - if (disableAutoscroll) { - _this.autoScroller.clear(); - - return; - } - - if (isKeySorting) { - var translate = _objectSpread({}, _this.translate); - - var scrollX = 0; - var scrollY = 0; - - if (_this.axis.x) { - translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); - scrollX = _this.translate.x - translate.x; - } - - if (_this.axis.y) { - translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); - scrollY = _this.translate.y - translate.y; - } - - _this.translate = translate; - setTranslate3d(_this.helper, _this.translate); - _this.scrollContainer.scrollLeft += scrollX; - _this.scrollContainer.scrollTop += scrollY; - return; - } - - _this.autoScroller.update({ - height: _this.height, - maxTranslate: _this.maxTranslate, - minTranslate: _this.minTranslate, - translate: _this.translate, - width: _this.width - }); - }); - - _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { - _this.translate.x += offset.left; - _this.translate.y += offset.top; - - _this.animateNodes(); - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { - var keyCode = event.keyCode; - var _this$props5 = _this.props, - shouldCancelStart = _this$props5.shouldCancelStart, - _this$props5$keyCodes = _this$props5.keyCodes, - customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; - - var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); - - if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - - if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { - _this.keyLift(event); - } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { - _this.keyDrop(event); - } else if (keyCodes.cancel.includes(keyCode)) { - _this.newIndex = _this.manager.active.index; - - _this.keyDrop(event); - } else if (keyCodes.up.includes(keyCode)) { - _this.keyMove(-1); - } else if (keyCodes.down.includes(keyCode)) { - _this.keyMove(1); - } - }); - - _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - var _node$sortableInfo2 = node.sortableInfo, - index = _node$sortableInfo2.index, - collection = _node$sortableInfo2.collection; - _this.initialFocusedNode = target; - _this.manager.isKeySorting = true; - _this.manager.active = { - index: index, - collection: collection - }; - - _this.handlePress(event); - }); - - _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { - var nodes = _this.manager.getOrderedRefs(); - - var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; - var newIndex = _this.newIndex + shift; - var prevIndex = _this.newIndex; - - if (newIndex < 0 || newIndex > lastIndex) { - return; - } - - _this.prevIndex = prevIndex; - _this.newIndex = newIndex; - var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); - var target = nodes.find(function (_ref2) { - var node = _ref2.node; - return node.sortableInfo.index === targetIndex; - }); - var targetNode = target.node; - var scrollDelta = _this.containerScrollDelta; - var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); - var targetTranslate = target.translate || { - x: 0, - y: 0 - }; - var targetPosition = { - top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, - left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left - }; - var shouldAdjustForSize = prevIndex < newIndex; - var sizeAdjustment = { - x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, - y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 - }; - - _this.handleSortMove({ - pageX: targetPosition.left + sizeAdjustment.x, - pageY: targetPosition.top + sizeAdjustment.y, - ignoreTransition: shift === 0 - }); - }); - - _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { - _this.handleSortEnd(event); - - if (_this.initialFocusedNode) { - _this.initialFocusedNode.focus(); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { - if (_this.manager.active) { - _this.keyDrop(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { - var useDragHandle = _this.props.useDragHandle; - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); - }); - - validateProps(props); - _this.manager = new Manager(); - _this.events = { - end: _this.handleEnd, - move: _this.handleMove, - start: _this.handleStart - }; - return _this; - } - - _createClass(WithSortableContainer, [{ - key: "getChildContext", - value: function getChildContext() { - return { - manager: this.manager - }; - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - var container = this.getContainer(); - Promise.resolve(container).then(function (containerNode) { - _this2.container = containerNode; - _this2.document = _this2.container.ownerDocument || document; - var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; - _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; - _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); - }); - }); - - _this2.container.addEventListener('keydown', _this2.handleKeyDown); - }); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - var _this3 = this; - - if (this.helper && this.helper.parentNode) { - this.helper.parentNode.removeChild(this.helper); - } - - if (!this.container) { - return; - } - - Object.keys(this.events).forEach(function (key) { - return events[key].forEach(function (eventName) { - return _this3.container.removeEventListener(eventName, _this3.events[key]); - }); - }); - this.container.removeEventListener('keydown', this.handleKeyDown); - } - }, { - key: "updateHelperPosition", - value: function updateHelperPosition(event) { - var _this$props6 = this.props, - lockAxis = _this$props6.lockAxis, - lockOffset = _this$props6.lockOffset, - lockToContainerEdges = _this$props6.lockToContainerEdges, - transitionDuration = _this$props6.transitionDuration, - _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, - keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; - var isKeySorting = this.manager.isKeySorting; - var ignoreTransition = event.ignoreTransition; - var offset = getPosition(event); - var translate = { - x: offset.x - this.initialOffset.x, - y: offset.y - this.initialOffset.y - }; - translate.y -= window.pageYOffset - this.initialWindowScroll.top; - translate.x -= window.pageXOffset - this.initialWindowScroll.left; - this.translate = translate; - - if (lockToContainerEdges) { - var _getLockPixelOffsets = getLockPixelOffsets({ - height: this.height, - lockOffset: lockOffset, - width: this.width - }), - _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), - minLockOffset = _getLockPixelOffsets2[0], - maxLockOffset = _getLockPixelOffsets2[1]; - - var minOffset = { - x: this.width / 2 - minLockOffset.x, - y: this.height / 2 - minLockOffset.y - }; - var maxOffset = { - x: this.width / 2 - maxLockOffset.x, - y: this.height / 2 - maxLockOffset.y - }; - translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); - translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); - } - - if (lockAxis === 'x') { - translate.y = 0; - } else if (lockAxis === 'y') { - translate.x = 0; - } - - if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { - setTransitionDuration(this.helper, keyboardSortingTransitionDuration); - } - - setTranslate3d(this.helper, translate); - } - }, { - key: "animateNodes", - value: function animateNodes() { - var _this$props7 = this.props, - transitionDuration = _this$props7.transitionDuration, - hideSortableGhost = _this$props7.hideSortableGhost, - onSortOver = _this$props7.onSortOver; - var containerScrollDelta = this.containerScrollDelta, - windowScrollDelta = this.windowScrollDelta; - var nodes = this.manager.getOrderedRefs(); - var sortingOffset = { - left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, - top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top - }; - var isKeySorting = this.manager.isKeySorting; - var prevIndex = this.newIndex; - this.newIndex = null; - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node3 = nodes[i].node; - var index = _node3.sortableInfo.index; - var width = _node3.offsetWidth; - var height = _node3.offsetHeight; - var offset = { - height: this.height > height ? height / 2 : this.height / 2, - width: this.width > width ? width / 2 : this.width / 2 - }; - var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; - var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; - var translate = { - x: 0, - y: 0 - }; - var edgeOffset = nodes[i].edgeOffset; - - if (!edgeOffset) { - edgeOffset = getEdgeOffset(_node3, this.container); - nodes[i].edgeOffset = edgeOffset; - - if (isKeySorting) { - nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); - } - } - - var nextNode = i < nodes.length - 1 && nodes[i + 1]; - var prevNode = i > 0 && nodes[i - 1]; - - if (nextNode && !nextNode.edgeOffset) { - nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); - - if (isKeySorting) { - nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); - } - } - - if (index === this.index) { - if (hideSortableGhost) { - this.sortableGhost = _node3; - setInlineStyles(_node3, { - opacity: 0 - }); - } - - continue; - } - - if (transitionDuration) { - setTransitionDuration(_node3, transitionDuration); - } - - if (this.axis.x) { - if (this.axis.y) { - if (mustShiftForward || 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; - - if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { - if (nextNode) { - translate.x = nextNode.edgeOffset.left - edgeOffset.left; - translate.y = nextNode.edgeOffset.top - edgeOffset.top; - } - } - - if (this.newIndex === null) { - this.newIndex = index; - } - } else if (mustShiftBackward || 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); - - if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { - if (prevNode) { - translate.x = prevNode.edgeOffset.left - edgeOffset.left; - translate.y = prevNode.edgeOffset.top - edgeOffset.top; - } - } - - this.newIndex = index; - } - } else { - if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { - translate.x = -(this.width + this.marginOffset.x); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { - translate.x = this.width + this.marginOffset.x; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - } else if (this.axis.y) { - if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { - translate.y = -(this.height + this.marginOffset.y); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { - translate.y = this.height + this.marginOffset.y; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - - setTranslate3d(_node3, translate); - nodes[i].translate = translate; - } - - if (this.newIndex == null) { - this.newIndex = this.index; - } - - if (isKeySorting) { - this.newIndex = prevIndex; - } - - var oldIndex = isKeySorting ? this.prevIndex : prevIndex; - - if (onSortOver && this.newIndex !== oldIndex) { - onSortOver({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: oldIndex, - isKeySorting: isKeySorting, - nodes: nodes, - helper: this.helper - }); - } - } - }, { - 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 SortableContainer() call'); - return this.refs.wrappedInstance; - } - }, { - key: "getContainer", - value: function getContainer() { - var getContainer = this.props.getContainer; - - if (typeof getContainer !== 'function') { - return findDOMNode(this); - } - - return getContainer(config.withRef ? this.getWrappedInstance() : undefined); - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps))); - } - }, { - key: "helperContainer", - get: function get() { - var helperContainer = this.props.helperContainer; - - if (typeof helperContainer === 'function') { - return helperContainer(); - } - - return this.props.helperContainer || this.document.body; - } - }, { - key: "containerScrollDelta", - get: function get() { - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - - if (useWindowAsScrollContainer) { - return { - left: 0, - top: 0 - }; - } - - return { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top - }; - } - }, { - key: "windowScrollDelta", - get: function get() { - return { - left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, - top: this.contentWindow.pageYOffset - this.initialWindowScroll.top - }; - } - }]); - - return WithSortableContainer; - }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { - manager: PropTypes.object.isRequired - }), _temp; -} - -function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -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) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableElement, _React$Component); - - var _super = _createSuper$2(WithSortableElement); - - function WithSortableElement() { - _classCallCheck(this, WithSortableElement); - - return _super.apply(this, arguments); - } - - _createClass(WithSortableElement, [{ - key: "componentDidMount", - value: function componentDidMount() { - this.register(); - } - }, { - key: "componentDidUpdate", - value: function componentDidUpdate(prevProps) { - if (this.node) { - if (prevProps.index !== this.props.index) { - this.node.sortableInfo.index = this.props.index; - } - - if (prevProps.disabled !== this.props.disabled) { - this.node.sortableInfo.disabled = this.props.disabled; - } - } - - if (prevProps.collection !== this.props.collection) { - this.unregister(prevProps.collection); - this.register(); - } - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - this.unregister(); - } - }, { - key: "register", - value: function register() { - var _this$props = this.props, - collection = _this$props.collection, - disabled = _this$props.disabled, - index = _this$props.index; - var node = findDOMNode(this); - node.sortableInfo = { - collection: collection, - disabled: disabled, - index: index, - manager: this.context.manager - }; - this.node = node; - this.ref = { - node: node - }; - this.context.manager.add(collection, this.ref); - } - }, { - key: "unregister", - value: function unregister() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; - this.context.manager.remove(collection, this.ref); - } - }, { - 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 SortableElement() call'); - return this.refs.wrappedInstance; - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps$1))); - } - }]); - - return WithSortableElement; - }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { - manager: PropTypes.object.isRequired - }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { - collection: 0 - }), _temp; -} - -export { sortableContainer as SortableContainer, sortableElement as SortableElement, sortableHandle as SortableHandle, arrayMove, sortableContainer, sortableElement, sortableHandle }; +export { + default as SortableContainer, + default as sortableContainer, +} from './SortableContainer/index.js'; +export { + default as SortableElement, + default as sortableElement, +} from './SortableElement/index.js'; +export { + default as SortableHandle, + default as sortableHandle, +} from './SortableHandle/index.js'; +export {arrayMove} from './utils.js'; diff --git a/dist/react-sortable-hoc.js b/dist/react-sortable-hoc.js index 6400f6bcf..1d817becc 100644 --- a/dist/react-sortable-hoc.js +++ b/dist/react-sortable-hoc.js @@ -1,1617 +1,20 @@ 'use strict'; -Object.defineProperty(exports, '__esModule', { value: true }); +Object.defineProperty(exports, '__esModule', {value: true}); -function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } - -var _extends = _interopDefault(require('@babel/runtime/helpers/extends')); -var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray')); -var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck')); -var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass')); -var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized')); -var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits')); -var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn')); -var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf')); -var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty')); -var React = require('react'); -var PropTypes = _interopDefault(require('prop-types')); -var reactDom = require('react-dom'); -var invariant = _interopDefault(require('invariant')); -var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray')); - -var Manager = function () { - function Manager() { - _classCallCheck(this, Manager); - - _defineProperty(this, "refs", {}); - } - - _createClass(Manager, [{ - key: "add", - value: function add(collection, ref) { - if (!this.refs[collection]) { - this.refs[collection] = []; - } - - this.refs[collection].push(ref); - } - }, { - key: "remove", - value: function remove(collection, ref) { - var index = this.getIndex(collection, ref); - - if (index !== -1) { - this.refs[collection].splice(index, 1); - } - } - }, { - key: "isActive", - value: function isActive() { - return this.active; - } - }, { - key: "getActive", - value: function getActive() { - var _this = this; - - return this.refs[this.active.collection].find(function (_ref) { - var node = _ref.node; - return node.sortableInfo.index == _this.active.index; - }); - } - }, { - key: "getIndex", - value: function getIndex(collection, ref) { - return this.refs[collection].indexOf(ref); - } - }, { - key: "getOrderedRefs", - value: function getOrderedRefs() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; - return this.refs[collection].sort(sortByIndex); - } - }]); - - return Manager; -}(); - -function sortByIndex(_ref2, _ref3) { - var index1 = _ref2.node.sortableInfo.index; - var index2 = _ref3.node.sortableInfo.index; - return index1 - index2; -} - -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(); - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); - return array; -} -function omit(obj, keysToOmit) { - return Object.keys(obj).reduce(function (acc, key) { - if (keysToOmit.indexOf(key) === -1) { - acc[key] = obj[key]; - } - - return acc; - }, {}); -} -var events = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'] -}; -var vendorPrefix = function () { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return ''; - } - - var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; - var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; - - switch (pre) { - case 'ms': - return 'ms'; - - default: - return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; - } -}(); -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) { - while (el) { - if (fn(el)) { - return el; - } - - el = el.parentNode; - } - - return null; -} -function limit(min, max, value) { - return Math.max(min, Math.min(value, max)); -} - -function getPixelValue(stringValue) { - if (stringValue.substr(-2) === 'px') { - return parseFloat(stringValue); - } - - return 0; -} - -function getElementMargin(element) { - var style = window.getComputedStyle(element); - return { - bottom: getPixelValue(style.marginBottom), - left: getPixelValue(style.marginLeft), - right: getPixelValue(style.marginRight), - top: getPixelValue(style.marginTop) - }; -} -function provideDisplayName(prefix, Component) { - var componentName = Component.displayName || Component.name; - return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; -} -function getScrollAdjustedBoundingClientRect(node, scrollDelta) { - var boundingClientRect = node.getBoundingClientRect(); - return { - top: boundingClientRect.top + scrollDelta.top, - left: boundingClientRect.left + scrollDelta.left - }; -} -function getPosition(event) { - if (event.touches && event.touches.length) { - return { - x: event.touches[0].pageX, - y: event.touches[0].pageY - }; - } else if (event.changedTouches && event.changedTouches.length) { - return { - x: event.changedTouches[0].pageX, - y: event.changedTouches[0].pageY - }; - } else { - return { - x: event.pageX, - y: event.pageY - }; - } +function _interopDefault(ex) { + return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex; } -function isTouchEvent(event) { - return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; -} -function getEdgeOffset(node, parent) { - var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { - left: 0, - top: 0 - }; - - if (!node) { - return undefined; - } - - var nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop - }; - - if (node.parentNode === parent) { - return nodeOffset; - } - - return getEdgeOffset(node.parentNode, parent, nodeOffset); -} -function getTargetIndex(newIndex, prevIndex, oldIndex) { - if (newIndex < oldIndex && newIndex > prevIndex) { - return newIndex - 1; - } else if (newIndex > oldIndex && newIndex < prevIndex) { - return newIndex + 1; - } else { - return newIndex; - } -} -function getLockPixelOffset(_ref) { - var lockOffset = _ref.lockOffset, - width = _ref.width, - height = _ref.height; - var offsetX = lockOffset; - var offsetY = lockOffset; - var unit = 'px'; - - if (typeof lockOffset === 'string') { - var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); - invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); - offsetX = parseFloat(lockOffset); - offsetY = parseFloat(lockOffset); - unit = match[1]; - } - - invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); - - if (unit === '%') { - offsetX = offsetX * width / 100; - offsetY = offsetY * height / 100; - } - - return { - x: offsetX, - y: offsetY - }; -} -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) { - var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - if (container) { - return document.querySelector(container); - } - - if (!(el instanceof HTMLElement)) { - return null; - } else if (isScrollable(el)) { - return el; - } else { - return getScrollingParent(el.parentNode); - } -} -function getContainerGridGap(element) { - var style = window.getComputedStyle(element); - - if (style.display === 'grid') { - return { - x: getPixelValue(style.gridColumnGap), - y: getPixelValue(style.gridRowGap) - }; - } - - return { - x: 0, - y: 0 - }; -} -var KEYCODE = { - TAB: 9, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40 -}; -var NodeType = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT' -}; -function cloneNode(node) { - var selector = 'input, textarea, select, canvas, [contenteditable]'; - var fields = node.querySelectorAll(selector); - var clonedNode = node.cloneNode(true); - - var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); - - clonedFields.forEach(function (field, i) { - if (field.type !== 'file') { - field.value = fields[i].value; - } - - if (field.type === 'radio' && field.name) { - field.name = "__sortableClone__".concat(field.name); - } - - if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { - var destCtx = field.getContext('2d'); - destCtx.drawImage(fields[i], 0, 0); - } - }); - return clonedNode; -} - -function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -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); - - var _super = _createSuper(WithSortableHandle); - - function WithSortableHandle() { - _classCallCheck(this, WithSortableHandle); - - return _super.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() { - if (this.interval == null) { - return; - } - - 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; - - if (interactiveElements.indexOf(event.target.tagName) !== -1) { - return true; - } - - if (closest(event.target, function (el) { - return el.contentEditable === 'true'; - })) { - 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, - keyboardSortingTransitionDuration: PropTypes.number, - 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, - keyCodes: PropTypes.shape({ - lift: PropTypes.arrayOf(PropTypes.number), - drop: PropTypes.arrayOf(PropTypes.number), - cancel: PropTypes.arrayOf(PropTypes.number), - up: PropTypes.arrayOf(PropTypes.number), - down: PropTypes.arrayOf(PropTypes.number) - }), - shouldCancelStart: PropTypes.func, - transitionDuration: PropTypes.number, - updateBeforeSortStart: PropTypes.func, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool -}; -var defaultKeyCodes = { - lift: [KEYCODE.SPACE], - drop: [KEYCODE.SPACE], - cancel: [KEYCODE.ESC], - up: [KEYCODE.UP, KEYCODE.LEFT], - down: [KEYCODE.DOWN, KEYCODE.RIGHT] -}; -var defaultProps = { - axis: 'y', - disableAutoscroll: false, - distance: 0, - getHelperDimensions: defaultGetHelperDimensions, - hideSortableGhost: true, - lockOffset: '50%', - lockToContainerEdges: false, - pressDelay: 0, - pressThreshold: 5, - keyCodes: defaultKeyCodes, - 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - -function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _finallyRethrows(body, finalizer) { - try { - var result = body(); - } catch (e) { - return finalizer(true, e); - } - - if (result && result.then) { - return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); - } - - return finalizer(false, result); -} - -function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -function sortableContainer(WrappedComponent) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableContainer, _React$Component); - - var _super = _createSuper$1(WithSortableContainer); - - function WithSortableContainer(props) { - var _this; - - _classCallCheck(this, WithSortableContainer); - - _this = _super.call(this, props); - - _defineProperty(_assertThisInitialized(_this), "state", {}); - - _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { - var _this$props = _this.props, - distance = _this$props.distance, - shouldCancelStart = _this$props.shouldCancelStart; - - if (event.button === 2 || shouldCancelStart(event)) { - return; - } - - _this.touched = true; - _this.position = getPosition(event); - var node = closest(event.target, function (el) { - return el.sortableInfo != null; - }); - - if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { - var useDragHandle = _this.props.useDragHandle; - var _node$sortableInfo = node.sortableInfo, - index = _node$sortableInfo.index, - collection = _node$sortableInfo.collection, - disabled = _node$sortableInfo.disabled; - - if (disabled) { - return; - } - - if (useDragHandle && !closest(event.target, isSortableHandle)) { - return; - } - - _this.manager.active = { - collection: collection, - index: index - }; - - if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { - event.preventDefault(); - } - - if (!distance) { - if (_this.props.pressDelay === 0) { - _this.handlePress(event); - } else { - _this.pressTimer = setTimeout(function () { - return _this.handlePress(event); - }, _this.props.pressDelay); - } - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { - return node.sortableInfo.manager === _this.manager; - }); - - _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { - var _this$props2 = _this.props, - distance = _this$props2.distance, - pressThreshold = _this$props2.pressThreshold; - - if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { - var position = getPosition(event); - var delta = { - x: _this.position.x - position.x, - y: _this.position.y - position.y - }; - var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); - _this.delta = delta; - - if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { - clearTimeout(_this.cancelTimer); - _this.cancelTimer = setTimeout(_this.cancel, 0); - } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { - _this.handlePress(event); - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { - _this.touched = false; - - _this.cancel(); - }); - - _defineProperty(_assertThisInitialized(_this), "cancel", function () { - var distance = _this.props.distance; - var sorting = _this.state.sorting; - - if (!sorting) { - if (!distance) { - clearTimeout(_this.pressTimer); - } - - _this.manager.active = null; - } - }); - - _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { - try { - var active = _this.manager.getActive(); - - var _temp6 = function () { - if (active) { - var _temp7 = function _temp7() { - var index = _node.sortableInfo.index; - var margin = getElementMargin(_node); - var gridGap = getContainerGridGap(_this.container); - - var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); - var dimensions = _getHelperDimensions({ - index: index, - node: _node, - collection: _collection - }); - - _this.node = _node; - _this.margin = margin; - _this.gridGap = gridGap; - _this.width = dimensions.width; - _this.height = dimensions.height; - _this.marginOffset = { - x: _this.margin.left + _this.margin.right + _this.gridGap.x, - y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) - }; - _this.boundingClientRect = _node.getBoundingClientRect(); - _this.containerBoundingRect = containerBoundingRect; - _this.index = index; - _this.newIndex = index; - _this.axis = { - x: _axis.indexOf('x') >= 0, - y: _axis.indexOf('y') >= 0 - }; - _this.offsetEdge = getEdgeOffset(_node, _this.container); - - if (_isKeySorting) { - _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { - pageX: _this.boundingClientRect.left, - pageY: _this.boundingClientRect.top - })); - } else { - _this.initialOffset = getPosition(event); - } - - _this.initialScroll = { - left: _this.scrollContainer.scrollLeft, - top: _this.scrollContainer.scrollTop - }; - _this.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset - }; - _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); - 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 (_isKeySorting) { - _this.helper.focus(); - } - - if (_hideSortableGhost) { - _this.sortableGhost = _node; - setInlineStyles(_node, { - opacity: 0 - }); - } - - _this.minTranslate = {}; - _this.maxTranslate = {}; - - if (_isKeySorting) { - var _ref = _useWindowAsScrollContainer ? { - top: 0, - left: 0, - width: _this.contentWindow.innerWidth, - height: _this.contentWindow.innerHeight - } : _this.containerBoundingRect, - containerTop = _ref.top, - containerLeft = _ref.left, - containerWidth = _ref.width, - containerHeight = _ref.height; - - var containerBottom = containerTop + containerHeight; - var containerRight = containerLeft + containerWidth; - - if (_this.axis.x) { - _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; - _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); - } - - if (_this.axis.y) { - _this.minTranslate.y = containerTop - _this.boundingClientRect.top; - _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); - } - } else { - if (_this.axis.x) { - _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; - _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; - } - - if (_this.axis.y) { - _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; - _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; - } - } - - if (_helperClass) { - _helperClass.split(' ').forEach(function (className) { - return _this.helper.classList.add(className); - }); - } - - _this.listenerNode = event.touches ? _node : _this.contentWindow; - - if (_isKeySorting) { - _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); - }); - } - - _this.setState({ - sorting: true, - sortingIndex: index - }); - - if (_onSortStart) { - _onSortStart({ - node: _node, - index: index, - collection: _collection, - isKeySorting: _isKeySorting, - nodes: _this.manager.getOrderedRefs(), - helper: _this.helper - }, event); - } - - if (_isKeySorting) { - _this.keyMove(0); - } - }; - - var _this$props3 = _this.props, - _axis = _this$props3.axis, - _getHelperDimensions = _this$props3.getHelperDimensions, - _helperClass = _this$props3.helperClass, - _hideSortableGhost = _this$props3.hideSortableGhost, - updateBeforeSortStart = _this$props3.updateBeforeSortStart, - _onSortStart = _this$props3.onSortStart, - _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; - var _node = active.node, - _collection = active.collection; - var _isKeySorting = _this.manager.isKeySorting; - - var _temp8 = function () { - if (typeof updateBeforeSortStart === 'function') { - _this._awaitingUpdateBeforeSortStart = true; - - var _temp9 = _finallyRethrows(function () { - var index = _node.sortableInfo.index; - return Promise.resolve(updateBeforeSortStart({ - collection: _collection, - index: index, - node: _node, - isKeySorting: _isKeySorting - }, event)).then(function () {}); - }, function (_wasThrown, _result) { - _this._awaitingUpdateBeforeSortStart = false; - if (_wasThrown) throw _result; - return _result; - }); - - if (_temp9 && _temp9.then) return _temp9.then(function () {}); - } - }(); - - return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); - } - }(); - - return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); - } catch (e) { - return Promise.reject(e); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { - var onSortMove = _this.props.onSortMove; - - if (typeof event.preventDefault === 'function') { - event.preventDefault(); - } - - _this.updateHelperPosition(event); - - _this.animateNodes(); - - _this.autoscroll(); - - if (onSortMove) { - onSortMove(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { - var _this$props4 = _this.props, - hideSortableGhost = _this$props4.hideSortableGhost, - onSortEnd = _this$props4.onSortEnd; - var _this$manager = _this.manager, - collection = _this$manager.active.collection, - isKeySorting = _this$manager.isKeySorting; - - var nodes = _this.manager.getOrderedRefs(); - - if (_this.listenerNode) { - if (isKeySorting) { - _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); - }); - } - } - - _this.helper.parentNode.removeChild(_this.helper); - - if (hideSortableGhost && _this.sortableGhost) { - setInlineStyles(_this.sortableGhost, { - opacity: '' - }); - } - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node2 = nodes[i]; - var el = _node2.node; - _node2.edgeOffset = null; - _node2.boundingClientRect = null; - setTranslate3d(el, null); - setTransitionDuration(el, null); - _node2.translate = null; - } - - _this.autoScroller.clear(); - - _this.manager.active = null; - _this.manager.isKeySorting = false; - - _this.setState({ - sorting: false, - sortingIndex: null - }); - - if (typeof onSortEnd === 'function') { - onSortEnd({ - collection: collection, - newIndex: _this.newIndex, - oldIndex: _this.index, - isKeySorting: isKeySorting, - nodes: nodes - }, event); - } - - _this.touched = false; - }); - - _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { - var disableAutoscroll = _this.props.disableAutoscroll; - var isKeySorting = _this.manager.isKeySorting; - - if (disableAutoscroll) { - _this.autoScroller.clear(); - - return; - } - - if (isKeySorting) { - var translate = _objectSpread({}, _this.translate); - - var scrollX = 0; - var scrollY = 0; - - if (_this.axis.x) { - translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); - scrollX = _this.translate.x - translate.x; - } - - if (_this.axis.y) { - translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); - scrollY = _this.translate.y - translate.y; - } - - _this.translate = translate; - setTranslate3d(_this.helper, _this.translate); - _this.scrollContainer.scrollLeft += scrollX; - _this.scrollContainer.scrollTop += scrollY; - return; - } - - _this.autoScroller.update({ - height: _this.height, - maxTranslate: _this.maxTranslate, - minTranslate: _this.minTranslate, - translate: _this.translate, - width: _this.width - }); - }); - - _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { - _this.translate.x += offset.left; - _this.translate.y += offset.top; - - _this.animateNodes(); - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { - var keyCode = event.keyCode; - var _this$props5 = _this.props, - shouldCancelStart = _this$props5.shouldCancelStart, - _this$props5$keyCodes = _this$props5.keyCodes, - customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; - - var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); - - if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - - if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { - _this.keyLift(event); - } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { - _this.keyDrop(event); - } else if (keyCodes.cancel.includes(keyCode)) { - _this.newIndex = _this.manager.active.index; - - _this.keyDrop(event); - } else if (keyCodes.up.includes(keyCode)) { - _this.keyMove(-1); - } else if (keyCodes.down.includes(keyCode)) { - _this.keyMove(1); - } - }); - - _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - var _node$sortableInfo2 = node.sortableInfo, - index = _node$sortableInfo2.index, - collection = _node$sortableInfo2.collection; - _this.initialFocusedNode = target; - _this.manager.isKeySorting = true; - _this.manager.active = { - index: index, - collection: collection - }; - - _this.handlePress(event); - }); - - _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { - var nodes = _this.manager.getOrderedRefs(); - - var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; - var newIndex = _this.newIndex + shift; - var prevIndex = _this.newIndex; - - if (newIndex < 0 || newIndex > lastIndex) { - return; - } - - _this.prevIndex = prevIndex; - _this.newIndex = newIndex; - var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); - var target = nodes.find(function (_ref2) { - var node = _ref2.node; - return node.sortableInfo.index === targetIndex; - }); - var targetNode = target.node; - var scrollDelta = _this.containerScrollDelta; - var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); - var targetTranslate = target.translate || { - x: 0, - y: 0 - }; - var targetPosition = { - top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, - left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left - }; - var shouldAdjustForSize = prevIndex < newIndex; - var sizeAdjustment = { - x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, - y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 - }; - - _this.handleSortMove({ - pageX: targetPosition.left + sizeAdjustment.x, - pageY: targetPosition.top + sizeAdjustment.y, - ignoreTransition: shift === 0 - }); - }); - - _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { - _this.handleSortEnd(event); - - if (_this.initialFocusedNode) { - _this.initialFocusedNode.focus(); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { - if (_this.manager.active) { - _this.keyDrop(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { - var useDragHandle = _this.props.useDragHandle; - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); - }); - - validateProps(props); - _this.manager = new Manager(); - _this.events = { - end: _this.handleEnd, - move: _this.handleMove, - start: _this.handleStart - }; - return _this; - } - - _createClass(WithSortableContainer, [{ - key: "getChildContext", - value: function getChildContext() { - return { - manager: this.manager - }; - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - var container = this.getContainer(); - Promise.resolve(container).then(function (containerNode) { - _this2.container = containerNode; - _this2.document = _this2.container.ownerDocument || document; - var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; - _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; - _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); - }); - }); - - _this2.container.addEventListener('keydown', _this2.handleKeyDown); - }); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - var _this3 = this; - - if (this.helper && this.helper.parentNode) { - this.helper.parentNode.removeChild(this.helper); - } - - if (!this.container) { - return; - } - - Object.keys(this.events).forEach(function (key) { - return events[key].forEach(function (eventName) { - return _this3.container.removeEventListener(eventName, _this3.events[key]); - }); - }); - this.container.removeEventListener('keydown', this.handleKeyDown); - } - }, { - key: "updateHelperPosition", - value: function updateHelperPosition(event) { - var _this$props6 = this.props, - lockAxis = _this$props6.lockAxis, - lockOffset = _this$props6.lockOffset, - lockToContainerEdges = _this$props6.lockToContainerEdges, - transitionDuration = _this$props6.transitionDuration, - _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, - keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; - var isKeySorting = this.manager.isKeySorting; - var ignoreTransition = event.ignoreTransition; - var offset = getPosition(event); - var translate = { - x: offset.x - this.initialOffset.x, - y: offset.y - this.initialOffset.y - }; - translate.y -= window.pageYOffset - this.initialWindowScroll.top; - translate.x -= window.pageXOffset - this.initialWindowScroll.left; - this.translate = translate; - - if (lockToContainerEdges) { - var _getLockPixelOffsets = getLockPixelOffsets({ - height: this.height, - lockOffset: lockOffset, - width: this.width - }), - _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), - minLockOffset = _getLockPixelOffsets2[0], - maxLockOffset = _getLockPixelOffsets2[1]; - - var minOffset = { - x: this.width / 2 - minLockOffset.x, - y: this.height / 2 - minLockOffset.y - }; - var maxOffset = { - x: this.width / 2 - maxLockOffset.x, - y: this.height / 2 - maxLockOffset.y - }; - translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); - translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); - } - - if (lockAxis === 'x') { - translate.y = 0; - } else if (lockAxis === 'y') { - translate.x = 0; - } - - if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { - setTransitionDuration(this.helper, keyboardSortingTransitionDuration); - } - - setTranslate3d(this.helper, translate); - } - }, { - key: "animateNodes", - value: function animateNodes() { - var _this$props7 = this.props, - transitionDuration = _this$props7.transitionDuration, - hideSortableGhost = _this$props7.hideSortableGhost, - onSortOver = _this$props7.onSortOver; - var containerScrollDelta = this.containerScrollDelta, - windowScrollDelta = this.windowScrollDelta; - var nodes = this.manager.getOrderedRefs(); - var sortingOffset = { - left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, - top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top - }; - var isKeySorting = this.manager.isKeySorting; - var prevIndex = this.newIndex; - this.newIndex = null; - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node3 = nodes[i].node; - var index = _node3.sortableInfo.index; - var width = _node3.offsetWidth; - var height = _node3.offsetHeight; - var offset = { - height: this.height > height ? height / 2 : this.height / 2, - width: this.width > width ? width / 2 : this.width / 2 - }; - var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; - var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; - var translate = { - x: 0, - y: 0 - }; - var edgeOffset = nodes[i].edgeOffset; - - if (!edgeOffset) { - edgeOffset = getEdgeOffset(_node3, this.container); - nodes[i].edgeOffset = edgeOffset; - - if (isKeySorting) { - nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); - } - } - - var nextNode = i < nodes.length - 1 && nodes[i + 1]; - var prevNode = i > 0 && nodes[i - 1]; - - if (nextNode && !nextNode.edgeOffset) { - nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); - - if (isKeySorting) { - nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); - } - } - - if (index === this.index) { - if (hideSortableGhost) { - this.sortableGhost = _node3; - setInlineStyles(_node3, { - opacity: 0 - }); - } - - continue; - } - - if (transitionDuration) { - setTransitionDuration(_node3, transitionDuration); - } - - if (this.axis.x) { - if (this.axis.y) { - if (mustShiftForward || 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; - - if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { - if (nextNode) { - translate.x = nextNode.edgeOffset.left - edgeOffset.left; - translate.y = nextNode.edgeOffset.top - edgeOffset.top; - } - } - - if (this.newIndex === null) { - this.newIndex = index; - } - } else if (mustShiftBackward || 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); - - if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { - if (prevNode) { - translate.x = prevNode.edgeOffset.left - edgeOffset.left; - translate.y = prevNode.edgeOffset.top - edgeOffset.top; - } - } - - this.newIndex = index; - } - } else { - if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { - translate.x = -(this.width + this.marginOffset.x); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { - translate.x = this.width + this.marginOffset.x; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - } else if (this.axis.y) { - if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { - translate.y = -(this.height + this.marginOffset.y); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { - translate.y = this.height + this.marginOffset.y; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - - setTranslate3d(_node3, translate); - nodes[i].translate = translate; - } - - if (this.newIndex == null) { - this.newIndex = this.index; - } - - if (isKeySorting) { - this.newIndex = prevIndex; - } - - var oldIndex = isKeySorting ? this.prevIndex : prevIndex; - - if (onSortOver && this.newIndex !== oldIndex) { - onSortOver({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: oldIndex, - isKeySorting: isKeySorting, - nodes: nodes, - helper: this.helper - }); - } - } - }, { - 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 SortableContainer() call'); - return this.refs.wrappedInstance; - } - }, { - key: "getContainer", - value: function getContainer() { - var getContainer = this.props.getContainer; - - if (typeof getContainer !== 'function') { - return reactDom.findDOMNode(this); - } - - return getContainer(config.withRef ? this.getWrappedInstance() : undefined); - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps))); - } - }, { - key: "helperContainer", - get: function get() { - var helperContainer = this.props.helperContainer; - - if (typeof helperContainer === 'function') { - return helperContainer(); - } - - return this.props.helperContainer || this.document.body; - } - }, { - key: "containerScrollDelta", - get: function get() { - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - - if (useWindowAsScrollContainer) { - return { - left: 0, - top: 0 - }; - } - - return { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top - }; - } - }, { - key: "windowScrollDelta", - get: function get() { - return { - left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, - top: this.contentWindow.pageYOffset - this.initialWindowScroll.top - }; - } - }]); - - return WithSortableContainer; - }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { - manager: PropTypes.object.isRequired - }), _temp; -} - -function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } -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) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableElement, _React$Component); - - var _super = _createSuper$2(WithSortableElement); - - function WithSortableElement() { - _classCallCheck(this, WithSortableElement); - - return _super.apply(this, arguments); - } - - _createClass(WithSortableElement, [{ - key: "componentDidMount", - value: function componentDidMount() { - this.register(); - } - }, { - key: "componentDidUpdate", - value: function componentDidUpdate(prevProps) { - if (this.node) { - if (prevProps.index !== this.props.index) { - this.node.sortableInfo.index = this.props.index; - } - - if (prevProps.disabled !== this.props.disabled) { - this.node.sortableInfo.disabled = this.props.disabled; - } - } - - if (prevProps.collection !== this.props.collection) { - this.unregister(prevProps.collection); - this.register(); - } - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - this.unregister(); - } - }, { - key: "register", - value: function register() { - var _this$props = this.props, - collection = _this$props.collection, - disabled = _this$props.disabled, - index = _this$props.index; - var node = reactDom.findDOMNode(this); - node.sortableInfo = { - collection: collection, - disabled: disabled, - index: index, - manager: this.context.manager - }; - this.node = node; - this.ref = { - node: node - }; - this.context.manager.add(collection, this.ref); - } - }, { - key: "unregister", - value: function unregister() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; - this.context.manager.remove(collection, this.ref); - } - }, { - 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 SortableElement() call'); - return this.refs.wrappedInstance; - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps$1))); - } - }]); - - return WithSortableElement; - }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { - manager: PropTypes.object.isRequired - }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { - collection: 0 - }), _temp; -} +var index_js = _interopDefault(require('./SortableContainer/index.js')); +var index_js$1 = _interopDefault(require('./SortableElement/index.js')); +var index_js$2 = _interopDefault(require('./SortableHandle/index.js')); +var utils_js = require('./utils.js'); -exports.SortableContainer = sortableContainer; -exports.SortableElement = sortableElement; -exports.SortableHandle = sortableHandle; -exports.arrayMove = arrayMove; -exports.sortableContainer = sortableContainer; -exports.sortableElement = sortableElement; -exports.sortableHandle = sortableHandle; +exports.SortableContainer = index_js; +exports.sortableContainer = index_js; +exports.SortableElement = index_js$1; +exports.sortableElement = index_js$1; +exports.SortableHandle = index_js$2; +exports.sortableHandle = index_js$2; +exports.arrayMove = utils_js.arrayMove; diff --git a/dist/react-sortable-hoc.umd.js b/dist/react-sortable-hoc.umd.js index 817c49108..ee5444bda 100644 --- a/dist/react-sortable-hoc.umd.js +++ b/dist/react-sortable-hoc.umd.js @@ -1,1996 +1,2500 @@ -(function (global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-dom')) : - typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) : - (global = global || self, factory(global.SortableHOC = {}, global.React, global.PropTypes, global.ReactDOM)); -}(this, (function (exports, React, PropTypes, reactDom) { 'use strict'; - - PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes; - - function unwrapExports (x) { - return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; - } - - function createCommonjsModule(fn, module) { - return module = { exports: {} }, fn(module, module.exports), module.exports; - } - - var _extends_1 = createCommonjsModule(function (module) { - function _extends() { - module.exports = _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - module.exports["default"] = module.exports, module.exports.__esModule = true; - return _extends.apply(this, arguments); - } - - module.exports = _extends; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _extends = unwrapExports(_extends_1); - - var arrayWithHoles = createCommonjsModule(function (module) { - function _arrayWithHoles(arr) { - if (Array.isArray(arr)) return arr; - } - - module.exports = _arrayWithHoles; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(arrayWithHoles); - - var iterableToArrayLimit = createCommonjsModule(function (module) { - function _iterableToArrayLimit(arr, i) { - if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; - var _arr = []; - var _n = true; - var _d = false; - var _e = undefined; - - try { - for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { - _arr.push(_s.value); - - if (i && _arr.length === i) break; - } - } catch (err) { - _d = true; - _e = err; - } finally { - try { - if (!_n && _i["return"] != null) _i["return"](); - } finally { - if (_d) throw _e; - } - } - - return _arr; - } - - module.exports = _iterableToArrayLimit; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(iterableToArrayLimit); - - var arrayLikeToArray = createCommonjsModule(function (module) { - function _arrayLikeToArray(arr, len) { - if (len == null || len > arr.length) len = arr.length; - - for (var i = 0, arr2 = new Array(len); i < len; i++) { - arr2[i] = arr[i]; - } - - return arr2; - } - - module.exports = _arrayLikeToArray; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(arrayLikeToArray); - - var unsupportedIterableToArray = createCommonjsModule(function (module) { - function _unsupportedIterableToArray(o, minLen) { - if (!o) return; - if (typeof o === "string") return arrayLikeToArray(o, minLen); - var n = Object.prototype.toString.call(o).slice(8, -1); - if (n === "Object" && o.constructor) n = o.constructor.name; - if (n === "Map" || n === "Set") return Array.from(o); - if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen); - } - - module.exports = _unsupportedIterableToArray; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(unsupportedIterableToArray); - - var nonIterableRest = createCommonjsModule(function (module) { - function _nonIterableRest() { - throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - - module.exports = _nonIterableRest; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(nonIterableRest); - - var slicedToArray = createCommonjsModule(function (module) { - function _slicedToArray(arr, i) { - return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest(); - } - - module.exports = _slicedToArray; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _slicedToArray = unwrapExports(slicedToArray); - - var classCallCheck = createCommonjsModule(function (module) { - function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError("Cannot call a class as a function"); - } - } - - module.exports = _classCallCheck; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _classCallCheck = unwrapExports(classCallCheck); - - var createClass = createCommonjsModule(function (module) { - function _defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ("value" in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); - return Constructor; - } - - module.exports = _createClass; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _createClass = unwrapExports(createClass); - - var assertThisInitialized = createCommonjsModule(function (module) { - function _assertThisInitialized(self) { - if (self === void 0) { - throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); - } - - return self; - } - - module.exports = _assertThisInitialized; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _assertThisInitialized = unwrapExports(assertThisInitialized); - - var setPrototypeOf = createCommonjsModule(function (module) { - function _setPrototypeOf(o, p) { - module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; - }; - - module.exports["default"] = module.exports, module.exports.__esModule = true; - return _setPrototypeOf(o, p); - } - - module.exports = _setPrototypeOf; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(setPrototypeOf); - - var inherits = createCommonjsModule(function (module) { - function _inherits(subClass, superClass) { - if (typeof superClass !== "function" && superClass !== null) { - throw new TypeError("Super expression must either be null or a function"); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - writable: true, - configurable: true - } - }); - if (superClass) setPrototypeOf(subClass, superClass); - } - - module.exports = _inherits; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _inherits = unwrapExports(inherits); - - var _typeof_1 = createCommonjsModule(function (module) { - function _typeof(obj) { - "@babel/helpers - typeof"; - - if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { - module.exports = _typeof = function _typeof(obj) { - return typeof obj; - }; - - module.exports["default"] = module.exports, module.exports.__esModule = true; - } else { - module.exports = _typeof = function _typeof(obj) { - return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; - }; - - module.exports["default"] = module.exports, module.exports.__esModule = true; - } - - return _typeof(obj); - } - - module.exports = _typeof; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(_typeof_1); - - var possibleConstructorReturn = createCommonjsModule(function (module) { - var _typeof = _typeof_1["default"]; - - - - function _possibleConstructorReturn(self, call) { - if (call && (_typeof(call) === "object" || typeof call === "function")) { - return call; - } - - return assertThisInitialized(self); - } - - module.exports = _possibleConstructorReturn; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _possibleConstructorReturn = unwrapExports(possibleConstructorReturn); - - var getPrototypeOf = createCommonjsModule(function (module) { - function _getPrototypeOf(o) { - module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { - return o.__proto__ || Object.getPrototypeOf(o); - }; - module.exports["default"] = module.exports, module.exports.__esModule = true; - return _getPrototypeOf(o); - } - - module.exports = _getPrototypeOf; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _getPrototypeOf = unwrapExports(getPrototypeOf); - - var defineProperty = createCommonjsModule(function (module) { - function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true - }); - } else { - obj[key] = value; - } - - return obj; - } - - module.exports = _defineProperty; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _defineProperty = unwrapExports(defineProperty); - - /** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - - var invariant = function(condition, format, a, b, c, d, e, f) { - { - if (format === undefined) { - throw new Error('invariant requires an error message argument'); - } - } - - if (!condition) { - var error; - if (format === undefined) { - error = new Error( - 'Minified exception occurred; use the non-minified dev environment ' + - 'for the full error message and additional helpful warnings.' - ); - } else { - var args = [a, b, c, d, e, f]; - var argIndex = 0; - error = new Error( - format.replace(/%s/g, function() { return args[argIndex++]; }) - ); - error.name = 'Invariant Violation'; - } - - error.framesToPop = 1; // we don't care about invariant's own frame - throw error; - } - }; - - var invariant_1 = invariant; - - var Manager = function () { - function Manager() { - _classCallCheck(this, Manager); - - _defineProperty(this, "refs", {}); - } - - _createClass(Manager, [{ - key: "add", - value: function add(collection, ref) { - if (!this.refs[collection]) { - this.refs[collection] = []; - } - - this.refs[collection].push(ref); - } - }, { - key: "remove", - value: function remove(collection, ref) { - var index = this.getIndex(collection, ref); - - if (index !== -1) { - this.refs[collection].splice(index, 1); - } - } - }, { - key: "isActive", - value: function isActive() { - return this.active; - } - }, { - key: "getActive", - value: function getActive() { - var _this = this; - - return this.refs[this.active.collection].find(function (_ref) { - var node = _ref.node; - return node.sortableInfo.index == _this.active.index; - }); - } - }, { - key: "getIndex", - value: function getIndex(collection, ref) { - return this.refs[collection].indexOf(ref); - } - }, { - key: "getOrderedRefs", - value: function getOrderedRefs() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; - return this.refs[collection].sort(sortByIndex); - } - }]); - - return Manager; - }(); - - function sortByIndex(_ref2, _ref3) { - var index1 = _ref2.node.sortableInfo.index; - var index2 = _ref3.node.sortableInfo.index; - return index1 - index2; - } - - var arrayWithoutHoles = createCommonjsModule(function (module) { - function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) return arrayLikeToArray(arr); - } - - module.exports = _arrayWithoutHoles; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(arrayWithoutHoles); - - var iterableToArray = createCommonjsModule(function (module) { - function _iterableToArray(iter) { - if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); - } - - module.exports = _iterableToArray; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(iterableToArray); - - var nonIterableSpread = createCommonjsModule(function (module) { - function _nonIterableSpread() { - throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); - } - - module.exports = _nonIterableSpread; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - unwrapExports(nonIterableSpread); - - var toConsumableArray = createCommonjsModule(function (module) { - function _toConsumableArray(arr) { - return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread(); - } - - module.exports = _toConsumableArray; - module.exports["default"] = module.exports, module.exports.__esModule = true; - }); - - var _toConsumableArray = unwrapExports(toConsumableArray); - - 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(); - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); - return array; - } - function omit(obj, keysToOmit) { - return Object.keys(obj).reduce(function (acc, key) { - if (keysToOmit.indexOf(key) === -1) { - acc[key] = obj[key]; - } - - return acc; - }, {}); - } - var events = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'] - }; - var vendorPrefix = function () { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return ''; - } - - var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; - var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; - - switch (pre) { - case 'ms': - return 'ms'; - - default: - return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; - } - }(); - 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) { - while (el) { - if (fn(el)) { - return el; - } - - el = el.parentNode; - } - - return null; - } - function limit(min, max, value) { - return Math.max(min, Math.min(value, max)); - } - - function getPixelValue(stringValue) { - if (stringValue.substr(-2) === 'px') { - return parseFloat(stringValue); - } - - return 0; - } - - function getElementMargin(element) { - var style = window.getComputedStyle(element); - return { - bottom: getPixelValue(style.marginBottom), - left: getPixelValue(style.marginLeft), - right: getPixelValue(style.marginRight), - top: getPixelValue(style.marginTop) - }; - } - function provideDisplayName(prefix, Component) { - var componentName = Component.displayName || Component.name; - return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; - } - function getScrollAdjustedBoundingClientRect(node, scrollDelta) { - var boundingClientRect = node.getBoundingClientRect(); - return { - top: boundingClientRect.top + scrollDelta.top, - left: boundingClientRect.left + scrollDelta.left - }; - } - function getPosition(event) { - if (event.touches && event.touches.length) { - return { - x: event.touches[0].pageX, - y: event.touches[0].pageY - }; - } else if (event.changedTouches && event.changedTouches.length) { - return { - x: event.changedTouches[0].pageX, - y: event.changedTouches[0].pageY - }; - } else { - return { - x: event.pageX, - y: event.pageY - }; - } - } - function isTouchEvent(event) { - return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; - } - function getEdgeOffset(node, parent) { - var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { - left: 0, - top: 0 - }; - - if (!node) { - return undefined; - } - - var nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop - }; - - if (node.parentNode === parent) { - return nodeOffset; - } - - return getEdgeOffset(node.parentNode, parent, nodeOffset); - } - function getTargetIndex(newIndex, prevIndex, oldIndex) { - if (newIndex < oldIndex && newIndex > prevIndex) { - return newIndex - 1; - } else if (newIndex > oldIndex && newIndex < prevIndex) { - return newIndex + 1; - } else { - return newIndex; - } - } - function getLockPixelOffset(_ref) { - var lockOffset = _ref.lockOffset, - width = _ref.width, - height = _ref.height; - var offsetX = lockOffset; - var offsetY = lockOffset; - var unit = 'px'; - - if (typeof lockOffset === 'string') { - var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); - invariant_1(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); - offsetX = parseFloat(lockOffset); - offsetY = parseFloat(lockOffset); - unit = match[1]; - } - - invariant_1(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); - - if (unit === '%') { - offsetX = offsetX * width / 100; - offsetY = offsetY * height / 100; - } - - return { - x: offsetX, - y: offsetY - }; - } - 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) { - var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - if (container) { - return document.querySelector(container); - } - - if (!(el instanceof HTMLElement)) { - return null; - } else if (isScrollable(el)) { - return el; - } else { - return getScrollingParent(el.parentNode); - } - } - function getContainerGridGap(element) { - var style = window.getComputedStyle(element); - - if (style.display === 'grid') { - return { - x: getPixelValue(style.gridColumnGap), - y: getPixelValue(style.gridRowGap) - }; - } - - return { - x: 0, - y: 0 - }; - } - var KEYCODE = { - TAB: 9, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40 - }; - var NodeType = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT' - }; - function cloneNode(node) { - var selector = 'input, textarea, select, canvas, [contenteditable]'; - var fields = node.querySelectorAll(selector); - var clonedNode = node.cloneNode(true); - - var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); - - clonedFields.forEach(function (field, i) { - if (field.type !== 'file') { - field.value = fields[i].value; - } - - if (field.type === 'radio' && field.name) { - field.name = "__sortableClone__".concat(field.name); - } - - if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { - var destCtx = field.getContext('2d'); - destCtx.drawImage(fields[i], 0, 0); - } - }); - return clonedNode; - } - - function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - - function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } - 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); - - var _super = _createSuper(WithSortableHandle); - - function WithSortableHandle() { - _classCallCheck(this, WithSortableHandle); - - return _super.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({ - 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() { - if (this.interval == null) { - return; - } - - 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; - - if (interactiveElements.indexOf(event.target.tagName) !== -1) { - return true; - } - - if (closest(event.target, function (el) { - return el.contentEditable === 'true'; - })) { - 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, - keyboardSortingTransitionDuration: PropTypes.number, - 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, - keyCodes: PropTypes.shape({ - lift: PropTypes.arrayOf(PropTypes.number), - drop: PropTypes.arrayOf(PropTypes.number), - cancel: PropTypes.arrayOf(PropTypes.number), - up: PropTypes.arrayOf(PropTypes.number), - down: PropTypes.arrayOf(PropTypes.number) - }), - shouldCancelStart: PropTypes.func, - transitionDuration: PropTypes.number, - updateBeforeSortStart: PropTypes.func, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool - }; - var defaultKeyCodes = { - lift: [KEYCODE.SPACE], - drop: [KEYCODE.SPACE], - cancel: [KEYCODE.ESC], - up: [KEYCODE.UP, KEYCODE.LEFT], - down: [KEYCODE.DOWN, KEYCODE.RIGHT] - }; - var defaultProps = { - axis: 'y', - disableAutoscroll: false, - distance: 0, - getHelperDimensions: defaultGetHelperDimensions, - hideSortableGhost: true, - lockOffset: '50%', - lockToContainerEdges: false, - pressDelay: 0, - pressThreshold: 5, - keyCodes: defaultKeyCodes, - 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } - - function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - - function _finallyRethrows(body, finalizer) { - try { - var result = body(); - } catch (e) { - return finalizer(true, e); - } - - if (result && result.then) { - return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); - } - - return finalizer(false, result); - } - - function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - - function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } - function sortableContainer(WrappedComponent) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableContainer, _React$Component); - - var _super = _createSuper$1(WithSortableContainer); - - function WithSortableContainer(props) { - var _this; - - _classCallCheck(this, WithSortableContainer); - - _this = _super.call(this, props); - - _defineProperty(_assertThisInitialized(_this), "state", {}); - - _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { - var _this$props = _this.props, - distance = _this$props.distance, - shouldCancelStart = _this$props.shouldCancelStart; - - if (event.button === 2 || shouldCancelStart(event)) { - return; - } - - _this.touched = true; - _this.position = getPosition(event); - var node = closest(event.target, function (el) { - return el.sortableInfo != null; - }); - - if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { - var useDragHandle = _this.props.useDragHandle; - var _node$sortableInfo = node.sortableInfo, - index = _node$sortableInfo.index, - collection = _node$sortableInfo.collection, - disabled = _node$sortableInfo.disabled; - - if (disabled) { - return; - } - - if (useDragHandle && !closest(event.target, isSortableHandle)) { - return; - } - - _this.manager.active = { - collection: collection, - index: index - }; - - if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { - event.preventDefault(); - } - - if (!distance) { - if (_this.props.pressDelay === 0) { - _this.handlePress(event); - } else { - _this.pressTimer = setTimeout(function () { - return _this.handlePress(event); - }, _this.props.pressDelay); - } - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { - return node.sortableInfo.manager === _this.manager; - }); - - _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { - var _this$props2 = _this.props, - distance = _this$props2.distance, - pressThreshold = _this$props2.pressThreshold; - - if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { - var position = getPosition(event); - var delta = { - x: _this.position.x - position.x, - y: _this.position.y - position.y - }; - var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); - _this.delta = delta; - - if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { - clearTimeout(_this.cancelTimer); - _this.cancelTimer = setTimeout(_this.cancel, 0); - } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { - _this.handlePress(event); - } - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { - _this.touched = false; - - _this.cancel(); - }); - - _defineProperty(_assertThisInitialized(_this), "cancel", function () { - var distance = _this.props.distance; - var sorting = _this.state.sorting; - - if (!sorting) { - if (!distance) { - clearTimeout(_this.pressTimer); - } - - _this.manager.active = null; - } - }); - - _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { - try { - var active = _this.manager.getActive(); - - var _temp6 = function () { - if (active) { - var _temp7 = function _temp7() { - var index = _node.sortableInfo.index; - var margin = getElementMargin(_node); - var gridGap = getContainerGridGap(_this.container); - - var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); - - var dimensions = _getHelperDimensions({ - index: index, - node: _node, - collection: _collection - }); - - _this.node = _node; - _this.margin = margin; - _this.gridGap = gridGap; - _this.width = dimensions.width; - _this.height = dimensions.height; - _this.marginOffset = { - x: _this.margin.left + _this.margin.right + _this.gridGap.x, - y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) - }; - _this.boundingClientRect = _node.getBoundingClientRect(); - _this.containerBoundingRect = containerBoundingRect; - _this.index = index; - _this.newIndex = index; - _this.axis = { - x: _axis.indexOf('x') >= 0, - y: _axis.indexOf('y') >= 0 - }; - _this.offsetEdge = getEdgeOffset(_node, _this.container); - - if (_isKeySorting) { - _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { - pageX: _this.boundingClientRect.left, - pageY: _this.boundingClientRect.top - })); - } else { - _this.initialOffset = getPosition(event); - } - - _this.initialScroll = { - left: _this.scrollContainer.scrollLeft, - top: _this.scrollContainer.scrollTop - }; - _this.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset - }; - _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); - 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 (_isKeySorting) { - _this.helper.focus(); - } - - if (_hideSortableGhost) { - _this.sortableGhost = _node; - setInlineStyles(_node, { - opacity: 0 - }); - } - - _this.minTranslate = {}; - _this.maxTranslate = {}; - - if (_isKeySorting) { - var _ref = _useWindowAsScrollContainer ? { - top: 0, - left: 0, - width: _this.contentWindow.innerWidth, - height: _this.contentWindow.innerHeight - } : _this.containerBoundingRect, - containerTop = _ref.top, - containerLeft = _ref.left, - containerWidth = _ref.width, - containerHeight = _ref.height; - - var containerBottom = containerTop + containerHeight; - var containerRight = containerLeft + containerWidth; - - if (_this.axis.x) { - _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; - _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); - } - - if (_this.axis.y) { - _this.minTranslate.y = containerTop - _this.boundingClientRect.top; - _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); - } - } else { - if (_this.axis.x) { - _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; - _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; - } - - if (_this.axis.y) { - _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; - _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; - } - } - - if (_helperClass) { - _helperClass.split(' ').forEach(function (className) { - return _this.helper.classList.add(className); - }); - } - - _this.listenerNode = event.touches ? _node : _this.contentWindow; - - if (_isKeySorting) { - _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); - }); - } - - _this.setState({ - sorting: true, - sortingIndex: index - }); - - if (_onSortStart) { - _onSortStart({ - node: _node, - index: index, - collection: _collection, - isKeySorting: _isKeySorting, - nodes: _this.manager.getOrderedRefs(), - helper: _this.helper - }, event); - } - - if (_isKeySorting) { - _this.keyMove(0); - } - }; - - var _this$props3 = _this.props, - _axis = _this$props3.axis, - _getHelperDimensions = _this$props3.getHelperDimensions, - _helperClass = _this$props3.helperClass, - _hideSortableGhost = _this$props3.hideSortableGhost, - updateBeforeSortStart = _this$props3.updateBeforeSortStart, - _onSortStart = _this$props3.onSortStart, - _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; - var _node = active.node, - _collection = active.collection; - var _isKeySorting = _this.manager.isKeySorting; - - var _temp8 = function () { - if (typeof updateBeforeSortStart === 'function') { - _this._awaitingUpdateBeforeSortStart = true; - - var _temp9 = _finallyRethrows(function () { - var index = _node.sortableInfo.index; - return Promise.resolve(updateBeforeSortStart({ - collection: _collection, - index: index, - node: _node, - isKeySorting: _isKeySorting - }, event)).then(function () {}); - }, function (_wasThrown, _result) { - _this._awaitingUpdateBeforeSortStart = false; - if (_wasThrown) throw _result; - return _result; - }); - - if (_temp9 && _temp9.then) return _temp9.then(function () {}); - } - }(); - - return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); - } - }(); - - return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); - } catch (e) { - return Promise.reject(e); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { - var onSortMove = _this.props.onSortMove; - - if (typeof event.preventDefault === 'function') { - event.preventDefault(); - } - - _this.updateHelperPosition(event); - - _this.animateNodes(); - - _this.autoscroll(); - - if (onSortMove) { - onSortMove(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { - var _this$props4 = _this.props, - hideSortableGhost = _this$props4.hideSortableGhost, - onSortEnd = _this$props4.onSortEnd; - var _this$manager = _this.manager, - collection = _this$manager.active.collection, - isKeySorting = _this$manager.isKeySorting; - - var nodes = _this.manager.getOrderedRefs(); - - if (_this.listenerNode) { - if (isKeySorting) { - _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); - - _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); - } else { - events.move.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); - }); - events.end.forEach(function (eventName) { - return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); - }); - } - } - - _this.helper.parentNode.removeChild(_this.helper); - - if (hideSortableGhost && _this.sortableGhost) { - setInlineStyles(_this.sortableGhost, { - opacity: '' - }); - } - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node2 = nodes[i]; - var el = _node2.node; - _node2.edgeOffset = null; - _node2.boundingClientRect = null; - setTranslate3d(el, null); - setTransitionDuration(el, null); - _node2.translate = null; - } - - _this.autoScroller.clear(); - - _this.manager.active = null; - _this.manager.isKeySorting = false; - - _this.setState({ - sorting: false, - sortingIndex: null - }); - - if (typeof onSortEnd === 'function') { - onSortEnd({ - collection: collection, - newIndex: _this.newIndex, - oldIndex: _this.index, - isKeySorting: isKeySorting, - nodes: nodes - }, event); - } - - _this.touched = false; - }); - - _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { - var disableAutoscroll = _this.props.disableAutoscroll; - var isKeySorting = _this.manager.isKeySorting; - - if (disableAutoscroll) { - _this.autoScroller.clear(); - - return; - } - - if (isKeySorting) { - var translate = _objectSpread({}, _this.translate); - - var scrollX = 0; - var scrollY = 0; - - if (_this.axis.x) { - translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); - scrollX = _this.translate.x - translate.x; - } - - if (_this.axis.y) { - translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); - scrollY = _this.translate.y - translate.y; - } - - _this.translate = translate; - setTranslate3d(_this.helper, _this.translate); - _this.scrollContainer.scrollLeft += scrollX; - _this.scrollContainer.scrollTop += scrollY; - return; - } - - _this.autoScroller.update({ - height: _this.height, - maxTranslate: _this.maxTranslate, - minTranslate: _this.minTranslate, - translate: _this.translate, - width: _this.width - }); - }); - - _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { - _this.translate.x += offset.left; - _this.translate.y += offset.top; - - _this.animateNodes(); - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { - var keyCode = event.keyCode; - var _this$props5 = _this.props, - shouldCancelStart = _this$props5.shouldCancelStart, - _this$props5$keyCodes = _this$props5.keyCodes, - customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; - - var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); - - if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - - if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { - _this.keyLift(event); - } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { - _this.keyDrop(event); - } else if (keyCodes.cancel.includes(keyCode)) { - _this.newIndex = _this.manager.active.index; - - _this.keyDrop(event); - } else if (keyCodes.up.includes(keyCode)) { - _this.keyMove(-1); - } else if (keyCodes.down.includes(keyCode)) { - _this.keyMove(1); - } - }); - - _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - var _node$sortableInfo2 = node.sortableInfo, - index = _node$sortableInfo2.index, - collection = _node$sortableInfo2.collection; - _this.initialFocusedNode = target; - _this.manager.isKeySorting = true; - _this.manager.active = { - index: index, - collection: collection - }; - - _this.handlePress(event); - }); - - _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { - var nodes = _this.manager.getOrderedRefs(); - - var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; - var newIndex = _this.newIndex + shift; - var prevIndex = _this.newIndex; - - if (newIndex < 0 || newIndex > lastIndex) { - return; - } - - _this.prevIndex = prevIndex; - _this.newIndex = newIndex; - var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); - var target = nodes.find(function (_ref2) { - var node = _ref2.node; - return node.sortableInfo.index === targetIndex; - }); - var targetNode = target.node; - var scrollDelta = _this.containerScrollDelta; - var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); - var targetTranslate = target.translate || { - x: 0, - y: 0 - }; - var targetPosition = { - top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, - left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left - }; - var shouldAdjustForSize = prevIndex < newIndex; - var sizeAdjustment = { - x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, - y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 - }; - - _this.handleSortMove({ - pageX: targetPosition.left + sizeAdjustment.x, - pageY: targetPosition.top + sizeAdjustment.y, - ignoreTransition: shift === 0 - }); - }); - - _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { - _this.handleSortEnd(event); - - if (_this.initialFocusedNode) { - _this.initialFocusedNode.focus(); - } - }); - - _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { - if (_this.manager.active) { - _this.keyDrop(event); - } - }); - - _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { - var useDragHandle = _this.props.useDragHandle; - var target = event.target; - var node = closest(target, function (el) { - return el.sortableInfo != null; - }); - return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); - }); - - validateProps(props); - _this.manager = new Manager(); - _this.events = { - end: _this.handleEnd, - move: _this.handleMove, - start: _this.handleStart - }; - return _this; - } - - _createClass(WithSortableContainer, [{ - key: "getChildContext", - value: function getChildContext() { - return { - manager: this.manager - }; - } - }, { - key: "componentDidMount", - value: function componentDidMount() { - var _this2 = this; - - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - var container = this.getContainer(); - Promise.resolve(container).then(function (containerNode) { - _this2.container = containerNode; - _this2.document = _this2.container.ownerDocument || document; - var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; - _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; - _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); - }); - }); - - _this2.container.addEventListener('keydown', _this2.handleKeyDown); - }); - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - var _this3 = this; - - if (this.helper && this.helper.parentNode) { - this.helper.parentNode.removeChild(this.helper); - } - - if (!this.container) { - return; - } - - Object.keys(this.events).forEach(function (key) { - return events[key].forEach(function (eventName) { - return _this3.container.removeEventListener(eventName, _this3.events[key]); - }); - }); - this.container.removeEventListener('keydown', this.handleKeyDown); - } - }, { - key: "updateHelperPosition", - value: function updateHelperPosition(event) { - var _this$props6 = this.props, - lockAxis = _this$props6.lockAxis, - lockOffset = _this$props6.lockOffset, - lockToContainerEdges = _this$props6.lockToContainerEdges, - transitionDuration = _this$props6.transitionDuration, - _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, - keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; - var isKeySorting = this.manager.isKeySorting; - var ignoreTransition = event.ignoreTransition; - var offset = getPosition(event); - var translate = { - x: offset.x - this.initialOffset.x, - y: offset.y - this.initialOffset.y - }; - translate.y -= window.pageYOffset - this.initialWindowScroll.top; - translate.x -= window.pageXOffset - this.initialWindowScroll.left; - this.translate = translate; - - if (lockToContainerEdges) { - var _getLockPixelOffsets = getLockPixelOffsets({ - height: this.height, - lockOffset: lockOffset, - width: this.width - }), - _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), - minLockOffset = _getLockPixelOffsets2[0], - maxLockOffset = _getLockPixelOffsets2[1]; - - var minOffset = { - x: this.width / 2 - minLockOffset.x, - y: this.height / 2 - minLockOffset.y - }; - var maxOffset = { - x: this.width / 2 - maxLockOffset.x, - y: this.height / 2 - maxLockOffset.y - }; - translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); - translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); - } - - if (lockAxis === 'x') { - translate.y = 0; - } else if (lockAxis === 'y') { - translate.x = 0; - } - - if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { - setTransitionDuration(this.helper, keyboardSortingTransitionDuration); - } - - setTranslate3d(this.helper, translate); - } - }, { - key: "animateNodes", - value: function animateNodes() { - var _this$props7 = this.props, - transitionDuration = _this$props7.transitionDuration, - hideSortableGhost = _this$props7.hideSortableGhost, - onSortOver = _this$props7.onSortOver; - var containerScrollDelta = this.containerScrollDelta, - windowScrollDelta = this.windowScrollDelta; - var nodes = this.manager.getOrderedRefs(); - var sortingOffset = { - left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, - top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top - }; - var isKeySorting = this.manager.isKeySorting; - var prevIndex = this.newIndex; - this.newIndex = null; - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node3 = nodes[i].node; - var index = _node3.sortableInfo.index; - var width = _node3.offsetWidth; - var height = _node3.offsetHeight; - var offset = { - height: this.height > height ? height / 2 : this.height / 2, - width: this.width > width ? width / 2 : this.width / 2 - }; - var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; - var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; - var translate = { - x: 0, - y: 0 - }; - var edgeOffset = nodes[i].edgeOffset; - - if (!edgeOffset) { - edgeOffset = getEdgeOffset(_node3, this.container); - nodes[i].edgeOffset = edgeOffset; - - if (isKeySorting) { - nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); - } - } - - var nextNode = i < nodes.length - 1 && nodes[i + 1]; - var prevNode = i > 0 && nodes[i - 1]; - - if (nextNode && !nextNode.edgeOffset) { - nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); - - if (isKeySorting) { - nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); - } - } - - if (index === this.index) { - if (hideSortableGhost) { - this.sortableGhost = _node3; - setInlineStyles(_node3, { - opacity: 0 - }); - } - - continue; - } - - if (transitionDuration) { - setTransitionDuration(_node3, transitionDuration); - } - - if (this.axis.x) { - if (this.axis.y) { - if (mustShiftForward || 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; - - if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { - if (nextNode) { - translate.x = nextNode.edgeOffset.left - edgeOffset.left; - translate.y = nextNode.edgeOffset.top - edgeOffset.top; - } - } - - if (this.newIndex === null) { - this.newIndex = index; - } - } else if (mustShiftBackward || 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); - - if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { - if (prevNode) { - translate.x = prevNode.edgeOffset.left - edgeOffset.left; - translate.y = prevNode.edgeOffset.top - edgeOffset.top; - } - } - - this.newIndex = index; - } - } else { - if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { - translate.x = -(this.width + this.marginOffset.x); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { - translate.x = this.width + this.marginOffset.x; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - } else if (this.axis.y) { - if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { - translate.y = -(this.height + this.marginOffset.y); - this.newIndex = index; - } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { - translate.y = this.height + this.marginOffset.y; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - - setTranslate3d(_node3, translate); - nodes[i].translate = translate; - } - - if (this.newIndex == null) { - this.newIndex = this.index; - } - - if (isKeySorting) { - this.newIndex = prevIndex; - } - - var oldIndex = isKeySorting ? this.prevIndex : prevIndex; - - if (onSortOver && this.newIndex !== oldIndex) { - onSortOver({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: oldIndex, - isKeySorting: isKeySorting, - nodes: nodes, - helper: this.helper - }); - } - } - }, { - 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 SortableContainer() call'); - return this.refs.wrappedInstance; - } - }, { - key: "getContainer", - value: function getContainer() { - var getContainer = this.props.getContainer; - - if (typeof getContainer !== 'function') { - return reactDom.findDOMNode(this); - } - - return getContainer(config.withRef ? this.getWrappedInstance() : undefined); - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps))); - } - }, { - key: "helperContainer", - get: function get() { - var helperContainer = this.props.helperContainer; - - if (typeof helperContainer === 'function') { - return helperContainer(); - } - - return this.props.helperContainer || this.document.body; - } - }, { - key: "containerScrollDelta", - get: function get() { - var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; - - if (useWindowAsScrollContainer) { - return { - left: 0, - top: 0 - }; - } - - return { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top - }; - } - }, { - key: "windowScrollDelta", - get: function get() { - return { - left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, - top: this.contentWindow.pageYOffset - this.initialWindowScroll.top - }; - } - }]); - - return WithSortableContainer; - }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { - manager: PropTypes.object.isRequired - }), _temp; - } - - function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - - function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } - 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) { - var _class, _temp; - - var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { - withRef: false - }; - return _temp = _class = function (_React$Component) { - _inherits(WithSortableElement, _React$Component); - - var _super = _createSuper$2(WithSortableElement); - - function WithSortableElement() { - _classCallCheck(this, WithSortableElement); - - return _super.apply(this, arguments); - } - - _createClass(WithSortableElement, [{ - key: "componentDidMount", - value: function componentDidMount() { - this.register(); - } - }, { - key: "componentDidUpdate", - value: function componentDidUpdate(prevProps) { - if (this.node) { - if (prevProps.index !== this.props.index) { - this.node.sortableInfo.index = this.props.index; - } - - if (prevProps.disabled !== this.props.disabled) { - this.node.sortableInfo.disabled = this.props.disabled; - } - } - - if (prevProps.collection !== this.props.collection) { - this.unregister(prevProps.collection); - this.register(); - } - } - }, { - key: "componentWillUnmount", - value: function componentWillUnmount() { - this.unregister(); - } - }, { - key: "register", - value: function register() { - var _this$props = this.props, - collection = _this$props.collection, - disabled = _this$props.disabled, - index = _this$props.index; - var node = reactDom.findDOMNode(this); - node.sortableInfo = { - collection: collection, - disabled: disabled, - index: index, - manager: this.context.manager - }; - this.node = node; - this.ref = { - node: node - }; - this.context.manager.add(collection, this.ref); - } - }, { - key: "unregister", - value: function unregister() { - var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; - this.context.manager.remove(collection, this.ref); - } - }, { - 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 SortableElement() call'); - return this.refs.wrappedInstance; - } - }, { - key: "render", - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement(WrappedComponent, _extends({ - ref: ref - }, omit(this.props, omittedProps$1))); - } - }]); - - return WithSortableElement; - }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { - manager: PropTypes.object.isRequired - }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { - collection: 0 - }), _temp; - } - - exports.SortableContainer = sortableContainer; - exports.SortableElement = sortableElement; - exports.SortableHandle = sortableHandle; - exports.arrayMove = arrayMove; - exports.sortableContainer = sortableContainer; - exports.sortableElement = sortableElement; - exports.sortableHandle = sortableHandle; - - Object.defineProperty(exports, '__esModule', { value: true }); - -}))); +(function(global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' + ? factory( + exports, + require('react'), + require('prop-types'), + require('react-dom'), + ) + : typeof define === 'function' && define.amd + ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) + : ((global = global || self), + factory( + (global.SortableHOC = {}), + global.React, + global.PropTypes, + global.ReactDOM, + )); +})(this, function(exports, React, PropTypes, reactDom) { + 'use strict'; + + PropTypes = + PropTypes && PropTypes.hasOwnProperty('default') + ? PropTypes['default'] + : PropTypes; + + function createCommonjsModule(fn, module) { + return (module = {exports: {}}), fn(module, module.exports), module.exports; + } + + var _extends_1 = createCommonjsModule(function(module) { + function _extends() { + module.exports = _extends = + Object.assign || + function(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); + } + + module.exports = _extends; + }); + + function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; + } + + var arrayWithHoles = _arrayWithHoles; + + function _iterableToArrayLimit(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for ( + var _i = arr[Symbol.iterator](), _s; + !(_n = (_s = _i.next()).done); + _n = true + ) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i['return'] != null) _i['return'](); + } finally { + if (_d) throw _e; + } + } + + return _arr; + } + + var iterableToArrayLimit = _iterableToArrayLimit; + + function _nonIterableRest() { + throw new TypeError('Invalid attempt to destructure non-iterable instance'); + } + + var nonIterableRest = _nonIterableRest; + + function _slicedToArray(arr, i) { + return ( + arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest() + ); + } + + var slicedToArray = _slicedToArray; + + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true, + }); + } else { + obj[key] = value; + } + + return obj; + } + + var defineProperty = _defineProperty; + + function _objectSpread(target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i] != null ? arguments[i] : {}; + var ownKeys = Object.keys(source); + + if (typeof Object.getOwnPropertySymbols === 'function') { + ownKeys = ownKeys.concat( + Object.getOwnPropertySymbols(source).filter(function(sym) { + return Object.getOwnPropertyDescriptor(source, sym).enumerable; + }), + ); + } + + ownKeys.forEach(function(key) { + defineProperty(target, key, source[key]); + }); + } + + return target; + } + + var objectSpread = _objectSpread; + + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError('Cannot call a class as a function'); + } + } + + var classCallCheck = _classCallCheck; + + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ('value' in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + var createClass = _createClass; + + var _typeof_1 = createCommonjsModule(function(module) { + function _typeof2(obj) { + if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { + _typeof2 = function _typeof2(obj) { + return typeof obj; + }; + } else { + _typeof2 = function _typeof2(obj) { + return obj && + typeof Symbol === 'function' && + obj.constructor === Symbol && + obj !== Symbol.prototype + ? 'symbol' + : typeof obj; + }; + } + return _typeof2(obj); + } + + function _typeof(obj) { + if ( + typeof Symbol === 'function' && + _typeof2(Symbol.iterator) === 'symbol' + ) { + module.exports = _typeof = function _typeof(obj) { + return _typeof2(obj); + }; + } else { + module.exports = _typeof = function _typeof(obj) { + return obj && + typeof Symbol === 'function' && + obj.constructor === Symbol && + obj !== Symbol.prototype + ? 'symbol' + : _typeof2(obj); + }; + } + + return _typeof(obj); + } + + module.exports = _typeof; + }); + + function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError( + "this hasn't been initialised - super() hasn't been called", + ); + } + + return self; + } + + var assertThisInitialized = _assertThisInitialized; + + function _possibleConstructorReturn(self, call) { + if (call && (_typeof_1(call) === 'object' || typeof call === 'function')) { + return call; + } + + return assertThisInitialized(self); + } + + var possibleConstructorReturn = _possibleConstructorReturn; + + var getPrototypeOf = createCommonjsModule(function(module) { + function _getPrototypeOf(o) { + module.exports = _getPrototypeOf = Object.setPrototypeOf + ? Object.getPrototypeOf + : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + return _getPrototypeOf(o); + } + + module.exports = _getPrototypeOf; + }); + + var setPrototypeOf = createCommonjsModule(function(module) { + function _setPrototypeOf(o, p) { + module.exports = _setPrototypeOf = + Object.setPrototypeOf || + function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf(o, p); + } + + module.exports = _setPrototypeOf; + }); + + function _inherits(subClass, superClass) { + if (typeof superClass !== 'function' && superClass !== null) { + throw new TypeError('Super expression must either be null or a function'); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true, + }, + }); + if (superClass) setPrototypeOf(subClass, superClass); + } + + var inherits = _inherits; + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + var invariant = function(condition, format, a, b, c, d, e, f) { + { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + } + + if (!condition) { + var error; + if (format === undefined) { + error = new Error( + 'Minified exception occurred; use the non-minified dev environment ' + + 'for the full error message and additional helpful warnings.', + ); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error( + format.replace(/%s/g, function() { + return args[argIndex++]; + }), + ); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } + }; + + var invariant_1 = invariant; + + var Manager = (function() { + function Manager() { + classCallCheck(this, Manager); + + defineProperty(this, 'refs', {}); + } + + createClass(Manager, [ + { + key: 'add', + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + }, + }, + { + key: 'remove', + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + }, + }, + { + key: 'isActive', + value: function isActive() { + return this.active; + }, + }, + { + key: 'getActive', + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function(_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + }, + }, + { + key: 'getIndex', + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + }, + }, + { + key: 'getOrderedRefs', + value: function getOrderedRefs() { + var collection = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : this.active.collection; + return this.refs[collection].sort(sortByIndex); + }, + }, + ]); + + return Manager; + })(); + + function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; + } + + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) { + for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { + arr2[i] = arr[i]; + } + + return arr2; + } + } + + var arrayWithoutHoles = _arrayWithoutHoles; + + function _iterableToArray(iter) { + if ( + Symbol.iterator in Object(iter) || + Object.prototype.toString.call(iter) === '[object Arguments]' + ) + return Array.from(iter); + } + + var iterableToArray = _iterableToArray; + + function _nonIterableSpread() { + throw new TypeError('Invalid attempt to spread non-iterable instance'); + } + + var nonIterableSpread = _nonIterableSpread; + + function _toConsumableArray(arr) { + return ( + arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread() + ); + } + + var toConsumableArray = _toConsumableArray; + + 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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; + } + function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function(acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); + } + var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'], + }; + var vendorPrefix = (function() { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || [ + '-moz-hidden-iframe', + ]; + var pre = (Array.prototype.slice + .call(styles) + .join('') + .match(/-(moz|webkit|ms)-/) || + (styles.OLink === '' && ['', 'o']))[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } + })(); + 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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; + } + function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); + } + + function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; + } + + function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop), + }; + } + function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName + ? ''.concat(prefix, '(').concat(componentName, ')') + : prefix; + } + function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left, + }; + } + function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY, + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY, + }; + } else { + return { + x: event.pageX, + y: event.pageY, + }; + } + } + function isTouchEvent(event) { + return ( + (event.touches && event.touches.length) || + (event.changedTouches && event.changedTouches.length) + ); + } + function getEdgeOffset(node, parent) { + var offset = + arguments.length > 2 && arguments[2] !== undefined + ? arguments[2] + : { + left: 0, + top: 0, + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.getBoundingClientRect().left, + top: offset.top + node.getBoundingClientRect().top, + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); + } + function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } + } + function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant_1( + match !== null, + 'lockOffset value should be a number or a string of a ' + + 'number followed by "px" or "%". Given %s', + lockOffset, + ); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant_1( + isFinite(offsetX) && isFinite(offsetY), + 'lockOffset value should be a finite. Given %s', + lockOffset, + ); + + if (unit === '%') { + offsetX = (offsetX * width) / 100; + offsetY = (offsetY * height) / 100; + } + + return { + x: offsetX, + y: offsetY, + }; + } + 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) { + var container = + arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } + } + function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap), + }; + } + + return { + x: 0, + y: 0, + }; + } + var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, + }; + var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT', + }; + function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function(field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = '__sortableClone__'.concat(field.name); + } + + if ( + field.tagName === NodeType.Canvas && + fields[i].width > 0 && + fields[i].height > 0 + ) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; + } + + 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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [ + NodeType.Input, + NodeType.Textarea, + NodeType.Select, + NodeType.Option, + NodeType.Button, + ]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if ( + closest(event.target, function(el) { + return el.contentEditable === 'true'; + }) + ) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number), + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool, + }; + var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT], + }; + var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then( + finalizer.bind(null, false), + finalizer.bind(null, true), + ); + } + + return finalizer(false, value); + } + function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : { + withRef: false, + }; + return ( + (_temp = _class = (function(_React$Component) { + inherits(WithSortableContainer, _React$Component); + + function WithSortableContainer(props) { + var _this; + + classCallCheck(this, WithSortableContainer); + + _this = possibleConstructorReturn( + this, + getPrototypeOf(WithSortableContainer).call(this, props), + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'state', + {}, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handleStart', + function(event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function(el) { + return el.sortableInfo != null; + }); + + if ( + node && + node.sortableInfo && + _this.nodeIsChild(node) && + !_this.state.sorting + ) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index, + }; + + if ( + !isTouchEvent(event) && + event.target.tagName === NodeType.Anchor + ) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function() { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'nodeIsChild', + function(node) { + return node.sortableInfo.manager === _this.manager; + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handleMove', + function(event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if ( + !_this.state.sorting && + _this.touched && + !_this._awaitingUpdateBeforeSortStart + ) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y, + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if ( + !distance && + (!pressThreshold || combinedDelta >= pressThreshold) + ) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if ( + distance && + combinedDelta >= distance && + _this.manager.isActive() + ) { + _this.handlePress(event); + } + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handleEnd', + function() { + _this.touched = false; + + _this.cancel(); + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'cancel', + function() { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handlePress', + function(event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = (function() { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection, + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: + _this.margin.left + + _this.margin.right + + _this.gridGap.x, + y: Math.max( + _this.margin.top, + _this.margin.bottom, + _this.gridGap.y, + ), + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0, + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition( + objectSpread({}, event, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top, + }), + ); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop, + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset, + }; + _this.helper = _this.helperContainer.appendChild( + cloneNode(_node), + ); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0, + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer + ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight, + } + : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = + containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = + containerRight - + (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = + containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = + containerBottom - + (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = + (_useWindowAsScrollContainer + ? 0 + : containerBoundingRect.left) - + _this.boundingClientRect.left - + _this.width / 2; + _this.maxTranslate.x = + (_useWindowAsScrollContainer + ? _this.contentWindow.innerWidth + : containerBoundingRect.left + + containerBoundingRect.width) - + _this.boundingClientRect.left - + _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = + (_useWindowAsScrollContainer + ? 0 + : containerBoundingRect.top) - + _this.boundingClientRect.top - + _this.height / 2; + _this.maxTranslate.y = + (_useWindowAsScrollContainer + ? _this.contentWindow.innerHeight + : containerBoundingRect.top + + containerBoundingRect.height) - + _this.boundingClientRect.top - + _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function(className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches + ? _node + : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener( + 'wheel', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.addEventListener( + 'mousedown', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.addEventListener( + 'keydown', + _this.handleKeyDown, + ); + } else { + events.move.forEach(function(eventName) { + return _this.listenerNode.addEventListener( + eventName, + _this.handleSortMove, + false, + ); + }); + events.end.forEach(function(eventName) { + return _this.listenerNode.addEventListener( + eventName, + _this.handleSortEnd, + false, + ); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index, + }); + + if (_onSortStart) { + _onSortStart( + { + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper, + }, + event, + ); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = + _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = + _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = (function() { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows( + function() { + var index = _node.sortableInfo.index; + return Promise.resolve( + updateBeforeSortStart( + { + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting, + }, + event, + ), + ).then(function() {}); + }, + function(_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }, + ); + + if (_temp9 && _temp9.then) + return _temp9.then(function() {}); + } + })(); + + return _temp8 && _temp8.then + ? _temp8.then(_temp7) + : _temp7(_temp8); + } + })(); + + return Promise.resolve( + _temp6 && _temp6.then ? _temp6.then(function() {}) : void 0, + ); + } catch (e) { + return Promise.reject(e); + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handleSortMove', + function(event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handleSortEnd', + function(event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener( + 'wheel', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.removeEventListener( + 'mousedown', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.removeEventListener( + 'keydown', + _this.handleKeyDown, + ); + } else { + events.move.forEach(function(eventName) { + return _this.listenerNode.removeEventListener( + eventName, + _this.handleSortMove, + ); + }); + events.end.forEach(function(eventName) { + return _this.listenerNode.removeEventListener( + eventName, + _this.handleSortEnd, + ); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '', + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null, + }); + + if (typeof onSortEnd === 'function') { + onSortEnd( + { + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes, + }, + event, + ); + } + + _this.touched = false; + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'autoscroll', + function() { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min( + _this.maxTranslate.x, + Math.max(_this.minTranslate.x, _this.translate.x), + ); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min( + _this.maxTranslate.y, + Math.max(_this.minTranslate.y, _this.translate.y), + ); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width, + }); + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'onAutoScroll', + function(offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handleKeyDown', + function(event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = + _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = objectSpread({}, defaultKeyCodes, customKeyCodes); + + if ( + (_this.manager.active && !_this.manager.isKeySorting) || + (!_this.manager.active && + (!keyCodes.lift.includes(keyCode) || + shouldCancelStart(event) || + !_this.isValidSortingTarget(event))) + ) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if ( + keyCodes.drop.includes(keyCode) && + _this.manager.active + ) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'keyLift', + function(event) { + var target = event.target; + var node = closest(target, function(el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection, + }; + + _this.handlePress(event); + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'keyMove', + function(shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex( + _this.newIndex, + _this.prevIndex, + _this.index, + ); + var target = nodes.find(function(_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = + target.boundingClientRect || + getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0, + }; + var targetPosition = { + top: + targetBoundingClientRect.top + + targetTranslate.y - + scrollDelta.top, + left: + targetBoundingClientRect.left + + targetTranslate.x - + scrollDelta.left, + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: + shouldAdjustForSize && _this.axis.x + ? targetNode.offsetWidth - _this.width + : 0, + y: + shouldAdjustForSize && _this.axis.y + ? targetNode.offsetHeight - _this.height + : 0, + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0, + }); + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'keyDrop', + function(event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'handleKeyEnd', + function(event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }, + ); + + defineProperty( + assertThisInitialized(assertThisInitialized(_this)), + 'isValidSortingTarget', + function(event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function(el) { + return el.sortableInfo != null; + }); + return ( + node && + node.sortableInfo && + !node.sortableInfo.disabled && + (useDragHandle ? isSortableHandle(target) : target.sortableInfo) + ); + }, + ); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart, + }; + return _this; + } + + createClass(WithSortableContainer, [ + { + key: 'getChildContext', + value: function getChildContext() { + return { + manager: this.manager, + }; + }, + }, + { + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props + .useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function(containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = + _this2.props.contentWindow || + _this2.document.defaultView || + window; + _this2.contentWindow = + typeof contentWindow === 'function' + ? contentWindow() + : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer + ? _this2.document.scrollingElement || + _this2.document.documentElement + : getScrollingParent( + _this2.container, + _this2.props.scrollContainer, + ) || _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, + ); + }); + }); + + _this2.container.addEventListener( + 'keydown', + _this2.handleKeyDown, + ); + }); + }, + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function(key) { + return events[key].forEach(function(eventName) { + return _this3.container.removeEventListener( + eventName, + _this3.events[key], + ); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + }, + }, + { + key: 'updateHelperPosition', + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = + _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = + _this$props6$keyboard === void 0 + ? transitionDuration + : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y, + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width, + }), + _getLockPixelOffsets2 = slicedToArray( + _getLockPixelOffsets, + 2, + ), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y, + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y, + }; + translate.x = limit( + this.minTranslate.x + minOffset.x, + this.maxTranslate.x - maxOffset.x, + translate.x, + ); + translate.y = limit( + this.minTranslate.y + minOffset.y, + this.maxTranslate.y - maxOffset.y, + translate.y, + ); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if ( + isKeySorting && + keyboardSortingTransitionDuration && + !ignoreTransition + ) { + setTransitionDuration( + this.helper, + keyboardSortingTransitionDuration, + ); + } + + setTranslate3d(this.helper, translate); + }, + }, + { + key: 'animateNodes', + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: + this.offsetEdge.left + + this.translate.x + + containerScrollDelta.left, + top: + this.offsetEdge.top + + this.translate.y + + containerScrollDelta.top, + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + + var width = _node3.getBoundingClientRect().width; + + var height = _node3.getBoundingClientRect().height; + + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2, + }; + var mustShiftBackward = + isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = + isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0, + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[ + i + ].boundingClientRect = getScrollAdjustedBoundingClientRect( + _node3, + containerScrollDelta, + ); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset( + nextNode.node, + this.container, + ); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect( + nextNode.node, + containerScrollDelta, + ); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0, + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if ( + mustShiftForward || + (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; + + if ( + edgeOffset.left + translate.x > + this.containerBoundingRect.width - offset.width + ) { + if (nextNode) { + translate.x = + nextNode.edgeOffset.left - edgeOffset.left; + translate.y = + nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if ( + mustShiftBackward || + (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); + + if ( + edgeOffset.left + translate.x < + this.containerBoundingRect.left + offset.width + ) { + if (prevNode) { + translate.x = + prevNode.edgeOffset.left - edgeOffset.left; + translate.y = + prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if ( + mustShiftBackward || + (index > this.index && + sortingOffset.left + + windowScrollDelta.left + + offset.width >= + edgeOffset.left) + ) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if ( + mustShiftForward || + (index < this.index && + sortingOffset.left + windowScrollDelta.left <= + edgeOffset.left + offset.width) + ) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if ( + mustShiftBackward || + (index > this.index && + sortingOffset.top + + windowScrollDelta.top + + this.boundingClientRect.height >= + edgeOffset.top + offset.height) + ) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if ( + mustShiftForward || + (index < this.index && + sortingOffset.top + windowScrollDelta.top <= + edgeOffset.top + offset.height) + ) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper, + }); + } + }, + }, + { + 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 SortableContainer() call', + ); + return this.refs.wrappedInstance; + }, + }, + { + key: 'getContainer', + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer( + config.withRef ? this.getWrappedInstance() : undefined, + ); + }, + }, + { + key: 'render', + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement( + WrappedComponent, + _extends_1( + { + ref: ref, + }, + omit(this.props, omittedProps), + ), + ); + }, + }, + { + key: 'helperContainer', + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + }, + }, + { + key: 'containerScrollDelta', + get: function get() { + var useWindowAsScrollContainer = this.props + .useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0, + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top, + }; + }, + }, + { + key: 'windowScrollDelta', + get: function get() { + return { + left: + this.contentWindow.pageXOffset - + this.initialWindowScroll.left, + top: + this.contentWindow.pageYOffset - this.initialWindowScroll.top, + }; + }, + }, + ]); + + return WithSortableContainer; + })(React.Component)), + defineProperty( + _class, + 'displayName', + provideDisplayName('sortableList', WrappedComponent), + ), + defineProperty(_class, 'defaultProps', defaultProps), + defineProperty(_class, 'propTypes', propTypes), + defineProperty(_class, 'childContextTypes', { + manager: PropTypes.object.isRequired, + }), + _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) { + var _class, _temp; + + var config = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : { + withRef: false, + }; + return ( + (_temp = _class = (function(_React$Component) { + inherits(WithSortableElement, _React$Component); + + function WithSortableElement() { + classCallCheck(this, WithSortableElement); + + return possibleConstructorReturn( + this, + getPrototypeOf(WithSortableElement).apply(this, arguments), + ); + } + + createClass(WithSortableElement, [ + { + key: 'componentDidMount', + value: function componentDidMount() { + this.register(); + }, + }, + { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + }, + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.unregister(); + }, + }, + { + key: 'register', + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager, + }; + this.node = node; + this.ref = { + node: node, + }; + this.context.manager.add(collection, this.ref); + }, + }, + { + key: 'unregister', + value: function unregister() { + var collection = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : this.props.collection; + this.context.manager.remove(collection, this.ref); + }, + }, + { + 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 SortableElement() call', + ); + return this.refs.wrappedInstance; + }, + }, + { + key: 'render', + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement( + WrappedComponent, + _extends_1( + { + ref: ref, + }, + omit(this.props, omittedProps$1), + ), + ); + }, + }, + ]); + + return WithSortableElement; + })(React.Component)), + defineProperty( + _class, + 'displayName', + provideDisplayName('sortableElement', WrappedComponent), + ), + defineProperty(_class, 'contextTypes', { + manager: PropTypes.object.isRequired, + }), + defineProperty(_class, 'propTypes', propTypes$1), + defineProperty(_class, 'defaultProps', { + collection: 0, + }), + _temp + ); + } + + exports.SortableContainer = sortableContainer; + exports.sortableContainer = sortableContainer; + exports.SortableElement = sortableElement; + exports.sortableElement = sortableElement; + exports.SortableHandle = sortableHandle; + exports.sortableHandle = sortableHandle; + exports.arrayMove = arrayMove; + + Object.defineProperty(exports, '__esModule', {value: true}); +}); diff --git a/dist/react-sortable-hoc.umd.min.js b/dist/react-sortable-hoc.umd.min.js index 04d1c2006..de8f438c9 100644 --- a/dist/react-sortable-hoc.umd.min.js +++ b/dist/react-sortable-hoc.umd.min.js @@ -1 +1,1580 @@ -!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,i,a,s){"use strict";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e,t){return e(t={exports:{}},t.exports),t.exports}a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a;var l=t(n(function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,o=new Array(t);n=r.y-a/2&&!g?(s.y=1,l.y=u*Math.abs((r.y-a/2-n.y)/a)):n.x>=r.x-i/2&&!m?(s.x=1,l.x=c*Math.abs((r.x-i/2-n.x)/i)):n.y<=o.y+a/2&&!y?(s.y=-1,l.y=u*Math.abs((n.y-a/2-o.y)/a)):n.x<=o.x+i/2&&!v&&(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 ne={axis:a.oneOf(["x","y","xy"]),contentWindow:a.any,disableAutoscroll:a.bool,distance:a.number,getContainer:a.func,getHelperDimensions:a.func,helperClass:a.string,helperContainer:a.oneOfType([a.func,"undefined"==typeof HTMLElement?a.any:a.instanceOf(HTMLElement)]),hideSortableGhost:a.bool,keyboardSortingTransitionDuration:a.number,lockAxis:a.string,lockOffset:a.oneOfType([a.number,a.string,a.arrayOf(a.oneOfType([a.number,a.string]))]),lockToContainerEdges:a.bool,onSortEnd:a.func,onSortMove:a.func,onSortOver:a.func,onSortStart:a.func,pressDelay:a.number,pressThreshold:a.number,keyCodes:a.shape({lift:a.arrayOf(a.number),drop:a.arrayOf(a.number),cancel:a.arrayOf(a.number),up:a.arrayOf(a.number),down:a.arrayOf(a.number)}),shouldCancelStart:a.func,transitionDuration:a.number,updateBeforeSortStart:a.func,useDragHandle:a.bool,useWindowAsScrollContainer:a.bool},oe={lift:[Y],drop:[Y],cancel:[q],up:[V,F],down:[$,z]},re={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,keyCodes:oe,shouldCancelStart:function(e){return-1!==[J.Input,J.Textarea,J.Select,J.Option,J.Button].indexOf(e.target.tagName)||!!P(e.target,function(e){return"true"===e.contentEditable})},transitionDuration:300,useWindowAsScrollContainer:!1},ie=Object.keys(ne);function ae(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)}return n}function se(t){for(var e=1;ey?y/2:this.height/2,v=this.width>x?x/2:this.width/2,m=c&&h>this.index&&h<=u,b=c&&hthis.containerBoundingRect.width-v&&O&&(w.x=O.edgeOffset.left-S.left,w.y=O.edgeOffset.top-S.top),null===this.newIndex&&(this.newIndex=h)):(m||h>this.index&&(s+i.left+v>=S.left&&l+i.top+g>=S.top||l+i.top+g>=S.top+y))&&(w.x=-(this.width+this.marginOffset.x),S.left+w.xthis.index&&s+i.left+v>=S.left?(w.x=-(this.width+this.marginOffset.x),this.newIndex=h):(b||hthis.index&&l+i.top+g>=S.top?(w.y=-(this.height+this.marginOffset.y),this.newIndex=h):(b||h= r.y - a / 2 && !v + ? ((l.y = 1), (s.y = u * Math.abs((r.y - a / 2 - n.y) / a))) + : n.x >= r.x - i / 2 && !x + ? ((l.x = 1), (s.x = c * Math.abs((r.x - i / 2 - n.x) / i))) + : n.y <= o.y + a / 2 && !y + ? ((l.y = -1), (s.y = u * Math.abs((n.y - a / 2 - o.y) / a))) + : n.x <= o.x + i / 2 && + !m && + ((l.x = -1), (s.x = c * Math.abs((n.x - i / 2 - o.x) / i))), + this.interval && (this.clear(), (this.isAutoScrolling = !1)), + (0 === l.x && 0 === l.y) || + (this.interval = setInterval(function() { + t.isAutoScrolling = !0; + var e = {left: s.x * l.x, top: s.y * l.y}; + (t.container.scrollTop += e.top), + (t.container.scrollLeft += e.left), + t.onScrollCallback(e); + }, 5)); + }, + }, + ]), + n + ); + })(); + var Z = { + 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, + keyboardSortingTransitionDuration: i.number, + 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, + keyCodes: i.shape({ + lift: i.arrayOf(i.number), + drop: i.arrayOf(i.number), + cancel: i.arrayOf(i.number), + up: i.arrayOf(i.number), + down: i.arrayOf(i.number), + }), + shouldCancelStart: i.func, + transitionDuration: i.number, + updateBeforeSortStart: i.func, + useDragHandle: i.bool, + useWindowAsScrollContainer: i.bool, + }, + ee = {lift: [q], drop: [q], cancel: [X], up: [Y, U], down: [V, F]}, + te = { + 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, + keyCodes: ee, + shouldCancelStart: function(e) { + return ( + -1 !== + [z.Input, z.Textarea, z.Select, z.Option, z.Button].indexOf( + e.target.tagName, + ) || + !!P(e.target, function(e) { + return 'true' === e.contentEditable; + }) + ); + }, + transitionDuration: 300, + useWindowAsScrollContainer: !1, + }, + ne = Object.keys(Z); + function oe(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 R, t; + return ( + u(this, n), + (R = g(this, y(n).call(this, e))), + c(p(p(R)), 'state', {}), + c(p(p(R)), 'handleStart', function(e) { + var t = R.props, + n = t.distance, + o = t.shouldCancelStart; + if (2 !== e.button && !o(e)) { + (R.touched = !0), (R.position = K(e)); + var r, + i = P(e.target, function(e) { + return null != e.sortableInfo; + }); + if ( + i && + i.sortableInfo && + R.nodeIsChild(i) && + !R.state.sorting + ) { + var a = R.props.useDragHandle, + l = i.sortableInfo, + s = l.index, + c = l.collection; + if (l.disabled) return; + if (a && !P(e.target, J)) return; + (R.manager.active = {collection: c, index: s}), + ((r = e).touches && r.touches.length) || + (r.changedTouches && r.changedTouches.length) || + e.target.tagName !== z.Anchor || + e.preventDefault(), + n || + (0 === R.props.pressDelay + ? R.handlePress(e) + : (R.pressTimer = setTimeout(function() { + return R.handlePress(e); + }, R.props.pressDelay))); + } + } + }), + c(p(p(R)), 'nodeIsChild', function(e) { + return e.sortableInfo.manager === R.manager; + }), + c(p(p(R)), 'handleMove', function(e) { + var t = R.props, + n = t.distance, + o = t.pressThreshold; + if ( + !R.state.sorting && + R.touched && + !R._awaitingUpdateBeforeSortStart + ) { + var r = K(e), + i = {x: R.position.x - r.x, y: R.position.y - r.y}, + a = Math.abs(i.x) + Math.abs(i.y); + (R.delta = i), + n || (o && !(o <= a)) + ? n && n <= a && R.manager.isActive() && R.handlePress(e) + : (clearTimeout(R.cancelTimer), + (R.cancelTimer = setTimeout(R.cancel, 0))); + } + }), + c(p(p(R)), 'handleEnd', function() { + (R.touched = !1), R.cancel(); + }), + c(p(p(R)), 'cancel', function() { + var e = R.props.distance; + R.state.sorting || + (e || clearTimeout(R.pressTimer), (R.manager.active = null)); + }), + c(p(p(R)), 'handlePress', function(E) { + try { + var r = R.manager.getActive(), + e = (function() { + if (r) { + var e = function() { + var e, + t, + n, + o, + r, + i, + a, + l, + s = T.sortableInfo.index, + c = + ((e = T), + { + bottom: j( + (t = window.getComputedStyle(e)).marginBottom, + ), + left: j(t.marginLeft), + right: j(t.marginRight), + top: j(t.marginTop), + }), + u = + ((n = R.container), + 'grid' === + (o = window.getComputedStyle(n)).display + ? {x: j(o.gridColumnGap), y: j(o.gridRowGap)} + : {x: 0, y: 0}), + d = R.scrollContainer.getBoundingClientRect(), + f = b({index: s, node: T, collection: k}); + if ( + ((R.node = T), + (R.margin = c), + (R.gridGap = u), + (R.width = f.width), + (R.height = f.height), + (R.marginOffset = { + x: R.margin.left + R.margin.right + R.gridGap.x, + y: Math.max( + R.margin.top, + R.margin.bottom, + R.gridGap.y, + ), + }), + (R.boundingClientRect = T.getBoundingClientRect()), + (R.containerBoundingRect = d), + (R.index = s), + (R.newIndex = s), + (R.axis = { + x: 0 <= x.indexOf('x'), + y: 0 <= x.indexOf('y'), + }), + (R.offsetEdge = B(T, R.container)), + (R.initialOffset = K( + I + ? D({}, E, { + pageX: R.boundingClientRect.left, + pageY: R.boundingClientRect.top, + }) + : E, + )), + (R.initialScroll = { + left: R.scrollContainer.scrollLeft, + top: R.scrollContainer.scrollTop, + }), + (R.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset, + }), + (R.helper = R.helperContainer.appendChild( + ((i = + 'input, textarea, select, canvas, [contenteditable]'), + (a = (r = T).querySelectorAll(i)), + (l = r.cloneNode(!0)), + N(l.querySelectorAll(i)).forEach(function(e, t) { + 'file' !== e.type && (e.value = a[t].value), + 'radio' === e.type && + e.name && + (e.name = '__sortableClone__'.concat( + e.name, + )), + e.tagName === z.Canvas && + 0 < a[t].width && + 0 < a[t].height && + e.getContext('2d').drawImage(a[t], 0, 0); + }), + l), + )), + M(R.helper, { + boxSizing: 'border-box', + height: ''.concat(R.height, 'px'), + left: ''.concat( + R.boundingClientRect.left - c.left, + 'px', + ), + pointerEvents: 'none', + position: 'fixed', + top: ''.concat( + R.boundingClientRect.top - c.top, + 'px', + ), + width: ''.concat(R.width, 'px'), + }), + I && R.helper.focus(), + S && M((R.sortableGhost = T), {opacity: 0}), + (R.minTranslate = {}), + (R.maxTranslate = {}), + I) + ) { + var h = C + ? { + top: 0, + left: 0, + width: R.contentWindow.innerWidth, + height: R.contentWindow.innerHeight, + } + : R.containerBoundingRect, + p = h.top, + g = h.left, + y = h.width, + v = p + h.height, + m = g + y; + R.axis.x && + ((R.minTranslate.x = + g - R.boundingClientRect.left), + (R.maxTranslate.x = + m - (R.boundingClientRect.left + R.width))), + R.axis.y && + ((R.minTranslate.y = + p - R.boundingClientRect.top), + (R.maxTranslate.y = + v - (R.boundingClientRect.top + R.height))); + } else + R.axis.x && + ((R.minTranslate.x = + (C ? 0 : d.left) - + R.boundingClientRect.left - + R.width / 2), + (R.maxTranslate.x = + (C + ? R.contentWindow.innerWidth + : d.left + d.width) - + R.boundingClientRect.left - + R.width / 2)), + R.axis.y && + ((R.minTranslate.y = + (C ? 0 : d.top) - + R.boundingClientRect.top - + R.height / 2), + (R.maxTranslate.y = + (C + ? R.contentWindow.innerHeight + : d.top + d.height) - + R.boundingClientRect.top - + R.height / 2)); + w && + w.split(' ').forEach(function(e) { + return R.helper.classList.add(e); + }), + (R.listenerNode = E.touches ? T : R.contentWindow), + I + ? (R.listenerNode.addEventListener( + 'wheel', + R.handleKeyEnd, + !0, + ), + R.listenerNode.addEventListener( + 'mousedown', + R.handleKeyEnd, + !0, + ), + R.listenerNode.addEventListener( + 'keydown', + R.handleKeyDown, + )) + : (A.move.forEach(function(e) { + return R.listenerNode.addEventListener( + e, + R.handleSortMove, + !1, + ); + }), + A.end.forEach(function(e) { + return R.listenerNode.addEventListener( + e, + R.handleSortEnd, + !1, + ); + })), + R.setState({sorting: !0, sortingIndex: s}), + O && + O( + { + node: T, + index: s, + collection: k, + isKeySorting: I, + nodes: R.manager.getOrderedRefs(), + helper: R.helper, + }, + E, + ), + I && R.keyMove(0); + }, + t = R.props, + x = t.axis, + b = t.getHelperDimensions, + w = t.helperClass, + S = t.hideSortableGhost, + n = t.updateBeforeSortStart, + O = t.onSortStart, + C = t.useWindowAsScrollContainer, + T = r.node, + k = r.collection, + I = R.manager.isKeySorting, + o = (function() { + if ('function' == typeof n) { + R._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 = T.sortableInfo.index; + return Promise.resolve( + n( + { + collection: k, + index: e, + node: T, + isKeySorting: I, + }, + E, + ), + ).then(function() {}); + }, + function(e, t) { + if ( + ((R._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); + } + }), + c(p(p(R)), 'handleSortMove', function(e) { + var t = R.props.onSortMove; + 'function' == typeof e.preventDefault && e.preventDefault(), + R.updateHelperPosition(e), + R.animateNodes(), + R.autoscroll(), + t && t(e); + }), + c(p(p(R)), 'handleSortEnd', function(e) { + var t = R.props, + n = t.hideSortableGhost, + o = t.onSortEnd, + r = R.manager, + i = r.active.collection, + a = r.isKeySorting, + l = R.manager.getOrderedRefs(); + R.listenerNode && + (a + ? (R.listenerNode.removeEventListener( + 'wheel', + R.handleKeyEnd, + !0, + ), + R.listenerNode.removeEventListener( + 'mousedown', + R.handleKeyEnd, + !0, + ), + R.listenerNode.removeEventListener( + 'keydown', + R.handleKeyDown, + )) + : (A.move.forEach(function(e) { + return R.listenerNode.removeEventListener( + e, + R.handleSortMove, + ); + }), + A.end.forEach(function(e) { + return R.listenerNode.removeEventListener( + e, + R.handleSortEnd, + ); + }))), + R.helper.parentNode.removeChild(R.helper), + n && R.sortableGhost && M(R.sortableGhost, {opacity: ''}); + for (var s = 0, c = l.length; s < c; s++) { + var u = l[s], + d = u.node; + (u.edgeOffset = null), + E(d, (u.boundingClientRect = null)), + W(d, null), + (u.translate = null); + } + R.autoScroller.clear(), + (R.manager.active = null), + (R.manager.isKeySorting = !1), + R.setState({sorting: !1, sortingIndex: null}), + 'function' == typeof o && + o( + { + collection: i, + newIndex: R.newIndex, + oldIndex: R.index, + isKeySorting: a, + nodes: l, + }, + e, + ), + (R.touched = !1); + }), + c(p(p(R)), 'autoscroll', function() { + var e = R.props.disableAutoscroll, + t = R.manager.isKeySorting; + if (e) R.autoScroller.clear(); + else { + if (t) { + var n = D({}, R.translate), + o = 0, + r = 0; + return ( + R.axis.x && + ((n.x = Math.min( + R.maxTranslate.x, + Math.max(R.minTranslate.x, R.translate.x), + )), + (o = R.translate.x - n.x)), + R.axis.y && + ((n.y = Math.min( + R.maxTranslate.y, + Math.max(R.minTranslate.y, R.translate.y), + )), + (r = R.translate.y - n.y)), + (R.translate = n), + E(R.helper, R.translate), + (R.scrollContainer.scrollLeft += o), + void (R.scrollContainer.scrollTop += r) + ); + } + R.autoScroller.update({ + height: R.height, + maxTranslate: R.maxTranslate, + minTranslate: R.minTranslate, + translate: R.translate, + width: R.width, + }); + } + }), + c(p(p(R)), 'onAutoScroll', function(e) { + (R.translate.x += e.left), + (R.translate.y += e.top), + R.animateNodes(); + }), + c(p(p(R)), 'handleKeyDown', function(e) { + var t = e.keyCode, + n = R.props, + o = n.shouldCancelStart, + r = n.keyCodes, + i = D({}, ee, void 0 === r ? {} : r); + (R.manager.active && !R.manager.isKeySorting) || + !( + R.manager.active || + (i.lift.includes(t) && !o(e) && R.isValidSortingTarget(e)) + ) || + (e.stopPropagation(), + e.preventDefault(), + i.lift.includes(t) && !R.manager.active + ? R.keyLift(e) + : i.drop.includes(t) && R.manager.active + ? R.keyDrop(e) + : i.cancel.includes(t) + ? ((R.newIndex = R.manager.active.index), R.keyDrop(e)) + : i.up.includes(t) + ? R.keyMove(-1) + : i.down.includes(t) && R.keyMove(1)); + }), + c(p(p(R)), 'keyLift', function(e) { + var t = e.target, + n = P(t, function(e) { + return null != e.sortableInfo; + }).sortableInfo, + o = n.index, + r = n.collection; + (R.initialFocusedNode = t), + (R.manager.isKeySorting = !0), + (R.manager.active = {index: o, collection: r}), + R.handlePress(e); + }), + c(p(p(R)), 'keyMove', function(e) { + var t = R.manager.getOrderedRefs(), + n = t[t.length - 1].node.sortableInfo.index, + o = R.newIndex + e, + r = R.newIndex; + if (!(o < 0 || n < o)) { + (R.prevIndex = r), (R.newIndex = o); + var i, + a, + l, + s = + ((i = R.newIndex), + (a = R.prevIndex), + (l = R.index), + i < l && a < i ? i - 1 : l < i && i < a ? i + 1 : i), + c = t.find(function(e) { + return e.node.sortableInfo.index === s; + }), + u = c.node, + d = R.containerScrollDelta, + f = c.boundingClientRect || H(u, d), + h = c.translate || {x: 0, y: 0}, + p = f.top + h.y - d.top, + g = f.left + h.x - d.left, + y = r < o, + v = y && R.axis.x ? u.offsetWidth - R.width : 0, + m = y && R.axis.y ? u.offsetHeight - R.height : 0; + R.handleSortMove({ + pageX: g + v, + pageY: p + m, + ignoreTransition: 0 === e, + }); + } + }), + c(p(p(R)), 'keyDrop', function(e) { + R.handleSortEnd(e), + R.initialFocusedNode && R.initialFocusedNode.focus(); + }), + c(p(p(R)), 'handleKeyEnd', function(e) { + R.manager.active && R.keyDrop(e); + }), + c(p(p(R)), 'isValidSortingTarget', function(e) { + var t = R.props.useDragHandle, + n = e.target, + o = P(n, function(e) { + return null != e.sortableInfo; + }); + return ( + o && + o.sortableInfo && + !o.sortableInfo.disabled && + (t ? J(n) : n.sortableInfo) + ); + }), + w( + !((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.', + ), + (R.manager = new x()), + (R.events = { + end: R.handleEnd, + move: R.handleMove, + start: R.handleStart, + }), + R + ); + } + return ( + m(n, e), + f(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 + : _(n.container, n.props.scrollContainer) || n.container), + (n.autoScroller = new Q(n.scrollContainer, n.onAutoScroll)), + Object.keys(n.events).forEach(function(t) { + return A[t].forEach(function(e) { + return n.container.addEventListener(e, n.events[t], !1); + }); + }), + n.container.addEventListener('keydown', n.handleKeyDown); + }); + }, + }, + { + key: 'componentWillUnmount', + value: function() { + var n = this; + this.helper && + this.helper.parentNode && + this.helper.parentNode.removeChild(this.helper), + this.container && + (Object.keys(this.events).forEach(function(t) { + return A[t].forEach(function(e) { + return n.container.removeEventListener(e, n.events[t]); + }); + }), + this.container.removeEventListener( + 'keydown', + this.handleKeyDown, + )); + }, + }, + { + key: 'updateHelperPosition', + value: function(e) { + var t = this.props, + n = t.lockAxis, + o = t.lockOffset, + r = t.lockToContainerEdges, + i = t.transitionDuration, + a = t.keyboardSortingTransitionDuration, + l = void 0 === a ? i : a, + s = this.manager.isKeySorting, + c = e.ignoreTransition, + u = K(e), + d = { + x: u.x - this.initialOffset.x, + y: u.y - this.initialOffset.y, + }; + if ( + ((d.y -= window.pageYOffset - this.initialWindowScroll.top), + (d.x -= window.pageXOffset - this.initialWindowScroll.left), + (this.translate = d), + r) + ) { + var f = (function(e) { + var t = e.height, + n = e.width, + o = e.lockOffset, + r = Array.isArray(o) ? o : [o, o]; + w( + 2 === r.length, + 'lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given %s', + o, + ); + var i = b(r, 2), + a = i[0], + l = i[1]; + return [ + G({height: t, lockOffset: a, width: n}), + G({height: t, lockOffset: l, width: n}), + ]; + })({height: this.height, lockOffset: o, width: this.width}), + h = b(f, 2), + p = h[0], + g = h[1], + y = this.width / 2 - p.x, + v = this.height / 2 - p.y, + m = this.width / 2 - g.x, + x = this.height / 2 - g.y; + (d.x = R( + this.minTranslate.x + y, + this.maxTranslate.x - m, + d.x, + )), + (d.y = R( + this.minTranslate.y + v, + this.maxTranslate.y - x, + d.y, + )); + } + 'x' === n ? (d.y = 0) : 'y' === n && (d.x = 0), + s && l && !c && W(this.helper, l), + E(this.helper, d); + }, + }, + { + key: 'animateNodes', + value: function() { + var e = this.props, + t = e.transitionDuration, + n = e.hideSortableGhost, + o = e.onSortOver, + r = this.containerScrollDelta, + i = this.windowScrollDelta, + a = this.manager.getOrderedRefs(), + l = this.offsetEdge.left + this.translate.x + r.left, + s = this.offsetEdge.top + this.translate.y + r.top, + c = this.manager.isKeySorting, + u = this.newIndex; + this.newIndex = null; + for (var d = 0, f = a.length; d < f; d++) { + var h = a[d].node, + p = h.sortableInfo.index, + g = h.getBoundingClientRect().width, + y = h.getBoundingClientRect().height, + v = this.height > y ? y / 2 : this.height / 2, + m = this.width > g ? g / 2 : this.width / 2, + x = c && p > this.index && p <= u, + b = c && p < this.index && u <= p, + w = {x: 0, y: 0}, + S = a[d].edgeOffset; + S || + ((S = B(h, this.container)), + (a[d].edgeOffset = S), + c && (a[d].boundingClientRect = H(h, r))); + var O = d < a.length - 1 && a[d + 1], + C = 0 < d && a[d - 1]; + O && + !O.edgeOffset && + ((O.edgeOffset = B(O.node, this.container)), + c && (O.boundingClientRect = H(O.node, r))), + p !== this.index + ? (t && W(h, t), + this.axis.x + ? this.axis.y + ? b || + (p < this.index && + ((l + i.left - m <= S.left && + s + i.top <= S.top + v) || + s + i.top + v <= S.top)) + ? ((w.x = this.width + this.marginOffset.x), + S.left + w.x > + this.containerBoundingRect.width - m && + O && + ((w.x = O.edgeOffset.left - S.left), + (w.y = O.edgeOffset.top - S.top)), + null === this.newIndex && (this.newIndex = p)) + : (x || + (p > this.index && + ((l + i.left + m >= S.left && + s + i.top + v >= S.top) || + s + i.top + v >= S.top + y))) && + ((w.x = -(this.width + this.marginOffset.x)), + S.left + w.x < + this.containerBoundingRect.left + m && + C && + ((w.x = C.edgeOffset.left - S.left), + (w.y = C.edgeOffset.top - S.top)), + (this.newIndex = p)) + : x || (p > this.index && l + i.left + m >= S.left) + ? ((w.x = -(this.width + this.marginOffset.x)), + (this.newIndex = p)) + : (b || + (p < this.index && l + i.left <= S.left + m)) && + ((w.x = this.width + this.marginOffset.x), + null == this.newIndex && (this.newIndex = p)) + : this.axis.y && + (x || + (p > this.index && + s + i.top + this.boundingClientRect.height >= + S.top + v) + ? ((w.y = -(this.height + this.marginOffset.y)), + (this.newIndex = p)) + : (b || + (p < this.index && s + i.top <= S.top + v)) && + ((w.y = this.height + this.marginOffset.y), + null == this.newIndex && (this.newIndex = p))), + E(h, w), + (a[d].translate = w)) + : n && M((this.sortableGhost = h), {opacity: 0}); + } + null == this.newIndex && (this.newIndex = this.index), + c && (this.newIndex = u); + var T = c ? this.prevIndex : u; + o && + this.newIndex !== T && + o({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: T, + isKeySorting: c, + nodes: a, + helper: this.helper, + }); + }, + }, + { + key: 'getWrappedInstance', + value: function() { + return ( + w( + 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, l({ref: e}, k(this.props, ne))); + }, + }, + { + key: 'helperContainer', + get: function() { + var e = this.props.helperContainer; + return 'function' == typeof e + ? e() + : this.props.helperContainer || this.document.body; + }, + }, + { + key: 'containerScrollDelta', + get: function() { + return this.props.useWindowAsScrollContainer + ? {left: 0, top: 0} + : { + left: + this.scrollContainer.scrollLeft - + this.initialScroll.left, + top: + this.scrollContainer.scrollTop - this.initialScroll.top, + }; + }, + }, + { + key: 'windowScrollDelta', + get: function() { + return { + left: + this.contentWindow.pageXOffset - + this.initialWindowScroll.left, + top: + this.contentWindow.pageYOffset - + this.initialWindowScroll.top, + }; + }, + }, + ]), + n + ); + })(r.Component)), + c(e, 'displayName', L('sortableList', t)), + c(e, 'defaultProps', te), + c(e, 'propTypes', Z), + c(e, 'childContextTypes', {manager: i.object.isRequired}), + n + ); + } + var re = { + index: i.number.isRequired, + collection: i.oneOfType([i.number, i.string]), + disabled: i.bool, + }, + ie = Object.keys(re); + function ae(n) { + var e, + t, + o = + 1 < arguments.length && void 0 !== arguments[1] + ? arguments[1] + : {withRef: !1}; + return ( + (t = e = (function(e) { + function t() { + return u(this, t), g(this, y(t).apply(this, arguments)); + } + return ( + m(t, e), + f(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 ( + w( + 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, l({ref: e}, k(this.props, ie))); + }, + }, + ]), + t + ); + })(r.Component)), + c(e, 'displayName', L('sortableElement', n)), + c(e, 'contextTypes', {manager: i.object.isRequired}), + c(e, 'propTypes', re), + c(e, 'defaultProps', {collection: 0}), + t + ); + } + (e.SortableContainer = oe), + (e.sortableContainer = oe), + (e.SortableElement = ae), + (e.sortableElement = ae), + (e.SortableHandle = $), + (e.sortableHandle = $), + (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}); +}); diff --git a/src/SortableContainer/index.js b/src/SortableContainer/index.js index 9852f9926..b36660398 100644 --- a/src/SortableContainer/index.js +++ b/src/SortableContainer/index.js @@ -640,8 +640,8 @@ export default function sortableContainer( for (let i = 0, len = nodes.length; i < len; i++) { const {node} = nodes[i]; const {index} = node.sortableInfo; - const width = node.offsetWidth; - const height = node.offsetHeight; + const width = node.getBoundingClientRect().width; + const height = node.getBoundingClientRect().height; const offset = { height: this.height > height ? height / 2 : this.height / 2, width: this.width > width ? width / 2 : this.width / 2, @@ -794,8 +794,10 @@ export default function sortableContainer( if ( mustShiftBackward || (index > this.index && - sortingOffset.top + windowScrollDelta.top + offset.height >= - edgeOffset.top) + sortingOffset.top + + windowScrollDelta.top + + this.boundingClientRect.height >= + edgeOffset.top + offset.height) ) { translate.y = -(this.height + this.marginOffset.y); this.newIndex = index; diff --git a/src/utils.js b/src/utils.js index 4b884b755..0afd149eb 100644 --- a/src/utils.js +++ b/src/utils.js @@ -161,8 +161,8 @@ export function getEdgeOffset(node, parent, offset = {left: 0, top: 0}) { // Get the actual offsetTop / offsetLeft value, no matter how deep the node is nested const nodeOffset = { - left: offset.left + node.offsetLeft, - top: offset.top + node.offsetTop, + left: offset.left + node.getBoundingClientRect().left, + top: offset.top + node.getBoundingClientRect().top, }; if (node.parentNode === parent) { From 5d175afbff1d6b64d42006b53c6831671288be15 Mon Sep 17 00:00:00 2001 From: Khabibullin Rustam Date: Fri, 28 Jan 2022 11:21:42 +0700 Subject: [PATCH 09/12] Revert "VISME-fix-drag-sort-scale-issue-new-build" --- dist/react-sortable-hoc.esm.js | 1618 +++++++++- dist/react-sortable-hoc.js | 1625 +++++++++- dist/react-sortable-hoc.umd.js | 4496 ++++++++++++---------------- dist/react-sortable-hoc.umd.min.js | 1581 +--------- src/SortableContainer/index.js | 6 +- 5 files changed, 5214 insertions(+), 4112 deletions(-) diff --git a/dist/react-sortable-hoc.esm.js b/dist/react-sortable-hoc.esm.js index b65ce8b36..cfbb3f1e1 100644 --- a/dist/react-sortable-hoc.esm.js +++ b/dist/react-sortable-hoc.esm.js @@ -1,13 +1,1605 @@ -export { - default as SortableContainer, - default as sortableContainer, -} from './SortableContainer/index.js'; -export { - default as SortableElement, - default as sortableElement, -} from './SortableElement/index.js'; -export { - default as SortableHandle, - default as sortableHandle, -} from './SortableHandle/index.js'; -export {arrayMove} from './utils.js'; +import _extends from '@babel/runtime/helpers/esm/extends'; +import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'; +import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck'; +import _createClass from '@babel/runtime/helpers/esm/createClass'; +import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized'; +import _inherits from '@babel/runtime/helpers/esm/inherits'; +import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn'; +import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf'; +import _defineProperty from '@babel/runtime/helpers/esm/defineProperty'; +import { createElement, Component } from 'react'; +import PropTypes from 'prop-types'; +import { findDOMNode } from 'react-dom'; +import invariant from 'invariant'; +import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray'; + +var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; +}(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] +}; +var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +}(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; +} +function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } +} +function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; +} +function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; +} +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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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); + + var _super = _createSuper(WithSortableHandle); + + function WithSortableHandle() { + _classCallCheck(this, WithSortableHandle); + + return _super.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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); +} + +function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + var _super = _createSuper$1(WithSortableContainer); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0 + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0 + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _temp; +} + +function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + var _super = _createSuper$2(WithSortableElement); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _super.apply(this, arguments); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; +} + +export { sortableContainer as SortableContainer, sortableElement as SortableElement, sortableHandle as SortableHandle, arrayMove, sortableContainer, sortableElement, sortableHandle }; diff --git a/dist/react-sortable-hoc.js b/dist/react-sortable-hoc.js index 1d817becc..6400f6bcf 100644 --- a/dist/react-sortable-hoc.js +++ b/dist/react-sortable-hoc.js @@ -1,20 +1,1617 @@ 'use strict'; -Object.defineProperty(exports, '__esModule', {value: true}); +Object.defineProperty(exports, '__esModule', { value: true }); -function _interopDefault(ex) { - return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex; +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } + +var _extends = _interopDefault(require('@babel/runtime/helpers/extends')); +var _slicedToArray = _interopDefault(require('@babel/runtime/helpers/slicedToArray')); +var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck')); +var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass')); +var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized')); +var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits')); +var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn')); +var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf')); +var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty')); +var React = require('react'); +var PropTypes = _interopDefault(require('prop-types')); +var reactDom = require('react-dom'); +var invariant = _interopDefault(require('invariant')); +var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray')); + +var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; +}(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] +}; +var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +}(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; +} +function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } } +function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; +} +function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; +} +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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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); + + var _super = _createSuper(WithSortableHandle); + + function WithSortableHandle() { + _classCallCheck(this, WithSortableHandle); + + return _super.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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + +function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); +} + +function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + var _super = _createSuper$1(WithSortableContainer); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); -var index_js = _interopDefault(require('./SortableContainer/index.js')); -var index_js$1 = _interopDefault(require('./SortableElement/index.js')); -var index_js$2 = _interopDefault(require('./SortableHandle/index.js')); -var utils_js = require('./utils.js'); + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0 + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0 + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _temp; +} + +function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } +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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + var _super = _createSuper$2(WithSortableElement); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _super.apply(this, arguments); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; +} -exports.SortableContainer = index_js; -exports.sortableContainer = index_js; -exports.SortableElement = index_js$1; -exports.sortableElement = index_js$1; -exports.SortableHandle = index_js$2; -exports.sortableHandle = index_js$2; -exports.arrayMove = utils_js.arrayMove; +exports.SortableContainer = sortableContainer; +exports.SortableElement = sortableElement; +exports.SortableHandle = sortableHandle; +exports.arrayMove = arrayMove; +exports.sortableContainer = sortableContainer; +exports.sortableElement = sortableElement; +exports.sortableHandle = sortableHandle; diff --git a/dist/react-sortable-hoc.umd.js b/dist/react-sortable-hoc.umd.js index ee5444bda..817c49108 100644 --- a/dist/react-sortable-hoc.umd.js +++ b/dist/react-sortable-hoc.umd.js @@ -1,2500 +1,1996 @@ -(function(global, factory) { - typeof exports === 'object' && typeof module !== 'undefined' - ? factory( - exports, - require('react'), - require('prop-types'), - require('react-dom'), - ) - : typeof define === 'function' && define.amd - ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) - : ((global = global || self), - factory( - (global.SortableHOC = {}), - global.React, - global.PropTypes, - global.ReactDOM, - )); -})(this, function(exports, React, PropTypes, reactDom) { - 'use strict'; - - PropTypes = - PropTypes && PropTypes.hasOwnProperty('default') - ? PropTypes['default'] - : PropTypes; - - function createCommonjsModule(fn, module) { - return (module = {exports: {}}), fn(module, module.exports), module.exports; - } - - var _extends_1 = createCommonjsModule(function(module) { - function _extends() { - module.exports = _extends = - Object.assign || - function(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - return _extends.apply(this, arguments); - } - - module.exports = _extends; - }); - - function _arrayWithHoles(arr) { - if (Array.isArray(arr)) return arr; - } - - var arrayWithHoles = _arrayWithHoles; - - function _iterableToArrayLimit(arr, i) { - var _arr = []; - var _n = true; - var _d = false; - var _e = undefined; - - try { - for ( - var _i = arr[Symbol.iterator](), _s; - !(_n = (_s = _i.next()).done); - _n = true - ) { - _arr.push(_s.value); - - if (i && _arr.length === i) break; - } - } catch (err) { - _d = true; - _e = err; - } finally { - try { - if (!_n && _i['return'] != null) _i['return'](); - } finally { - if (_d) throw _e; - } - } - - return _arr; - } - - var iterableToArrayLimit = _iterableToArrayLimit; - - function _nonIterableRest() { - throw new TypeError('Invalid attempt to destructure non-iterable instance'); - } - - var nonIterableRest = _nonIterableRest; - - function _slicedToArray(arr, i) { - return ( - arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest() - ); - } - - var slicedToArray = _slicedToArray; - - function _defineProperty(obj, key, value) { - if (key in obj) { - Object.defineProperty(obj, key, { - value: value, - enumerable: true, - configurable: true, - writable: true, - }); - } else { - obj[key] = value; - } - - return obj; - } - - var defineProperty = _defineProperty; - - function _objectSpread(target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i] != null ? arguments[i] : {}; - var ownKeys = Object.keys(source); - - if (typeof Object.getOwnPropertySymbols === 'function') { - ownKeys = ownKeys.concat( - Object.getOwnPropertySymbols(source).filter(function(sym) { - return Object.getOwnPropertyDescriptor(source, sym).enumerable; - }), - ); - } - - ownKeys.forEach(function(key) { - defineProperty(target, key, source[key]); - }); - } - - return target; - } - - var objectSpread = _objectSpread; - - function _classCallCheck(instance, Constructor) { - if (!(instance instanceof Constructor)) { - throw new TypeError('Cannot call a class as a function'); - } - } - - var classCallCheck = _classCallCheck; - - function _defineProperties(target, props) { - for (var i = 0; i < props.length; i++) { - var descriptor = props[i]; - descriptor.enumerable = descriptor.enumerable || false; - descriptor.configurable = true; - if ('value' in descriptor) descriptor.writable = true; - Object.defineProperty(target, descriptor.key, descriptor); - } - } - - function _createClass(Constructor, protoProps, staticProps) { - if (protoProps) _defineProperties(Constructor.prototype, protoProps); - if (staticProps) _defineProperties(Constructor, staticProps); - return Constructor; - } - - var createClass = _createClass; - - var _typeof_1 = createCommonjsModule(function(module) { - function _typeof2(obj) { - if (typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol') { - _typeof2 = function _typeof2(obj) { - return typeof obj; - }; - } else { - _typeof2 = function _typeof2(obj) { - return obj && - typeof Symbol === 'function' && - obj.constructor === Symbol && - obj !== Symbol.prototype - ? 'symbol' - : typeof obj; - }; - } - return _typeof2(obj); - } - - function _typeof(obj) { - if ( - typeof Symbol === 'function' && - _typeof2(Symbol.iterator) === 'symbol' - ) { - module.exports = _typeof = function _typeof(obj) { - return _typeof2(obj); - }; - } else { - module.exports = _typeof = function _typeof(obj) { - return obj && - typeof Symbol === 'function' && - obj.constructor === Symbol && - obj !== Symbol.prototype - ? 'symbol' - : _typeof2(obj); - }; - } - - return _typeof(obj); - } - - module.exports = _typeof; - }); - - function _assertThisInitialized(self) { - if (self === void 0) { - throw new ReferenceError( - "this hasn't been initialised - super() hasn't been called", - ); - } - - return self; - } - - var assertThisInitialized = _assertThisInitialized; - - function _possibleConstructorReturn(self, call) { - if (call && (_typeof_1(call) === 'object' || typeof call === 'function')) { - return call; - } - - return assertThisInitialized(self); - } - - var possibleConstructorReturn = _possibleConstructorReturn; - - var getPrototypeOf = createCommonjsModule(function(module) { - function _getPrototypeOf(o) { - module.exports = _getPrototypeOf = Object.setPrototypeOf - ? Object.getPrototypeOf - : function _getPrototypeOf(o) { - return o.__proto__ || Object.getPrototypeOf(o); - }; - return _getPrototypeOf(o); - } - - module.exports = _getPrototypeOf; - }); - - var setPrototypeOf = createCommonjsModule(function(module) { - function _setPrototypeOf(o, p) { - module.exports = _setPrototypeOf = - Object.setPrototypeOf || - function _setPrototypeOf(o, p) { - o.__proto__ = p; - return o; - }; - - return _setPrototypeOf(o, p); - } - - module.exports = _setPrototypeOf; - }); - - function _inherits(subClass, superClass) { - if (typeof superClass !== 'function' && superClass !== null) { - throw new TypeError('Super expression must either be null or a function'); - } - - subClass.prototype = Object.create(superClass && superClass.prototype, { - constructor: { - value: subClass, - writable: true, - configurable: true, - }, - }); - if (superClass) setPrototypeOf(subClass, superClass); - } - - var inherits = _inherits; - - /** - * Copyright (c) 2013-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - - var invariant = function(condition, format, a, b, c, d, e, f) { - { - if (format === undefined) { - throw new Error('invariant requires an error message argument'); - } - } - - if (!condition) { - var error; - if (format === undefined) { - error = new Error( - 'Minified exception occurred; use the non-minified dev environment ' + - 'for the full error message and additional helpful warnings.', - ); - } else { - var args = [a, b, c, d, e, f]; - var argIndex = 0; - error = new Error( - format.replace(/%s/g, function() { - return args[argIndex++]; - }), - ); - error.name = 'Invariant Violation'; - } - - error.framesToPop = 1; // we don't care about invariant's own frame - throw error; - } - }; - - var invariant_1 = invariant; - - var Manager = (function() { - function Manager() { - classCallCheck(this, Manager); - - defineProperty(this, 'refs', {}); - } - - createClass(Manager, [ - { - key: 'add', - value: function add(collection, ref) { - if (!this.refs[collection]) { - this.refs[collection] = []; - } - - this.refs[collection].push(ref); - }, - }, - { - key: 'remove', - value: function remove(collection, ref) { - var index = this.getIndex(collection, ref); - - if (index !== -1) { - this.refs[collection].splice(index, 1); - } - }, - }, - { - key: 'isActive', - value: function isActive() { - return this.active; - }, - }, - { - key: 'getActive', - value: function getActive() { - var _this = this; - - return this.refs[this.active.collection].find(function(_ref) { - var node = _ref.node; - return node.sortableInfo.index == _this.active.index; - }); - }, - }, - { - key: 'getIndex', - value: function getIndex(collection, ref) { - return this.refs[collection].indexOf(ref); - }, - }, - { - key: 'getOrderedRefs', - value: function getOrderedRefs() { - var collection = - arguments.length > 0 && arguments[0] !== undefined - ? arguments[0] - : this.active.collection; - return this.refs[collection].sort(sortByIndex); - }, - }, - ]); - - return Manager; - })(); - - function sortByIndex(_ref2, _ref3) { - var index1 = _ref2.node.sortableInfo.index; - var index2 = _ref3.node.sortableInfo.index; - return index1 - index2; - } - - function _arrayWithoutHoles(arr) { - if (Array.isArray(arr)) { - for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { - arr2[i] = arr[i]; - } - - return arr2; - } - } - - var arrayWithoutHoles = _arrayWithoutHoles; - - function _iterableToArray(iter) { - if ( - Symbol.iterator in Object(iter) || - Object.prototype.toString.call(iter) === '[object Arguments]' - ) - return Array.from(iter); - } - - var iterableToArray = _iterableToArray; - - function _nonIterableSpread() { - throw new TypeError('Invalid attempt to spread non-iterable instance'); - } - - var nonIterableSpread = _nonIterableSpread; - - function _toConsumableArray(arr) { - return ( - arrayWithoutHoles(arr) || iterableToArray(arr) || nonIterableSpread() - ); - } - - var toConsumableArray = _toConsumableArray; - - 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(); - array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); - return array; - } - function omit(obj, keysToOmit) { - return Object.keys(obj).reduce(function(acc, key) { - if (keysToOmit.indexOf(key) === -1) { - acc[key] = obj[key]; - } - - return acc; - }, {}); - } - var events = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'], - }; - var vendorPrefix = (function() { - if (typeof window === 'undefined' || typeof document === 'undefined') { - return ''; - } - - var styles = window.getComputedStyle(document.documentElement, '') || [ - '-moz-hidden-iframe', - ]; - var pre = (Array.prototype.slice - .call(styles) - .join('') - .match(/-(moz|webkit|ms)-/) || - (styles.OLink === '' && ['', 'o']))[1]; - - switch (pre) { - case 'ms': - return 'ms'; - - default: - return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; - } - })(); - 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) { - while (el) { - if (fn(el)) { - return el; - } - - el = el.parentNode; - } - - return null; - } - function limit(min, max, value) { - return Math.max(min, Math.min(value, max)); - } - - function getPixelValue(stringValue) { - if (stringValue.substr(-2) === 'px') { - return parseFloat(stringValue); - } - - return 0; - } - - function getElementMargin(element) { - var style = window.getComputedStyle(element); - return { - bottom: getPixelValue(style.marginBottom), - left: getPixelValue(style.marginLeft), - right: getPixelValue(style.marginRight), - top: getPixelValue(style.marginTop), - }; - } - function provideDisplayName(prefix, Component) { - var componentName = Component.displayName || Component.name; - return componentName - ? ''.concat(prefix, '(').concat(componentName, ')') - : prefix; - } - function getScrollAdjustedBoundingClientRect(node, scrollDelta) { - var boundingClientRect = node.getBoundingClientRect(); - return { - top: boundingClientRect.top + scrollDelta.top, - left: boundingClientRect.left + scrollDelta.left, - }; - } - function getPosition(event) { - if (event.touches && event.touches.length) { - return { - x: event.touches[0].pageX, - y: event.touches[0].pageY, - }; - } else if (event.changedTouches && event.changedTouches.length) { - return { - x: event.changedTouches[0].pageX, - y: event.changedTouches[0].pageY, - }; - } else { - return { - x: event.pageX, - y: event.pageY, - }; - } - } - function isTouchEvent(event) { - return ( - (event.touches && event.touches.length) || - (event.changedTouches && event.changedTouches.length) - ); - } - function getEdgeOffset(node, parent) { - var offset = - arguments.length > 2 && arguments[2] !== undefined - ? arguments[2] - : { - left: 0, - top: 0, - }; - - if (!node) { - return undefined; - } - - var nodeOffset = { - left: offset.left + node.getBoundingClientRect().left, - top: offset.top + node.getBoundingClientRect().top, - }; - - if (node.parentNode === parent) { - return nodeOffset; - } - - return getEdgeOffset(node.parentNode, parent, nodeOffset); - } - function getTargetIndex(newIndex, prevIndex, oldIndex) { - if (newIndex < oldIndex && newIndex > prevIndex) { - return newIndex - 1; - } else if (newIndex > oldIndex && newIndex < prevIndex) { - return newIndex + 1; - } else { - return newIndex; - } - } - function getLockPixelOffset(_ref) { - var lockOffset = _ref.lockOffset, - width = _ref.width, - height = _ref.height; - var offsetX = lockOffset; - var offsetY = lockOffset; - var unit = 'px'; - - if (typeof lockOffset === 'string') { - var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); - invariant_1( - match !== null, - 'lockOffset value should be a number or a string of a ' + - 'number followed by "px" or "%". Given %s', - lockOffset, - ); - offsetX = parseFloat(lockOffset); - offsetY = parseFloat(lockOffset); - unit = match[1]; - } - - invariant_1( - isFinite(offsetX) && isFinite(offsetY), - 'lockOffset value should be a finite. Given %s', - lockOffset, - ); - - if (unit === '%') { - offsetX = (offsetX * width) / 100; - offsetY = (offsetY * height) / 100; - } - - return { - x: offsetX, - y: offsetY, - }; - } - 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) { - var container = - arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; - - if (container) { - return document.querySelector(container); - } - - if (!(el instanceof HTMLElement)) { - return null; - } else if (isScrollable(el)) { - return el; - } else { - return getScrollingParent(el.parentNode); - } - } - function getContainerGridGap(element) { - var style = window.getComputedStyle(element); - - if (style.display === 'grid') { - return { - x: getPixelValue(style.gridColumnGap), - y: getPixelValue(style.gridRowGap), - }; - } - - return { - x: 0, - y: 0, - }; - } - var KEYCODE = { - TAB: 9, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - }; - var NodeType = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT', - }; - function cloneNode(node) { - var selector = 'input, textarea, select, canvas, [contenteditable]'; - var fields = node.querySelectorAll(selector); - var clonedNode = node.cloneNode(true); - - var clonedFields = toConsumableArray(clonedNode.querySelectorAll(selector)); - - clonedFields.forEach(function(field, i) { - if (field.type !== 'file') { - field.value = fields[i].value; - } - - if (field.type === 'radio' && field.name) { - field.name = '__sortableClone__'.concat(field.name); - } - - if ( - field.tagName === NodeType.Canvas && - fields[i].width > 0 && - fields[i].height > 0 - ) { - var destCtx = field.getContext('2d'); - destCtx.drawImage(fields[i], 0, 0); - } - }); - return clonedNode; - } - - 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() { - if (this.interval == null) { - return; - } - - 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 interactiveElements = [ - NodeType.Input, - NodeType.Textarea, - NodeType.Select, - NodeType.Option, - NodeType.Button, - ]; - - if (interactiveElements.indexOf(event.target.tagName) !== -1) { - return true; - } - - if ( - closest(event.target, function(el) { - return el.contentEditable === 'true'; - }) - ) { - 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, - keyboardSortingTransitionDuration: PropTypes.number, - 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, - keyCodes: PropTypes.shape({ - lift: PropTypes.arrayOf(PropTypes.number), - drop: PropTypes.arrayOf(PropTypes.number), - cancel: PropTypes.arrayOf(PropTypes.number), - up: PropTypes.arrayOf(PropTypes.number), - down: PropTypes.arrayOf(PropTypes.number), - }), - shouldCancelStart: PropTypes.func, - transitionDuration: PropTypes.number, - updateBeforeSortStart: PropTypes.func, - useDragHandle: PropTypes.bool, - useWindowAsScrollContainer: PropTypes.bool, - }; - var defaultKeyCodes = { - lift: [KEYCODE.SPACE], - drop: [KEYCODE.SPACE], - cancel: [KEYCODE.ESC], - up: [KEYCODE.UP, KEYCODE.LEFT], - down: [KEYCODE.DOWN, KEYCODE.RIGHT], - }; - var defaultProps = { - axis: 'y', - disableAutoscroll: false, - distance: 0, - getHelperDimensions: defaultGetHelperDimensions, - hideSortableGhost: true, - lockOffset: '50%', - lockToContainerEdges: false, - pressDelay: 0, - pressThreshold: 5, - keyCodes: defaultKeyCodes, - 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) { - try { - var result = body(); - } catch (e) { - return finalizer(true, e); - } - - if (result && result.then) { - return result.then( - finalizer.bind(null, false), - finalizer.bind(null, true), - ); - } - - return finalizer(false, value); - } - function sortableContainer(WrappedComponent) { - var _class, _temp; - - var config = - arguments.length > 1 && arguments[1] !== undefined - ? arguments[1] - : { - withRef: false, - }; - return ( - (_temp = _class = (function(_React$Component) { - inherits(WithSortableContainer, _React$Component); - - function WithSortableContainer(props) { - var _this; - - classCallCheck(this, WithSortableContainer); - - _this = possibleConstructorReturn( - this, - getPrototypeOf(WithSortableContainer).call(this, props), - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'state', - {}, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handleStart', - function(event) { - var _this$props = _this.props, - distance = _this$props.distance, - shouldCancelStart = _this$props.shouldCancelStart; - - if (event.button === 2 || shouldCancelStart(event)) { - return; - } - - _this.touched = true; - _this.position = getPosition(event); - var node = closest(event.target, function(el) { - return el.sortableInfo != null; - }); - - if ( - node && - node.sortableInfo && - _this.nodeIsChild(node) && - !_this.state.sorting - ) { - var useDragHandle = _this.props.useDragHandle; - var _node$sortableInfo = node.sortableInfo, - index = _node$sortableInfo.index, - collection = _node$sortableInfo.collection, - disabled = _node$sortableInfo.disabled; - - if (disabled) { - return; - } - - if (useDragHandle && !closest(event.target, isSortableHandle)) { - return; - } - - _this.manager.active = { - collection: collection, - index: index, - }; - - if ( - !isTouchEvent(event) && - event.target.tagName === NodeType.Anchor - ) { - event.preventDefault(); - } - - if (!distance) { - if (_this.props.pressDelay === 0) { - _this.handlePress(event); - } else { - _this.pressTimer = setTimeout(function() { - return _this.handlePress(event); - }, _this.props.pressDelay); - } - } - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'nodeIsChild', - function(node) { - return node.sortableInfo.manager === _this.manager; - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handleMove', - function(event) { - var _this$props2 = _this.props, - distance = _this$props2.distance, - pressThreshold = _this$props2.pressThreshold; - - if ( - !_this.state.sorting && - _this.touched && - !_this._awaitingUpdateBeforeSortStart - ) { - var position = getPosition(event); - var delta = { - x: _this.position.x - position.x, - y: _this.position.y - position.y, - }; - var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); - _this.delta = delta; - - if ( - !distance && - (!pressThreshold || combinedDelta >= pressThreshold) - ) { - clearTimeout(_this.cancelTimer); - _this.cancelTimer = setTimeout(_this.cancel, 0); - } else if ( - distance && - combinedDelta >= distance && - _this.manager.isActive() - ) { - _this.handlePress(event); - } - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handleEnd', - function() { - _this.touched = false; - - _this.cancel(); - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'cancel', - function() { - var distance = _this.props.distance; - var sorting = _this.state.sorting; - - if (!sorting) { - if (!distance) { - clearTimeout(_this.pressTimer); - } - - _this.manager.active = null; - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handlePress', - function(event) { - try { - var active = _this.manager.getActive(); - - var _temp6 = (function() { - if (active) { - var _temp7 = function _temp7() { - var index = _node.sortableInfo.index; - var margin = getElementMargin(_node); - var gridGap = getContainerGridGap(_this.container); - - var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); - - var dimensions = _getHelperDimensions({ - index: index, - node: _node, - collection: _collection, - }); - - _this.node = _node; - _this.margin = margin; - _this.gridGap = gridGap; - _this.width = dimensions.width; - _this.height = dimensions.height; - _this.marginOffset = { - x: - _this.margin.left + - _this.margin.right + - _this.gridGap.x, - y: Math.max( - _this.margin.top, - _this.margin.bottom, - _this.gridGap.y, - ), - }; - _this.boundingClientRect = _node.getBoundingClientRect(); - _this.containerBoundingRect = containerBoundingRect; - _this.index = index; - _this.newIndex = index; - _this.axis = { - x: _axis.indexOf('x') >= 0, - y: _axis.indexOf('y') >= 0, - }; - _this.offsetEdge = getEdgeOffset(_node, _this.container); - - if (_isKeySorting) { - _this.initialOffset = getPosition( - objectSpread({}, event, { - pageX: _this.boundingClientRect.left, - pageY: _this.boundingClientRect.top, - }), - ); - } else { - _this.initialOffset = getPosition(event); - } - - _this.initialScroll = { - left: _this.scrollContainer.scrollLeft, - top: _this.scrollContainer.scrollTop, - }; - _this.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset, - }; - _this.helper = _this.helperContainer.appendChild( - cloneNode(_node), - ); - 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 (_isKeySorting) { - _this.helper.focus(); - } - - if (_hideSortableGhost) { - _this.sortableGhost = _node; - setInlineStyles(_node, { - opacity: 0, - }); - } - - _this.minTranslate = {}; - _this.maxTranslate = {}; - - if (_isKeySorting) { - var _ref = _useWindowAsScrollContainer - ? { - top: 0, - left: 0, - width: _this.contentWindow.innerWidth, - height: _this.contentWindow.innerHeight, - } - : _this.containerBoundingRect, - containerTop = _ref.top, - containerLeft = _ref.left, - containerWidth = _ref.width, - containerHeight = _ref.height; - - var containerBottom = containerTop + containerHeight; - var containerRight = containerLeft + containerWidth; - - if (_this.axis.x) { - _this.minTranslate.x = - containerLeft - _this.boundingClientRect.left; - _this.maxTranslate.x = - containerRight - - (_this.boundingClientRect.left + _this.width); - } - - if (_this.axis.y) { - _this.minTranslate.y = - containerTop - _this.boundingClientRect.top; - _this.maxTranslate.y = - containerBottom - - (_this.boundingClientRect.top + _this.height); - } - } else { - if (_this.axis.x) { - _this.minTranslate.x = - (_useWindowAsScrollContainer - ? 0 - : containerBoundingRect.left) - - _this.boundingClientRect.left - - _this.width / 2; - _this.maxTranslate.x = - (_useWindowAsScrollContainer - ? _this.contentWindow.innerWidth - : containerBoundingRect.left + - containerBoundingRect.width) - - _this.boundingClientRect.left - - _this.width / 2; - } - - if (_this.axis.y) { - _this.minTranslate.y = - (_useWindowAsScrollContainer - ? 0 - : containerBoundingRect.top) - - _this.boundingClientRect.top - - _this.height / 2; - _this.maxTranslate.y = - (_useWindowAsScrollContainer - ? _this.contentWindow.innerHeight - : containerBoundingRect.top + - containerBoundingRect.height) - - _this.boundingClientRect.top - - _this.height / 2; - } - } - - if (_helperClass) { - _helperClass.split(' ').forEach(function(className) { - return _this.helper.classList.add(className); - }); - } - - _this.listenerNode = event.touches - ? _node - : _this.contentWindow; - - if (_isKeySorting) { - _this.listenerNode.addEventListener( - 'wheel', - _this.handleKeyEnd, - true, - ); - - _this.listenerNode.addEventListener( - 'mousedown', - _this.handleKeyEnd, - true, - ); - - _this.listenerNode.addEventListener( - 'keydown', - _this.handleKeyDown, - ); - } else { - events.move.forEach(function(eventName) { - return _this.listenerNode.addEventListener( - eventName, - _this.handleSortMove, - false, - ); - }); - events.end.forEach(function(eventName) { - return _this.listenerNode.addEventListener( - eventName, - _this.handleSortEnd, - false, - ); - }); - } - - _this.setState({ - sorting: true, - sortingIndex: index, - }); - - if (_onSortStart) { - _onSortStart( - { - node: _node, - index: index, - collection: _collection, - isKeySorting: _isKeySorting, - nodes: _this.manager.getOrderedRefs(), - helper: _this.helper, - }, - event, - ); - } - - if (_isKeySorting) { - _this.keyMove(0); - } - }; - - var _this$props3 = _this.props, - _axis = _this$props3.axis, - _getHelperDimensions = _this$props3.getHelperDimensions, - _helperClass = _this$props3.helperClass, - _hideSortableGhost = _this$props3.hideSortableGhost, - updateBeforeSortStart = - _this$props3.updateBeforeSortStart, - _onSortStart = _this$props3.onSortStart, - _useWindowAsScrollContainer = - _this$props3.useWindowAsScrollContainer; - var _node = active.node, - _collection = active.collection; - var _isKeySorting = _this.manager.isKeySorting; - - var _temp8 = (function() { - if (typeof updateBeforeSortStart === 'function') { - _this._awaitingUpdateBeforeSortStart = true; - - var _temp9 = _finallyRethrows( - function() { - var index = _node.sortableInfo.index; - return Promise.resolve( - updateBeforeSortStart( - { - collection: _collection, - index: index, - node: _node, - isKeySorting: _isKeySorting, - }, - event, - ), - ).then(function() {}); - }, - function(_wasThrown, _result) { - _this._awaitingUpdateBeforeSortStart = false; - if (_wasThrown) throw _result; - return _result; - }, - ); - - if (_temp9 && _temp9.then) - return _temp9.then(function() {}); - } - })(); - - return _temp8 && _temp8.then - ? _temp8.then(_temp7) - : _temp7(_temp8); - } - })(); - - return Promise.resolve( - _temp6 && _temp6.then ? _temp6.then(function() {}) : void 0, - ); - } catch (e) { - return Promise.reject(e); - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handleSortMove', - function(event) { - var onSortMove = _this.props.onSortMove; - - if (typeof event.preventDefault === 'function') { - event.preventDefault(); - } - - _this.updateHelperPosition(event); - - _this.animateNodes(); - - _this.autoscroll(); - - if (onSortMove) { - onSortMove(event); - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handleSortEnd', - function(event) { - var _this$props4 = _this.props, - hideSortableGhost = _this$props4.hideSortableGhost, - onSortEnd = _this$props4.onSortEnd; - var _this$manager = _this.manager, - collection = _this$manager.active.collection, - isKeySorting = _this$manager.isKeySorting; - - var nodes = _this.manager.getOrderedRefs(); - - if (_this.listenerNode) { - if (isKeySorting) { - _this.listenerNode.removeEventListener( - 'wheel', - _this.handleKeyEnd, - true, - ); - - _this.listenerNode.removeEventListener( - 'mousedown', - _this.handleKeyEnd, - true, - ); - - _this.listenerNode.removeEventListener( - 'keydown', - _this.handleKeyDown, - ); - } else { - events.move.forEach(function(eventName) { - return _this.listenerNode.removeEventListener( - eventName, - _this.handleSortMove, - ); - }); - events.end.forEach(function(eventName) { - return _this.listenerNode.removeEventListener( - eventName, - _this.handleSortEnd, - ); - }); - } - } - - _this.helper.parentNode.removeChild(_this.helper); - - if (hideSortableGhost && _this.sortableGhost) { - setInlineStyles(_this.sortableGhost, { - opacity: '', - }); - } - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node2 = nodes[i]; - var el = _node2.node; - _node2.edgeOffset = null; - _node2.boundingClientRect = null; - setTranslate3d(el, null); - setTransitionDuration(el, null); - _node2.translate = null; - } - - _this.autoScroller.clear(); - - _this.manager.active = null; - _this.manager.isKeySorting = false; - - _this.setState({ - sorting: false, - sortingIndex: null, - }); - - if (typeof onSortEnd === 'function') { - onSortEnd( - { - collection: collection, - newIndex: _this.newIndex, - oldIndex: _this.index, - isKeySorting: isKeySorting, - nodes: nodes, - }, - event, - ); - } - - _this.touched = false; - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'autoscroll', - function() { - var disableAutoscroll = _this.props.disableAutoscroll; - var isKeySorting = _this.manager.isKeySorting; - - if (disableAutoscroll) { - _this.autoScroller.clear(); - - return; - } - - if (isKeySorting) { - var translate = objectSpread({}, _this.translate); - - var scrollX = 0; - var scrollY = 0; - - if (_this.axis.x) { - translate.x = Math.min( - _this.maxTranslate.x, - Math.max(_this.minTranslate.x, _this.translate.x), - ); - scrollX = _this.translate.x - translate.x; - } - - if (_this.axis.y) { - translate.y = Math.min( - _this.maxTranslate.y, - Math.max(_this.minTranslate.y, _this.translate.y), - ); - scrollY = _this.translate.y - translate.y; - } - - _this.translate = translate; - setTranslate3d(_this.helper, _this.translate); - _this.scrollContainer.scrollLeft += scrollX; - _this.scrollContainer.scrollTop += scrollY; - return; - } - - _this.autoScroller.update({ - height: _this.height, - maxTranslate: _this.maxTranslate, - minTranslate: _this.minTranslate, - translate: _this.translate, - width: _this.width, - }); - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'onAutoScroll', - function(offset) { - _this.translate.x += offset.left; - _this.translate.y += offset.top; - - _this.animateNodes(); - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handleKeyDown', - function(event) { - var keyCode = event.keyCode; - var _this$props5 = _this.props, - shouldCancelStart = _this$props5.shouldCancelStart, - _this$props5$keyCodes = _this$props5.keyCodes, - customKeyCodes = - _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; - - var keyCodes = objectSpread({}, defaultKeyCodes, customKeyCodes); - - if ( - (_this.manager.active && !_this.manager.isKeySorting) || - (!_this.manager.active && - (!keyCodes.lift.includes(keyCode) || - shouldCancelStart(event) || - !_this.isValidSortingTarget(event))) - ) { - return; - } - - event.stopPropagation(); - event.preventDefault(); - - if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { - _this.keyLift(event); - } else if ( - keyCodes.drop.includes(keyCode) && - _this.manager.active - ) { - _this.keyDrop(event); - } else if (keyCodes.cancel.includes(keyCode)) { - _this.newIndex = _this.manager.active.index; - - _this.keyDrop(event); - } else if (keyCodes.up.includes(keyCode)) { - _this.keyMove(-1); - } else if (keyCodes.down.includes(keyCode)) { - _this.keyMove(1); - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'keyLift', - function(event) { - var target = event.target; - var node = closest(target, function(el) { - return el.sortableInfo != null; - }); - var _node$sortableInfo2 = node.sortableInfo, - index = _node$sortableInfo2.index, - collection = _node$sortableInfo2.collection; - _this.initialFocusedNode = target; - _this.manager.isKeySorting = true; - _this.manager.active = { - index: index, - collection: collection, - }; - - _this.handlePress(event); - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'keyMove', - function(shift) { - var nodes = _this.manager.getOrderedRefs(); - - var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; - var newIndex = _this.newIndex + shift; - var prevIndex = _this.newIndex; - - if (newIndex < 0 || newIndex > lastIndex) { - return; - } - - _this.prevIndex = prevIndex; - _this.newIndex = newIndex; - var targetIndex = getTargetIndex( - _this.newIndex, - _this.prevIndex, - _this.index, - ); - var target = nodes.find(function(_ref2) { - var node = _ref2.node; - return node.sortableInfo.index === targetIndex; - }); - var targetNode = target.node; - var scrollDelta = _this.containerScrollDelta; - var targetBoundingClientRect = - target.boundingClientRect || - getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); - var targetTranslate = target.translate || { - x: 0, - y: 0, - }; - var targetPosition = { - top: - targetBoundingClientRect.top + - targetTranslate.y - - scrollDelta.top, - left: - targetBoundingClientRect.left + - targetTranslate.x - - scrollDelta.left, - }; - var shouldAdjustForSize = prevIndex < newIndex; - var sizeAdjustment = { - x: - shouldAdjustForSize && _this.axis.x - ? targetNode.offsetWidth - _this.width - : 0, - y: - shouldAdjustForSize && _this.axis.y - ? targetNode.offsetHeight - _this.height - : 0, - }; - - _this.handleSortMove({ - pageX: targetPosition.left + sizeAdjustment.x, - pageY: targetPosition.top + sizeAdjustment.y, - ignoreTransition: shift === 0, - }); - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'keyDrop', - function(event) { - _this.handleSortEnd(event); - - if (_this.initialFocusedNode) { - _this.initialFocusedNode.focus(); - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'handleKeyEnd', - function(event) { - if (_this.manager.active) { - _this.keyDrop(event); - } - }, - ); - - defineProperty( - assertThisInitialized(assertThisInitialized(_this)), - 'isValidSortingTarget', - function(event) { - var useDragHandle = _this.props.useDragHandle; - var target = event.target; - var node = closest(target, function(el) { - return el.sortableInfo != null; - }); - return ( - node && - node.sortableInfo && - !node.sortableInfo.disabled && - (useDragHandle ? isSortableHandle(target) : target.sortableInfo) - ); - }, - ); - - validateProps(props); - _this.manager = new Manager(); - _this.events = { - end: _this.handleEnd, - move: _this.handleMove, - start: _this.handleStart, - }; - return _this; - } - - createClass(WithSortableContainer, [ - { - key: 'getChildContext', - value: function getChildContext() { - return { - manager: this.manager, - }; - }, - }, - { - key: 'componentDidMount', - value: function componentDidMount() { - var _this2 = this; - - var useWindowAsScrollContainer = this.props - .useWindowAsScrollContainer; - var container = this.getContainer(); - Promise.resolve(container).then(function(containerNode) { - _this2.container = containerNode; - _this2.document = _this2.container.ownerDocument || document; - var contentWindow = - _this2.props.contentWindow || - _this2.document.defaultView || - window; - _this2.contentWindow = - typeof contentWindow === 'function' - ? contentWindow() - : contentWindow; - _this2.scrollContainer = useWindowAsScrollContainer - ? _this2.document.scrollingElement || - _this2.document.documentElement - : getScrollingParent( - _this2.container, - _this2.props.scrollContainer, - ) || _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, - ); - }); - }); - - _this2.container.addEventListener( - 'keydown', - _this2.handleKeyDown, - ); - }); - }, - }, - { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - var _this3 = this; - - if (this.helper && this.helper.parentNode) { - this.helper.parentNode.removeChild(this.helper); - } - - if (!this.container) { - return; - } - - Object.keys(this.events).forEach(function(key) { - return events[key].forEach(function(eventName) { - return _this3.container.removeEventListener( - eventName, - _this3.events[key], - ); - }); - }); - this.container.removeEventListener('keydown', this.handleKeyDown); - }, - }, - { - key: 'updateHelperPosition', - value: function updateHelperPosition(event) { - var _this$props6 = this.props, - lockAxis = _this$props6.lockAxis, - lockOffset = _this$props6.lockOffset, - lockToContainerEdges = _this$props6.lockToContainerEdges, - transitionDuration = _this$props6.transitionDuration, - _this$props6$keyboard = - _this$props6.keyboardSortingTransitionDuration, - keyboardSortingTransitionDuration = - _this$props6$keyboard === void 0 - ? transitionDuration - : _this$props6$keyboard; - var isKeySorting = this.manager.isKeySorting; - var ignoreTransition = event.ignoreTransition; - var offset = getPosition(event); - var translate = { - x: offset.x - this.initialOffset.x, - y: offset.y - this.initialOffset.y, - }; - translate.y -= window.pageYOffset - this.initialWindowScroll.top; - translate.x -= window.pageXOffset - this.initialWindowScroll.left; - this.translate = translate; - - if (lockToContainerEdges) { - var _getLockPixelOffsets = getLockPixelOffsets({ - height: this.height, - lockOffset: lockOffset, - width: this.width, - }), - _getLockPixelOffsets2 = slicedToArray( - _getLockPixelOffsets, - 2, - ), - minLockOffset = _getLockPixelOffsets2[0], - maxLockOffset = _getLockPixelOffsets2[1]; - - var minOffset = { - x: this.width / 2 - minLockOffset.x, - y: this.height / 2 - minLockOffset.y, - }; - var maxOffset = { - x: this.width / 2 - maxLockOffset.x, - y: this.height / 2 - maxLockOffset.y, - }; - translate.x = limit( - this.minTranslate.x + minOffset.x, - this.maxTranslate.x - maxOffset.x, - translate.x, - ); - translate.y = limit( - this.minTranslate.y + minOffset.y, - this.maxTranslate.y - maxOffset.y, - translate.y, - ); - } - - if (lockAxis === 'x') { - translate.y = 0; - } else if (lockAxis === 'y') { - translate.x = 0; - } - - if ( - isKeySorting && - keyboardSortingTransitionDuration && - !ignoreTransition - ) { - setTransitionDuration( - this.helper, - keyboardSortingTransitionDuration, - ); - } - - setTranslate3d(this.helper, translate); - }, - }, - { - key: 'animateNodes', - value: function animateNodes() { - var _this$props7 = this.props, - transitionDuration = _this$props7.transitionDuration, - hideSortableGhost = _this$props7.hideSortableGhost, - onSortOver = _this$props7.onSortOver; - var containerScrollDelta = this.containerScrollDelta, - windowScrollDelta = this.windowScrollDelta; - var nodes = this.manager.getOrderedRefs(); - var sortingOffset = { - left: - this.offsetEdge.left + - this.translate.x + - containerScrollDelta.left, - top: - this.offsetEdge.top + - this.translate.y + - containerScrollDelta.top, - }; - var isKeySorting = this.manager.isKeySorting; - var prevIndex = this.newIndex; - this.newIndex = null; - - for (var i = 0, len = nodes.length; i < len; i++) { - var _node3 = nodes[i].node; - var index = _node3.sortableInfo.index; - - var width = _node3.getBoundingClientRect().width; - - var height = _node3.getBoundingClientRect().height; - - var offset = { - height: this.height > height ? height / 2 : this.height / 2, - width: this.width > width ? width / 2 : this.width / 2, - }; - var mustShiftBackward = - isKeySorting && index > this.index && index <= prevIndex; - var mustShiftForward = - isKeySorting && index < this.index && index >= prevIndex; - var translate = { - x: 0, - y: 0, - }; - var edgeOffset = nodes[i].edgeOffset; - - if (!edgeOffset) { - edgeOffset = getEdgeOffset(_node3, this.container); - nodes[i].edgeOffset = edgeOffset; - - if (isKeySorting) { - nodes[ - i - ].boundingClientRect = getScrollAdjustedBoundingClientRect( - _node3, - containerScrollDelta, - ); - } - } - - var nextNode = i < nodes.length - 1 && nodes[i + 1]; - var prevNode = i > 0 && nodes[i - 1]; - - if (nextNode && !nextNode.edgeOffset) { - nextNode.edgeOffset = getEdgeOffset( - nextNode.node, - this.container, - ); - - if (isKeySorting) { - nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect( - nextNode.node, - containerScrollDelta, - ); - } - } - - if (index === this.index) { - if (hideSortableGhost) { - this.sortableGhost = _node3; - setInlineStyles(_node3, { - opacity: 0, - }); - } - - continue; - } - - if (transitionDuration) { - setTransitionDuration(_node3, transitionDuration); - } - - if (this.axis.x) { - if (this.axis.y) { - if ( - mustShiftForward || - (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; - - if ( - edgeOffset.left + translate.x > - this.containerBoundingRect.width - offset.width - ) { - if (nextNode) { - translate.x = - nextNode.edgeOffset.left - edgeOffset.left; - translate.y = - nextNode.edgeOffset.top - edgeOffset.top; - } - } - - if (this.newIndex === null) { - this.newIndex = index; - } - } else if ( - mustShiftBackward || - (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); - - if ( - edgeOffset.left + translate.x < - this.containerBoundingRect.left + offset.width - ) { - if (prevNode) { - translate.x = - prevNode.edgeOffset.left - edgeOffset.left; - translate.y = - prevNode.edgeOffset.top - edgeOffset.top; - } - } - - this.newIndex = index; - } - } else { - if ( - mustShiftBackward || - (index > this.index && - sortingOffset.left + - windowScrollDelta.left + - offset.width >= - edgeOffset.left) - ) { - translate.x = -(this.width + this.marginOffset.x); - this.newIndex = index; - } else if ( - mustShiftForward || - (index < this.index && - sortingOffset.left + windowScrollDelta.left <= - edgeOffset.left + offset.width) - ) { - translate.x = this.width + this.marginOffset.x; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - } else if (this.axis.y) { - if ( - mustShiftBackward || - (index > this.index && - sortingOffset.top + - windowScrollDelta.top + - this.boundingClientRect.height >= - edgeOffset.top + offset.height) - ) { - translate.y = -(this.height + this.marginOffset.y); - this.newIndex = index; - } else if ( - mustShiftForward || - (index < this.index && - sortingOffset.top + windowScrollDelta.top <= - edgeOffset.top + offset.height) - ) { - translate.y = this.height + this.marginOffset.y; - - if (this.newIndex == null) { - this.newIndex = index; - } - } - } - - setTranslate3d(_node3, translate); - nodes[i].translate = translate; - } - - if (this.newIndex == null) { - this.newIndex = this.index; - } - - if (isKeySorting) { - this.newIndex = prevIndex; - } - - var oldIndex = isKeySorting ? this.prevIndex : prevIndex; - - if (onSortOver && this.newIndex !== oldIndex) { - onSortOver({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: oldIndex, - isKeySorting: isKeySorting, - nodes: nodes, - helper: this.helper, - }); - } - }, - }, - { - 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 SortableContainer() call', - ); - return this.refs.wrappedInstance; - }, - }, - { - key: 'getContainer', - value: function getContainer() { - var getContainer = this.props.getContainer; - - if (typeof getContainer !== 'function') { - return reactDom.findDOMNode(this); - } - - return getContainer( - config.withRef ? this.getWrappedInstance() : undefined, - ); - }, - }, - { - key: 'render', - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement( - WrappedComponent, - _extends_1( - { - ref: ref, - }, - omit(this.props, omittedProps), - ), - ); - }, - }, - { - key: 'helperContainer', - get: function get() { - var helperContainer = this.props.helperContainer; - - if (typeof helperContainer === 'function') { - return helperContainer(); - } - - return this.props.helperContainer || this.document.body; - }, - }, - { - key: 'containerScrollDelta', - get: function get() { - var useWindowAsScrollContainer = this.props - .useWindowAsScrollContainer; - - if (useWindowAsScrollContainer) { - return { - left: 0, - top: 0, - }; - } - - return { - left: this.scrollContainer.scrollLeft - this.initialScroll.left, - top: this.scrollContainer.scrollTop - this.initialScroll.top, - }; - }, - }, - { - key: 'windowScrollDelta', - get: function get() { - return { - left: - this.contentWindow.pageXOffset - - this.initialWindowScroll.left, - top: - this.contentWindow.pageYOffset - this.initialWindowScroll.top, - }; - }, - }, - ]); - - return WithSortableContainer; - })(React.Component)), - defineProperty( - _class, - 'displayName', - provideDisplayName('sortableList', WrappedComponent), - ), - defineProperty(_class, 'defaultProps', defaultProps), - defineProperty(_class, 'propTypes', propTypes), - defineProperty(_class, 'childContextTypes', { - manager: PropTypes.object.isRequired, - }), - _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) { - var _class, _temp; - - var config = - arguments.length > 1 && arguments[1] !== undefined - ? arguments[1] - : { - withRef: false, - }; - return ( - (_temp = _class = (function(_React$Component) { - inherits(WithSortableElement, _React$Component); - - function WithSortableElement() { - classCallCheck(this, WithSortableElement); - - return possibleConstructorReturn( - this, - getPrototypeOf(WithSortableElement).apply(this, arguments), - ); - } - - createClass(WithSortableElement, [ - { - key: 'componentDidMount', - value: function componentDidMount() { - this.register(); - }, - }, - { - key: 'componentDidUpdate', - value: function componentDidUpdate(prevProps) { - if (this.node) { - if (prevProps.index !== this.props.index) { - this.node.sortableInfo.index = this.props.index; - } - - if (prevProps.disabled !== this.props.disabled) { - this.node.sortableInfo.disabled = this.props.disabled; - } - } - - if (prevProps.collection !== this.props.collection) { - this.unregister(prevProps.collection); - this.register(); - } - }, - }, - { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - this.unregister(); - }, - }, - { - key: 'register', - value: function register() { - var _this$props = this.props, - collection = _this$props.collection, - disabled = _this$props.disabled, - index = _this$props.index; - var node = reactDom.findDOMNode(this); - node.sortableInfo = { - collection: collection, - disabled: disabled, - index: index, - manager: this.context.manager, - }; - this.node = node; - this.ref = { - node: node, - }; - this.context.manager.add(collection, this.ref); - }, - }, - { - key: 'unregister', - value: function unregister() { - var collection = - arguments.length > 0 && arguments[0] !== undefined - ? arguments[0] - : this.props.collection; - this.context.manager.remove(collection, this.ref); - }, - }, - { - 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 SortableElement() call', - ); - return this.refs.wrappedInstance; - }, - }, - { - key: 'render', - value: function render() { - var ref = config.withRef ? 'wrappedInstance' : null; - return React.createElement( - WrappedComponent, - _extends_1( - { - ref: ref, - }, - omit(this.props, omittedProps$1), - ), - ); - }, - }, - ]); - - return WithSortableElement; - })(React.Component)), - defineProperty( - _class, - 'displayName', - provideDisplayName('sortableElement', WrappedComponent), - ), - defineProperty(_class, 'contextTypes', { - manager: PropTypes.object.isRequired, - }), - defineProperty(_class, 'propTypes', propTypes$1), - defineProperty(_class, 'defaultProps', { - collection: 0, - }), - _temp - ); - } - - exports.SortableContainer = sortableContainer; - exports.sortableContainer = sortableContainer; - exports.SortableElement = sortableElement; - exports.sortableElement = sortableElement; - exports.SortableHandle = sortableHandle; - exports.sortableHandle = sortableHandle; - exports.arrayMove = arrayMove; - - Object.defineProperty(exports, '__esModule', {value: true}); -}); +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('react-dom')) : + typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', 'react-dom'], factory) : + (global = global || self, factory(global.SortableHOC = {}, global.React, global.PropTypes, global.ReactDOM)); +}(this, (function (exports, React, PropTypes, reactDom) { 'use strict'; + + PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes; + + function unwrapExports (x) { + return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x; + } + + function createCommonjsModule(fn, module) { + return module = { exports: {} }, fn(module, module.exports), module.exports; + } + + var _extends_1 = createCommonjsModule(function (module) { + function _extends() { + module.exports = _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + return _extends.apply(this, arguments); + } + + module.exports = _extends; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _extends = unwrapExports(_extends_1); + + var arrayWithHoles = createCommonjsModule(function (module) { + function _arrayWithHoles(arr) { + if (Array.isArray(arr)) return arr; + } + + module.exports = _arrayWithHoles; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(arrayWithHoles); + + var iterableToArrayLimit = createCommonjsModule(function (module) { + function _iterableToArrayLimit(arr, i) { + if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + + return _arr; + } + + module.exports = _iterableToArrayLimit; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(iterableToArrayLimit); + + var arrayLikeToArray = createCommonjsModule(function (module) { + function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } + + return arr2; + } + + module.exports = _arrayLikeToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(arrayLikeToArray); + + var unsupportedIterableToArray = createCommonjsModule(function (module) { + function _unsupportedIterableToArray(o, minLen) { + if (!o) return; + if (typeof o === "string") return arrayLikeToArray(o, minLen); + var n = Object.prototype.toString.call(o).slice(8, -1); + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return Array.from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen); + } + + module.exports = _unsupportedIterableToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(unsupportedIterableToArray); + + var nonIterableRest = createCommonjsModule(function (module) { + function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + module.exports = _nonIterableRest; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(nonIterableRest); + + var slicedToArray = createCommonjsModule(function (module) { + function _slicedToArray(arr, i) { + return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest(); + } + + module.exports = _slicedToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _slicedToArray = unwrapExports(slicedToArray); + + var classCallCheck = createCommonjsModule(function (module) { + function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } + } + + module.exports = _classCallCheck; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _classCallCheck = unwrapExports(classCallCheck); + + var createClass = createCommonjsModule(function (module) { + function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } + } + + function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; + } + + module.exports = _createClass; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _createClass = unwrapExports(createClass); + + var assertThisInitialized = createCommonjsModule(function (module) { + function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; + } + + module.exports = _assertThisInitialized; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _assertThisInitialized = unwrapExports(assertThisInitialized); + + var setPrototypeOf = createCommonjsModule(function (module) { + function _setPrototypeOf(o, p) { + module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + return _setPrototypeOf(o, p); + } + + module.exports = _setPrototypeOf; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(setPrototypeOf); + + var inherits = createCommonjsModule(function (module) { + function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = Object.create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + if (superClass) setPrototypeOf(subClass, superClass); + } + + module.exports = _inherits; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _inherits = unwrapExports(inherits); + + var _typeof_1 = createCommonjsModule(function (module) { + function _typeof(obj) { + "@babel/helpers - typeof"; + + if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { + module.exports = _typeof = function _typeof(obj) { + return typeof obj; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + } else { + module.exports = _typeof = function _typeof(obj) { + return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; + }; + + module.exports["default"] = module.exports, module.exports.__esModule = true; + } + + return _typeof(obj); + } + + module.exports = _typeof; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(_typeof_1); + + var possibleConstructorReturn = createCommonjsModule(function (module) { + var _typeof = _typeof_1["default"]; + + + + function _possibleConstructorReturn(self, call) { + if (call && (_typeof(call) === "object" || typeof call === "function")) { + return call; + } + + return assertThisInitialized(self); + } + + module.exports = _possibleConstructorReturn; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _possibleConstructorReturn = unwrapExports(possibleConstructorReturn); + + var getPrototypeOf = createCommonjsModule(function (module) { + function _getPrototypeOf(o) { + module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { + return o.__proto__ || Object.getPrototypeOf(o); + }; + module.exports["default"] = module.exports, module.exports.__esModule = true; + return _getPrototypeOf(o); + } + + module.exports = _getPrototypeOf; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _getPrototypeOf = unwrapExports(getPrototypeOf); + + var defineProperty = createCommonjsModule(function (module) { + function _defineProperty(obj, key, value) { + if (key in obj) { + Object.defineProperty(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } + + return obj; + } + + module.exports = _defineProperty; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _defineProperty = unwrapExports(defineProperty); + + /** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + var invariant = function(condition, format, a, b, c, d, e, f) { + { + if (format === undefined) { + throw new Error('invariant requires an error message argument'); + } + } + + if (!condition) { + var error; + if (format === undefined) { + error = new Error( + 'Minified exception occurred; use the non-minified dev environment ' + + 'for the full error message and additional helpful warnings.' + ); + } else { + var args = [a, b, c, d, e, f]; + var argIndex = 0; + error = new Error( + format.replace(/%s/g, function() { return args[argIndex++]; }) + ); + error.name = 'Invariant Violation'; + } + + error.framesToPop = 1; // we don't care about invariant's own frame + throw error; + } + }; + + var invariant_1 = invariant; + + var Manager = function () { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, "refs", {}); + } + + _createClass(Manager, [{ + key: "add", + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + } + }, { + key: "remove", + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + } + }, { + key: "isActive", + value: function isActive() { + return this.active; + } + }, { + key: "getActive", + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function (_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + } + }, { + key: "getIndex", + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + } + }, { + key: "getOrderedRefs", + value: function getOrderedRefs() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.active.collection; + return this.refs[collection].sort(sortByIndex); + } + }]); + + return Manager; + }(); + + function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; + } + + var arrayWithoutHoles = createCommonjsModule(function (module) { + function _arrayWithoutHoles(arr) { + if (Array.isArray(arr)) return arrayLikeToArray(arr); + } + + module.exports = _arrayWithoutHoles; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(arrayWithoutHoles); + + var iterableToArray = createCommonjsModule(function (module) { + function _iterableToArray(iter) { + if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); + } + + module.exports = _iterableToArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(iterableToArray); + + var nonIterableSpread = createCommonjsModule(function (module) { + function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); + } + + module.exports = _nonIterableSpread; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + unwrapExports(nonIterableSpread); + + var toConsumableArray = createCommonjsModule(function (module) { + function _toConsumableArray(arr) { + return arrayWithoutHoles(arr) || iterableToArray(arr) || unsupportedIterableToArray(arr) || nonIterableSpread(); + } + + module.exports = _toConsumableArray; + module.exports["default"] = module.exports, module.exports.__esModule = true; + }); + + var _toConsumableArray = unwrapExports(toConsumableArray); + + 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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; + } + function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function (acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); + } + var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'] + }; + var vendorPrefix = function () { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || ['-moz-hidden-iframe']; + var pre = (Array.prototype.slice.call(styles).join('').match(/-(moz|webkit|ms)-/) || styles.OLink === '' && ['', 'o'])[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } + }(); + 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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; + } + function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); + } + + function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; + } + + function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop) + }; + } + function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName ? "".concat(prefix, "(").concat(componentName, ")") : prefix; + } + function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left + }; + } + function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY + }; + } else { + return { + x: event.pageX, + y: event.pageY + }; + } + } + function isTouchEvent(event) { + return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length; + } + function getEdgeOffset(node, parent) { + var offset = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : { + left: 0, + top: 0 + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.offsetLeft, + top: offset.top + node.offsetTop + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); + } + function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } + } + function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant_1(match !== null, 'lockOffset value should be a number or a string of a ' + 'number followed by "px" or "%". Given %s', lockOffset); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant_1(isFinite(offsetX) && isFinite(offsetY), 'lockOffset value should be a finite. Given %s', lockOffset); + + if (unit === '%') { + offsetX = offsetX * width / 100; + offsetY = offsetY * height / 100; + } + + return { + x: offsetX, + y: offsetY + }; + } + 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) { + var container = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } + } + function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap) + }; + } + + return { + x: 0, + y: 0 + }; + } + var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40 + }; + var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT' + }; + function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function (field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = "__sortableClone__".concat(field.name); + } + + if (field.tagName === NodeType.Canvas && fields[i].width > 0 && fields[i].height > 0) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; + } + + function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + + function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + 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); + + var _super = _createSuper(WithSortableHandle); + + function WithSortableHandle() { + _classCallCheck(this, WithSortableHandle); + + return _super.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({ + 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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [NodeType.Input, NodeType.Textarea, NodeType.Select, NodeType.Option, NodeType.Button]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if (closest(event.target, function (el) { + return el.contentEditable === 'true'; + })) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number) + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool + }; + var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT] + }; + var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; } + + function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + + function _finallyRethrows(body, finalizer) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, result); + } + + function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + + function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + var _super = _createSuper$1(WithSortableContainer); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "state", {}); + + _defineProperty(_assertThisInitialized(_this), "handleStart", function (event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function (el) { + return el.sortableInfo != null; + }); + + if (node && node.sortableInfo && _this.nodeIsChild(node) && !_this.state.sorting) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index + }; + + if (!isTouchEvent(event) && event.target.tagName === NodeType.Anchor) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function () { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "nodeIsChild", function (node) { + return node.sortableInfo.manager === _this.manager; + }); + + _defineProperty(_assertThisInitialized(_this), "handleMove", function (event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if (!_this.state.sorting && _this.touched && !_this._awaitingUpdateBeforeSortStart) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if (!distance && (!pressThreshold || combinedDelta >= pressThreshold)) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if (distance && combinedDelta >= distance && _this.manager.isActive()) { + _this.handlePress(event); + } + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleEnd", function () { + _this.touched = false; + + _this.cancel(); + }); + + _defineProperty(_assertThisInitialized(_this), "cancel", function () { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }); + + _defineProperty(_assertThisInitialized(_this), "handlePress", function (event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = function () { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: _this.margin.left + _this.margin.right + _this.gridGap.x, + y: Math.max(_this.margin.top, _this.margin.bottom, _this.gridGap.y) + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0 + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition(_objectSpread(_objectSpread({}, event), {}, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top + })); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset + }; + _this.helper = _this.helperContainer.appendChild(cloneNode(_node)); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0 + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight + } : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = containerRight - (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = containerBottom - (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.left) - _this.boundingClientRect.left - _this.width / 2; + _this.maxTranslate.x = (_useWindowAsScrollContainer ? _this.contentWindow.innerWidth : containerBoundingRect.left + containerBoundingRect.width) - _this.boundingClientRect.left - _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = (_useWindowAsScrollContainer ? 0 : containerBoundingRect.top) - _this.boundingClientRect.top - _this.height / 2; + _this.maxTranslate.y = (_useWindowAsScrollContainer ? _this.contentWindow.innerHeight : containerBoundingRect.top + containerBoundingRect.height) - _this.boundingClientRect.top - _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function (className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches ? _node : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.addEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortMove, false); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.addEventListener(eventName, _this.handleSortEnd, false); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index + }); + + if (_onSortStart) { + _onSortStart({ + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper + }, event); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = function () { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows(function () { + var index = _node.sortableInfo.index; + return Promise.resolve(updateBeforeSortStart({ + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting + }, event)).then(function () {}); + }, function (_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }); + + if (_temp9 && _temp9.then) return _temp9.then(function () {}); + } + }(); + + return _temp8 && _temp8.then ? _temp8.then(_temp7) : _temp7(_temp8); + } + }(); + + return Promise.resolve(_temp6 && _temp6.then ? _temp6.then(function () {}) : void 0); + } catch (e) { + return Promise.reject(e); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortMove", function (event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleSortEnd", function (event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener('wheel', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('mousedown', _this.handleKeyEnd, true); + + _this.listenerNode.removeEventListener('keydown', _this.handleKeyDown); + } else { + events.move.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortMove); + }); + events.end.forEach(function (eventName) { + return _this.listenerNode.removeEventListener(eventName, _this.handleSortEnd); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '' + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null + }); + + if (typeof onSortEnd === 'function') { + onSortEnd({ + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes + }, event); + } + + _this.touched = false; + }); + + _defineProperty(_assertThisInitialized(_this), "autoscroll", function () { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min(_this.maxTranslate.x, Math.max(_this.minTranslate.x, _this.translate.x)); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min(_this.maxTranslate.y, Math.max(_this.minTranslate.y, _this.translate.y)); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onAutoScroll", function (offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread(_objectSpread({}, defaultKeyCodes), customKeyCodes); + + if (_this.manager.active && !_this.manager.isKeySorting || !_this.manager.active && (!keyCodes.lift.includes(keyCode) || shouldCancelStart(event) || !_this.isValidSortingTarget(event))) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if (keyCodes.drop.includes(keyCode) && _this.manager.active) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }); + + _defineProperty(_assertThisInitialized(_this), "keyLift", function (event) { + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection + }; + + _this.handlePress(event); + }); + + _defineProperty(_assertThisInitialized(_this), "keyMove", function (shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex(_this.newIndex, _this.prevIndex, _this.index); + var target = nodes.find(function (_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = target.boundingClientRect || getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0 + }; + var targetPosition = { + top: targetBoundingClientRect.top + targetTranslate.y - scrollDelta.top, + left: targetBoundingClientRect.left + targetTranslate.x - scrollDelta.left + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: shouldAdjustForSize && _this.axis.x ? targetNode.offsetWidth - _this.width : 0, + y: shouldAdjustForSize && _this.axis.y ? targetNode.offsetHeight - _this.height : 0 + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0 + }); + }); + + _defineProperty(_assertThisInitialized(_this), "keyDrop", function (event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEnd", function (event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }); + + _defineProperty(_assertThisInitialized(_this), "isValidSortingTarget", function (event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function (el) { + return el.sortableInfo != null; + }); + return node && node.sortableInfo && !node.sortableInfo.disabled && (useDragHandle ? isSortableHandle(target) : target.sortableInfo); + }); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart + }; + return _this; + } + + _createClass(WithSortableContainer, [{ + key: "getChildContext", + value: function getChildContext() { + return { + manager: this.manager + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function (containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = _this2.props.contentWindow || _this2.document.defaultView || window; + _this2.contentWindow = typeof contentWindow === 'function' ? contentWindow() : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer ? _this2.document.scrollingElement || _this2.document.documentElement : getScrollingParent(_this2.container, _this2.props.scrollContainer) || _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); + }); + }); + + _this2.container.addEventListener('keydown', _this2.handleKeyDown); + }); + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function (key) { + return events[key].forEach(function (eventName) { + return _this3.container.removeEventListener(eventName, _this3.events[key]); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + } + }, { + key: "updateHelperPosition", + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = _this$props6$keyboard === void 0 ? transitionDuration : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y + }; + translate.x = limit(this.minTranslate.x + minOffset.x, this.maxTranslate.x - maxOffset.x, translate.x); + translate.y = limit(this.minTranslate.y + minOffset.y, this.maxTranslate.y - maxOffset.y, translate.y); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if (isKeySorting && keyboardSortingTransitionDuration && !ignoreTransition) { + setTransitionDuration(this.helper, keyboardSortingTransitionDuration); + } + + setTranslate3d(this.helper, translate); + } + }, { + key: "animateNodes", + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: this.offsetEdge.left + this.translate.x + containerScrollDelta.left, + top: this.offsetEdge.top + this.translate.y + containerScrollDelta.top + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + var width = _node3.offsetWidth; + var height = _node3.offsetHeight; + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2 + }; + var mustShiftBackward = isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0 + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[i].boundingClientRect = getScrollAdjustedBoundingClientRect(_node3, containerScrollDelta); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset(nextNode.node, this.container); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect(nextNode.node, containerScrollDelta); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0 + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if (mustShiftForward || 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; + + if (edgeOffset.left + translate.x > this.containerBoundingRect.width - offset.width) { + if (nextNode) { + translate.x = nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if (mustShiftBackward || 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); + + if (edgeOffset.left + translate.x < this.containerBoundingRect.left + offset.width) { + if (prevNode) { + translate.x = prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if (mustShiftBackward || index > this.index && sortingOffset.left + windowScrollDelta.left + offset.width >= edgeOffset.left) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.left + windowScrollDelta.left <= edgeOffset.left + offset.width) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if (mustShiftBackward || index > this.index && sortingOffset.top + windowScrollDelta.top + offset.height >= edgeOffset.top) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if (mustShiftForward || index < this.index && sortingOffset.top + windowScrollDelta.top <= edgeOffset.top + offset.height) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper + }); + } + } + }, { + 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 SortableContainer() call'); + return this.refs.wrappedInstance; + } + }, { + key: "getContainer", + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer(config.withRef ? this.getWrappedInstance() : undefined); + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps))); + } + }, { + key: "helperContainer", + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + } + }, { + key: "containerScrollDelta", + get: function get() { + var useWindowAsScrollContainer = this.props.useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0 + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top + }; + } + }, { + key: "windowScrollDelta", + get: function get() { + return { + left: this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: this.contentWindow.pageYOffset - this.initialWindowScroll.top + }; + } + }]); + + return WithSortableContainer; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableList', WrappedComponent)), _defineProperty(_class, "defaultProps", defaultProps), _defineProperty(_class, "propTypes", propTypes), _defineProperty(_class, "childContextTypes", { + manager: PropTypes.object.isRequired + }), _temp; + } + + function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + + function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + 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) { + var _class, _temp; + + var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { + withRef: false + }; + return _temp = _class = function (_React$Component) { + _inherits(WithSortableElement, _React$Component); + + var _super = _createSuper$2(WithSortableElement); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _super.apply(this, arguments); + } + + _createClass(WithSortableElement, [{ + key: "componentDidMount", + value: function componentDidMount() { + this.register(); + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + } + }, { + key: "componentWillUnmount", + value: function componentWillUnmount() { + this.unregister(); + } + }, { + key: "register", + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager + }; + this.node = node; + this.ref = { + node: node + }; + this.context.manager.add(collection, this.ref); + } + }, { + key: "unregister", + value: function unregister() { + var collection = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.collection; + this.context.manager.remove(collection, this.ref); + } + }, { + 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 SortableElement() call'); + return this.refs.wrappedInstance; + } + }, { + key: "render", + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement(WrappedComponent, _extends({ + ref: ref + }, omit(this.props, omittedProps$1))); + } + }]); + + return WithSortableElement; + }(React.Component), _defineProperty(_class, "displayName", provideDisplayName('sortableElement', WrappedComponent)), _defineProperty(_class, "contextTypes", { + manager: PropTypes.object.isRequired + }), _defineProperty(_class, "propTypes", propTypes$1), _defineProperty(_class, "defaultProps", { + collection: 0 + }), _temp; + } + + exports.SortableContainer = sortableContainer; + exports.SortableElement = sortableElement; + exports.SortableHandle = sortableHandle; + exports.arrayMove = arrayMove; + exports.sortableContainer = sortableContainer; + exports.sortableElement = sortableElement; + exports.sortableHandle = sortableHandle; + + Object.defineProperty(exports, '__esModule', { value: true }); + +}))); diff --git a/dist/react-sortable-hoc.umd.min.js b/dist/react-sortable-hoc.umd.min.js index de8f438c9..04d1c2006 100644 --- a/dist/react-sortable-hoc.umd.min.js +++ b/dist/react-sortable-hoc.umd.min.js @@ -1,1580 +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 l = 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, l = e[Symbol.iterator](); - !(o = (a = l.next()).done) && (n.push(a.value), !t || n.length !== t); - o = !0 - ); - } catch (e) { - (r = !0), (i = e); - } finally { - try { - o || null == l.return || l.return(); - } finally { - if (r) throw i; - } - } - return n; - }; - var s = function() { - throw new TypeError('Invalid attempt to destructure non-iterable instance'); - }; - var b = function(e, t) { - return n(e) || o(e, t) || s(); - }; - var c = function(e, t, n) { - return ( - t in e - ? Object.defineProperty(e, t, { - value: n, - enumerable: !0, - configurable: !0, - writable: !0, - }) - : (e[t] = n), - e - ); - }; - var D = function(t) { - for (var e = 1; e < arguments.length; e++) { - var n = null != arguments[e] ? arguments[e] : {}, - o = Object.keys(n); - 'function' == typeof Object.getOwnPropertySymbols && - (o = o.concat( - Object.getOwnPropertySymbols(n).filter(function(e) { - return Object.getOwnPropertyDescriptor(n, e).enumerable; - }), - )), - o.forEach(function(e) { - c(t, e, n[e]); - }); - } - return t; - }; - var u = 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 f = function(e, t, n) { - return t && d(e.prototype, t), n && d(e, n), e; - }, - h = 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 p = function(e) { - if (void 0 === e) - throw new ReferenceError( - "this hasn't been initialised - super() hasn't been called", - ); - return e; - }; - var g = function(e, t) { - return !t || ('object' !== h(t) && 'function' != typeof t) ? p(e) : t; - }, - y = 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 m = 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); - }, - w = function(e, t, n, o, r, i, a, l) { - if (!e) { - var s; - if (void 0 === t) - s = 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, l], - u = 0; - (s = new Error( - t.replace(/%s/g, function() { - return c[u++]; - }), - )).name = 'Invariant Violation'; - } - throw ((s.framesToPop = 1), s); - } - }, - x = (function() { - function e() { - u(this, e), c(this, 'refs', {}); - } - return ( - f(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(S); - }, - }, - ]), - e - ); - })(); - function S(e, t) { - return e.node.sortableInfo.index - t.node.sortableInfo.index; - } - var O = 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 C = function(e) { - if ( - Symbol.iterator in Object(e) || - '[object Arguments]' === Object.prototype.toString.call(e) - ) - return Array.from(e); - }; - var T = function() { - throw new TypeError('Invalid attempt to spread non-iterable instance'); - }; - var N = function(e) { - return O(e) || C(e) || T(); - }; - function k(n, o) { - return Object.keys(n).reduce(function(e, t) { - return -1 === o.indexOf(t) && (e[t] = n[t]), e; - }, {}); - } - var A = { - end: ['touchend', 'touchcancel', 'mouseup'], - move: ['touchmove', 'mousemove'], - start: ['touchstart', 'mousedown'], - }, - I = (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 M(t, n) { - Object.keys(n).forEach(function(e) { - t.style[e] = n[e]; - }); - } - function E(e, t) { - e.style[''.concat(I, 'Transform')] = - null == t ? '' : 'translate3d('.concat(t.x, 'px,').concat(t.y, 'px,0)'); - } - function W(e, t) { - e.style[''.concat(I, 'TransitionDuration')] = - null == t ? '' : ''.concat(t, 'ms'); - } - function P(e, t) { - for (; e; ) { - if (t(e)) return e; - e = e.parentNode; - } - return null; - } - function R(e, t, n) { - return Math.max(e, Math.min(n, t)); - } - function j(e) { - return 'px' === e.substr(-2) ? parseFloat(e) : 0; - } - function L(e, t) { - var n = t.displayName || t.name; - return n ? ''.concat(e, '(').concat(n, ')') : e; - } - function H(e, t) { - var n = e.getBoundingClientRect(); - return {top: n.top + t.top, left: n.left + t.left}; - } - function K(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 B(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.getBoundingClientRect().left, - top: n.top + e.getBoundingClientRect().top, - }; - return e.parentNode === t ? o : B(e.parentNode, t, o); - } - } - function G(e) { - var t = e.lockOffset, - n = e.width, - o = e.height, - r = t, - i = t, - a = 'px'; - if ('string' == typeof t) { - var l = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(t); - w( - null !== l, - '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 = l[1]); - } - return ( - w( - 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 _(e) { - var t, - n, - o, - r = 1 < arguments.length && void 0 !== arguments[1] && arguments[1]; - return r - ? document.querySelector(r) - : e instanceof HTMLElement - ? ((t = e), - (n = window.getComputedStyle(t)), - (o = /(auto|scroll)/), - ['overflow', 'overflowX', 'overflowY'].find(function(e) { - return o.test(n[e]); - }) - ? e - : _(e.parentNode)) - : null; - } - var X = 27, - q = 32, - U = 37, - Y = 38, - F = 39, - V = 40, - z = { - Anchor: 'A', - Button: 'BUTTON', - Canvas: 'CANVAS', - Input: 'INPUT', - Option: 'OPTION', - Textarea: 'TEXTAREA', - Select: 'SELECT', - }; - function $(n) { - var e, - t, - o = - 1 < arguments.length && void 0 !== arguments[1] - ? arguments[1] - : {withRef: !1}; - return ( - (t = e = (function(e) { - function t() { - return u(this, t), g(this, y(t).apply(this, arguments)); - } - return ( - m(t, e), - f(t, [ - { - key: 'componentDidMount', - value: function() { - a.findDOMNode(this).sortableHandle = !0; - }, - }, - { - key: 'getWrappedInstance', - value: function() { - return ( - w( - 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, l({ref: e}, this.props)); - }, - }, - ]), - t - ); - })(r.Component)), - c(e, 'displayName', L('sortableHandle', n)), - t - ); - } - function J(e) { - return null != e.sortableHandle; - } - var Q = (function() { - function n(e, t) { - u(this, n), (this.container = e), (this.onScrollCallback = t); - } - return ( - f(n, [ - { - key: 'clear', - value: function() { - null != this.interval && - (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, - l = {x: 0, y: 0}, - s = {x: 1, y: 1}, - c = 10, - u = 10, - d = this.container, - f = d.scrollTop, - h = d.scrollLeft, - p = d.scrollHeight, - g = d.scrollWidth, - y = 0 === f, - v = p - f - d.clientHeight == 0, - m = 0 === h, - x = g - h - d.clientWidth == 0; - n.y >= r.y - a / 2 && !v - ? ((l.y = 1), (s.y = u * Math.abs((r.y - a / 2 - n.y) / a))) - : n.x >= r.x - i / 2 && !x - ? ((l.x = 1), (s.x = c * Math.abs((r.x - i / 2 - n.x) / i))) - : n.y <= o.y + a / 2 && !y - ? ((l.y = -1), (s.y = u * Math.abs((n.y - a / 2 - o.y) / a))) - : n.x <= o.x + i / 2 && - !m && - ((l.x = -1), (s.x = c * Math.abs((n.x - i / 2 - o.x) / i))), - this.interval && (this.clear(), (this.isAutoScrolling = !1)), - (0 === l.x && 0 === l.y) || - (this.interval = setInterval(function() { - t.isAutoScrolling = !0; - var e = {left: s.x * l.x, top: s.y * l.y}; - (t.container.scrollTop += e.top), - (t.container.scrollLeft += e.left), - t.onScrollCallback(e); - }, 5)); - }, - }, - ]), - n - ); - })(); - var Z = { - 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, - keyboardSortingTransitionDuration: i.number, - 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, - keyCodes: i.shape({ - lift: i.arrayOf(i.number), - drop: i.arrayOf(i.number), - cancel: i.arrayOf(i.number), - up: i.arrayOf(i.number), - down: i.arrayOf(i.number), - }), - shouldCancelStart: i.func, - transitionDuration: i.number, - updateBeforeSortStart: i.func, - useDragHandle: i.bool, - useWindowAsScrollContainer: i.bool, - }, - ee = {lift: [q], drop: [q], cancel: [X], up: [Y, U], down: [V, F]}, - te = { - 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, - keyCodes: ee, - shouldCancelStart: function(e) { - return ( - -1 !== - [z.Input, z.Textarea, z.Select, z.Option, z.Button].indexOf( - e.target.tagName, - ) || - !!P(e.target, function(e) { - return 'true' === e.contentEditable; - }) - ); - }, - transitionDuration: 300, - useWindowAsScrollContainer: !1, - }, - ne = Object.keys(Z); - function oe(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 R, t; - return ( - u(this, n), - (R = g(this, y(n).call(this, e))), - c(p(p(R)), 'state', {}), - c(p(p(R)), 'handleStart', function(e) { - var t = R.props, - n = t.distance, - o = t.shouldCancelStart; - if (2 !== e.button && !o(e)) { - (R.touched = !0), (R.position = K(e)); - var r, - i = P(e.target, function(e) { - return null != e.sortableInfo; - }); - if ( - i && - i.sortableInfo && - R.nodeIsChild(i) && - !R.state.sorting - ) { - var a = R.props.useDragHandle, - l = i.sortableInfo, - s = l.index, - c = l.collection; - if (l.disabled) return; - if (a && !P(e.target, J)) return; - (R.manager.active = {collection: c, index: s}), - ((r = e).touches && r.touches.length) || - (r.changedTouches && r.changedTouches.length) || - e.target.tagName !== z.Anchor || - e.preventDefault(), - n || - (0 === R.props.pressDelay - ? R.handlePress(e) - : (R.pressTimer = setTimeout(function() { - return R.handlePress(e); - }, R.props.pressDelay))); - } - } - }), - c(p(p(R)), 'nodeIsChild', function(e) { - return e.sortableInfo.manager === R.manager; - }), - c(p(p(R)), 'handleMove', function(e) { - var t = R.props, - n = t.distance, - o = t.pressThreshold; - if ( - !R.state.sorting && - R.touched && - !R._awaitingUpdateBeforeSortStart - ) { - var r = K(e), - i = {x: R.position.x - r.x, y: R.position.y - r.y}, - a = Math.abs(i.x) + Math.abs(i.y); - (R.delta = i), - n || (o && !(o <= a)) - ? n && n <= a && R.manager.isActive() && R.handlePress(e) - : (clearTimeout(R.cancelTimer), - (R.cancelTimer = setTimeout(R.cancel, 0))); - } - }), - c(p(p(R)), 'handleEnd', function() { - (R.touched = !1), R.cancel(); - }), - c(p(p(R)), 'cancel', function() { - var e = R.props.distance; - R.state.sorting || - (e || clearTimeout(R.pressTimer), (R.manager.active = null)); - }), - c(p(p(R)), 'handlePress', function(E) { - try { - var r = R.manager.getActive(), - e = (function() { - if (r) { - var e = function() { - var e, - t, - n, - o, - r, - i, - a, - l, - s = T.sortableInfo.index, - c = - ((e = T), - { - bottom: j( - (t = window.getComputedStyle(e)).marginBottom, - ), - left: j(t.marginLeft), - right: j(t.marginRight), - top: j(t.marginTop), - }), - u = - ((n = R.container), - 'grid' === - (o = window.getComputedStyle(n)).display - ? {x: j(o.gridColumnGap), y: j(o.gridRowGap)} - : {x: 0, y: 0}), - d = R.scrollContainer.getBoundingClientRect(), - f = b({index: s, node: T, collection: k}); - if ( - ((R.node = T), - (R.margin = c), - (R.gridGap = u), - (R.width = f.width), - (R.height = f.height), - (R.marginOffset = { - x: R.margin.left + R.margin.right + R.gridGap.x, - y: Math.max( - R.margin.top, - R.margin.bottom, - R.gridGap.y, - ), - }), - (R.boundingClientRect = T.getBoundingClientRect()), - (R.containerBoundingRect = d), - (R.index = s), - (R.newIndex = s), - (R.axis = { - x: 0 <= x.indexOf('x'), - y: 0 <= x.indexOf('y'), - }), - (R.offsetEdge = B(T, R.container)), - (R.initialOffset = K( - I - ? D({}, E, { - pageX: R.boundingClientRect.left, - pageY: R.boundingClientRect.top, - }) - : E, - )), - (R.initialScroll = { - left: R.scrollContainer.scrollLeft, - top: R.scrollContainer.scrollTop, - }), - (R.initialWindowScroll = { - left: window.pageXOffset, - top: window.pageYOffset, - }), - (R.helper = R.helperContainer.appendChild( - ((i = - 'input, textarea, select, canvas, [contenteditable]'), - (a = (r = T).querySelectorAll(i)), - (l = r.cloneNode(!0)), - N(l.querySelectorAll(i)).forEach(function(e, t) { - 'file' !== e.type && (e.value = a[t].value), - 'radio' === e.type && - e.name && - (e.name = '__sortableClone__'.concat( - e.name, - )), - e.tagName === z.Canvas && - 0 < a[t].width && - 0 < a[t].height && - e.getContext('2d').drawImage(a[t], 0, 0); - }), - l), - )), - M(R.helper, { - boxSizing: 'border-box', - height: ''.concat(R.height, 'px'), - left: ''.concat( - R.boundingClientRect.left - c.left, - 'px', - ), - pointerEvents: 'none', - position: 'fixed', - top: ''.concat( - R.boundingClientRect.top - c.top, - 'px', - ), - width: ''.concat(R.width, 'px'), - }), - I && R.helper.focus(), - S && M((R.sortableGhost = T), {opacity: 0}), - (R.minTranslate = {}), - (R.maxTranslate = {}), - I) - ) { - var h = C - ? { - top: 0, - left: 0, - width: R.contentWindow.innerWidth, - height: R.contentWindow.innerHeight, - } - : R.containerBoundingRect, - p = h.top, - g = h.left, - y = h.width, - v = p + h.height, - m = g + y; - R.axis.x && - ((R.minTranslate.x = - g - R.boundingClientRect.left), - (R.maxTranslate.x = - m - (R.boundingClientRect.left + R.width))), - R.axis.y && - ((R.minTranslate.y = - p - R.boundingClientRect.top), - (R.maxTranslate.y = - v - (R.boundingClientRect.top + R.height))); - } else - R.axis.x && - ((R.minTranslate.x = - (C ? 0 : d.left) - - R.boundingClientRect.left - - R.width / 2), - (R.maxTranslate.x = - (C - ? R.contentWindow.innerWidth - : d.left + d.width) - - R.boundingClientRect.left - - R.width / 2)), - R.axis.y && - ((R.minTranslate.y = - (C ? 0 : d.top) - - R.boundingClientRect.top - - R.height / 2), - (R.maxTranslate.y = - (C - ? R.contentWindow.innerHeight - : d.top + d.height) - - R.boundingClientRect.top - - R.height / 2)); - w && - w.split(' ').forEach(function(e) { - return R.helper.classList.add(e); - }), - (R.listenerNode = E.touches ? T : R.contentWindow), - I - ? (R.listenerNode.addEventListener( - 'wheel', - R.handleKeyEnd, - !0, - ), - R.listenerNode.addEventListener( - 'mousedown', - R.handleKeyEnd, - !0, - ), - R.listenerNode.addEventListener( - 'keydown', - R.handleKeyDown, - )) - : (A.move.forEach(function(e) { - return R.listenerNode.addEventListener( - e, - R.handleSortMove, - !1, - ); - }), - A.end.forEach(function(e) { - return R.listenerNode.addEventListener( - e, - R.handleSortEnd, - !1, - ); - })), - R.setState({sorting: !0, sortingIndex: s}), - O && - O( - { - node: T, - index: s, - collection: k, - isKeySorting: I, - nodes: R.manager.getOrderedRefs(), - helper: R.helper, - }, - E, - ), - I && R.keyMove(0); - }, - t = R.props, - x = t.axis, - b = t.getHelperDimensions, - w = t.helperClass, - S = t.hideSortableGhost, - n = t.updateBeforeSortStart, - O = t.onSortStart, - C = t.useWindowAsScrollContainer, - T = r.node, - k = r.collection, - I = R.manager.isKeySorting, - o = (function() { - if ('function' == typeof n) { - R._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 = T.sortableInfo.index; - return Promise.resolve( - n( - { - collection: k, - index: e, - node: T, - isKeySorting: I, - }, - E, - ), - ).then(function() {}); - }, - function(e, t) { - if ( - ((R._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); - } - }), - c(p(p(R)), 'handleSortMove', function(e) { - var t = R.props.onSortMove; - 'function' == typeof e.preventDefault && e.preventDefault(), - R.updateHelperPosition(e), - R.animateNodes(), - R.autoscroll(), - t && t(e); - }), - c(p(p(R)), 'handleSortEnd', function(e) { - var t = R.props, - n = t.hideSortableGhost, - o = t.onSortEnd, - r = R.manager, - i = r.active.collection, - a = r.isKeySorting, - l = R.manager.getOrderedRefs(); - R.listenerNode && - (a - ? (R.listenerNode.removeEventListener( - 'wheel', - R.handleKeyEnd, - !0, - ), - R.listenerNode.removeEventListener( - 'mousedown', - R.handleKeyEnd, - !0, - ), - R.listenerNode.removeEventListener( - 'keydown', - R.handleKeyDown, - )) - : (A.move.forEach(function(e) { - return R.listenerNode.removeEventListener( - e, - R.handleSortMove, - ); - }), - A.end.forEach(function(e) { - return R.listenerNode.removeEventListener( - e, - R.handleSortEnd, - ); - }))), - R.helper.parentNode.removeChild(R.helper), - n && R.sortableGhost && M(R.sortableGhost, {opacity: ''}); - for (var s = 0, c = l.length; s < c; s++) { - var u = l[s], - d = u.node; - (u.edgeOffset = null), - E(d, (u.boundingClientRect = null)), - W(d, null), - (u.translate = null); - } - R.autoScroller.clear(), - (R.manager.active = null), - (R.manager.isKeySorting = !1), - R.setState({sorting: !1, sortingIndex: null}), - 'function' == typeof o && - o( - { - collection: i, - newIndex: R.newIndex, - oldIndex: R.index, - isKeySorting: a, - nodes: l, - }, - e, - ), - (R.touched = !1); - }), - c(p(p(R)), 'autoscroll', function() { - var e = R.props.disableAutoscroll, - t = R.manager.isKeySorting; - if (e) R.autoScroller.clear(); - else { - if (t) { - var n = D({}, R.translate), - o = 0, - r = 0; - return ( - R.axis.x && - ((n.x = Math.min( - R.maxTranslate.x, - Math.max(R.minTranslate.x, R.translate.x), - )), - (o = R.translate.x - n.x)), - R.axis.y && - ((n.y = Math.min( - R.maxTranslate.y, - Math.max(R.minTranslate.y, R.translate.y), - )), - (r = R.translate.y - n.y)), - (R.translate = n), - E(R.helper, R.translate), - (R.scrollContainer.scrollLeft += o), - void (R.scrollContainer.scrollTop += r) - ); - } - R.autoScroller.update({ - height: R.height, - maxTranslate: R.maxTranslate, - minTranslate: R.minTranslate, - translate: R.translate, - width: R.width, - }); - } - }), - c(p(p(R)), 'onAutoScroll', function(e) { - (R.translate.x += e.left), - (R.translate.y += e.top), - R.animateNodes(); - }), - c(p(p(R)), 'handleKeyDown', function(e) { - var t = e.keyCode, - n = R.props, - o = n.shouldCancelStart, - r = n.keyCodes, - i = D({}, ee, void 0 === r ? {} : r); - (R.manager.active && !R.manager.isKeySorting) || - !( - R.manager.active || - (i.lift.includes(t) && !o(e) && R.isValidSortingTarget(e)) - ) || - (e.stopPropagation(), - e.preventDefault(), - i.lift.includes(t) && !R.manager.active - ? R.keyLift(e) - : i.drop.includes(t) && R.manager.active - ? R.keyDrop(e) - : i.cancel.includes(t) - ? ((R.newIndex = R.manager.active.index), R.keyDrop(e)) - : i.up.includes(t) - ? R.keyMove(-1) - : i.down.includes(t) && R.keyMove(1)); - }), - c(p(p(R)), 'keyLift', function(e) { - var t = e.target, - n = P(t, function(e) { - return null != e.sortableInfo; - }).sortableInfo, - o = n.index, - r = n.collection; - (R.initialFocusedNode = t), - (R.manager.isKeySorting = !0), - (R.manager.active = {index: o, collection: r}), - R.handlePress(e); - }), - c(p(p(R)), 'keyMove', function(e) { - var t = R.manager.getOrderedRefs(), - n = t[t.length - 1].node.sortableInfo.index, - o = R.newIndex + e, - r = R.newIndex; - if (!(o < 0 || n < o)) { - (R.prevIndex = r), (R.newIndex = o); - var i, - a, - l, - s = - ((i = R.newIndex), - (a = R.prevIndex), - (l = R.index), - i < l && a < i ? i - 1 : l < i && i < a ? i + 1 : i), - c = t.find(function(e) { - return e.node.sortableInfo.index === s; - }), - u = c.node, - d = R.containerScrollDelta, - f = c.boundingClientRect || H(u, d), - h = c.translate || {x: 0, y: 0}, - p = f.top + h.y - d.top, - g = f.left + h.x - d.left, - y = r < o, - v = y && R.axis.x ? u.offsetWidth - R.width : 0, - m = y && R.axis.y ? u.offsetHeight - R.height : 0; - R.handleSortMove({ - pageX: g + v, - pageY: p + m, - ignoreTransition: 0 === e, - }); - } - }), - c(p(p(R)), 'keyDrop', function(e) { - R.handleSortEnd(e), - R.initialFocusedNode && R.initialFocusedNode.focus(); - }), - c(p(p(R)), 'handleKeyEnd', function(e) { - R.manager.active && R.keyDrop(e); - }), - c(p(p(R)), 'isValidSortingTarget', function(e) { - var t = R.props.useDragHandle, - n = e.target, - o = P(n, function(e) { - return null != e.sortableInfo; - }); - return ( - o && - o.sortableInfo && - !o.sortableInfo.disabled && - (t ? J(n) : n.sortableInfo) - ); - }), - w( - !((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.', - ), - (R.manager = new x()), - (R.events = { - end: R.handleEnd, - move: R.handleMove, - start: R.handleStart, - }), - R - ); - } - return ( - m(n, e), - f(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 - : _(n.container, n.props.scrollContainer) || n.container), - (n.autoScroller = new Q(n.scrollContainer, n.onAutoScroll)), - Object.keys(n.events).forEach(function(t) { - return A[t].forEach(function(e) { - return n.container.addEventListener(e, n.events[t], !1); - }); - }), - n.container.addEventListener('keydown', n.handleKeyDown); - }); - }, - }, - { - key: 'componentWillUnmount', - value: function() { - var n = this; - this.helper && - this.helper.parentNode && - this.helper.parentNode.removeChild(this.helper), - this.container && - (Object.keys(this.events).forEach(function(t) { - return A[t].forEach(function(e) { - return n.container.removeEventListener(e, n.events[t]); - }); - }), - this.container.removeEventListener( - 'keydown', - this.handleKeyDown, - )); - }, - }, - { - key: 'updateHelperPosition', - value: function(e) { - var t = this.props, - n = t.lockAxis, - o = t.lockOffset, - r = t.lockToContainerEdges, - i = t.transitionDuration, - a = t.keyboardSortingTransitionDuration, - l = void 0 === a ? i : a, - s = this.manager.isKeySorting, - c = e.ignoreTransition, - u = K(e), - d = { - x: u.x - this.initialOffset.x, - y: u.y - this.initialOffset.y, - }; - if ( - ((d.y -= window.pageYOffset - this.initialWindowScroll.top), - (d.x -= window.pageXOffset - this.initialWindowScroll.left), - (this.translate = d), - r) - ) { - var f = (function(e) { - var t = e.height, - n = e.width, - o = e.lockOffset, - r = Array.isArray(o) ? o : [o, o]; - w( - 2 === r.length, - 'lockOffset prop of SortableContainer should be a single value or an array of exactly two values. Given %s', - o, - ); - var i = b(r, 2), - a = i[0], - l = i[1]; - return [ - G({height: t, lockOffset: a, width: n}), - G({height: t, lockOffset: l, width: n}), - ]; - })({height: this.height, lockOffset: o, width: this.width}), - h = b(f, 2), - p = h[0], - g = h[1], - y = this.width / 2 - p.x, - v = this.height / 2 - p.y, - m = this.width / 2 - g.x, - x = this.height / 2 - g.y; - (d.x = R( - this.minTranslate.x + y, - this.maxTranslate.x - m, - d.x, - )), - (d.y = R( - this.minTranslate.y + v, - this.maxTranslate.y - x, - d.y, - )); - } - 'x' === n ? (d.y = 0) : 'y' === n && (d.x = 0), - s && l && !c && W(this.helper, l), - E(this.helper, d); - }, - }, - { - key: 'animateNodes', - value: function() { - var e = this.props, - t = e.transitionDuration, - n = e.hideSortableGhost, - o = e.onSortOver, - r = this.containerScrollDelta, - i = this.windowScrollDelta, - a = this.manager.getOrderedRefs(), - l = this.offsetEdge.left + this.translate.x + r.left, - s = this.offsetEdge.top + this.translate.y + r.top, - c = this.manager.isKeySorting, - u = this.newIndex; - this.newIndex = null; - for (var d = 0, f = a.length; d < f; d++) { - var h = a[d].node, - p = h.sortableInfo.index, - g = h.getBoundingClientRect().width, - y = h.getBoundingClientRect().height, - v = this.height > y ? y / 2 : this.height / 2, - m = this.width > g ? g / 2 : this.width / 2, - x = c && p > this.index && p <= u, - b = c && p < this.index && u <= p, - w = {x: 0, y: 0}, - S = a[d].edgeOffset; - S || - ((S = B(h, this.container)), - (a[d].edgeOffset = S), - c && (a[d].boundingClientRect = H(h, r))); - var O = d < a.length - 1 && a[d + 1], - C = 0 < d && a[d - 1]; - O && - !O.edgeOffset && - ((O.edgeOffset = B(O.node, this.container)), - c && (O.boundingClientRect = H(O.node, r))), - p !== this.index - ? (t && W(h, t), - this.axis.x - ? this.axis.y - ? b || - (p < this.index && - ((l + i.left - m <= S.left && - s + i.top <= S.top + v) || - s + i.top + v <= S.top)) - ? ((w.x = this.width + this.marginOffset.x), - S.left + w.x > - this.containerBoundingRect.width - m && - O && - ((w.x = O.edgeOffset.left - S.left), - (w.y = O.edgeOffset.top - S.top)), - null === this.newIndex && (this.newIndex = p)) - : (x || - (p > this.index && - ((l + i.left + m >= S.left && - s + i.top + v >= S.top) || - s + i.top + v >= S.top + y))) && - ((w.x = -(this.width + this.marginOffset.x)), - S.left + w.x < - this.containerBoundingRect.left + m && - C && - ((w.x = C.edgeOffset.left - S.left), - (w.y = C.edgeOffset.top - S.top)), - (this.newIndex = p)) - : x || (p > this.index && l + i.left + m >= S.left) - ? ((w.x = -(this.width + this.marginOffset.x)), - (this.newIndex = p)) - : (b || - (p < this.index && l + i.left <= S.left + m)) && - ((w.x = this.width + this.marginOffset.x), - null == this.newIndex && (this.newIndex = p)) - : this.axis.y && - (x || - (p > this.index && - s + i.top + this.boundingClientRect.height >= - S.top + v) - ? ((w.y = -(this.height + this.marginOffset.y)), - (this.newIndex = p)) - : (b || - (p < this.index && s + i.top <= S.top + v)) && - ((w.y = this.height + this.marginOffset.y), - null == this.newIndex && (this.newIndex = p))), - E(h, w), - (a[d].translate = w)) - : n && M((this.sortableGhost = h), {opacity: 0}); - } - null == this.newIndex && (this.newIndex = this.index), - c && (this.newIndex = u); - var T = c ? this.prevIndex : u; - o && - this.newIndex !== T && - o({ - collection: this.manager.active.collection, - index: this.index, - newIndex: this.newIndex, - oldIndex: T, - isKeySorting: c, - nodes: a, - helper: this.helper, - }); - }, - }, - { - key: 'getWrappedInstance', - value: function() { - return ( - w( - 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, l({ref: e}, k(this.props, ne))); - }, - }, - { - key: 'helperContainer', - get: function() { - var e = this.props.helperContainer; - return 'function' == typeof e - ? e() - : this.props.helperContainer || this.document.body; - }, - }, - { - key: 'containerScrollDelta', - get: function() { - return this.props.useWindowAsScrollContainer - ? {left: 0, top: 0} - : { - left: - this.scrollContainer.scrollLeft - - this.initialScroll.left, - top: - this.scrollContainer.scrollTop - this.initialScroll.top, - }; - }, - }, - { - key: 'windowScrollDelta', - get: function() { - return { - left: - this.contentWindow.pageXOffset - - this.initialWindowScroll.left, - top: - this.contentWindow.pageYOffset - - this.initialWindowScroll.top, - }; - }, - }, - ]), - n - ); - })(r.Component)), - c(e, 'displayName', L('sortableList', t)), - c(e, 'defaultProps', te), - c(e, 'propTypes', Z), - c(e, 'childContextTypes', {manager: i.object.isRequired}), - n - ); - } - var re = { - index: i.number.isRequired, - collection: i.oneOfType([i.number, i.string]), - disabled: i.bool, - }, - ie = Object.keys(re); - function ae(n) { - var e, - t, - o = - 1 < arguments.length && void 0 !== arguments[1] - ? arguments[1] - : {withRef: !1}; - return ( - (t = e = (function(e) { - function t() { - return u(this, t), g(this, y(t).apply(this, arguments)); - } - return ( - m(t, e), - f(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 ( - w( - 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, l({ref: e}, k(this.props, ie))); - }, - }, - ]), - t - ); - })(r.Component)), - c(e, 'displayName', L('sortableElement', n)), - c(e, 'contextTypes', {manager: i.object.isRequired}), - c(e, 'propTypes', re), - c(e, 'defaultProps', {collection: 0}), - t - ); - } - (e.SortableContainer = oe), - (e.sortableContainer = oe), - (e.SortableElement = ae), - (e.sortableElement = ae), - (e.SortableHandle = $), - (e.sortableHandle = $), - (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,i,a,s){"use strict";function t(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function n(e,t){return e(t={exports:{}},t.exports),t.exports}a=a&&Object.prototype.hasOwnProperty.call(a,"default")?a.default:a;var l=t(n(function(e){function t(){return e.exports=t=Object.assign||function(e){for(var t=1;te.length)&&(t=e.length);for(var n=0,o=new Array(t);n=r.y-a/2&&!g?(s.y=1,l.y=u*Math.abs((r.y-a/2-n.y)/a)):n.x>=r.x-i/2&&!m?(s.x=1,l.x=c*Math.abs((r.x-i/2-n.x)/i)):n.y<=o.y+a/2&&!y?(s.y=-1,l.y=u*Math.abs((n.y-a/2-o.y)/a)):n.x<=o.x+i/2&&!v&&(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 ne={axis:a.oneOf(["x","y","xy"]),contentWindow:a.any,disableAutoscroll:a.bool,distance:a.number,getContainer:a.func,getHelperDimensions:a.func,helperClass:a.string,helperContainer:a.oneOfType([a.func,"undefined"==typeof HTMLElement?a.any:a.instanceOf(HTMLElement)]),hideSortableGhost:a.bool,keyboardSortingTransitionDuration:a.number,lockAxis:a.string,lockOffset:a.oneOfType([a.number,a.string,a.arrayOf(a.oneOfType([a.number,a.string]))]),lockToContainerEdges:a.bool,onSortEnd:a.func,onSortMove:a.func,onSortOver:a.func,onSortStart:a.func,pressDelay:a.number,pressThreshold:a.number,keyCodes:a.shape({lift:a.arrayOf(a.number),drop:a.arrayOf(a.number),cancel:a.arrayOf(a.number),up:a.arrayOf(a.number),down:a.arrayOf(a.number)}),shouldCancelStart:a.func,transitionDuration:a.number,updateBeforeSortStart:a.func,useDragHandle:a.bool,useWindowAsScrollContainer:a.bool},oe={lift:[Y],drop:[Y],cancel:[q],up:[V,F],down:[$,z]},re={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,keyCodes:oe,shouldCancelStart:function(e){return-1!==[J.Input,J.Textarea,J.Select,J.Option,J.Button].indexOf(e.target.tagName)||!!P(e.target,function(e){return"true"===e.contentEditable})},transitionDuration:300,useWindowAsScrollContainer:!1},ie=Object.keys(ne);function ae(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);e&&(o=o.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,o)}return n}function se(t){for(var e=1;ey?y/2:this.height/2,v=this.width>x?x/2:this.width/2,m=c&&h>this.index&&h<=u,b=c&&hthis.containerBoundingRect.width-v&&O&&(w.x=O.edgeOffset.left-S.left,w.y=O.edgeOffset.top-S.top),null===this.newIndex&&(this.newIndex=h)):(m||h>this.index&&(s+i.left+v>=S.left&&l+i.top+g>=S.top||l+i.top+g>=S.top+y))&&(w.x=-(this.width+this.marginOffset.x),S.left+w.xthis.index&&s+i.left+v>=S.left?(w.x=-(this.width+this.marginOffset.x),this.newIndex=h):(b||hthis.index&&l+i.top+g>=S.top?(w.y=-(this.height+this.marginOffset.y),this.newIndex=h):(b||h this.index && - sortingOffset.top + - windowScrollDelta.top + - this.boundingClientRect.height >= - edgeOffset.top + offset.height) + (index > this.index && sortingOffset.top + windowScrollDelta.top + this.boundingClientRect.height >= edgeOffset.top + offset.height) ) { translate.y = -(this.height + this.marginOffset.y); this.newIndex = index; From a8fe08ee03051bb490bf7249890beffe0669d33a Mon Sep 17 00:00:00 2001 From: rustam Date: Fri, 28 Jan 2022 12:29:17 +0700 Subject: [PATCH 10/12] chore(release): 1.12.0 --- CHANGELOG.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d54594d0..85b1d74f3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,51 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. + +# [1.12.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.1.0...v1.12.0) (2022-01-28) + + +### Bug Fixes + +* added prop-types to peerDependencies ([0e855c5](https://github.com/clauderic/react-sortable-hoc/commit/0e855c5)) +* clear autoscroller when autoscroll is disabled ([#604](https://github.com/clauderic/react-sortable-hoc/issues/604)) ([3fd83f9](https://github.com/clauderic/react-sortable-hoc/commit/3fd83f9)) +* copy canvas content into cloned node ([43ad122](https://github.com/clauderic/react-sortable-hoc/commit/43ad122)) +* do not copy canvas context if it has neither width nor height ([#530](https://github.com/clauderic/react-sortable-hoc/issues/530)) ([3808437](https://github.com/clauderic/react-sortable-hoc/commit/3808437)) +* don't spread the keysToOmit parameter in omit util ([#563](https://github.com/clauderic/react-sortable-hoc/issues/563)) ([1c69772](https://github.com/clauderic/react-sortable-hoc/commit/1c69772)) +* Fix broken UMD build ([#587](https://github.com/clauderic/react-sortable-hoc/issues/587)) ([6cb7750](https://github.com/clauderic/react-sortable-hoc/commit/6cb7750)) +* get updated index after updateBeforeSortStart ([4471a0a](https://github.com/clauderic/react-sortable-hoc/commit/4471a0a)) +* helperContainer PropType definition broke server-side rendering ([#471](https://github.com/clauderic/react-sortable-hoc/issues/471)) ([c0eef97](https://github.com/clauderic/react-sortable-hoc/commit/c0eef97)) +* invalid helperContainer PropType definition ([#493](https://github.com/clauderic/react-sortable-hoc/issues/493)) ([dc1d18f](https://github.com/clauderic/react-sortable-hoc/commit/dc1d18f)) +* issue with cloning canvas context of dragged items ([#512](https://github.com/clauderic/react-sortable-hoc/issues/512)) ([4df34ad](https://github.com/clauderic/react-sortable-hoc/commit/4df34ad)) +* issue with getComputedStyle and getScrollingParent ([b104249](https://github.com/clauderic/react-sortable-hoc/commit/b104249)) +* issue with radio input name collision when cloning helper ([5337c97](https://github.com/clauderic/react-sortable-hoc/commit/5337c97)) +* issue with windowAsScrollContainer and translation offsets ([0391e62](https://github.com/clauderic/react-sortable-hoc/commit/0391e62)) +* lock axis story should not use lockToContainerEdges ([db1d3a9](https://github.com/clauderic/react-sortable-hoc/commit/db1d3a9)) +* omit disableAutoscroll prop ([#502](https://github.com/clauderic/react-sortable-hoc/issues/502)) ([e994e73](https://github.com/clauderic/react-sortable-hoc/commit/e994e73)) +* omit spreading helperContainer prop ([#497](https://github.com/clauderic/react-sortable-hoc/issues/497)) ([12bafdf](https://github.com/clauderic/react-sortable-hoc/commit/12bafdf)) +* overflow bug while dragging an item upwards in a grid ([1a2c87e](https://github.com/clauderic/react-sortable-hoc/commit/1a2c87e)) +* pass isKeySorting to onSortOver and updateBeforeSortStart handler props ([#531](https://github.com/clauderic/react-sortable-hoc/issues/531)) ([763fd33](https://github.com/clauderic/react-sortable-hoc/commit/763fd33)) +* PropType definition for keyCodes was incorrect ([eaf5070](https://github.com/clauderic/react-sortable-hoc/commit/eaf5070)) +* remove browser field with umd bundle ([#541](https://github.com/clauderic/react-sortable-hoc/issues/541)) ([d3b30fd](https://github.com/clauderic/react-sortable-hoc/commit/d3b30fd)) +* replace process.env.NODE_ENV in UMD builds ([16135df](https://github.com/clauderic/react-sortable-hoc/commit/16135df)) +* update helperContainer prop type definition ([#491](https://github.com/clauderic/react-sortable-hoc/issues/491)) ([fd30383](https://github.com/clauderic/react-sortable-hoc/commit/fd30383)) +* updated the behaviour of disabled elements ([bd3d041](https://github.com/clauderic/react-sortable-hoc/commit/bd3d041)) +* virtualized collection grid bug ([a57975c](https://github.com/clauderic/react-sortable-hoc/commit/a57975c)) + + +### Features + +* Add CSS Grid grid-gap support ([#657](https://github.com/clauderic/react-sortable-hoc/issues/657)) ([4efcaa2](https://github.com/clauderic/react-sortable-hoc/commit/4efcaa2)) +* Add disableAutoscroll prop ([#484](https://github.com/clauderic/react-sortable-hoc/issues/484)) ([7845e76](https://github.com/clauderic/react-sortable-hoc/commit/7845e76)) +* Add keyCodes prop to configure the keyboard shortcuts ([#588](https://github.com/clauderic/react-sortable-hoc/issues/588)) ([4c6d8dd](https://github.com/clauderic/react-sortable-hoc/commit/4c6d8dd)) +* add support for keyboard sorting ([#501](https://github.com/clauderic/react-sortable-hoc/issues/501)) ([439b92f](https://github.com/clauderic/react-sortable-hoc/commit/439b92f)) +* added helperContainer prop ([286eff4](https://github.com/clauderic/react-sortable-hoc/commit/286eff4)) +* allow helperContainer prop to be a function returning an HTMLElement ([#489](https://github.com/clauderic/react-sortable-hoc/issues/489)) ([f4a9b4a](https://github.com/clauderic/react-sortable-hoc/commit/f4a9b4a)) +* Detect scroll container automatically ([#507](https://github.com/clauderic/react-sortable-hoc/issues/507)) ([6572921](https://github.com/clauderic/react-sortable-hoc/commit/6572921)) +* prevent sort start on contentEditable target ([d64c8cf](https://github.com/clauderic/react-sortable-hoc/commit/d64c8cf)) + + + # [1.11.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.10.1...v1.11.0) (2020-01-20) diff --git a/package.json b/package.json index b0f2d7e75..4079bb916 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-sortable-hoc", - "version": "1.11.0", + "version": "1.12.0", "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list", "author": { "name": "Clauderic Demers", From 3d0553e90954e6d3d8d778dd507d7539b6791e5b Mon Sep 17 00:00:00 2001 From: rustam Date: Fri, 28 Jan 2022 12:29:34 +0700 Subject: [PATCH 11/12] chore(release): 1.12.1 --- CHANGELOG.md | 5 +++++ package.json | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 85b1d74f3..f685d5ebb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,11 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. + +## [1.12.1](https://github.com/clauderic/react-sortable-hoc/compare/v1.12.0...v1.12.1) (2022-01-28) + + + # [1.12.0](https://github.com/clauderic/react-sortable-hoc/compare/v1.1.0...v1.12.0) (2022-01-28) diff --git a/package.json b/package.json index 4079bb916..816dd9856 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-sortable-hoc", - "version": "1.12.0", + "version": "1.12.1", "description": "Set of higher-order components to turn any list into a sortable, touch-friendly, animated list", "author": { "name": "Clauderic Demers", From 84ec279ca0edc66b76450aaa1b43314a262a5dfd Mon Sep 17 00:00:00 2001 From: rustam Date: Fri, 28 Jan 2022 12:52:11 +0700 Subject: [PATCH 12/12] VISME-fix-drag-sort-scale-issue --- dist/react-sortable-hoc.esm.js | 2157 ++++++++++++++++++++++++++++++- dist/react-sortable-hoc.js | 2174 +++++++++++++++++++++++++++++++- 2 files changed, 4307 insertions(+), 24 deletions(-) diff --git a/dist/react-sortable-hoc.esm.js b/dist/react-sortable-hoc.esm.js index b65ce8b36..5e4073bec 100644 --- a/dist/react-sortable-hoc.esm.js +++ b/dist/react-sortable-hoc.esm.js @@ -1,13 +1,2146 @@ +import _extends from '@babel/runtime/helpers/esm/extends'; +import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray'; +import _objectSpread from '@babel/runtime/helpers/esm/objectSpread'; +import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck'; +import _createClass from '@babel/runtime/helpers/esm/createClass'; +import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn'; +import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf'; +import _inherits from '@babel/runtime/helpers/esm/inherits'; +import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized'; +import _defineProperty from '@babel/runtime/helpers/esm/defineProperty'; +import {createElement, Component} from 'react'; +import PropTypes from 'prop-types'; +import {findDOMNode} from 'react-dom'; +import invariant from 'invariant'; +import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray'; + +var Manager = (function() { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, 'refs', {}); + } + + _createClass(Manager, [ + { + key: 'add', + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + }, + }, + { + key: 'remove', + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + }, + }, + { + key: 'isActive', + value: function isActive() { + return this.active; + }, + }, + { + key: 'getActive', + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function(_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + }, + }, + { + key: 'getIndex', + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + }, + }, + { + key: 'getOrderedRefs', + value: function getOrderedRefs() { + var collection = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : this.active.collection; + return this.refs[collection].sort(sortByIndex); + }, + }, + ]); + + return Manager; +})(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function(acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'], +}; +var vendorPrefix = (function() { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || [ + '-moz-hidden-iframe', + ]; + var pre = (Array.prototype.slice + .call(styles) + .join('') + .match(/-(moz|webkit|ms)-/) || + (styles.OLink === '' && ['', 'o']))[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +})(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop), + }; +} +function provideDisplayName(prefix, Component$$1) { + var componentName = Component$$1.displayName || Component$$1.name; + return componentName + ? ''.concat(prefix, '(').concat(componentName, ')') + : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left, + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY, + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY, + }; + } else { + return { + x: event.pageX, + y: event.pageY, + }; + } +} +function isTouchEvent(event) { + return ( + (event.touches && event.touches.length) || + (event.changedTouches && event.changedTouches.length) + ); +} +function getEdgeOffset(node, parent) { + var offset = + arguments.length > 2 && arguments[2] !== undefined + ? arguments[2] + : { + left: 0, + top: 0, + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.getBoundingClientRect().left, + top: offset.top + node.getBoundingClientRect().top, + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant( + match !== null, + 'lockOffset value should be a number or a string of a ' + + 'number followed by "px" or "%". Given %s', + lockOffset, + ); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant( + isFinite(offsetX) && isFinite(offsetY), + 'lockOffset value should be a finite. Given %s', + lockOffset, + ); + + if (unit === '%') { + offsetX = (offsetX * width) / 100; + offsetY = (offsetY * height) / 100; + } + + return { + x: offsetX, + y: offsetY, + }; +} +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) { + var container = + arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap), + }; + } + + return { + x: 0, + y: 0, + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT', +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function(field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = '__sortableClone__'.concat(field.name); + } + + if ( + field.tagName === NodeType.Canvas && + fields[i].width > 0 && + fields[i].height > 0 + ) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [ + NodeType.Input, + NodeType.Textarea, + NodeType.Select, + NodeType.Option, + NodeType.Button, + ]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if ( + closest(event.target, function(el) { + return el.contentEditable === 'true'; + }) + ) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number), + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool, +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT], +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, value); +} +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : { + withRef: false, + }; + return ( + (_temp = _class = (function(_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _possibleConstructorReturn( + this, + _getPrototypeOf(WithSortableContainer).call(this, props), + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'state', + {}, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleStart', + function(event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function(el) { + return el.sortableInfo != null; + }); + + if ( + node && + node.sortableInfo && + _this.nodeIsChild(node) && + !_this.state.sorting + ) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index, + }; + + if ( + !isTouchEvent(event) && + event.target.tagName === NodeType.Anchor + ) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function() { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'nodeIsChild', + function(node) { + return node.sortableInfo.manager === _this.manager; + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleMove', + function(event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if ( + !_this.state.sorting && + _this.touched && + !_this._awaitingUpdateBeforeSortStart + ) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y, + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if ( + !distance && + (!pressThreshold || combinedDelta >= pressThreshold) + ) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if ( + distance && + combinedDelta >= distance && + _this.manager.isActive() + ) { + _this.handlePress(event); + } + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleEnd', + function() { + _this.touched = false; + + _this.cancel(); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'cancel', + function() { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handlePress', + function(event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = (function() { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection, + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: + _this.margin.left + + _this.margin.right + + _this.gridGap.x, + y: Math.max( + _this.margin.top, + _this.margin.bottom, + _this.gridGap.y, + ), + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0, + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition( + _objectSpread({}, event, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top, + }), + ); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop, + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset, + }; + _this.helper = _this.helperContainer.appendChild( + cloneNode(_node), + ); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0, + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer + ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight, + } + : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = + containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = + containerRight - + (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = + containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = + containerBottom - + (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = + (_useWindowAsScrollContainer + ? 0 + : containerBoundingRect.left) - + _this.boundingClientRect.left - + _this.width / 2; + _this.maxTranslate.x = + (_useWindowAsScrollContainer + ? _this.contentWindow.innerWidth + : containerBoundingRect.left + + containerBoundingRect.width) - + _this.boundingClientRect.left - + _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = + (_useWindowAsScrollContainer + ? 0 + : containerBoundingRect.top) - + _this.boundingClientRect.top - + _this.height / 2; + _this.maxTranslate.y = + (_useWindowAsScrollContainer + ? _this.contentWindow.innerHeight + : containerBoundingRect.top + + containerBoundingRect.height) - + _this.boundingClientRect.top - + _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function(className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches + ? _node + : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener( + 'wheel', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.addEventListener( + 'mousedown', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.addEventListener( + 'keydown', + _this.handleKeyDown, + ); + } else { + events.move.forEach(function(eventName) { + return _this.listenerNode.addEventListener( + eventName, + _this.handleSortMove, + false, + ); + }); + events.end.forEach(function(eventName) { + return _this.listenerNode.addEventListener( + eventName, + _this.handleSortEnd, + false, + ); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index, + }); + + if (_onSortStart) { + _onSortStart( + { + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper, + }, + event, + ); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = + _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = (function() { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows( + function() { + var index = _node.sortableInfo.index; + return Promise.resolve( + updateBeforeSortStart( + { + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting, + }, + event, + ), + ).then(function() {}); + }, + function(_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }, + ); + + if (_temp9 && _temp9.then) + return _temp9.then(function() {}); + } + })(); + + return _temp8 && _temp8.then + ? _temp8.then(_temp7) + : _temp7(_temp8); + } + })(); + + return Promise.resolve( + _temp6 && _temp6.then ? _temp6.then(function() {}) : void 0, + ); + } catch (e) { + return Promise.reject(e); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleSortMove', + function(event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleSortEnd', + function(event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener( + 'wheel', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.removeEventListener( + 'mousedown', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.removeEventListener( + 'keydown', + _this.handleKeyDown, + ); + } else { + events.move.forEach(function(eventName) { + return _this.listenerNode.removeEventListener( + eventName, + _this.handleSortMove, + ); + }); + events.end.forEach(function(eventName) { + return _this.listenerNode.removeEventListener( + eventName, + _this.handleSortEnd, + ); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '', + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null, + }); + + if (typeof onSortEnd === 'function') { + onSortEnd( + { + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes, + }, + event, + ); + } + + _this.touched = false; + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'autoscroll', + function() { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min( + _this.maxTranslate.x, + Math.max(_this.minTranslate.x, _this.translate.x), + ); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min( + _this.maxTranslate.y, + Math.max(_this.minTranslate.y, _this.translate.y), + ); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width, + }); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'onAutoScroll', + function(offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleKeyDown', + function(event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = + _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread({}, defaultKeyCodes, customKeyCodes); + + if ( + (_this.manager.active && !_this.manager.isKeySorting) || + (!_this.manager.active && + (!keyCodes.lift.includes(keyCode) || + shouldCancelStart(event) || + !_this.isValidSortingTarget(event))) + ) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if ( + keyCodes.drop.includes(keyCode) && + _this.manager.active + ) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'keyLift', + function(event) { + var target = event.target; + var node = closest(target, function(el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection, + }; + + _this.handlePress(event); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'keyMove', + function(shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex( + _this.newIndex, + _this.prevIndex, + _this.index, + ); + var target = nodes.find(function(_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = + target.boundingClientRect || + getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0, + }; + var targetPosition = { + top: + targetBoundingClientRect.top + + targetTranslate.y - + scrollDelta.top, + left: + targetBoundingClientRect.left + + targetTranslate.x - + scrollDelta.left, + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: + shouldAdjustForSize && _this.axis.x + ? targetNode.offsetWidth - _this.width + : 0, + y: + shouldAdjustForSize && _this.axis.y + ? targetNode.offsetHeight - _this.height + : 0, + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0, + }); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'keyDrop', + function(event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleKeyEnd', + function(event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'isValidSortingTarget', + function(event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function(el) { + return el.sortableInfo != null; + }); + return ( + node && + node.sortableInfo && + !node.sortableInfo.disabled && + (useDragHandle ? isSortableHandle(target) : target.sortableInfo) + ); + }, + ); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart, + }; + return _this; + } + + _createClass(WithSortableContainer, [ + { + key: 'getChildContext', + value: function getChildContext() { + return { + manager: this.manager, + }; + }, + }, + { + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props + .useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function(containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = + _this2.props.contentWindow || + _this2.document.defaultView || + window; + _this2.contentWindow = + typeof contentWindow === 'function' + ? contentWindow() + : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer + ? _this2.document.scrollingElement || + _this2.document.documentElement + : getScrollingParent( + _this2.container, + _this2.props.scrollContainer, + ) || _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, + ); + }); + }); + + _this2.container.addEventListener( + 'keydown', + _this2.handleKeyDown, + ); + }); + }, + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function(key) { + return events[key].forEach(function(eventName) { + return _this3.container.removeEventListener( + eventName, + _this3.events[key], + ); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + }, + }, + { + key: 'updateHelperPosition', + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = + _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = + _this$props6$keyboard === void 0 + ? transitionDuration + : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y, + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width, + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y, + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y, + }; + translate.x = limit( + this.minTranslate.x + minOffset.x, + this.maxTranslate.x - maxOffset.x, + translate.x, + ); + translate.y = limit( + this.minTranslate.y + minOffset.y, + this.maxTranslate.y - maxOffset.y, + translate.y, + ); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if ( + isKeySorting && + keyboardSortingTransitionDuration && + !ignoreTransition + ) { + setTransitionDuration( + this.helper, + keyboardSortingTransitionDuration, + ); + } + + setTranslate3d(this.helper, translate); + }, + }, + { + key: 'animateNodes', + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: + this.offsetEdge.left + + this.translate.x + + containerScrollDelta.left, + top: + this.offsetEdge.top + + this.translate.y + + containerScrollDelta.top, + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + + var width = _node3.getBoundingClientRect().width; + + var height = _node3.getBoundingClientRect().height; + + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2, + }; + var mustShiftBackward = + isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = + isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0, + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[ + i + ].boundingClientRect = getScrollAdjustedBoundingClientRect( + _node3, + containerScrollDelta, + ); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset( + nextNode.node, + this.container, + ); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect( + nextNode.node, + containerScrollDelta, + ); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0, + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if ( + mustShiftForward || + (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; + + if ( + edgeOffset.left + translate.x > + this.containerBoundingRect.width - offset.width + ) { + if (nextNode) { + translate.x = + nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if ( + mustShiftBackward || + (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); + + if ( + edgeOffset.left + translate.x < + this.containerBoundingRect.left + offset.width + ) { + if (prevNode) { + translate.x = + prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if ( + mustShiftBackward || + (index > this.index && + sortingOffset.left + + windowScrollDelta.left + + offset.width >= + edgeOffset.left) + ) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if ( + mustShiftForward || + (index < this.index && + sortingOffset.left + windowScrollDelta.left <= + edgeOffset.left + offset.width) + ) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if ( + mustShiftBackward || + (index > this.index && + sortingOffset.top + + windowScrollDelta.top + + this.boundingClientRect.height >= + edgeOffset.top + offset.height) + ) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if ( + mustShiftForward || + (index < this.index && + sortingOffset.top + windowScrollDelta.top <= + edgeOffset.top + offset.height) + ) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper, + }); + } + }, + }, + { + 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 SortableContainer() call', + ); + return this.refs.wrappedInstance; + }, + }, + { + key: 'getContainer', + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return findDOMNode(this); + } + + return getContainer( + config.withRef ? this.getWrappedInstance() : undefined, + ); + }, + }, + { + key: 'render', + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement( + WrappedComponent, + _extends( + { + ref: ref, + }, + omit(this.props, omittedProps), + ), + ); + }, + }, + { + key: 'helperContainer', + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + }, + }, + { + key: 'containerScrollDelta', + get: function get() { + var useWindowAsScrollContainer = this.props + .useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0, + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top, + }; + }, + }, + { + key: 'windowScrollDelta', + get: function get() { + return { + left: + this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: + this.contentWindow.pageYOffset - this.initialWindowScroll.top, + }; + }, + }, + ]); + + return WithSortableContainer; + })(Component)), + _defineProperty( + _class, + 'displayName', + provideDisplayName('sortableList', WrappedComponent), + ), + _defineProperty(_class, 'defaultProps', defaultProps), + _defineProperty(_class, 'propTypes', propTypes), + _defineProperty(_class, 'childContextTypes', { + manager: PropTypes.object.isRequired, + }), + _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) { + var _class, _temp; + + var config = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : { + withRef: false, + }; + return ( + (_temp = _class = (function(_React$Component) { + _inherits(WithSortableElement, _React$Component); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _possibleConstructorReturn( + this, + _getPrototypeOf(WithSortableElement).apply(this, arguments), + ); + } + + _createClass(WithSortableElement, [ + { + key: 'componentDidMount', + value: function componentDidMount() { + this.register(); + }, + }, + { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + }, + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.unregister(); + }, + }, + { + key: 'register', + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager, + }; + this.node = node; + this.ref = { + node: node, + }; + this.context.manager.add(collection, this.ref); + }, + }, + { + key: 'unregister', + value: function unregister() { + var collection = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : this.props.collection; + this.context.manager.remove(collection, this.ref); + }, + }, + { + 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 SortableElement() call', + ); + return this.refs.wrappedInstance; + }, + }, + { + key: 'render', + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return createElement( + WrappedComponent, + _extends( + { + ref: ref, + }, + omit(this.props, omittedProps$1), + ), + ); + }, + }, + ]); + + return WithSortableElement; + })(Component)), + _defineProperty( + _class, + 'displayName', + provideDisplayName('sortableElement', WrappedComponent), + ), + _defineProperty(_class, 'contextTypes', { + manager: PropTypes.object.isRequired, + }), + _defineProperty(_class, 'propTypes', propTypes$1), + _defineProperty(_class, 'defaultProps', { + collection: 0, + }), + _temp + ); +} + export { - default as SortableContainer, - default as sortableContainer, -} from './SortableContainer/index.js'; -export { - default as SortableElement, - default as sortableElement, -} from './SortableElement/index.js'; -export { - default as SortableHandle, - default as sortableHandle, -} from './SortableHandle/index.js'; -export {arrayMove} from './utils.js'; + sortableContainer as SortableContainer, + sortableContainer, + sortableElement as SortableElement, + sortableElement, + sortableHandle as SortableHandle, + sortableHandle, + arrayMove, +}; diff --git a/dist/react-sortable-hoc.js b/dist/react-sortable-hoc.js index 1d817becc..0a9ea8b44 100644 --- a/dist/react-sortable-hoc.js +++ b/dist/react-sortable-hoc.js @@ -6,15 +6,2165 @@ function _interopDefault(ex) { return ex && typeof ex === 'object' && 'default' in ex ? ex['default'] : ex; } -var index_js = _interopDefault(require('./SortableContainer/index.js')); -var index_js$1 = _interopDefault(require('./SortableElement/index.js')); -var index_js$2 = _interopDefault(require('./SortableHandle/index.js')); -var utils_js = require('./utils.js'); - -exports.SortableContainer = index_js; -exports.sortableContainer = index_js; -exports.SortableElement = index_js$1; -exports.sortableElement = index_js$1; -exports.SortableHandle = index_js$2; -exports.sortableHandle = index_js$2; -exports.arrayMove = utils_js.arrayMove; +var _extends = _interopDefault(require('@babel/runtime/helpers/extends')); +var _slicedToArray = _interopDefault( + require('@babel/runtime/helpers/slicedToArray'), +); +var _objectSpread = _interopDefault( + require('@babel/runtime/helpers/objectSpread'), +); +var _classCallCheck = _interopDefault( + require('@babel/runtime/helpers/classCallCheck'), +); +var _createClass = _interopDefault( + require('@babel/runtime/helpers/createClass'), +); +var _possibleConstructorReturn = _interopDefault( + require('@babel/runtime/helpers/possibleConstructorReturn'), +); +var _getPrototypeOf = _interopDefault( + require('@babel/runtime/helpers/getPrototypeOf'), +); +var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits')); +var _assertThisInitialized = _interopDefault( + require('@babel/runtime/helpers/assertThisInitialized'), +); +var _defineProperty = _interopDefault( + require('@babel/runtime/helpers/defineProperty'), +); +var React = require('react'); +var PropTypes = _interopDefault(require('prop-types')); +var reactDom = require('react-dom'); +var invariant = _interopDefault(require('invariant')); +var _toConsumableArray = _interopDefault( + require('@babel/runtime/helpers/toConsumableArray'), +); + +var Manager = (function() { + function Manager() { + _classCallCheck(this, Manager); + + _defineProperty(this, 'refs', {}); + } + + _createClass(Manager, [ + { + key: 'add', + value: function add(collection, ref) { + if (!this.refs[collection]) { + this.refs[collection] = []; + } + + this.refs[collection].push(ref); + }, + }, + { + key: 'remove', + value: function remove(collection, ref) { + var index = this.getIndex(collection, ref); + + if (index !== -1) { + this.refs[collection].splice(index, 1); + } + }, + }, + { + key: 'isActive', + value: function isActive() { + return this.active; + }, + }, + { + key: 'getActive', + value: function getActive() { + var _this = this; + + return this.refs[this.active.collection].find(function(_ref) { + var node = _ref.node; + return node.sortableInfo.index == _this.active.index; + }); + }, + }, + { + key: 'getIndex', + value: function getIndex(collection, ref) { + return this.refs[collection].indexOf(ref); + }, + }, + { + key: 'getOrderedRefs', + value: function getOrderedRefs() { + var collection = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : this.active.collection; + return this.refs[collection].sort(sortByIndex); + }, + }, + ]); + + return Manager; +})(); + +function sortByIndex(_ref2, _ref3) { + var index1 = _ref2.node.sortableInfo.index; + var index2 = _ref3.node.sortableInfo.index; + return index1 - index2; +} + +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(); + array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]); + return array; +} +function omit(obj, keysToOmit) { + return Object.keys(obj).reduce(function(acc, key) { + if (keysToOmit.indexOf(key) === -1) { + acc[key] = obj[key]; + } + + return acc; + }, {}); +} +var events = { + end: ['touchend', 'touchcancel', 'mouseup'], + move: ['touchmove', 'mousemove'], + start: ['touchstart', 'mousedown'], +}; +var vendorPrefix = (function() { + if (typeof window === 'undefined' || typeof document === 'undefined') { + return ''; + } + + var styles = window.getComputedStyle(document.documentElement, '') || [ + '-moz-hidden-iframe', + ]; + var pre = (Array.prototype.slice + .call(styles) + .join('') + .match(/-(moz|webkit|ms)-/) || + (styles.OLink === '' && ['', 'o']))[1]; + + switch (pre) { + case 'ms': + return 'ms'; + + default: + return pre && pre.length ? pre[0].toUpperCase() + pre.substr(1) : ''; + } +})(); +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) { + while (el) { + if (fn(el)) { + return el; + } + + el = el.parentNode; + } + + return null; +} +function limit(min, max, value) { + return Math.max(min, Math.min(value, max)); +} + +function getPixelValue(stringValue) { + if (stringValue.substr(-2) === 'px') { + return parseFloat(stringValue); + } + + return 0; +} + +function getElementMargin(element) { + var style = window.getComputedStyle(element); + return { + bottom: getPixelValue(style.marginBottom), + left: getPixelValue(style.marginLeft), + right: getPixelValue(style.marginRight), + top: getPixelValue(style.marginTop), + }; +} +function provideDisplayName(prefix, Component) { + var componentName = Component.displayName || Component.name; + return componentName + ? ''.concat(prefix, '(').concat(componentName, ')') + : prefix; +} +function getScrollAdjustedBoundingClientRect(node, scrollDelta) { + var boundingClientRect = node.getBoundingClientRect(); + return { + top: boundingClientRect.top + scrollDelta.top, + left: boundingClientRect.left + scrollDelta.left, + }; +} +function getPosition(event) { + if (event.touches && event.touches.length) { + return { + x: event.touches[0].pageX, + y: event.touches[0].pageY, + }; + } else if (event.changedTouches && event.changedTouches.length) { + return { + x: event.changedTouches[0].pageX, + y: event.changedTouches[0].pageY, + }; + } else { + return { + x: event.pageX, + y: event.pageY, + }; + } +} +function isTouchEvent(event) { + return ( + (event.touches && event.touches.length) || + (event.changedTouches && event.changedTouches.length) + ); +} +function getEdgeOffset(node, parent) { + var offset = + arguments.length > 2 && arguments[2] !== undefined + ? arguments[2] + : { + left: 0, + top: 0, + }; + + if (!node) { + return undefined; + } + + var nodeOffset = { + left: offset.left + node.getBoundingClientRect().left, + top: offset.top + node.getBoundingClientRect().top, + }; + + if (node.parentNode === parent) { + return nodeOffset; + } + + return getEdgeOffset(node.parentNode, parent, nodeOffset); +} +function getTargetIndex(newIndex, prevIndex, oldIndex) { + if (newIndex < oldIndex && newIndex > prevIndex) { + return newIndex - 1; + } else if (newIndex > oldIndex && newIndex < prevIndex) { + return newIndex + 1; + } else { + return newIndex; + } +} +function getLockPixelOffset(_ref) { + var lockOffset = _ref.lockOffset, + width = _ref.width, + height = _ref.height; + var offsetX = lockOffset; + var offsetY = lockOffset; + var unit = 'px'; + + if (typeof lockOffset === 'string') { + var match = /^[+-]?\d*(?:\.\d*)?(px|%)$/.exec(lockOffset); + invariant( + match !== null, + 'lockOffset value should be a number or a string of a ' + + 'number followed by "px" or "%". Given %s', + lockOffset, + ); + offsetX = parseFloat(lockOffset); + offsetY = parseFloat(lockOffset); + unit = match[1]; + } + + invariant( + isFinite(offsetX) && isFinite(offsetY), + 'lockOffset value should be a finite. Given %s', + lockOffset, + ); + + if (unit === '%') { + offsetX = (offsetX * width) / 100; + offsetY = (offsetY * height) / 100; + } + + return { + x: offsetX, + y: offsetY, + }; +} +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) { + var container = + arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (container) { + return document.querySelector(container); + } + + if (!(el instanceof HTMLElement)) { + return null; + } else if (isScrollable(el)) { + return el; + } else { + return getScrollingParent(el.parentNode); + } +} +function getContainerGridGap(element) { + var style = window.getComputedStyle(element); + + if (style.display === 'grid') { + return { + x: getPixelValue(style.gridColumnGap), + y: getPixelValue(style.gridRowGap), + }; + } + + return { + x: 0, + y: 0, + }; +} +var KEYCODE = { + TAB: 9, + ESC: 27, + SPACE: 32, + LEFT: 37, + UP: 38, + RIGHT: 39, + DOWN: 40, +}; +var NodeType = { + Anchor: 'A', + Button: 'BUTTON', + Canvas: 'CANVAS', + Input: 'INPUT', + Option: 'OPTION', + Textarea: 'TEXTAREA', + Select: 'SELECT', +}; +function cloneNode(node) { + var selector = 'input, textarea, select, canvas, [contenteditable]'; + var fields = node.querySelectorAll(selector); + var clonedNode = node.cloneNode(true); + + var clonedFields = _toConsumableArray(clonedNode.querySelectorAll(selector)); + + clonedFields.forEach(function(field, i) { + if (field.type !== 'file') { + field.value = fields[i].value; + } + + if (field.type === 'radio' && field.name) { + field.name = '__sortableClone__'.concat(field.name); + } + + if ( + field.tagName === NodeType.Canvas && + fields[i].width > 0 && + fields[i].height > 0 + ) { + var destCtx = field.getContext('2d'); + destCtx.drawImage(fields[i], 0, 0); + } + }); + return clonedNode; +} + +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() { + if (this.interval == null) { + return; + } + + 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 interactiveElements = [ + NodeType.Input, + NodeType.Textarea, + NodeType.Select, + NodeType.Option, + NodeType.Button, + ]; + + if (interactiveElements.indexOf(event.target.tagName) !== -1) { + return true; + } + + if ( + closest(event.target, function(el) { + return el.contentEditable === 'true'; + }) + ) { + 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, + keyboardSortingTransitionDuration: PropTypes.number, + 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, + keyCodes: PropTypes.shape({ + lift: PropTypes.arrayOf(PropTypes.number), + drop: PropTypes.arrayOf(PropTypes.number), + cancel: PropTypes.arrayOf(PropTypes.number), + up: PropTypes.arrayOf(PropTypes.number), + down: PropTypes.arrayOf(PropTypes.number), + }), + shouldCancelStart: PropTypes.func, + transitionDuration: PropTypes.number, + updateBeforeSortStart: PropTypes.func, + useDragHandle: PropTypes.bool, + useWindowAsScrollContainer: PropTypes.bool, +}; +var defaultKeyCodes = { + lift: [KEYCODE.SPACE], + drop: [KEYCODE.SPACE], + cancel: [KEYCODE.ESC], + up: [KEYCODE.UP, KEYCODE.LEFT], + down: [KEYCODE.DOWN, KEYCODE.RIGHT], +}; +var defaultProps = { + axis: 'y', + disableAutoscroll: false, + distance: 0, + getHelperDimensions: defaultGetHelperDimensions, + hideSortableGhost: true, + lockOffset: '50%', + lockToContainerEdges: false, + pressDelay: 0, + pressThreshold: 5, + keyCodes: defaultKeyCodes, + 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) { + try { + var result = body(); + } catch (e) { + return finalizer(true, e); + } + + if (result && result.then) { + return result.then(finalizer.bind(null, false), finalizer.bind(null, true)); + } + + return finalizer(false, value); +} +function sortableContainer(WrappedComponent) { + var _class, _temp; + + var config = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : { + withRef: false, + }; + return ( + (_temp = _class = (function(_React$Component) { + _inherits(WithSortableContainer, _React$Component); + + function WithSortableContainer(props) { + var _this; + + _classCallCheck(this, WithSortableContainer); + + _this = _possibleConstructorReturn( + this, + _getPrototypeOf(WithSortableContainer).call(this, props), + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'state', + {}, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleStart', + function(event) { + var _this$props = _this.props, + distance = _this$props.distance, + shouldCancelStart = _this$props.shouldCancelStart; + + if (event.button === 2 || shouldCancelStart(event)) { + return; + } + + _this.touched = true; + _this.position = getPosition(event); + var node = closest(event.target, function(el) { + return el.sortableInfo != null; + }); + + if ( + node && + node.sortableInfo && + _this.nodeIsChild(node) && + !_this.state.sorting + ) { + var useDragHandle = _this.props.useDragHandle; + var _node$sortableInfo = node.sortableInfo, + index = _node$sortableInfo.index, + collection = _node$sortableInfo.collection, + disabled = _node$sortableInfo.disabled; + + if (disabled) { + return; + } + + if (useDragHandle && !closest(event.target, isSortableHandle)) { + return; + } + + _this.manager.active = { + collection: collection, + index: index, + }; + + if ( + !isTouchEvent(event) && + event.target.tagName === NodeType.Anchor + ) { + event.preventDefault(); + } + + if (!distance) { + if (_this.props.pressDelay === 0) { + _this.handlePress(event); + } else { + _this.pressTimer = setTimeout(function() { + return _this.handlePress(event); + }, _this.props.pressDelay); + } + } + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'nodeIsChild', + function(node) { + return node.sortableInfo.manager === _this.manager; + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleMove', + function(event) { + var _this$props2 = _this.props, + distance = _this$props2.distance, + pressThreshold = _this$props2.pressThreshold; + + if ( + !_this.state.sorting && + _this.touched && + !_this._awaitingUpdateBeforeSortStart + ) { + var position = getPosition(event); + var delta = { + x: _this.position.x - position.x, + y: _this.position.y - position.y, + }; + var combinedDelta = Math.abs(delta.x) + Math.abs(delta.y); + _this.delta = delta; + + if ( + !distance && + (!pressThreshold || combinedDelta >= pressThreshold) + ) { + clearTimeout(_this.cancelTimer); + _this.cancelTimer = setTimeout(_this.cancel, 0); + } else if ( + distance && + combinedDelta >= distance && + _this.manager.isActive() + ) { + _this.handlePress(event); + } + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleEnd', + function() { + _this.touched = false; + + _this.cancel(); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'cancel', + function() { + var distance = _this.props.distance; + var sorting = _this.state.sorting; + + if (!sorting) { + if (!distance) { + clearTimeout(_this.pressTimer); + } + + _this.manager.active = null; + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handlePress', + function(event) { + try { + var active = _this.manager.getActive(); + + var _temp6 = (function() { + if (active) { + var _temp7 = function _temp7() { + var index = _node.sortableInfo.index; + var margin = getElementMargin(_node); + var gridGap = getContainerGridGap(_this.container); + + var containerBoundingRect = _this.scrollContainer.getBoundingClientRect(); + + var dimensions = _getHelperDimensions({ + index: index, + node: _node, + collection: _collection, + }); + + _this.node = _node; + _this.margin = margin; + _this.gridGap = gridGap; + _this.width = dimensions.width; + _this.height = dimensions.height; + _this.marginOffset = { + x: + _this.margin.left + + _this.margin.right + + _this.gridGap.x, + y: Math.max( + _this.margin.top, + _this.margin.bottom, + _this.gridGap.y, + ), + }; + _this.boundingClientRect = _node.getBoundingClientRect(); + _this.containerBoundingRect = containerBoundingRect; + _this.index = index; + _this.newIndex = index; + _this.axis = { + x: _axis.indexOf('x') >= 0, + y: _axis.indexOf('y') >= 0, + }; + _this.offsetEdge = getEdgeOffset(_node, _this.container); + + if (_isKeySorting) { + _this.initialOffset = getPosition( + _objectSpread({}, event, { + pageX: _this.boundingClientRect.left, + pageY: _this.boundingClientRect.top, + }), + ); + } else { + _this.initialOffset = getPosition(event); + } + + _this.initialScroll = { + left: _this.scrollContainer.scrollLeft, + top: _this.scrollContainer.scrollTop, + }; + _this.initialWindowScroll = { + left: window.pageXOffset, + top: window.pageYOffset, + }; + _this.helper = _this.helperContainer.appendChild( + cloneNode(_node), + ); + 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 (_isKeySorting) { + _this.helper.focus(); + } + + if (_hideSortableGhost) { + _this.sortableGhost = _node; + setInlineStyles(_node, { + opacity: 0, + }); + } + + _this.minTranslate = {}; + _this.maxTranslate = {}; + + if (_isKeySorting) { + var _ref = _useWindowAsScrollContainer + ? { + top: 0, + left: 0, + width: _this.contentWindow.innerWidth, + height: _this.contentWindow.innerHeight, + } + : _this.containerBoundingRect, + containerTop = _ref.top, + containerLeft = _ref.left, + containerWidth = _ref.width, + containerHeight = _ref.height; + + var containerBottom = containerTop + containerHeight; + var containerRight = containerLeft + containerWidth; + + if (_this.axis.x) { + _this.minTranslate.x = + containerLeft - _this.boundingClientRect.left; + _this.maxTranslate.x = + containerRight - + (_this.boundingClientRect.left + _this.width); + } + + if (_this.axis.y) { + _this.minTranslate.y = + containerTop - _this.boundingClientRect.top; + _this.maxTranslate.y = + containerBottom - + (_this.boundingClientRect.top + _this.height); + } + } else { + if (_this.axis.x) { + _this.minTranslate.x = + (_useWindowAsScrollContainer + ? 0 + : containerBoundingRect.left) - + _this.boundingClientRect.left - + _this.width / 2; + _this.maxTranslate.x = + (_useWindowAsScrollContainer + ? _this.contentWindow.innerWidth + : containerBoundingRect.left + + containerBoundingRect.width) - + _this.boundingClientRect.left - + _this.width / 2; + } + + if (_this.axis.y) { + _this.minTranslate.y = + (_useWindowAsScrollContainer + ? 0 + : containerBoundingRect.top) - + _this.boundingClientRect.top - + _this.height / 2; + _this.maxTranslate.y = + (_useWindowAsScrollContainer + ? _this.contentWindow.innerHeight + : containerBoundingRect.top + + containerBoundingRect.height) - + _this.boundingClientRect.top - + _this.height / 2; + } + } + + if (_helperClass) { + _helperClass.split(' ').forEach(function(className) { + return _this.helper.classList.add(className); + }); + } + + _this.listenerNode = event.touches + ? _node + : _this.contentWindow; + + if (_isKeySorting) { + _this.listenerNode.addEventListener( + 'wheel', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.addEventListener( + 'mousedown', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.addEventListener( + 'keydown', + _this.handleKeyDown, + ); + } else { + events.move.forEach(function(eventName) { + return _this.listenerNode.addEventListener( + eventName, + _this.handleSortMove, + false, + ); + }); + events.end.forEach(function(eventName) { + return _this.listenerNode.addEventListener( + eventName, + _this.handleSortEnd, + false, + ); + }); + } + + _this.setState({ + sorting: true, + sortingIndex: index, + }); + + if (_onSortStart) { + _onSortStart( + { + node: _node, + index: index, + collection: _collection, + isKeySorting: _isKeySorting, + nodes: _this.manager.getOrderedRefs(), + helper: _this.helper, + }, + event, + ); + } + + if (_isKeySorting) { + _this.keyMove(0); + } + }; + + var _this$props3 = _this.props, + _axis = _this$props3.axis, + _getHelperDimensions = _this$props3.getHelperDimensions, + _helperClass = _this$props3.helperClass, + _hideSortableGhost = _this$props3.hideSortableGhost, + updateBeforeSortStart = _this$props3.updateBeforeSortStart, + _onSortStart = _this$props3.onSortStart, + _useWindowAsScrollContainer = + _this$props3.useWindowAsScrollContainer; + var _node = active.node, + _collection = active.collection; + var _isKeySorting = _this.manager.isKeySorting; + + var _temp8 = (function() { + if (typeof updateBeforeSortStart === 'function') { + _this._awaitingUpdateBeforeSortStart = true; + + var _temp9 = _finallyRethrows( + function() { + var index = _node.sortableInfo.index; + return Promise.resolve( + updateBeforeSortStart( + { + collection: _collection, + index: index, + node: _node, + isKeySorting: _isKeySorting, + }, + event, + ), + ).then(function() {}); + }, + function(_wasThrown, _result) { + _this._awaitingUpdateBeforeSortStart = false; + if (_wasThrown) throw _result; + return _result; + }, + ); + + if (_temp9 && _temp9.then) + return _temp9.then(function() {}); + } + })(); + + return _temp8 && _temp8.then + ? _temp8.then(_temp7) + : _temp7(_temp8); + } + })(); + + return Promise.resolve( + _temp6 && _temp6.then ? _temp6.then(function() {}) : void 0, + ); + } catch (e) { + return Promise.reject(e); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleSortMove', + function(event) { + var onSortMove = _this.props.onSortMove; + + if (typeof event.preventDefault === 'function') { + event.preventDefault(); + } + + _this.updateHelperPosition(event); + + _this.animateNodes(); + + _this.autoscroll(); + + if (onSortMove) { + onSortMove(event); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleSortEnd', + function(event) { + var _this$props4 = _this.props, + hideSortableGhost = _this$props4.hideSortableGhost, + onSortEnd = _this$props4.onSortEnd; + var _this$manager = _this.manager, + collection = _this$manager.active.collection, + isKeySorting = _this$manager.isKeySorting; + + var nodes = _this.manager.getOrderedRefs(); + + if (_this.listenerNode) { + if (isKeySorting) { + _this.listenerNode.removeEventListener( + 'wheel', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.removeEventListener( + 'mousedown', + _this.handleKeyEnd, + true, + ); + + _this.listenerNode.removeEventListener( + 'keydown', + _this.handleKeyDown, + ); + } else { + events.move.forEach(function(eventName) { + return _this.listenerNode.removeEventListener( + eventName, + _this.handleSortMove, + ); + }); + events.end.forEach(function(eventName) { + return _this.listenerNode.removeEventListener( + eventName, + _this.handleSortEnd, + ); + }); + } + } + + _this.helper.parentNode.removeChild(_this.helper); + + if (hideSortableGhost && _this.sortableGhost) { + setInlineStyles(_this.sortableGhost, { + opacity: '', + }); + } + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node2 = nodes[i]; + var el = _node2.node; + _node2.edgeOffset = null; + _node2.boundingClientRect = null; + setTranslate3d(el, null); + setTransitionDuration(el, null); + _node2.translate = null; + } + + _this.autoScroller.clear(); + + _this.manager.active = null; + _this.manager.isKeySorting = false; + + _this.setState({ + sorting: false, + sortingIndex: null, + }); + + if (typeof onSortEnd === 'function') { + onSortEnd( + { + collection: collection, + newIndex: _this.newIndex, + oldIndex: _this.index, + isKeySorting: isKeySorting, + nodes: nodes, + }, + event, + ); + } + + _this.touched = false; + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'autoscroll', + function() { + var disableAutoscroll = _this.props.disableAutoscroll; + var isKeySorting = _this.manager.isKeySorting; + + if (disableAutoscroll) { + _this.autoScroller.clear(); + + return; + } + + if (isKeySorting) { + var translate = _objectSpread({}, _this.translate); + + var scrollX = 0; + var scrollY = 0; + + if (_this.axis.x) { + translate.x = Math.min( + _this.maxTranslate.x, + Math.max(_this.minTranslate.x, _this.translate.x), + ); + scrollX = _this.translate.x - translate.x; + } + + if (_this.axis.y) { + translate.y = Math.min( + _this.maxTranslate.y, + Math.max(_this.minTranslate.y, _this.translate.y), + ); + scrollY = _this.translate.y - translate.y; + } + + _this.translate = translate; + setTranslate3d(_this.helper, _this.translate); + _this.scrollContainer.scrollLeft += scrollX; + _this.scrollContainer.scrollTop += scrollY; + return; + } + + _this.autoScroller.update({ + height: _this.height, + maxTranslate: _this.maxTranslate, + minTranslate: _this.minTranslate, + translate: _this.translate, + width: _this.width, + }); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'onAutoScroll', + function(offset) { + _this.translate.x += offset.left; + _this.translate.y += offset.top; + + _this.animateNodes(); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleKeyDown', + function(event) { + var keyCode = event.keyCode; + var _this$props5 = _this.props, + shouldCancelStart = _this$props5.shouldCancelStart, + _this$props5$keyCodes = _this$props5.keyCodes, + customKeyCodes = + _this$props5$keyCodes === void 0 ? {} : _this$props5$keyCodes; + + var keyCodes = _objectSpread({}, defaultKeyCodes, customKeyCodes); + + if ( + (_this.manager.active && !_this.manager.isKeySorting) || + (!_this.manager.active && + (!keyCodes.lift.includes(keyCode) || + shouldCancelStart(event) || + !_this.isValidSortingTarget(event))) + ) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + if (keyCodes.lift.includes(keyCode) && !_this.manager.active) { + _this.keyLift(event); + } else if ( + keyCodes.drop.includes(keyCode) && + _this.manager.active + ) { + _this.keyDrop(event); + } else if (keyCodes.cancel.includes(keyCode)) { + _this.newIndex = _this.manager.active.index; + + _this.keyDrop(event); + } else if (keyCodes.up.includes(keyCode)) { + _this.keyMove(-1); + } else if (keyCodes.down.includes(keyCode)) { + _this.keyMove(1); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'keyLift', + function(event) { + var target = event.target; + var node = closest(target, function(el) { + return el.sortableInfo != null; + }); + var _node$sortableInfo2 = node.sortableInfo, + index = _node$sortableInfo2.index, + collection = _node$sortableInfo2.collection; + _this.initialFocusedNode = target; + _this.manager.isKeySorting = true; + _this.manager.active = { + index: index, + collection: collection, + }; + + _this.handlePress(event); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'keyMove', + function(shift) { + var nodes = _this.manager.getOrderedRefs(); + + var lastIndex = nodes[nodes.length - 1].node.sortableInfo.index; + var newIndex = _this.newIndex + shift; + var prevIndex = _this.newIndex; + + if (newIndex < 0 || newIndex > lastIndex) { + return; + } + + _this.prevIndex = prevIndex; + _this.newIndex = newIndex; + var targetIndex = getTargetIndex( + _this.newIndex, + _this.prevIndex, + _this.index, + ); + var target = nodes.find(function(_ref2) { + var node = _ref2.node; + return node.sortableInfo.index === targetIndex; + }); + var targetNode = target.node; + var scrollDelta = _this.containerScrollDelta; + var targetBoundingClientRect = + target.boundingClientRect || + getScrollAdjustedBoundingClientRect(targetNode, scrollDelta); + var targetTranslate = target.translate || { + x: 0, + y: 0, + }; + var targetPosition = { + top: + targetBoundingClientRect.top + + targetTranslate.y - + scrollDelta.top, + left: + targetBoundingClientRect.left + + targetTranslate.x - + scrollDelta.left, + }; + var shouldAdjustForSize = prevIndex < newIndex; + var sizeAdjustment = { + x: + shouldAdjustForSize && _this.axis.x + ? targetNode.offsetWidth - _this.width + : 0, + y: + shouldAdjustForSize && _this.axis.y + ? targetNode.offsetHeight - _this.height + : 0, + }; + + _this.handleSortMove({ + pageX: targetPosition.left + sizeAdjustment.x, + pageY: targetPosition.top + sizeAdjustment.y, + ignoreTransition: shift === 0, + }); + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'keyDrop', + function(event) { + _this.handleSortEnd(event); + + if (_this.initialFocusedNode) { + _this.initialFocusedNode.focus(); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'handleKeyEnd', + function(event) { + if (_this.manager.active) { + _this.keyDrop(event); + } + }, + ); + + _defineProperty( + _assertThisInitialized(_assertThisInitialized(_this)), + 'isValidSortingTarget', + function(event) { + var useDragHandle = _this.props.useDragHandle; + var target = event.target; + var node = closest(target, function(el) { + return el.sortableInfo != null; + }); + return ( + node && + node.sortableInfo && + !node.sortableInfo.disabled && + (useDragHandle ? isSortableHandle(target) : target.sortableInfo) + ); + }, + ); + + validateProps(props); + _this.manager = new Manager(); + _this.events = { + end: _this.handleEnd, + move: _this.handleMove, + start: _this.handleStart, + }; + return _this; + } + + _createClass(WithSortableContainer, [ + { + key: 'getChildContext', + value: function getChildContext() { + return { + manager: this.manager, + }; + }, + }, + { + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + var useWindowAsScrollContainer = this.props + .useWindowAsScrollContainer; + var container = this.getContainer(); + Promise.resolve(container).then(function(containerNode) { + _this2.container = containerNode; + _this2.document = _this2.container.ownerDocument || document; + var contentWindow = + _this2.props.contentWindow || + _this2.document.defaultView || + window; + _this2.contentWindow = + typeof contentWindow === 'function' + ? contentWindow() + : contentWindow; + _this2.scrollContainer = useWindowAsScrollContainer + ? _this2.document.scrollingElement || + _this2.document.documentElement + : getScrollingParent( + _this2.container, + _this2.props.scrollContainer, + ) || _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, + ); + }); + }); + + _this2.container.addEventListener( + 'keydown', + _this2.handleKeyDown, + ); + }); + }, + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + var _this3 = this; + + if (this.helper && this.helper.parentNode) { + this.helper.parentNode.removeChild(this.helper); + } + + if (!this.container) { + return; + } + + Object.keys(this.events).forEach(function(key) { + return events[key].forEach(function(eventName) { + return _this3.container.removeEventListener( + eventName, + _this3.events[key], + ); + }); + }); + this.container.removeEventListener('keydown', this.handleKeyDown); + }, + }, + { + key: 'updateHelperPosition', + value: function updateHelperPosition(event) { + var _this$props6 = this.props, + lockAxis = _this$props6.lockAxis, + lockOffset = _this$props6.lockOffset, + lockToContainerEdges = _this$props6.lockToContainerEdges, + transitionDuration = _this$props6.transitionDuration, + _this$props6$keyboard = + _this$props6.keyboardSortingTransitionDuration, + keyboardSortingTransitionDuration = + _this$props6$keyboard === void 0 + ? transitionDuration + : _this$props6$keyboard; + var isKeySorting = this.manager.isKeySorting; + var ignoreTransition = event.ignoreTransition; + var offset = getPosition(event); + var translate = { + x: offset.x - this.initialOffset.x, + y: offset.y - this.initialOffset.y, + }; + translate.y -= window.pageYOffset - this.initialWindowScroll.top; + translate.x -= window.pageXOffset - this.initialWindowScroll.left; + this.translate = translate; + + if (lockToContainerEdges) { + var _getLockPixelOffsets = getLockPixelOffsets({ + height: this.height, + lockOffset: lockOffset, + width: this.width, + }), + _getLockPixelOffsets2 = _slicedToArray(_getLockPixelOffsets, 2), + minLockOffset = _getLockPixelOffsets2[0], + maxLockOffset = _getLockPixelOffsets2[1]; + + var minOffset = { + x: this.width / 2 - minLockOffset.x, + y: this.height / 2 - minLockOffset.y, + }; + var maxOffset = { + x: this.width / 2 - maxLockOffset.x, + y: this.height / 2 - maxLockOffset.y, + }; + translate.x = limit( + this.minTranslate.x + minOffset.x, + this.maxTranslate.x - maxOffset.x, + translate.x, + ); + translate.y = limit( + this.minTranslate.y + minOffset.y, + this.maxTranslate.y - maxOffset.y, + translate.y, + ); + } + + if (lockAxis === 'x') { + translate.y = 0; + } else if (lockAxis === 'y') { + translate.x = 0; + } + + if ( + isKeySorting && + keyboardSortingTransitionDuration && + !ignoreTransition + ) { + setTransitionDuration( + this.helper, + keyboardSortingTransitionDuration, + ); + } + + setTranslate3d(this.helper, translate); + }, + }, + { + key: 'animateNodes', + value: function animateNodes() { + var _this$props7 = this.props, + transitionDuration = _this$props7.transitionDuration, + hideSortableGhost = _this$props7.hideSortableGhost, + onSortOver = _this$props7.onSortOver; + var containerScrollDelta = this.containerScrollDelta, + windowScrollDelta = this.windowScrollDelta; + var nodes = this.manager.getOrderedRefs(); + var sortingOffset = { + left: + this.offsetEdge.left + + this.translate.x + + containerScrollDelta.left, + top: + this.offsetEdge.top + + this.translate.y + + containerScrollDelta.top, + }; + var isKeySorting = this.manager.isKeySorting; + var prevIndex = this.newIndex; + this.newIndex = null; + + for (var i = 0, len = nodes.length; i < len; i++) { + var _node3 = nodes[i].node; + var index = _node3.sortableInfo.index; + + var width = _node3.getBoundingClientRect().width; + + var height = _node3.getBoundingClientRect().height; + + var offset = { + height: this.height > height ? height / 2 : this.height / 2, + width: this.width > width ? width / 2 : this.width / 2, + }; + var mustShiftBackward = + isKeySorting && index > this.index && index <= prevIndex; + var mustShiftForward = + isKeySorting && index < this.index && index >= prevIndex; + var translate = { + x: 0, + y: 0, + }; + var edgeOffset = nodes[i].edgeOffset; + + if (!edgeOffset) { + edgeOffset = getEdgeOffset(_node3, this.container); + nodes[i].edgeOffset = edgeOffset; + + if (isKeySorting) { + nodes[ + i + ].boundingClientRect = getScrollAdjustedBoundingClientRect( + _node3, + containerScrollDelta, + ); + } + } + + var nextNode = i < nodes.length - 1 && nodes[i + 1]; + var prevNode = i > 0 && nodes[i - 1]; + + if (nextNode && !nextNode.edgeOffset) { + nextNode.edgeOffset = getEdgeOffset( + nextNode.node, + this.container, + ); + + if (isKeySorting) { + nextNode.boundingClientRect = getScrollAdjustedBoundingClientRect( + nextNode.node, + containerScrollDelta, + ); + } + } + + if (index === this.index) { + if (hideSortableGhost) { + this.sortableGhost = _node3; + setInlineStyles(_node3, { + opacity: 0, + }); + } + + continue; + } + + if (transitionDuration) { + setTransitionDuration(_node3, transitionDuration); + } + + if (this.axis.x) { + if (this.axis.y) { + if ( + mustShiftForward || + (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; + + if ( + edgeOffset.left + translate.x > + this.containerBoundingRect.width - offset.width + ) { + if (nextNode) { + translate.x = + nextNode.edgeOffset.left - edgeOffset.left; + translate.y = nextNode.edgeOffset.top - edgeOffset.top; + } + } + + if (this.newIndex === null) { + this.newIndex = index; + } + } else if ( + mustShiftBackward || + (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); + + if ( + edgeOffset.left + translate.x < + this.containerBoundingRect.left + offset.width + ) { + if (prevNode) { + translate.x = + prevNode.edgeOffset.left - edgeOffset.left; + translate.y = prevNode.edgeOffset.top - edgeOffset.top; + } + } + + this.newIndex = index; + } + } else { + if ( + mustShiftBackward || + (index > this.index && + sortingOffset.left + + windowScrollDelta.left + + offset.width >= + edgeOffset.left) + ) { + translate.x = -(this.width + this.marginOffset.x); + this.newIndex = index; + } else if ( + mustShiftForward || + (index < this.index && + sortingOffset.left + windowScrollDelta.left <= + edgeOffset.left + offset.width) + ) { + translate.x = this.width + this.marginOffset.x; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + } else if (this.axis.y) { + if ( + mustShiftBackward || + (index > this.index && + sortingOffset.top + + windowScrollDelta.top + + this.boundingClientRect.height >= + edgeOffset.top + offset.height) + ) { + translate.y = -(this.height + this.marginOffset.y); + this.newIndex = index; + } else if ( + mustShiftForward || + (index < this.index && + sortingOffset.top + windowScrollDelta.top <= + edgeOffset.top + offset.height) + ) { + translate.y = this.height + this.marginOffset.y; + + if (this.newIndex == null) { + this.newIndex = index; + } + } + } + + setTranslate3d(_node3, translate); + nodes[i].translate = translate; + } + + if (this.newIndex == null) { + this.newIndex = this.index; + } + + if (isKeySorting) { + this.newIndex = prevIndex; + } + + var oldIndex = isKeySorting ? this.prevIndex : prevIndex; + + if (onSortOver && this.newIndex !== oldIndex) { + onSortOver({ + collection: this.manager.active.collection, + index: this.index, + newIndex: this.newIndex, + oldIndex: oldIndex, + isKeySorting: isKeySorting, + nodes: nodes, + helper: this.helper, + }); + } + }, + }, + { + 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 SortableContainer() call', + ); + return this.refs.wrappedInstance; + }, + }, + { + key: 'getContainer', + value: function getContainer() { + var getContainer = this.props.getContainer; + + if (typeof getContainer !== 'function') { + return reactDom.findDOMNode(this); + } + + return getContainer( + config.withRef ? this.getWrappedInstance() : undefined, + ); + }, + }, + { + key: 'render', + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement( + WrappedComponent, + _extends( + { + ref: ref, + }, + omit(this.props, omittedProps), + ), + ); + }, + }, + { + key: 'helperContainer', + get: function get() { + var helperContainer = this.props.helperContainer; + + if (typeof helperContainer === 'function') { + return helperContainer(); + } + + return this.props.helperContainer || this.document.body; + }, + }, + { + key: 'containerScrollDelta', + get: function get() { + var useWindowAsScrollContainer = this.props + .useWindowAsScrollContainer; + + if (useWindowAsScrollContainer) { + return { + left: 0, + top: 0, + }; + } + + return { + left: this.scrollContainer.scrollLeft - this.initialScroll.left, + top: this.scrollContainer.scrollTop - this.initialScroll.top, + }; + }, + }, + { + key: 'windowScrollDelta', + get: function get() { + return { + left: + this.contentWindow.pageXOffset - this.initialWindowScroll.left, + top: + this.contentWindow.pageYOffset - this.initialWindowScroll.top, + }; + }, + }, + ]); + + return WithSortableContainer; + })(React.Component)), + _defineProperty( + _class, + 'displayName', + provideDisplayName('sortableList', WrappedComponent), + ), + _defineProperty(_class, 'defaultProps', defaultProps), + _defineProperty(_class, 'propTypes', propTypes), + _defineProperty(_class, 'childContextTypes', { + manager: PropTypes.object.isRequired, + }), + _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) { + var _class, _temp; + + var config = + arguments.length > 1 && arguments[1] !== undefined + ? arguments[1] + : { + withRef: false, + }; + return ( + (_temp = _class = (function(_React$Component) { + _inherits(WithSortableElement, _React$Component); + + function WithSortableElement() { + _classCallCheck(this, WithSortableElement); + + return _possibleConstructorReturn( + this, + _getPrototypeOf(WithSortableElement).apply(this, arguments), + ); + } + + _createClass(WithSortableElement, [ + { + key: 'componentDidMount', + value: function componentDidMount() { + this.register(); + }, + }, + { + key: 'componentDidUpdate', + value: function componentDidUpdate(prevProps) { + if (this.node) { + if (prevProps.index !== this.props.index) { + this.node.sortableInfo.index = this.props.index; + } + + if (prevProps.disabled !== this.props.disabled) { + this.node.sortableInfo.disabled = this.props.disabled; + } + } + + if (prevProps.collection !== this.props.collection) { + this.unregister(prevProps.collection); + this.register(); + } + }, + }, + { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + this.unregister(); + }, + }, + { + key: 'register', + value: function register() { + var _this$props = this.props, + collection = _this$props.collection, + disabled = _this$props.disabled, + index = _this$props.index; + var node = reactDom.findDOMNode(this); + node.sortableInfo = { + collection: collection, + disabled: disabled, + index: index, + manager: this.context.manager, + }; + this.node = node; + this.ref = { + node: node, + }; + this.context.manager.add(collection, this.ref); + }, + }, + { + key: 'unregister', + value: function unregister() { + var collection = + arguments.length > 0 && arguments[0] !== undefined + ? arguments[0] + : this.props.collection; + this.context.manager.remove(collection, this.ref); + }, + }, + { + 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 SortableElement() call', + ); + return this.refs.wrappedInstance; + }, + }, + { + key: 'render', + value: function render() { + var ref = config.withRef ? 'wrappedInstance' : null; + return React.createElement( + WrappedComponent, + _extends( + { + ref: ref, + }, + omit(this.props, omittedProps$1), + ), + ); + }, + }, + ]); + + return WithSortableElement; + })(React.Component)), + _defineProperty( + _class, + 'displayName', + provideDisplayName('sortableElement', WrappedComponent), + ), + _defineProperty(_class, 'contextTypes', { + manager: PropTypes.object.isRequired, + }), + _defineProperty(_class, 'propTypes', propTypes$1), + _defineProperty(_class, 'defaultProps', { + collection: 0, + }), + _temp + ); +} + +exports.SortableContainer = sortableContainer; +exports.sortableContainer = sortableContainer; +exports.SortableElement = sortableElement; +exports.sortableElement = sortableElement; +exports.SortableHandle = sortableHandle; +exports.sortableHandle = sortableHandle; +exports.arrayMove = arrayMove;