react-sortable-hoc - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

CHANGELOG.md

@@ -5,2 +5,10 @@ # Change Log
 
+<a name="1.5.1"></a>
+
+## [1.5.1](https://github.com/clauderic/react-sortable-hoc/compare/v1.5.0...v1.5.1) (2019-01-22)
+
+### Bug Fixes
+
+- 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))
+
 <a name="1.5.0"></a>
@@ -7,0 +15,0 @@

dist/react-sortable-hoc.esm.js

@@ -903,2 +903,8 @@ import _extends from '@babel/runtime/helpers/esm/extends';
       get: function get() {
+        var helperContainer = this.props.helperContainer;
+
+        if (typeof helperContainer === 'function') {
+          return helperContainer();
+        }
+
         return this.props.helperContainer || this.document.body;
@@ -957,3 +963,3 @@ }
     getHelperDimensions: PropTypes.func,
-    helperContainer: typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)
+    helperContainer: PropTypes.oneOfType(PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement))
   }), _defineProperty(_class, "childContextTypes", {
@@ -960,0 +966,0 @@ manager: PropTypes.object.isRequired

dist/react-sortable-hoc.js

@@ -909,2 +909,8 @@ 'use strict';
       get: function get() {
+        var helperContainer = this.props.helperContainer;
+
+        if (typeof helperContainer === 'function') {
+          return helperContainer();
+        }
+
         return this.props.helperContainer || this.document.body;
@@ -963,3 +969,3 @@ }
     getHelperDimensions: PropTypes.func,
-    helperContainer: typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)
+    helperContainer: PropTypes.oneOfType(PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement))
   }), _defineProperty(_class, "childContextTypes", {
@@ -966,0 +972,0 @@ manager: PropTypes.object.isRequired

dist/react-sortable-hoc.umd.js

@@ -1172,2 +1172,8 @@ (function (global, factory) {
 	      get: function get() {
+	        var helperContainer = this.props.helperContainer;
+
+	        if (typeof helperContainer === 'function') {
+	          return helperContainer();
+	        }
+
 	        return this.props.helperContainer || this.document.body;
@@ -1226,3 +1232,3 @@ }
 	    getHelperDimensions: PropTypes.func,
-	    helperContainer: typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement)
+	    helperContainer: PropTypes.oneOfType(PropTypes.func, typeof HTMLElement === 'undefined' ? PropTypes.any : PropTypes.instanceOf(HTMLElement))
 	  }), defineProperty(_class, "childContextTypes", {
@@ -1229,0 +1235,0 @@ manager: PropTypes.object.isRequired

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

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

package.json

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

README.md

@@ -100,25 +100,25 @@ # React Sortable (HOC)
 
-| Property                   | Type                                                  | Default                                                                                                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| :------------------------- | :---------------------------------------------------- | :--------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| axis                       | String                                                | `y`                                                                                                        | Items can be sorted horizontally, vertically or in a grid. Possible values: `x`, `y` or `xy`                                                                                                                                                                                                                                                                                                                                                                           |
-| lockAxis                   | String                                                |                                                                                                            | If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop. Possible values: `x` or `y`.                                                                                                                                                                                                                                                                                                             |
-| helperClass                | String                                                |                                                                                                            | You can provide a class you'd like to add to the sortable helper to add some styles to it                                                                                                                                                                                                                                                                                                                                                                              |
-| transitionDuration         | Number                                                | `300`                                                                                                      | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions                                                                                                                                                                                                                                                                                                                                                     |
-| pressDelay                 | Number                                                | `0`                                                                                                        | If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the `distance` prop.                                                                                                                                                                                                                                                |
-| pressThreshold             | Number                                                | `5`                                                                                                        | Number of pixels of movement to tolerate before ignoring a press event.                                                                                                                                                                                                                                                                                                                                                                                                |
-| distance                   | Number                                                | `0`                                                                                                        | If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop.                                                                                                                                                                                                                                                                                                               |
-| shouldCancelStart          | Function                                              | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48) | This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`.                                                                                                                                                                                                                                     |
-| updateBeforeSortStart      | Function                                              |                                                                                                            | This function is invoked before sorting begins. It can return a promise, allowing you to run asynchronous updates (such as `setState`) before sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                             |
-| onSortStart                | Function                                              |                                                                                                            | Callback that is invoked when sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                                                                                                                                             |
-| onSortMove                 | Function                                              |                                                                                                            | Callback that is invoked during sorting as the cursor moves. `function(event)`                                                                                                                                                                                                                                                                                                                                                                                         |
-| onSortOver                 | Function                                              |                                                                                                            | Callback that is invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                              |
-| onSortEnd                  | Function                                              |                                                                                                            | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                                            |
-| useDragHandle              | Boolean                                               | `false`                                                                                                    | If you're using the `SortableHandle` HOC, set this to `true`                                                                                                                                                                                                                                                                                                                                                                                                           |
-| useWindowAsScrollContainer | Boolean                                               | `false`                                                                                                    | If you want, you can set the `window` as the scrolling container                                                                                                                                                                                                                                                                                                                                                                                                       |
-| hideSortableGhost          | Boolean                                               | `true`                                                                                                     | Whether to auto-hide the ghost element. By default, as a convenience, React Sortable List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling.                                                                                                                                                                                                                                           |
-| lockToContainerEdges       | Boolean                                               | `false`                                                                                                    | You can lock movement of the sortable element to it's parent `SortableContainer`                                                                                                                                                                                                                                                                                                                                                                                       |
-| lockOffset                 | `OffsetValue`\* \| [`OffsetValue`\*, `OffsetValue`\*] | `"50%"`                                                                                                    | When `lockToContainerEdges` is set to `true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent `SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the _top_ of the container vs the _bottom_, you may also pass in an `array` (For example: `["0%", "100%"]`).                                      |
-| getContainer               | Function                                              |                                                                                                            | Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. |
-| getHelperDimensions        | Function                                              | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L58) | Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See [default implementation](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L58) for more details                                                                                                                                                                                                         |
-| helperContainer            | HTMLElement                                           | `document.body`                                                                                            | By default, the cloned sortable helper is appended to the document body. Use this prop to specify a different container for the sortable clone to be appended to                                                                                                                                                                                                                                                                                                       |
+| Property                   | Type                                                  | Default                                                                                                        | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| :------------------------- | :---------------------------------------------------- | :------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| axis                       | String                                                | `y`                                                                                                            | Items can be sorted horizontally, vertically or in a grid. Possible values: `x`, `y` or `xy`                                                                                                                                                                                                                                                                                                                                                                           |
+| lockAxis                   | String                                                |                                                                                                                | If you'd like, you can lock movement to an axis while sorting. This is not something that is possible with HTML5 Drag & Drop. Possible values: `x` or `y`.                                                                                                                                                                                                                                                                                                             |
+| helperClass                | String                                                |                                                                                                                | You can provide a class you'd like to add to the sortable helper to add some styles to it                                                                                                                                                                                                                                                                                                                                                                              |
+| transitionDuration         | Number                                                | `300`                                                                                                          | The duration of the transition when elements shift positions. Set this to `0` if you'd like to disable transitions                                                                                                                                                                                                                                                                                                                                                     |
+| pressDelay                 | Number                                                | `0`                                                                                                            | If you'd like elements to only become sortable after being pressed for a certain time, change this property. A good sensible default value for mobile is `200`. Cannot be used in conjunction with the `distance` prop.                                                                                                                                                                                                                                                |
+| pressThreshold             | Number                                                | `5`                                                                                                            | Number of pixels of movement to tolerate before ignoring a press event.                                                                                                                                                                                                                                                                                                                                                                                                |
+| distance                   | Number                                                | `0`                                                                                                            | If you'd like elements to only become sortable after being dragged a certain number of pixels. Cannot be used in conjunction with the `pressDelay` prop.                                                                                                                                                                                                                                                                                                               |
+| shouldCancelStart          | Function                                              | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L48)     | This function is invoked before sorting begins, and can be used to programatically cancel sorting before it begins. By default, it will cancel sorting if the event target is either an `input`, `textarea`, `select` or `option`.                                                                                                                                                                                                                                     |
+| updateBeforeSortStart      | Function                                              |                                                                                                                | This function is invoked before sorting begins. It can return a promise, allowing you to run asynchronous updates (such as `setState`) before sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                             |
+| onSortStart                | Function                                              |                                                                                                                | Callback that is invoked when sorting begins. `function({node, index, collection}, event)`                                                                                                                                                                                                                                                                                                                                                                             |
+| onSortMove                 | Function                                              |                                                                                                                | Callback that is invoked during sorting as the cursor moves. `function(event)`                                                                                                                                                                                                                                                                                                                                                                                         |
+| onSortOver                 | Function                                              |                                                                                                                | Callback that is invoked when moving over an item. `function({index, oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                              |
+| onSortEnd                  | Function                                              |                                                                                                                | Callback that is invoked when sorting ends. `function({oldIndex, newIndex, collection}, e)`                                                                                                                                                                                                                                                                                                                                                                            |
+| useDragHandle              | Boolean                                               | `false`                                                                                                        | If you're using the `SortableHandle` HOC, set this to `true`                                                                                                                                                                                                                                                                                                                                                                                                           |
+| useWindowAsScrollContainer | Boolean                                               | `false`                                                                                                        | If you want, you can set the `window` as the scrolling container                                                                                                                                                                                                                                                                                                                                                                                                       |
+| hideSortableGhost          | Boolean                                               | `true`                                                                                                         | Whether to auto-hide the ghost element. By default, as a convenience, React Sortable List will automatically hide the element that is currently being sorted. Set this to false if you would like to apply your own styling.                                                                                                                                                                                                                                           |
+| lockToContainerEdges       | Boolean                                               | `false`                                                                                                        | You can lock movement of the sortable element to it's parent `SortableContainer`                                                                                                                                                                                                                                                                                                                                                                                       |
+| lockOffset                 | `OffsetValue`\* \| [`OffsetValue`\*, `OffsetValue`\*] | `"50%"`                                                                                                        | When `lockToContainerEdges` is set to `true`, this controls the offset distance between the sortable helper and the top/bottom edges of it's parent `SortableContainer`. Percentage values are relative to the height of the item currently being sorted. If you wish to specify different behaviours for locking to the _top_ of the container vs the _bottom_, you may also pass in an `array` (For example: `["0%", "100%"]`).                                      |
+| getContainer               | Function                                              |                                                                                                                | Optional function to return the scrollable container element. This property defaults to the `SortableContainer` element itself or (if `useWindowAsScrollContainer` is true) the window. Use this function to specify a custom container object (eg this is useful for integrating with certain 3rd party components such as `FlexTable`). This function is passed a single parameter (the `wrappedInstance` React element) and it is expected to return a DOM element. |
+| getHelperDimensions        | Function                                              | [Function](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) | Optional `function({node, index, collection})` that should return the computed dimensions of the SortableHelper. See [default implementation](https://github.com/clauderic/react-sortable-hoc/blob/master/src/SortableContainer/index.js#L74-L77) for more details                                                                                                                                                                                                     |
+| helperContainer            | HTMLElement \| Function                               | `document.body`                                                                                                | By default, the cloned sortable helper is appended to the document body. Use this prop to specify a different container for the sortable clone to be appended to. Accepts an `HTMLElement` or a function returning an `HTMLElement` that will be invoked before right before sorting begins                                                                                                                                                                            |
 
@@ -125,0 +125,0 @@ \* `OffsetValue` can either be a finite `Number` or a `String` made up of a number and a unit (`px` or `%`).

types/index.d.ts

@@ -46,2 +46,4 @@ import * as React from 'react';
 
+export type HelperContainerGetter = () => HTMLElement;
+
 export interface Dimensions {
@@ -73,3 +75,3 @@ width: number;
   getHelperDimensions?: (sort: SortStart) => Dimensions;
-  helperContainer?: HTMLElement;
+  helperContainer?: HTMLElement | HelperContainerGetter;
 }
@@ -76,0 +78,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

655390

increased by0.18%

Lines of code

3691

increased by0.35%

No dependency changes