react-virtual-drag-list - npm Package Compare versions

Comparing version 2.4.3 to 2.4.4

dist/draglist.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).VirtualDragList={},t.React)}(this,function(t,ft){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}function n(n){if(n&&n.__esModule)return n;var o=Object.create(null);return n&&Object.keys(n).forEach(function(t){var e;"default"!==t&&(e=Object.getOwnPropertyDescriptor(n,t),Object.defineProperty(o,t,e.get?e:{enumerable:!0,get:function(){return n[t]}}))}),o.default=n,Object.freeze(o)}var l=n(ft),gt=e(ft);class pt{from;to;constructor(){this.from={key:null,item:null,index:-1},this.to={key:null,item:null,index:-1}}}class o{average;total;fixed;header;footer;constructor(){this.average=void 0,this.total=void 0,this.fixed=void 0,this.header=void 0,this.footer=void 0}}class mt{start;end;front;behind;constructor(){this.start=0,this.end=0,this.front=0,this.behind=0}}function c(t){const{dataKey:e,children:n,onSizeChange:o}=t,i=l.useRef(null);t="function"==typeof n?n(i):n;return l.useLayoutEffect(()=>{let t;return t=new ResizeObserver(()=>{var t=i.current.clientHeight;o&&o(e,t)}),i.current&&t.observe(i.current),()=>{t&&(t.disconnect(),t=null)}},[i]),l.cloneElement(t,{ref:i})}function vt(t){const{children:e,dataKey:n,Class:o,Style:i,Tag:r="div"}=t;var{record:t,index:s,onSizeChange:a}=t;return l.createElement(c,{dataKey:n,onSizeChange:a},l.createElement(r,{className:o,style:i,"data-key":n},"function"==typeof e?e(t,s,n):e))}function yt(t){var{Tag:t="div",Style:e,Class:n,children:o,roleId:i,onSizeChange:r}=t;return o?l.createElement(c,{dataKey:i,onSizeChange:r},l.createElement(t,{"v-role":i,style:e,className:n},o)):l.createElement(l.Fragment,null)}function St(n,o=50,i=!1){let r,s;function t(...t){var e;return r&&clearTimeout(r),i?(e=!r,r=setTimeout(()=>{r=null},o),e&&(s=n.apply(this,t))):r=setTimeout(()=>{n.apply(this,t)},o),s}return t.prototype.cancel=function(){clearTimeout(r),r=null},t}(function(t){function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function r(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function s(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}()||function(t){if(t){if("string"==typeof t)return a(t,void 0);var e=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(e="Object"===e&&t.constructor?t.constructor.name:e)||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?a(t,void 0):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function e(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}function l(e,n){n?"none"===n?_.forEach(function(t){return y(e,t,"none")}):_.forEach(function(t){return y(e,t,"".concat(t.split("transition")[0],"transform ").concat(n))}):_.forEach(function(t){return y(e,t,"")})}function c(e,n){n?M.forEach(function(t){return y(e,t,"".concat(t.split("transform")[0]).concat(n))}):M.forEach(function(t){return y(e,t,"")})}function h(t,e,n){window.addEventListener?t.addEventListener(e,n,!(!k&&x)&&z):window.attachEvent&&t.attachEvent("on"+e,n)}function u(t,e,n){window.removeEventListener?t.removeEventListener(e,n,!(!k&&x)&&z):window.detachEvent&&t.detachEvent("on"+e,n)}function d(t){for(var e={top:0,left:0,height:0,width:0},n=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==n;)e.top+=n.offsetTop,e.left+=n.offsetLeft,n=n.offsetParent;return e}function f(t,e){if(!t||!t.getBoundingClientRect)return g();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=y(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return g();if(o||e)return n;o=!0}}}while(n=n.parentNode);return g()}function g(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function m(t){var e;if(t.getBoundingClientRect||t===window)return e={top:0,left:0,bottom:0,right:0,height:0,width:0},t!==window&&t.parentNode&&t!==g()?(t=t.getBoundingClientRect(),e.top=t.top,e.left=t.left,e.bottom=t.bottom,e.right=t.right,e.height=t.height,e.width=t.width):(e.top=0,e.left=0,e.bottom=window.innerHeight,e.right=window.innerWidth,e.height=window.innerHeight,e.width=window.innerWidth),e}function p(t,n,e){var o=s(Array.from(t.children));if(-1<(t=o.indexOf(n)))return e?o[t]:{index:t,el:o[t],rect:m(o[t]),offset:d(o[t])};for(var i=0;i<o.length;i++)if(function(t){var e;if(n&&t)for(e=n.parentNode;e;){if(t===e)return 1;e=e.parentNode}}(o[i]))return e?o[i]:{index:i,el:o[i],rect:m(o[i]),offset:d(o[i])};return e?null:{index:-1,el:null,rect:{},offset:{}}}function v(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(C," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(C," ")))}function y(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=e in o||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}}function S(n,o,i){var r=null;return function(){var t=this,e=arguments;r&&clearTimeout(r),i&&!r&&n.apply(t,e),r=setTimeout(function(){n.apply(t,e)},o)}}function b(n,o){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,n.apply(t,e)},o)}}function E(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.rootEl=t,this.scrollEl=f(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var n,i,o={autoScroll:!0,scrollStep:5,scrollThreshold:15,delay:0,delayOnTouchOnly:!1,disabled:!1,animation:150,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:void 0,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,fallbackOnBody:!1,forceFallback:!1,stopPropagation:!1,supportPointer:"PointerEvent"in window&&!D,supportTouch:"ontouchstart"in window};for(n in o)n in this.options||(this.options[n]=o[n]);this.container=this.options.fallbackOnBody?document.body:this.rootEl,this.nativeDraggable=!this.options.forceFallback&&K,this.move={x:0,y:0},this.state=new O,this.differ=new $,this.ghost=new B(this),this.dragEl=null,this.dropEl=null,this.dragStartTimer=null,this.autoScrollTimer=null,Object.assign(this,(i=[],{captureAnimationState:function(){var t=s(Array.from(this.rootEl.children)),e=(o=this.dragEl,e=this.dropEl,(o=(n=t).indexOf(o))<(n=n.indexOf(e))?{start:o,end:n}:{start:n,end:o}),n=e.start,o=e.end;i.length=0,t.slice(n,o+1).forEach(function(t){i.push({target:t,rect:m(t)})})},animateRange:function(){var n=this;i.forEach(function(t){var e=t.target,t=t.rect;n.animate(e,t,n.options.animation)})},animate:function(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,o=m(t),i=e.left-o.left,e=e.top-o.top;l(t,"none"),c(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,l(t,"".concat(n,"ms")),c(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){l(t,""),c(t,""),t.animated=null},n)}}),{_bindEventListener:function(){var t=(e=this.options).supportPointer,e=e.supportTouch;h(this.rootEl,t?"pointerdown":e?"touchstart":"mousedown",this._onStart)},_unbindEventListener:function(){u(this.rootEl,"pointerdown",this._onStart),u(this.rootEl,"touchstart",this._onStart),u(this.rootEl,"mousedown",this._onStart)},_bindMoveEvents:function(t){this.options.supportPointer?h(this.ownerDocument,"pointermove",this._onMove):h(this.ownerDocument,t?"touchmove":"mousemove",this._onMove)},_bindUpEvents:function(){h(this.ownerDocument,"pointerup",this._onDrop),h(this.ownerDocument,"pointercancel",this._onDrop),h(this.ownerDocument,"touchend",this._onDrop),h(this.ownerDocument,"touchcancel",this._onDrop),h(this.ownerDocument,"mouseup",this._onDrop)},_unbindMoveEvents:function(){u(this.ownerDocument,"pointermove",this._onMove),u(this.ownerDocument,"touchmove",this._onMove),u(this.ownerDocument,"mousemove",this._onMove)},_unbindUpEvents:function(){u(this.ownerDocument,"pointerup",this._onDrop),u(this.ownerDocument,"pointercancel",this._onDrop),u(this.ownerDocument,"touchend",this._onDrop),u(this.ownerDocument,"touchcancel",this._onDrop),u(this.ownerDocument,"mouseup",this._onDrop)}}),this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this),this._bindEventListener(),window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)})}var w,x,T,D,I,z,C,_,M,k,O,$,B,K;t.exports=(x=e(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),T=e(/Edge/i),D=e(/safari/i)&&!e(/chrome/i)&&!e(/android/i),t=e(/iP(ad|od|hone)/i),I=e(/chrome/i)&&e(/android/i),z={capture:!1,passive:!1},C=/\s+/g,_=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],w=!(M=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"]),document.addEventListener("checkIfSupportPassive",null,{get passive(){return w=!0}}),k=w,O=r(function t(){n(this,t),this.sortableDown=void 0,this.sortableMove=void 0,this.animationEnd=void 0}),$=function(){function t(){n(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return r(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}}]),t}(),B=function(){function e(t){n(this,e),this.$el=null,this.distance={x:0,y:0},this.options=t.options,this.container=t.container}return r(e,[{key:"init",value:function(t,e){this.$el=t;var n=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t;v(this.$el,n,!0),y(this.$el,"box-sizing","border-box"),y(this.$el,"margin",0),y(this.$el,"top",e.top),y(this.$el,"left",e.left),y(this.$el,"width",e.width),y(this.$el,"height",e.height),y(this.$el,"opacity","0.8"),y(this.$el,"position","fixed"),y(this.$el,"zIndex","100000"),y(this.$el,"pointerEvents","none"),this.setStyle(t),l(this.$el,"none"),c(this.$el,"translate3d(0px, 0px, 0px)"),this.container.appendChild(this.$el),y(this.$el,"transform-origin",this.distance.x/parseInt(this.$el.style.width)*100+"% "+this.distance.y/parseInt(this.$el.style.height)*100+"%")}},{key:"setStyle",value:function(t){for(var e in t)y(this.$el,e,t[e])}},{key:"rect",value:function(){return m(this.$el)}},{key:"move",value:function(t,e){this.$el&&(l(this.$el,2<arguments.length&&void 0!==arguments[2]&&arguments[2]?"".concat(this.options.ghostAnimation,"ms"):"none"),c(this.$el,"translate3d(".concat(t,"px, ").concat(e,"px, 0)")))}},{key:"destroy",value:function(t){var e,n,o=this;this.$el&&(n=parseInt(this.$el.style.left),e=parseInt(this.$el.style.top),this.move(t.left-n,t.top-e,!0),(n=this.options.ghostAnimation)?setTimeout(function(){return o.clear()},n):this.clear())}},{key:"clear",value:function(){this.$el&&this.$el.remove(),this.distance={x:0,y:0},this.$el=null}}]),e}(),K="undefined"!=typeof document&&!I&&!t&&"draggable"in document.createElement("div"),E.prototype={constructor:E,destroy:function(){this._unbindEventListener(),this._clearState()},set:function(t,e){this.options[t]=e},get:function(t){return this.options[t]},_onStart:function(t){var e=this;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||this.options.disabled)){var n=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,o=n||t;if(this.nativeDraggable||!D||!o.target||"SELECT"!==o.target.tagName.toUpperCase()){if(o.target===this.rootEl)return!0;this.options.stopPropagation&&t.stopPropagation();var i=(t=this.options).delay,t=t.delayOnTouchOnly;!i||t&&!n||this.nativeDraggable&&(T||x)?this._onDrag(o,n):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onDrag(o,n)},i))}}},_onDrag:function(t,e){var n=(o=this.options).draggable,o=o.dragging;if("function"==typeof n){if(!n(t))return!0}else if("string"==typeof n){if(!function(t,e){if(e&&(">"===e[0]&&(e=e.substring(1)),t))try{return t.matches?t.matches(e):t.msMatchesSelector?t.msMatchesSelector(e):t.webkitMatchesSelector&&t.webkitMatchesSelector(e)}catch(t){return}}(t.target,n))return!0}else if(void 0!==n)throw new Error('draggable expected "function" or "string" but received "'.concat(i(n),'"'));if(this._removeSelection(),o){if("function"!=typeof o)throw new Error('dragging expected "function" or "string" but received "'.concat(i(o),'"'));this.dragEl=o(t)}else this.dragEl=p(this.rootEl,t.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;o=(n=p(this.rootEl,this.dragEl)).rect,n=n.offset,this.move={x:t.clientX,y:t.clientY},this.differ.from={node:this.dragEl,rect:o,offset:n},this.ghost.distance={x:t.clientX-o.left,y:t.clientY-o.top},this.state.sortableDown=t,this._bindMoveEvents(e),this._bindUpEvents(e)},_onStarted:function(t,e){var n;this.ghost.$el||(n=this.differ.from.rect,this.ghost.init(this.dragEl.cloneNode(!0),n),v(this.dragEl,this.options.chosenClass,!0),this.dragEl.style["touch-action"]="none",this.dragEl.style["will-change"]="transform",(n=this.options.onDrag)&&"function"==typeof n&&n(this.dragEl,t,e),D&&y(document.body,"user-select","none"))},_onMove:function(t){var e,n,o,i,r,s,a,l,c=this;this.state.sortableDown&&(n=(e=(i=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t)||t).clientX,o=e.clientY,i=i?document.elementFromPoint(n,o):e.target,s=n-this.move.x,r=o-this.move.y,void 0!==n&&Math.abs(s)<=0&&void 0!==o&&Math.abs(r)<=0||(this.state.sortableMove=e,this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),this._onStarted(e,t),this.ghost.move(s,r),(s=this.options.onMove)&&"function"==typeof s&&s(this.differ.from,this.ghost.$el,e,t),n<0||o<0||(s=(r=m(this.rootEl)).top,a=r.right,l=r.bottom,n<r.left||a<n||o<s||l<o||(this._onChange(this,i,e,t),this.autoScrollTimer&&clearTimeout(this.autoScrollTimer),this.options.autoScroll&&(this.autoScrollTimer=setTimeout(function(){return c._autoScroll(c)},0))))))},_onChange:S(function(t,e,n,o){var i,r,s,a,l,c,h=(e=p(t.rootEl,e)).el,u=e.rect,e=e.offset;h&&!h.animated&&(t.dropEl=h,c=n.clientX,i=n.clientY,l=u.left,r=u.right,s=u.top,a=u.bottom,l<c&&c<r&&s<i&&i<a&&h!==t.dragEl&&(t.differ.to={node:t.dropEl,rect:u,offset:e},t.captureAnimationState(),l=t.options.onChange,c=d(t.dragEl),l&&"function"==typeof l&&l(t.differ.from,t.differ.to,n,o),c.top<e.top||c.left<e.left?t.rootEl.insertBefore(t.dragEl,h.nextElementSibling):t.rootEl.insertBefore(t.dragEl,h),t.animateRange()))},5),_onDrop:function(t){var e,n,o;this._unbindMoveEvents(),this._unbindUpEvents(),clearTimeout(this.dragStartTimer),this.options.stopPropagation&&t.stopPropagation(),t.cancelable&&t.preventDefault(),v(this.dragEl,this.options.chosenClass,!1),this.dragEl.style["touch-action"]="",this.dragEl.style["will-change"]="",this.state.sortableDown&&this.state.sortableMove&&(this.differ.to.offset=d(this.dragEl),this.differ.to.rect=m(this.dragEl),n=(e=this.differ).from,e=e.to,n=n.offset.top!==e.offset.top||n.offset.left!==e.offset.left,(o=this.options.onDrop)&&"function"==typeof o&&o(n,t),this.ghost.destroy(e.rect)),this.differ.destroy(),this.state=new O,D&&y(document.body,"user-select","")},_autoScroll:b(function(t){var e,n,o,i,r,s,a,l,c,h,u,d,f,g,p;t.state.sortableDown&&t.state.sortableMove&&(e=(n=t.state.sortableMove).clientX,n=n.clientY,void 0!==e&&void 0!==n&&t.scrollEl!==t.ownerDocument&&(o=(g=t.scrollEl).scrollTop,i=g.scrollLeft,r=g.scrollHeight,g=g.scrollWidth,s=(f=m(t.scrollEl)).top,u=f.right,a=f.bottom,d=f.left,l=f.height,f=f.width,c=(h=t.options).scrollStep,h=h.scrollThreshold,d=0<i&&d<=e&&e<=d+h,f=i+f<g&&e<=u&&u-h<=e,g=o+l<r&&n<=a&&a-h<=n,p={x:i,y:o},(u=0<o&&s<=n&&n<=s+h)?(p.x=d?i-c:f?i+c:i,p.y=o-c):g?(p.x=d?i-c:f?i+c:i,p.y=o+c):d?(p.x=i-c,p.y=o):f&&(p.x=i+c,p.y=o),(u||d||f||g)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(p.x,p.y),t._autoScroll(t)})))},10),_removeSelection:function(){try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_clearState:function(){this.dragEl=null,this.dropEl=null,this.state=new O,this.ghost.destroy(),this.differ.destroy()}},E.utils={getRect:m,getOffset:d,debounce:S,throttle:b,getParentAutoScrollElement:f},E)})(s={exports:{}});var u=s.exports;class bt{getKey;onDrag;onDrop;dragState;dragElement;drag;options;dataSource;rangeIsChanged;constructor(t,e,n){this.options=t,this.onDrag=e,this.onDrop=n,this.getKey=t.getKey,this.dragState=new pt,this.dataSource=t.dataSource,this.rangeIsChanged=!1,this.init()}set(t,e){this[t]=e}setOption(t,e){this.options[t]=e,this.drag.set(t,e)}init(){var{disabled:t,dragging:e,draggable:n,ghostClass:o,ghostStyle:i,chosenClass:r,animation:s,autoScroll:a,scrollStep:l,scrollThreshold:c}=this.options;let h=new Array;this.drag=new u(this.options.scrollEl,{disabled:t,dragging:e,draggable:n,ghostClass:o,ghostStyle:i,chosenClass:r,animation:s,autoScroll:a,scrollStep:l,scrollThreshold:c,onDrag:t=>{this.dragElement=t,h=[...this.dataSource];const e=t.getAttribute("data-key");var t=this.dataSource.findIndex(t=>this.getKey(t)==e),n=this.dataSource[t];Object.assign(this.dragState.from,{item:n,index:t,key:e}),this.rangeIsChanged=!1,this.onDrag(this.dragState.from)},onChange:(t,e)=>{const o=this.dragState.from.key,i=e.node.getAttribute("data-key"),r={item:null,index:-1},s={item:null,index:-1};h.forEach((t,e)=>{var n=this.getKey(t);n==o&&Object.assign(r,{item:t,index:e}),n==i&&Object.assign(s,{item:t,index:e})}),h.splice(r.index,1),h.splice(s.index,0,r.item)},onDrop:t=>{this.rangeIsChanged&&this.dragElement&&this.dragElement.remove();const e=this.dragState["from"];var n=h.findIndex(t=>this.getKey(t)==e.key),o=this.dataSource[n];this.dragState.to={item:o,index:n,key:this.getKey(o)},this.onDrop(h,e,this.dragState.to,t),this.dataSource=[...h],this.clear()}})}clear(){this.dragElement=null,this.rangeIsChanged=!1,this.dragState=new pt}destroy(){this.drag&&this.drag.destroy(),this.drag=null}}const a={INIT:"INIT",FIXED:"FIXED",DYNAMIC:"DYNAMIC"},i={FRONT:"FRONT",BEHIND:"BEHIND"};class Et{options;callback;sizes;isHorizontal;calcIndex;calcType;calcSize;range;direction;offset;constructor(t,e){this.options={...t},this.callback=e,this.sizes=new Map,this.isHorizontal=t.isHorizontal,this.calcIndex=0,this.calcType=a.INIT,this.calcSize=new o,this.direction="",this.offset=0,this.range=new mt,t&&this.checkIfUpdate(0,t.keeps-1)}updateUniqueKeys(t){this.options.uniqueKeys=t}updateSizes(n){this.sizes.forEach((t,e)=>{n.includes(e)||this.sizes.delete(e)})}updateRange(){var t=Math.max(this.range.start,0);this.handleUpdate(t,this.getEndByStart(t))}handleScroll(t){this.direction=t<this.offset?i.FRONT:i.BEHIND,this.offset=t;t=this.getScrollItems(t);this.isFront()?this.handleScrollFront(t):this.isBehind()&&this.handleScrollBehind(t)}isFront(){return this.direction===i.FRONT}isBehind(){return this.direction===i.BEHIND}getScrollItems(t){var{fixed:e,header:n}=this.calcSize;if(n&&(t-=n),t<=0)return 0;if(this.calcType===a.FIXED)return Math.floor(t/e);let o=0,i=this.options.uniqueKeys.length;for(var r,s;o<=i;){if(r=o+Math.floor((i-o)/2),(s=this.getOffsetByIndex(r))===t)return r;s<t?o=r+1:t<s&&(i=r-1)}return 0<o?--o:0}handleScrollFront(t){t>this.range.start||(t=Math.max(t-Math.round(this.options.keeps/3),0),this.checkIfUpdate(t,this.getEndByStart(t)))}handleScrollBehind(t){t<this.range.start+Math.round(this.options.keeps/3)||this.checkIfUpdate(t,this.getEndByStart(t))}checkIfUpdate(t,e){var{uniqueKeys:n,keeps:o}=this.options;n.length<=o?(t=0,e=n.length-1):e-t<o-1&&(t=e-o+1),this.range.start!==t&&this.handleUpdate(t,e)}handleUpdate(t,e){this.range.start=t,this.range.end=e,this.range.front=this.getFrontOffset(),this.range.behind=this.getBehindOffset(),this.callback({...this.range})}getFrontOffset(){return this.calcType===a.FIXED?this.calcSize.fixed*this.range.start:this.getOffsetByIndex(this.range.start)}getBehindOffset(){var t=this.getLastIndex();return this.calcType===a.FIXED?(t-this.range.end)*this.calcSize.fixed:this.calcIndex===t?this.getOffsetByIndex(t)-this.getOffsetByIndex(this.range.end):(t-this.range.end)*this.getItemSize()}getOffsetByIndex(e){if(!e)return 0;let n=0;for(let t=0;t<e;t++){var o=this.sizes.get(this.options.uniqueKeys[t]);n+="number"==typeof o?o:this.getItemSize()}return this.calcIndex=Math.max(this.calcIndex,e-1),this.calcIndex=Math.min(this.calcIndex,this.getLastIndex()),n}getEndByStart(t){return Math.min(t+this.options.keeps-1,this.getLastIndex())}getLastIndex(){return this.options.uniqueKeys.length-1}getItemSize(){return this.calcType===a.FIXED?this.calcSize.fixed:this.calcSize.average||this.options.size}handleItemSizeChange(t,e){this.sizes.set(t,e),this.calcType===a.INIT?(this.calcType=a.FIXED,this.calcSize.fixed=e):this.calcType===a.FIXED&&this.calcSize.fixed!==e&&(this.calcType=a.DYNAMIC,this.calcSize.fixed=void 0),this.calcType!==a.FIXED&&(this.calcSize.total=[...this.sizes.values()].reduce((t,e)=>t+e,0),this.calcSize.average=Math.round(this.calcSize.total/this.sizes.size))}handleHeaderSizeChange(t){this.calcSize.header=t}handleFooterSizeChange(t){this.calcSize.footer=t}}const wt={top:"v-top",bottom:"v-bottom",dragend:"v-dragend"};function r(r,t){const{header:e,footer:n,children:i,dataSource:s=[],dataKey:o,direction:a="vertical",keeps:l=30,size:c=50,delay:h=0,autoScroll:F=!0,scrollStep:N=5,scrollThreshold:R=15,style:u={},className:L="",wrapTag:d="div",rootTag:f="div",itemTag:A="div",headerTag:P="div",footerTag:H="div",itemStyle:j={},itemClass:X="",wrapStyle:g={},wrapClass:U="",disabled:p=!1,draggable:W=void 0,dragging:q=void 0,ghostClass:Y="",ghostStyle:V={},chosenClass:G="",animation:J=150}=r,[Q,m]=ft.useState([]),v=ft.useRef([]),y=ft.useRef([]),[S,Z]=ft.useState(new mt),b=ft.useRef(null),E=ft.useRef(null),w=ft.useRef(null),x=ft.useRef(new pt),T=ft.useRef(null),D=ft.useRef(new Et({size:c,keeps:l,uniqueKeys:y.current,isHorizontal:"vertical"===a},t=>{Z(()=>t);var e=(x.current.from||{})["index"];-1<e&&!(e>=t.start&&e<=t.end)&&T.current&&T.current.set("rangeIsChanged",!0)})),I=()=>{var t=b.current;return t?Math.ceil(t[B]):0},z=t=>{b.current[B]=t},C=t=>{var e;t>=s.length-1?M():(e=D.current.getOffsetByIndex(t),z(e),setTimeout(()=>{I()!==D.current.getOffsetByIndex(t)&&C(t)},5))},_=()=>{b.current[B]=0},M=()=>{var t;w.current&&(t=w.current[nt],b.current[B]=t,setTimeout(()=>{var t=b.current;I()+Math.ceil(t[K])<Math.ceil(t[$])&&M()},5))},tt=(gt.default.useImperativeHandle(t,()=>({reset:()=>{_(),m(()=>[...s]),v.current=[...s]},getSize:t=>D.current.sizes.get(t),getOffset:I,scrollToTop:_,scrollToIndex:C,scrollToOffset:z,scrollToBottom:M})),ft.useEffect(()=>(m(()=>[...s]),v.current=[...s],k(),D.current.updateUniqueKeys(y.current),D.current.updateSizes(y.current),D.current.updateRange(),T.current&&T.current.set("dataSource",s),()=>{et()}),[s]),ft.useLayoutEffect(()=>{T.current?T.current.setOption("disabled",p):setTimeout(()=>{tt()},0)},[p]),()=>{T.current=new bt({getKey:O,scrollEl:E.current,dataSource:v.current,disabled:p,draggable:W,dragging:q,ghostStyle:V,ghostClass:Y,chosenClass:G,animation:J,autoScroll:F,scrollStep:N,scrollThreshold:R},t=>{x.current.from=t},(t,e,n,o)=>{x.current.to=n;const i=r[wt.dragend];i&&i(t,e,n,o),v.current=[...t],m(()=>[...t]),k(),setTimeout(()=>x.current=new pt,h+10)})}),et=()=>{T.current&&T.current.destroy(),T.current=null},k=()=>{y.current=v.current.map(t=>O(t))},O=gt.default.useCallback(t=>o.replace(/\[/g,".").replace(/\]/g,"").split(".").reduce((t,e)=>(t||{})[e],t),[o]),{scrollSizeKey:$,scrollDirectionKey:B,offsetSizeKey:nt,clientSizeKey:K}=gt.default.useMemo(()=>{var t="vertical"!==a;return{offsetSizeKey:t?"offsetLeft":"offsetTop",scrollSizeKey:t?"scrollWidth":"scrollHeight",clientSizeKey:t?"clientWidth":"clientHeight",scrollDirectionKey:t?"scrollLeft":"scrollTop"}},[a]);const ot=St(function(t){const e=t[wt.top];e&&e()}),it=St(function(t){const e=t[wt.bottom];e&&e()}),rt=(t,e)=>{D.current.handleItemSizeChange(t,e)};t=(t,e)=>{"header"===t&&D.current.handleHeaderSizeChange(e),"footer"===t&&D.current.handleFooterSizeChange(e)};const st=gt.default.useCallback(t=>{var e=T.current&&T.current.rangeIsChanged,n=(x.current.from||{})["key"];return e&&t==n?{display:"none"}:{}},[x.current]);var{RTag:at,WTag:lt}=gt.default.useMemo(()=>({RTag:f,WTag:d}),[d,f]),ct=gt.default.useMemo(()=>({...u,overflow:"vertical"!==a?"auto hidden":"hidden auto"}),[u,a]),ht=gt.default.useMemo(()=>{var{front:t,behind:e}=S;return{...g,padding:"vertical"!==a?`0px ${e}px 0px ${t}px`:t+`px 0px ${e}px`}},[g,a,S]),{start:ut,end:dt}=gt.default.useMemo(()=>({...S}),[S]);return gt.default.createElement(at,{ref:b,className:L,style:ct,onScroll:St(t=>{var e,n,o;x.current.to&&x.current.to.key||(o=b.current,e=I(),n=Math.ceil(o[K]),o=Math.ceil(o[$]),e<0||o+1<e+n||!o||(D.current.handleScroll(e),D.current.isFront()?s.length&&e<=0&&ot(r):D.current.isBehind()&&o<=n+e&&it(r)))},h)},gt.default.createElement(yt,{children:e,roleId:"header",Tag:P,onSizeChange:t}),gt.default.createElement(lt,{ref:E,"v-role":"group",className:U,style:ht},Q.slice(ut,dt+1).map(t=>{var e,n=O(t),o=(e=t,v.current.findIndex(t=>O(t)===O(e)));return gt.default.createElement(vt,{key:n,Tag:A,record:t,index:o,dataKey:n,children:i,Class:X,Style:{...j,...st(n)},onSizeChange:rt})})),gt.default.createElement(yt,{children:n,roleId:"footer",Tag:H,onSizeChange:t}),gt.default.createElement("div",{ref:w,style:{width:"vertical"!==a?"0px":"100%",height:"vertical"!==a?"100%":"0px"}}))}var s=gt.default.forwardRef(r);t.VirtualDragList=r,t.default=s,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).VirtualDragList={},t.React)}(this,function(t,ft){"use strict";function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}function n(n){if(n&&n.__esModule)return n;var o=Object.create(null);return n&&Object.keys(n).forEach(function(t){var e;"default"!==t&&(e=Object.getOwnPropertyDescriptor(n,t),Object.defineProperty(o,t,e.get?e:{enumerable:!0,get:function(){return n[t]}}))}),o.default=n,Object.freeze(o)}var l=n(ft),gt=e(ft);class pt{from;to;constructor(){this.from={key:null,item:null,index:-1},this.to={key:null,item:null,index:-1}}}class o{average;total;fixed;header;footer;constructor(){this.average=void 0,this.total=void 0,this.fixed=void 0,this.header=void 0,this.footer=void 0}}class mt{start;end;front;behind;constructor(){this.start=0,this.end=0,this.front=0,this.behind=0}}function c(t){const{dataKey:e,children:n,onSizeChange:o}=t,i=l.useRef(null);t="function"==typeof n?n(i):n;return l.useLayoutEffect(()=>{let t;return t=new ResizeObserver(()=>{var t=i.current.clientHeight;o&&o(e,t)}),i.current&&t.observe(i.current),()=>{t&&(t.disconnect(),t=null)}},[i]),l.cloneElement(t,{ref:i})}function vt(t){const{children:e,dataKey:n,Class:o,Style:i,Tag:r="div"}=t;var{record:t,index:s,onSizeChange:a}=t;return l.createElement(c,{dataKey:n,onSizeChange:a},l.createElement(r,{className:o,style:i,"data-key":n},"function"==typeof e?e(t,s,n):e))}function yt(t){var{Tag:t="div",Style:e,Class:n,children:o,roleId:i,onSizeChange:r}=t;return o?l.createElement(c,{dataKey:i,onSizeChange:r},l.createElement(t,{"v-role":i,style:e,className:n},o)):l.createElement(l.Fragment,null)}function St(n,o=50,i=!1){let r,s;function t(...t){var e;return r&&clearTimeout(r),i?(e=!r,r=setTimeout(()=>{r=null},o),e&&(s=n.apply(this,t))):r=setTimeout(()=>{n.apply(this,t)},o),s}return t.prototype.cancel=function(){clearTimeout(r),r=null},t}(function(t){function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function i(t,e,n){return e&&o(t.prototype,e),n&&o(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function s(t){return function(t){if(Array.isArray(t))return a(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,e){if(t){if("string"==typeof t)return a(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Map"===(n="Object"===n&&t.constructor?t.constructor.name:n)||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?a(t,e):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,o=new Array(e);n<e;n++)o[n]=t[n];return o}function e(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}function l(e,n){n?"none"===n?C.forEach(function(t){return y(e,t,"none")}):C.forEach(function(t){return y(e,t,"".concat(t.split("transition")[0],"transform ").concat(n))}):C.forEach(function(t){return y(e,t,"")})}function c(e,n){n?M.forEach(function(t){return y(e,t,"".concat(t.split("transform")[0]).concat(n))}):M.forEach(function(t){return y(e,t,"")})}function h(t,e,n){window.addEventListener?t.addEventListener(e,n,!(!O&&D)&&_):window.attachEvent&&t.attachEvent("on"+e,n)}function u(t,e,n){window.removeEventListener?t.removeEventListener(e,n,!(!O&&D)&&_):window.detachEvent&&t.detachEvent("on"+e,n)}function d(t){for(var e={top:0,left:0,height:0,width:0},n=(e.height=t.offsetHeight,e.width=t.offsetWidth,e.top=t.offsetTop,e.left=t.offsetLeft,t.offsetParent);null!==n;)e.top+=n.offsetTop,e.left+=n.offsetLeft,n=n.offsetParent;return e}function f(t,e){if(!t||!t.getBoundingClientRect)return g();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=y(n);if(n.clientWidth<n.scrollWidth&&("auto"==i.overflowX||"scroll"==i.overflowX)||n.clientHeight<n.scrollHeight&&("auto"==i.overflowY||"scroll"==i.overflowY)){if(!n.getBoundingClientRect||n===document.body)return g();if(o||e)return n;o=!0}}}while(n=n.parentNode);return g()}function g(){var t=document.scrollingElement;return!t||t.contains(document.body)?document:t}function m(t){var e;if(t.getBoundingClientRect||t===window)return e={top:0,left:0,bottom:0,right:0,height:0,width:0},t!==window&&t.parentNode&&t!==g()?(t=t.getBoundingClientRect(),e.top=t.top,e.left=t.left,e.bottom=t.bottom,e.right=t.right,e.height=t.height,e.width=t.width):(e.top=0,e.left=0,e.bottom=window.innerHeight,e.right=window.innerWidth,e.height=window.innerHeight,e.width=window.innerWidth),e}function p(t,e,n){var o=s(Array.from(t.children)),t=o.indexOf(e);if(-1<t)return n?o[t]:{index:t,el:o[t],rect:m(o[t]),offset:d(o[t])};for(var i=0;i<o.length;i++)if(function(t,e){var n;if(t&&e)for(n=t.parentNode;n;){if(e===n)return 1;n=n.parentNode}return}(e,o[i]))return n?o[i]:{index:i,el:o[i],rect:m(o[i]),offset:d(o[i])};return n?null:{index:-1,el:null,rect:{},offset:{}}}function v(t,e,n){var o;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(o=(" "+t.className+" ").replace(z," ").replace(" "+e+" "," "),t.className=(o+(n?" "+e:"")).replace(z," ")))}function y(t,e,n){var o=t&&t.style;if(o){if(void 0===n)return document.defaultView&&document.defaultView.getComputedStyle?n=document.defaultView.getComputedStyle(t,""):t.currentStyle&&(n=t.currentStyle),void 0===e?n:n[e];o[e=e in o||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}}function S(n,o,i){var r=null;return function(){var t=this,e=arguments;r&&clearTimeout(r),i&&!r&&n.apply(t,e),r=setTimeout(function(){n.apply(t,e)},o)}}function b(n,o){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,n.apply(t,e)},o)}}function E(){var i=[];return{captureAnimationState:function(){var t=s(Array.from(this.rootEl.children)),e=(n=t,o=this.dragEl,e=this.dropEl,o=n.indexOf(o),n=n.indexOf(e),o<n?{start:o,end:n}:{start:n,end:o}),n=e.start,o=e.end;i.length=0,t.slice(n,o+1).forEach(function(t){i.push({target:t,rect:m(t)})})},animateRange:function(){var n=this;i.forEach(function(t){var e=t.target,t=t.rect;n.animate(e,t,n.options.animation)})},animate:function(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,o=m(t),i=e.left-o.left,e=e.top-o.top;l(t,"none"),c(t,"translate3d(".concat(i,"px, ").concat(e,"px, 0)")),t.offsetLeft,l(t,"".concat(n,"ms")),c(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){l(t,""),c(t,""),t.animated=null},n)}}}function w(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.rootEl=t,this.scrollEl=f(t,!0),this.options=e=Object.assign({},e),this.ownerDocument=t.ownerDocument;var n,o={autoScroll:!0,scrollStep:5,scrollThreshold:15,delay:0,delayOnTouchOnly:!1,disabled:!1,animation:150,ghostAnimation:0,ghostClass:"",ghostStyle:{},chosenClass:"",draggable:void 0,dragging:void 0,onDrag:void 0,onMove:void 0,onDrop:void 0,onChange:void 0,fallbackOnBody:!1,forceFallback:!1,stopPropagation:!1,supportPointer:"PointerEvent"in window&&!T,supportTouch:"ontouchstart"in window};for(n in o)n in this.options||(this.options[n]=o[n]);this.container=this.options.fallbackOnBody?document.body:this.rootEl,this.nativeDraggable=!this.options.forceFallback&&K,this.move={x:0,y:0},this.state=new k,this.differ=new $,this.ghost=new B(this),this.dragEl=null,this.dropEl=null,this.dragStartTimer=null,this.autoScrollTimer=null,Object.assign(this,E(),(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),{_autoScroll:b(function(t){var e,n,o,i,r,s,a,l,c,h,u,d,f,g,p;t.state.sortableDown&&t.state.sortableMove&&(e=(n=t.state.sortableMove).clientX,n=n.clientY,void 0!==e&&void 0!==n&&t.scrollEl!==t.ownerDocument&&(o=(g=t.scrollEl).scrollTop,i=g.scrollLeft,r=g.scrollHeight,g=g.scrollWidth,s=(f=m(t.scrollEl)).top,u=f.right,a=f.bottom,d=f.left,l=f.height,f=f.width,c=(h=t.options).scrollStep,h=h.scrollThreshold,d=0<i&&d<=e&&e<=d+h,f=i+f<g&&e<=u&&u-h<=e,g=o+l<r&&n<=a&&a-h<=n,p={x:i,y:o},(u=0<o&&s<=n&&n<=s+h)?(p.x=d?i-c:f?i+c:i,p.y=o-c):g?(p.x=d?i-c:f?i+c:i,p.y=o+c):d?(p.x=i-c,p.y=o):f&&(p.x=i+c,p.y=o),(u||d||f||g)&&requestAnimationFrame(function(){t.scrollEl.scrollTo(p.x,p.y),t._autoScroll(t)})))},10)}),{_bindDragEventListener:function(){this._onDrag=this._onDrag.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=this.options,e=t.supportPointer,t=t.supportTouch;h(this.rootEl,e?"pointerdown":t?"touchstart":"mousedown",this._onDrag)},_unbindDragEventListener:function(){u(this.rootEl,"pointerdown",this._onDrag),u(this.rootEl,"touchstart",this._onDrag),u(this.rootEl,"mousedown",this._onDrag)},_bindMoveEvents:function(t){this.options.supportPointer?h(this.ownerDocument,"pointermove",this._onMove):h(this.ownerDocument,t?"touchmove":"mousemove",this._onMove)},_unbindMoveEvents:function(){u(this.ownerDocument,"pointermove",this._onMove),u(this.ownerDocument,"touchmove",this._onMove),u(this.ownerDocument,"mousemove",this._onMove)},_unbindDropEvents:function(){u(this.ownerDocument,"pointerup",this._onDrop),u(this.ownerDocument,"pointercancel",this._onDrop),u(this.ownerDocument,"touchend",this._onDrop),u(this.ownerDocument,"touchcancel",this._onDrop),u(this.ownerDocument,"mouseup",this._onDrop)},_unbindDragEvents:function(){this.nativeDraggable&&(u(this.rootEl,"dragstart",this._onDragStart),u(this.rootEl,"dragover",this._onDragOver),u(this.rootEl,"dragend",this._onDrop))}}),this._bindDragEventListener()}var D,x,T,I,_,z,C,M,O,k,$,B,K;t.exports=(D=e(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),x=e(/Edge/i),T=e(/safari/i)&&!e(/chrome/i)&&!e(/android/i),t=e(/iP(ad|od|hone)/i),I=e(/chrome/i)&&e(/android/i),_={capture:!1,passive:!1},z=/\s+/g,C=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],M=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"],O=function(){var t=!1;return document.addEventListener("checkIfSupportPassive",null,{get passive(){return t=!0}}),t}(),k=i(function t(){n(this,t),this.sortableDown=void 0,this.sortableMove=void 0,this.animationEnd=void 0}),$=function(){function t(){n(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return i(t,[{key:"get",value:function(t){return this[t]}},{key:"set",value:function(t,e){this[t]=e}},{key:"destroy",value:function(){this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}}]),t}(),B=function(){function e(t){n(this,e),this.$el=null,this.distance={x:0,y:0},this.options=t.options,this.container=t.container}return i(e,[{key:"init",value:function(t,e){var n=!(2<arguments.length&&void 0!==arguments[2])||arguments[2],t=(this.$el=t,this.options),o=t.ghostClass,t=t.ghostStyle,t=void 0===t?{}:t;v(this.$el,o,!0),y(this.$el,"box-sizing","border-box"),y(this.$el,"margin",0),y(this.$el,"top",e.top),y(this.$el,"left",e.left),y(this.$el,"width",e.width),y(this.$el,"height",e.height),y(this.$el,"opacity","0.8"),y(this.$el,"position","fixed"),y(this.$el,"zIndex","100000"),y(this.$el,"pointerEvents","none"),this.setStyle(t),l(this.$el,"none"),c(this.$el,"translate3d(0px, 0px, 0px)"),n&&this.container.appendChild(this.$el),y(this.$el,"transform-origin",this.distance.x/parseInt(this.$el.style.width)*100+"% "+this.distance.y/parseInt(this.$el.style.height)*100+"%")}},{key:"setStyle",value:function(t){for(var e in t)y(this.$el,e,t[e])}},{key:"rect",value:function(){return m(this.$el)}},{key:"move",value:function(t,e){this.$el&&(l(this.$el,2<arguments.length&&void 0!==arguments[2]&&arguments[2]?"".concat(this.options.ghostAnimation,"ms"):"none"),c(this.$el,"translate3d(".concat(t,"px, ").concat(e,"px, 0)")))}},{key:"destroy",value:function(t){var e,n,o=this;this.$el&&(n=parseInt(this.$el.style.left),e=parseInt(this.$el.style.top),this.move(t.left-n,t.top-e,!0),(n=this.options.ghostAnimation)?setTimeout(function(){return o.clear()},n):this.clear())}},{key:"clear",value:function(){this.$el&&this.$el.remove(),this.distance={x:0,y:0},this.$el=null}}]),e}(),K="undefined"!=typeof document&&!I&&!t&&"draggable"in document.createElement("div"),(w.prototype={constructor:w,destroy:function(){this._clearState(),this._unbindDragEventListener(),Array.prototype.forEach.call(this.rootEl.querySelectorAll("[draggable]"),function(t){t.removeAttribute("draggable")})},set:function(t,e){this.options[t]=e},get:function(t){return this.options[t]},_onDrag:function(t){var e=this;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||this.options.disabled)){var n=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,o=n||t;if(this.nativeDraggable||!T||!o.target||"SELECT"!==o.target.tagName.toUpperCase()){if(o.target===this.rootEl)return!0;this.options.stopPropagation&&t.stopPropagation();var t=this.options,i=t.draggable,t=t.dragging;if("function"==typeof i){if(!i(o))return!0}else if("string"==typeof i){if(!function(t,e){if(e){if(">"===e[0]&&(e=e.substring(1)),t)try{if(t.matches)return t.matches(e);if(t.msMatchesSelector)return t.msMatchesSelector(e);if(t.webkitMatchesSelector)return t.webkitMatchesSelector(e)}catch(t){return}return}}(o.target,i))return!0}else if(void 0!==i)throw new Error('draggable expected "function" or "string" but received "'.concat(r(i),'"'));if(t){if("function"!=typeof t)throw new Error('dragging expected "function" or "string" but received "'.concat(r(t),'"'));this.dragEl=t(o)}else this.dragEl=p(this.rootEl,o.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;i=p(this.rootEl,this.dragEl),t=i.rect,i=i.offset,i=(this.move={x:o.clientX,y:o.clientY},this.differ.from={node:this.dragEl,rect:t,offset:i},this.ghost.distance={x:o.clientX-t.left,y:o.clientY-t.top},this.state.sortableDown=o,h(this.ownerDocument,"pointerup",this._onDrop),h(this.ownerDocument,"touchend",this._onDrop),h(this.ownerDocument,"mouseup",this._onDrop),this.options),t=i.delay,i=i.delayOnTouchOnly;!t||i&&!n||this.nativeDraggable&&(x||D)?this._onStart(o,n):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onStart(o,n)},t))}}},_onStart:function(t,e){!this.nativeDraggable||e?(this._bindMoveEvents(e),h(this.ownerDocument,"pointercancel",this._onDrop),h(this.ownerDocument,"touchcancel",this._onDrop)):(this.dragEl.draggable=!0,this._onDragStart=this._onDragStart.bind(this),this._onDragOver=this._onDragOver.bind(this),h(this.rootEl,"dragstart",this._onDragStart));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){}},_onDragStart:function(t){t.dataTransfer.setData("te",t.target.innerText),h(this.rootEl,"dragover",this._onDragOver),h(this.rootEl,"dragend",this._onDrop)},_onDragOver:function(t){var e,n,o,i;this.state.sortableDown&&(this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),e=t.clientX,n=t.clientY,o=e-this.move.x,i=n-this.move.y,void 0!==e&&Math.abs(o)<=0&&void 0!==n&&Math.abs(i)<=0||(this._onStarted(t,t),t.target!==this.rootEl&&this._onChange(this,t.target,t,t)))},_onMove:function(t){var e,n,o,i,r,s,a,l,c=this;this.state.sortableDown&&(n=(e=(i=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t)||t).clientX,o=e.clientY,i=i?document.elementFromPoint(n,o):e.target,s=n-this.move.x,r=o-this.move.y,void 0!==n&&Math.abs(s)<=0&&void 0!==o&&Math.abs(r)<=0||(this.options.stopPropagation&&t.stopPropagation&&t.stopPropagation(),void 0!==t.preventDefault&&t.cancelable&&t.preventDefault(),this._onStarted(e,t),this.ghost.move(s,r),(s=this.options.onMove)&&"function"==typeof s&&s(this.differ.from,this.ghost.$el,e,t),n<0||o<0||(s=(r=m(this.rootEl)).top,a=r.right,l=r.bottom,n<r.left||a<n||o<s||l<o||(this._onChange(this,i,e,t),this.autoScrollTimer&&clearTimeout(this.autoScrollTimer),this.options.autoScroll&&(this.autoScrollTimer=setTimeout(function(){return c._autoScroll(c)},0))))))},_onStarted:function(t,e){var n,o;this.state.sortableMove=t,this.ghost.$el||(n=this.differ.from.rect,o=this.dragEl.cloneNode(!0),this.ghost.init(o,n,!this.nativeDraggable),v(this.dragEl,this.options.chosenClass,!0),this.dragEl.style["touch-action"]="none",this.dragEl.style["will-change"]="transform",(o=this.options.onDrag)&&"function"==typeof o&&o(this.dragEl,t,e),T&&y(document.body,"user-select","none"),this.nativeDraggable&&this._unbindDropEvents())},_onChange:S(function(t,e,n,o){var i,r,s,a,l,c,e=p(t.rootEl,e),h=e.el,u=e.rect,e=e.offset;h&&!h.animated&&(t.dropEl=h,c=n.clientX,i=n.clientY,l=u.left,r=u.right,s=u.top,a=u.bottom,l<c&&c<r&&s<i&&i<a&&h!==t.dragEl&&(t.differ.to={node:t.dropEl,rect:u,offset:e},t.captureAnimationState(),l=t.options.onChange,c=d(t.dragEl),l&&"function"==typeof l&&l(t.differ.from,t.differ.to,n,o),c.top<e.top||c.left<e.left?t.rootEl.insertBefore(t.dragEl,h.nextElementSibling):t.rootEl.insertBefore(t.dragEl,h),t.animateRange()))},5),_onDrop:function(t){var e,n;this._unbindDragEvents(),this._unbindMoveEvents(),this._unbindDropEvents(),this.dragStartTimer&&clearTimeout(this.dragStartTimer),this.options.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault(),v(this.dragEl,this.options.chosenClass,!1),this.dragEl.style["touch-action"]="",this.dragEl.style["will-change"]="",this.dragEl.draggable=!1,this.state.sortableDown&&this.state.sortableMove&&(this.differ.to.offset=d(this.dragEl),this.differ.to.rect=m(this.dragEl),e=(n=this.differ).from,n=n.to,e=e.offset.top!==n.offset.top||e.offset.left!==n.offset.left,(n=this.options.onDrop)&&"function"==typeof n&&n(e,t)),this._clearState(),this.ghost.destroy(this.differ.to.rect),T&&y(document.body,"user-select","")},_clearState:function(){this.dragEl=null,this.dropEl=null,this.state=new k,this.differ.destroy()}}).utils={getRect:m,getOffset:d,debounce:S,throttle:b,getParentAutoScrollElement:f},w)})(s={exports:{}});var u=s.exports;class bt{getKey;onDrag;onDrop;dragState;dragElement;drag;options;dataSource;rangeIsChanged;constructor(t,e,n){this.options=t,this.onDrag=e,this.onDrop=n,this.getKey=t.getKey,this.dragState=new pt,this.dataSource=t.dataSource,this.rangeIsChanged=!1,this.init()}set(t,e){this[t]=e}setOption(t,e){this.options[t]=e,this.drag.set(t,e)}init(){var{disabled:t,dragging:e,draggable:n,ghostClass:o,ghostStyle:i,chosenClass:r,animation:s,autoScroll:a,scrollStep:l,scrollThreshold:c}=this.options;let h=new Array;this.drag=new u(this.options.scrollEl,{disabled:t,dragging:e,draggable:n,ghostClass:o,ghostStyle:i,chosenClass:r,animation:s,autoScroll:a,scrollStep:l,scrollThreshold:c,onDrag:t=>{this.dragElement=t,h=[...this.dataSource];const e=t.getAttribute("data-key");var t=this.dataSource.findIndex(t=>this.getKey(t)==e),n=this.dataSource[t];Object.assign(this.dragState.from,{item:n,index:t,key:e}),this.rangeIsChanged=!1,this.onDrag(this.dragState.from)},onChange:(t,e)=>{const o=this.dragState.from.key,i=e.node.getAttribute("data-key"),r={item:null,index:-1},s={item:null,index:-1};h.forEach((t,e)=>{var n=this.getKey(t);n==o&&Object.assign(r,{item:t,index:e}),n==i&&Object.assign(s,{item:t,index:e})}),h.splice(r.index,1),h.splice(s.index,0,r.item)},onDrop:t=>{this.rangeIsChanged&&this.dragElement&&this.dragElement.remove();const e=this.dragState["from"];var n=h.findIndex(t=>this.getKey(t)==e.key),o=this.dataSource[n];this.dragState.to={item:o,index:n,key:this.getKey(o)},this.onDrop(h,e,this.dragState.to,t),this.dataSource=[...h],this.clear()}})}clear(){this.dragElement=null,this.rangeIsChanged=!1,this.dragState=new pt}destroy(){this.drag&&this.drag.destroy(),this.drag=null}}const a={INIT:"INIT",FIXED:"FIXED",DYNAMIC:"DYNAMIC"},i={FRONT:"FRONT",BEHIND:"BEHIND"};class Et{options;callback;sizes;isHorizontal;calcIndex;calcType;calcSize;range;direction;offset;constructor(t,e){this.options={...t},this.callback=e,this.sizes=new Map,this.isHorizontal=t.isHorizontal,this.calcIndex=0,this.calcType=a.INIT,this.calcSize=new o,this.direction="",this.offset=0,this.range=new mt,t&&this.checkIfUpdate(0,t.keeps-1)}updateUniqueKeys(t){this.options.uniqueKeys=t}updateSizes(n){this.sizes.forEach((t,e)=>{n.includes(e)||this.sizes.delete(e)})}updateRange(){var t=Math.max(this.range.start,0);this.handleUpdate(t,this.getEndByStart(t))}handleScroll(t){this.direction=t<this.offset?i.FRONT:i.BEHIND,this.offset=t;t=this.getScrollItems(t);this.isFront()?this.handleScrollFront(t):this.isBehind()&&this.handleScrollBehind(t)}isFront(){return this.direction===i.FRONT}isBehind(){return this.direction===i.BEHIND}getScrollItems(t){var{fixed:e,header:n}=this.calcSize;if(n&&(t-=n),t<=0)return 0;if(this.calcType===a.FIXED)return Math.floor(t/e);let o=0,i=this.options.uniqueKeys.length;for(var r,s;o<=i;){if(r=o+Math.floor((i-o)/2),(s=this.getOffsetByIndex(r))===t)return r;s<t?o=r+1:t<s&&(i=r-1)}return 0<o?--o:0}handleScrollFront(t){t>this.range.start||(t=Math.max(t-Math.round(this.options.keeps/3),0),this.checkIfUpdate(t,this.getEndByStart(t)))}handleScrollBehind(t){t<this.range.start+Math.round(this.options.keeps/3)||this.checkIfUpdate(t,this.getEndByStart(t))}checkIfUpdate(t,e){var{uniqueKeys:n,keeps:o}=this.options;n.length<=o?(t=0,e=n.length-1):e-t<o-1&&(t=e-o+1),this.range.start!==t&&this.handleUpdate(t,e)}handleUpdate(t,e){this.range.start=t,this.range.end=e,this.range.front=this.getFrontOffset(),this.range.behind=this.getBehindOffset(),this.callback({...this.range})}getFrontOffset(){return this.calcType===a.FIXED?this.calcSize.fixed*this.range.start:this.getOffsetByIndex(this.range.start)}getBehindOffset(){var t=this.getLastIndex();return this.calcType===a.FIXED?(t-this.range.end)*this.calcSize.fixed:this.calcIndex===t?this.getOffsetByIndex(t)-this.getOffsetByIndex(this.range.end):(t-this.range.end)*this.getItemSize()}getOffsetByIndex(e){if(!e)return 0;let n=0;for(let t=0;t<e;t++){var o=this.sizes.get(this.options.uniqueKeys[t]);n+="number"==typeof o?o:this.getItemSize()}return this.calcIndex=Math.max(this.calcIndex,e-1),this.calcIndex=Math.min(this.calcIndex,this.getLastIndex()),n}getEndByStart(t){return Math.min(t+this.options.keeps-1,this.getLastIndex())}getLastIndex(){return this.options.uniqueKeys.length-1}getItemSize(){return this.calcType===a.FIXED?this.calcSize.fixed:this.calcSize.average||this.options.size}handleItemSizeChange(t,e){this.sizes.set(t,e),this.calcType===a.INIT?(this.calcType=a.FIXED,this.calcSize.fixed=e):this.calcType===a.FIXED&&this.calcSize.fixed!==e&&(this.calcType=a.DYNAMIC,this.calcSize.fixed=void 0),this.calcType!==a.FIXED&&(this.calcSize.total=[...this.sizes.values()].reduce((t,e)=>t+e,0),this.calcSize.average=Math.round(this.calcSize.total/this.sizes.size))}handleHeaderSizeChange(t){this.calcSize.header=t}handleFooterSizeChange(t){this.calcSize.footer=t}}const wt={top:"v-top",bottom:"v-bottom",dragend:"v-dragend"};function r(r,t){const{header:e,footer:n,children:i,dataSource:s=[],dataKey:o,direction:a="vertical",keeps:l=30,size:c=50,delay:h=0,autoScroll:A=!0,scrollStep:F=5,scrollThreshold:N=15,style:u={},className:R="",wrapTag:d="div",rootTag:f="div",itemTag:L="div",headerTag:P="div",footerTag:H="div",itemStyle:j={},itemClass:X="",wrapStyle:g={},wrapClass:q="",disabled:p=!1,draggable:W=void 0,dragging:U=void 0,ghostClass:Y="",ghostStyle:V={},chosenClass:G="",animation:J=150}=r,[Q,m]=ft.useState([]),v=ft.useRef([]),y=ft.useRef([]),[S,Z]=ft.useState(new mt),b=ft.useRef(null),E=ft.useRef(null),w=ft.useRef(null),D=ft.useRef(new pt),x=ft.useRef(null),T=ft.useRef(new Et({size:c,keeps:l,uniqueKeys:y.current,isHorizontal:"vertical"===a},t=>{Z(()=>t);var e=(D.current.from||{})["index"];-1<e&&!(e>=t.start&&e<=t.end)&&x.current&&x.current.set("rangeIsChanged",!0)})),I=()=>{var t=b.current;return t?Math.ceil(t[B]):0},_=t=>{b.current[B]=t},z=t=>{var e;t>=s.length-1?M():(e=T.current.getOffsetByIndex(t),_(e),setTimeout(()=>{I()!==T.current.getOffsetByIndex(t)&&z(t)},5))},C=()=>{b.current[B]=0},M=()=>{var t;w.current&&(t=w.current[nt],b.current[B]=t,setTimeout(()=>{var t=b.current;I()+Math.ceil(t[K])<Math.ceil(t[$])&&M()},5))},tt=(gt.default.useImperativeHandle(t,()=>({reset:()=>{C(),m(()=>[...s]),v.current=[...s]},getSize:t=>T.current.sizes.get(t),getOffset:I,scrollToTop:C,scrollToIndex:z,scrollToOffset:_,scrollToBottom:M})),ft.useEffect(()=>(m(()=>[...s]),v.current=[...s],O(),T.current.updateUniqueKeys(y.current),T.current.updateSizes(y.current),T.current.updateRange(),x.current&&x.current.set("dataSource",s),()=>{et()}),[s]),ft.useLayoutEffect(()=>{x.current?x.current.setOption("disabled",p):setTimeout(()=>{tt()},0)},[p]),()=>{x.current=new bt({getKey:k,scrollEl:E.current,dataSource:v.current,disabled:p,draggable:W,dragging:U,ghostStyle:V,ghostClass:Y,chosenClass:G,animation:J,autoScroll:A,scrollStep:F,scrollThreshold:N},t=>{D.current.from=t},(t,e,n,o)=>{D.current.to=n;const i=r[wt.dragend];i&&i(t,e,n,o),v.current=[...t],m(()=>[...t]),O(),setTimeout(()=>D.current=new pt,h+10)})}),et=()=>{x.current&&x.current.destroy(),x.current=null},O=()=>{y.current=v.current.map(t=>k(t))},k=gt.default.useCallback(t=>o.replace(/\[/g,".").replace(/\]/g,"").split(".").reduce((t,e)=>(t||{})[e],t),[o]),{scrollSizeKey:$,scrollDirectionKey:B,offsetSizeKey:nt,clientSizeKey:K}=gt.default.useMemo(()=>{var t="vertical"!==a;return{offsetSizeKey:t?"offsetLeft":"offsetTop",scrollSizeKey:t?"scrollWidth":"scrollHeight",clientSizeKey:t?"clientWidth":"clientHeight",scrollDirectionKey:t?"scrollLeft":"scrollTop"}},[a]);const ot=St(function(t){const e=t[wt.top];e&&e()}),it=St(function(t){const e=t[wt.bottom];e&&e()}),rt=(t,e)=>{T.current.handleItemSizeChange(t,e)};t=(t,e)=>{"header"===t&&T.current.handleHeaderSizeChange(e),"footer"===t&&T.current.handleFooterSizeChange(e)};const st=gt.default.useCallback(t=>{var e=x.current&&x.current.rangeIsChanged,n=(D.current.from||{})["key"];return e&&t==n?{display:"none"}:{}},[D.current]);var{RTag:at,WTag:lt}=gt.default.useMemo(()=>({RTag:f,WTag:d}),[d,f]),ct=gt.default.useMemo(()=>({...u,overflow:"vertical"!==a?"auto hidden":"hidden auto"}),[u,a]),ht=gt.default.useMemo(()=>{var{front:t,behind:e}=S;return{...g,padding:"vertical"!==a?`0px ${e}px 0px ${t}px`:t+`px 0px ${e}px`}},[g,a,S]),{start:ut,end:dt}=gt.default.useMemo(()=>({...S}),[S]);return gt.default.createElement(at,{ref:b,className:R,style:ct,onScroll:St(t=>{var e,n,o;D.current.to&&D.current.to.key||(o=b.current,e=I(),n=Math.ceil(o[K]),o=Math.ceil(o[$]),e<0||o+1<e+n||!o||(T.current.handleScroll(e),T.current.isFront()?s.length&&e<=0&&ot(r):T.current.isBehind()&&o<=n+e&&it(r)))},h)},gt.default.createElement(yt,{children:e,roleId:"header",Tag:P,onSizeChange:t}),gt.default.createElement(lt,{ref:E,"v-role":"group",className:q,style:ht},Q.slice(ut,dt+1).map(t=>{var e,n=k(t),o=(e=t,v.current.findIndex(t=>k(t)===k(e)));return gt.default.createElement(vt,{key:n,Tag:L,record:t,index:o,dataKey:n,children:i,Class:X,Style:{...j,...st(n)},onSizeChange:rt})})),gt.default.createElement(yt,{children:n,roleId:"footer",Tag:H,onSizeChange:t}),gt.default.createElement("div",{ref:w,style:{width:"vertical"!==a?"0px":"100%",height:"vertical"!==a?"100%":"0px"}}))}var s=gt.default.forwardRef(r);t.VirtualDragList=r,t.default=s,Object.defineProperty(t,"__esModule",{value:!0})});

package.json

 {
   "name": "react-virtual-drag-list",
-  "version": "2.4.3",
+  "version": "2.4.4",
   "description": "A virtual scrolling list component that can be sorted by dragging",
@@ -38,3 +38,3 @@ "main": "dist/draglist.js",
   "dependencies": {
-    "sortable-dnd": "0.2.5"
+    "sortable-dnd": "0.2.6"
   },
@@ -41,0 +41,0 @@ "devDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

135762

increased by17.74%

Lines of code

2693

increased by24.56%

Dependency changes

• + Addedsortable-dnd@0.2.6(transitive)

• - Removedsortable-dnd@0.2.5(transitive)

• Updatedsortable-dnd@0.2.6