Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-virtual-drag-list

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 2.4.4 to 2.4.5

2

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 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})});
!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,vt){"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(vt),yt=e(vt);class St{from;to;constructor(){this.from={key:void 0,item:void 0,index:-1},this.to={key:void 0,item:void 0,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 bt{start;end;front;behind;constructor(t={}){this.start=t.start||0,this.end=t.end||0,this.front=t.front||0,this.behind=t.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 Et(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 wt(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 Dt(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 s(t){return(s="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 r(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 S(e,t,"none")}):C.forEach(function(t){return S(e,t,"".concat(t.split("transition")[0],"transform ").concat(n))}):C.forEach(function(t){return S(e,t,"")})}function c(e,n){n?M.forEach(function(t){return S(e,t,"".concat(t.split("transform")[0]).concat(n))}):M.forEach(function(t){return S(e,t,"")})}function h(t){var e=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t,t=e||t;return{touch:e,e:t,target:e?document.elementFromPoint(t.clientX,t.clientY):t.target}}function u(t,e,n){window.addEventListener?t.addEventListener(e,n,!(!k&&D)&&_):window.attachEvent&&t.attachEvent("on"+e,n)}function d(t,e,n){window.removeEventListener?t.removeEventListener(e,n,!(!k&&D)&&_):window.detachEvent&&t.detachEvent("on"+e,n)}function f(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 g(t,e){if(!t||!t.getBoundingClientRect)return p();var n=t,o=!1;do{if(n.clientWidth<n.scrollWidth||n.clientHeight<n.scrollHeight){var i=S(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 p();if(o||e)return n;o=!0}}}while(n=n.parentNode);return p()}function p(){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!==p()?(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 v(t,e,n){var o=r(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:f(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:f(o[i])};return n?null:{index:-1,el:null,rect:{},offset:{}}}function y(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 S(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 b(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 E(n,o){var i=null;return function(){var t=this,e=arguments;i=i||setTimeout(function(){i=null,n.apply(t,e)},o)}}function B(){var i=[];return{captureAnimationState:function(){var t=r(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=g(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&&A,this.move={x:0,y:0},this.state=new O,this.differ=new $,this.ghost=new L(this),this.dragEl=null,this.dropEl=null,this.dragStartTimer=null,this.autoScrollTimer=null,Object.assign(this,{_bindEventListener: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;u(this.rootEl,e?"pointerdown":t?"touchstart":"mousedown",this._onDrag)},_clearEvent:function(){d(this.rootEl,"pointerdown",this._onDrag),d(this.rootEl,"touchstart",this._onDrag),d(this.rootEl,"mousedown",this._onDrag)},_bindMoveEvents:function(t){this.options.supportPointer?u(this.ownerDocument,"pointermove",this._onMove):u(this.ownerDocument,t?"touchmove":"mousemove",this._onMove)},_unbindMoveEvents:function(){d(this.ownerDocument,"pointermove",this._onMove),d(this.ownerDocument,"touchmove",this._onMove),d(this.ownerDocument,"mousemove",this._onMove)},_unbindDropEvents:function(){d(this.ownerDocument,"pointerup",this._onDrop),d(this.ownerDocument,"pointercancel",this._onDrop),d(this.ownerDocument,"touchend",this._onDrop),d(this.ownerDocument,"touchcancel",this._onDrop),d(this.ownerDocument,"mouseup",this._onDrop)},_unbindDragEvents:function(){this.nativeDraggable&&(d(this.rootEl,"dragstart",this._onDragStart),d(this.rootEl,"dragover",this._onDragOver),d(this.rootEl,"dragend",this._onDrop))}},B(),(window.requestAnimationFrame||(window.requestAnimationFrame=function(t){return setTimeout(t,17)}),{_autoScroll:E(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)})),this._bindEventListener()}var D,x,T,I,_,z,C,M,k,O,$,L,A;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"],k=function(){var t=!1;return document.addEventListener("checkIfSupportPassive",null,{get passive(){return t=!0}}),t}(),O=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}(),L=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;y(this.$el,o,!0),S(this.$el,"box-sizing","border-box"),S(this.$el,"margin",0),S(this.$el,"top",e.top),S(this.$el,"left",e.left),S(this.$el,"width",e.width),S(this.$el,"height",e.height),S(this.$el,"opacity","0.8"),S(this.$el,"position","fixed"),S(this.$el,"zIndex","100000"),S(this.$el,"pointerEvents","none"),this.setStyle(t),l(this.$el,"none"),c(this.$el,"translate3d(0px, 0px, 0px)"),n&&this.container.appendChild(this.$el),S(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)S(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}(),A="undefined"!=typeof document&&!I&&!t&&"draggable"in document.createElement("div"),(w.prototype={constructor:w,destroy:function(){this._clearState(),this._clearEvent(),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=h(t),o=n.touch,i=n.e,n=n.target;if(this.nativeDraggable||!T||!n||"SELECT"!==n.tagName.toUpperCase()){if(n===this.rootEl)return!0;this.options.stopPropagation&&t.stopPropagation();var t=this.options,r=t.draggable,t=t.dragging;if("function"==typeof r){if(!r(i))return!0}else if("string"==typeof r){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}}(n,r))return!0}else if(void 0!==r)throw new Error('draggable expected "function" or "string" but received "'.concat(s(r),'"'));if(t){if("function"!=typeof t)throw new Error('dragging expected "function" or "string" but received "'.concat(s(t),'"'));this.dragEl=t(i)}else this.dragEl=v(this.rootEl,n,!0);if(!this.dragEl||this.dragEl.animated)return!0;o&&(this.dragEl.style["touch-action"]="none");r=v(this.rootEl,this.dragEl),t=r.rect,n=r.offset,r=(this.move={x:i.clientX,y:i.clientY},this.differ.from={node:this.dragEl,rect:t,offset:n},this.ghost.distance={x:i.clientX-t.left,y:i.clientY-t.top},this.state.sortableDown=i,u(this.ownerDocument,"pointerup",this._onDrop),u(this.ownerDocument,"touchend",this._onDrop),u(this.ownerDocument,"mouseup",this._onDrop),this.options),n=r.delay,t=r.delayOnTouchOnly;!n||t&&!o||this.nativeDraggable&&(x||D)?this._onStart(i,o):(clearTimeout(this.dragStartTimer),this.dragStartTimer=setTimeout(function(){return e._onStart(i,o)},n))}}},_onStart:function(t,e){!this.nativeDraggable||e?(this._bindMoveEvents(e),u(this.ownerDocument,"pointercancel",this._onDrop),u(this.ownerDocument,"touchcancel",this._onDrop)):(this.dragEl.draggable=!0,this._onDragStart=this._onDragStart.bind(this),this._onDragOver=this._onDragOver.bind(this),u(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),u(this.rootEl,"dragover",this._onDragOver),u(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&&(e=(n=h(t)).e,n=n.target,o=e.clientX,i=e.clientY,s=o-this.move.x,r=i-this.move.y,void 0!==o&&Math.abs(s)<=0&&void 0!==i&&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),o<0||i<0||(s=(r=m(this.rootEl)).top,a=r.right,l=r.bottom,o<r.left||a<o||i<s||l<i||(this._onChange(this,n,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;this.state.sortableMove=t,this.ghost.$el||((n=this.options.onDrag)&&"function"==typeof n&&n(this.dragEl,t,e),n=this.differ.from.rect,t=this.dragEl.cloneNode(!0),this.ghost.init(t,n,!this.nativeDraggable),y(this.dragEl,this.options.chosenClass,!0),this.dragEl.style["will-change"]="transform",T&&S(document.body,"user-select","none"),this.nativeDraggable&&this._unbindDropEvents())},_onChange:b(function(t,e,n,o){var i,r,s,a,l,c,e=v(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=f(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){this._unbindDragEvents(),this._unbindMoveEvents(),this._unbindDropEvents(),this.dragStartTimer&&clearTimeout(this.dragStartTimer),this.options.stopPropagation&&t.stopPropagation(),t.preventDefault&&t.preventDefault();var e,n=h(t).touch;y(this.dragEl,this.options.chosenClass,!1),this.nativeDraggable&&(this.dragEl.draggable=!1),n&&(this.dragEl.style["touch-action"]=""),this.dragEl.style["will-change"]="",this.state.sortableDown&&this.state.sortableMove&&(this.differ.to.offset=f(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)),T&&S(document.body,"user-select",""),this.ghost.destroy(this.differ.to.rect),this.state=new O},_clearState:function(){this.state=new O,this.differ.destroy(),this.dragEl=null,this.dropEl=null}}).utils={getRect:m,getOffset:f,debounce:b,throttle:E,getParentAutoScrollElement:g},w)})(s={exports:{}});var h=s.exports;class xt{onDrag;onDrop;dragState;dragElement;drag;options;dataSource;cloneList;rangeIsChanged;constructor(t,e,n){this.options=t,this.onDrag=e,this.onDrop=n,this.dataSource=t.dataSource,this.cloneList=new Array,this.dragState=new St,this.rangeIsChanged=!1,this.init()}set(t,e){this[t]=e,"dataSource"===t&&this.dragElement&&this.dragStart(this.dragElement,!1)}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;this.drag=new h(this.options.scrollEl,{disabled:t,dragging:e,draggable:n,ghostClass:o,ghostStyle:i,chosenClass:r,animation:s,autoScroll:a,scrollStep:l,scrollThreshold:c,onChange:(t,e)=>this.onChange(t,e),onDrag:t=>this.dragStart(t),onDrop:t=>this.dragEnd(t)})}dragStart(t,e=!0){this.dragElement=t,this.cloneList=[...this.dataSource];const n=t.getAttribute("data-key");this.dataSource.forEach((t,e)=>{this.options.getKey(t)==n&&(this.dragState.from={item:t,index:e,key:n})}),e?(this.rangeIsChanged=!1,this.onDrag(this.dragState.from,t)):this.rangeIsChanged=!0}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};this.cloneList.forEach((t,e)=>{var n=this.options.getKey(t);n==o&&Object.assign(r,{item:t,index:e}),n==i&&Object.assign(s,{item:t,index:e})}),this.cloneList.splice(r.index,1),this.cloneList.splice(s.index,0,r.item)}dragEnd(t){const n=this.options["getKey"],o=(this.rangeIsChanged&&this.dragElement&&this.dragElement.remove(),this.dragState)["from"];this.cloneList.forEach((t,e)=>{n(t)==o.key&&(this.dragState.to={index:e,key:n(t),item:this.dataSource[e]})}),this.onDrop(this.cloneList,o,this.dragState.to,t),this.dataSource=[...this.cloneList],this.clear()}clear(){this.dragElement=null,this.rangeIsChanged=!1,this.dragState=new St}destroy(){this.drag&&this.drag.destroy(),this.drag=null}}const a={INIT:"INIT",FIXED:"FIXED",DYNAMIC:"DYNAMIC"},i={FRONT:"FRONT",BEHIND:"BEHIND"};class Tt{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 bt,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),e=Math.min(this.options.keeps,this.options.uniqueKeys.length);this.sizes.size>=e-2?this.handleUpdate(t,this.getEndByStart(t)):window.requestAnimationFrame?window.requestAnimationFrame(()=>this.updateRange()):setTimeout(()=>this.updateRange(),3)}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 It={top:"v-top",bottom:"v-bottom",dragstart:"v-dragstart",dragend:"v-dragend"};function r(s,t){const{header:B,footer:F,children:R,dataSource:i=[],dataKey:e,direction:n="vertical",keeps:a=30,size:N=null,delay:o=10,keepOffset:K=!1,autoScroll:P=!0,scrollStep:H=5,scrollThreshold:X=15,style:r={},className:j="",wrapTag:l="div",rootTag:c="div",itemTag:q="div",headerTag:W="div",footerTag:Y="div",itemStyle:U={},itemClass:V="",wrapStyle:h={},wrapClass:G="",disabled:u=!1,draggable:J=void 0,dragging:Q=void 0,ghostClass:Z="",ghostStyle:tt={},chosenClass:et="",animation:nt=150}=s,[d,f]=vt.useState([]),g=vt.useRef([]),p=vt.useRef([]),[m,v]=vt.useState(new bt({end:a-1})),y=vt.useRef(null),S=vt.useRef(null),b=vt.useRef(null),E=vt.useRef(null),w=vt.useRef(new St),D=vt.useRef(null),x=vt.useRef(new Tt({size:N,keeps:a,uniqueKeys:p.current,isHorizontal:"vertical"===n},t=>{void 0===w.current.to.key&&v(()=>t);var e=(w.current.from||{})["index"];-1<e&&!(e>=t.start&&e<=t.end)&&D.current&&D.current.set("rangeIsChanged",!0)})),T=()=>{var t=y.current;return t?Math.ceil(t[A]):0},I=t=>{y.current[A]=t},_=t=>{var e;t>=i.length-1?C():(e=x.current.getOffsetByIndex(t),I(e),setTimeout(()=>{T()!==x.current.getOffsetByIndex(t)&&_(t)},5))},z=()=>{y.current[A]=0},C=()=>{var t;b.current&&(t=b.current[rt],y.current[A]=t,setTimeout(()=>{var t=y.current;T()+Math.ceil(t[st])<Math.ceil(t[L])&&C()},5))},ot=(yt.default.useImperativeHandle(t,()=>({reset:()=>{z(),f(()=>[...i]),g.current=[...i]},getSize:t=>x.current.sizes.get(t),getOffset:T,scrollToTop:z,scrollToIndex:_,scrollToOffset:I,scrollToBottom:C})),vt.useEffect(()=>{var t;g.current=[...i],f(()=>[...i]),M(),x.current.updateUniqueKeys(p.current),x.current.updateSizes(p.current),setTimeout(()=>x.current.updateRange(),0),D.current?D.current.set("dataSource",i):ot(),E.current&&K&&(t=k(E.current),_(t),E.current=null)},[i]),vt.useEffect(()=>{D.current&&D.current.setOption("disabled",u)},[u]),vt.useEffect(()=>()=>{it()},[]),()=>{D.current=new xt({getKey:O,scrollEl:S.current,dataSource:g.current,disabled:u,draggable:J,dragging:Q,ghostStyle:tt,ghostClass:Z,chosenClass:et,animation:nt,autoScroll:P,scrollStep:H,scrollThreshold:X},(t,e)=>{w.current.from=t;const n=s[It.dragstart];n&&n(d,t,e)},(n,t,e,o)=>{w.current.to=e;const i=s[It.dragend];if(i&&i(n,t,e,o),o){if(D.current.rangeIsChanged&&x.current.direction){const r=g.current;v(t=>{var e;return 0<t.start&&-1<(e=n.indexOf(r[t.start]))?{...t,start:e,end:e+a-1}:{...t}})}g.current=[...n],f(()=>[...n]),M()}$()})}),it=()=>{D.current&&D.current.destroy(),D.current=null},M=()=>{p.current=g.current.map(t=>O(t))},k=e=>g.current.findIndex(t=>O(t)===O(e)),O=yt.default.useCallback(t=>e.replace(/\[/g,".").replace(/\]/g,"").split(".").reduce((t,e)=>(t||{})[e],t),[e]),$=function(n,o){let i=null;return function(){const t=this,e=arguments;i=i||setTimeout(function(){i=null,n.apply(t,e)},o)}}(()=>{w.current=new St},o+17),{scrollSizeKey:L,scrollDirectionKey:A,offsetSizeKey:rt,clientSizeKey:st}=yt.default.useMemo(()=>{var t="vertical"!==n;return{offsetSizeKey:t?"offsetLeft":"offsetTop",scrollSizeKey:t?"scrollWidth":"scrollHeight",clientSizeKey:t?"clientWidth":"clientHeight",scrollDirectionKey:t?"scrollLeft":"scrollTop"}},[n]);const at=Dt(()=>{E.current=g.current[0];const t=s[It.top];t&&t()}),lt=Dt(()=>{const t=s[It.bottom];t&&t()}),ct=(t,e)=>{x.current.handleItemSizeChange(t,e)};t=(t,e)=>{"header"===t&&x.current.handleHeaderSizeChange(e),"footer"===t&&x.current.handleFooterSizeChange(e)};const ht=yt.default.useCallback(t=>{var e=D.current&&D.current.rangeIsChanged,n=(w.current.from||{})["key"];return e&&t==n?{display:"none"}:{}},[w.current]);var{RTag:ut,WTag:dt}=yt.default.useMemo(()=>({RTag:c,WTag:l}),[l,c]),ft=yt.default.useMemo(()=>({...r,overflow:"vertical"!==n?"auto hidden":"hidden auto"}),[r,n]),gt=yt.default.useMemo(()=>{var{front:t,behind:e}=m;return{...h,padding:"vertical"!==n?`0px ${e}px 0px ${t}px`:t+`px 0px ${e}px`}},[h,n,m]),{start:pt,end:mt}=yt.default.useMemo(()=>({...m}),[m]);return yt.default.createElement(ut,{ref:y,className:j,style:ft,onScroll:Dt(t=>{var e,n,o;void 0!==w.current.to.key?$():(o=y.current,e=T(),n=Math.ceil(o[st]),o=Math.ceil(o[L]),e<0||o+1<e+n||!o||(x.current.handleScroll(e),x.current.isFront()?i.length&&e<=0&&at():x.current.isBehind()&&o<=n+e&&lt()))},o)},yt.default.createElement(wt,{children:B,roleId:"header",Tag:W,onSizeChange:t}),yt.default.createElement(dt,{ref:S,"v-role":"group",className:G,style:gt},d.slice(pt,mt+1).map(t=>{var e=O(t),n=k(t);return yt.default.createElement(Et,{key:e,Tag:q,record:t,index:n,dataKey:e,children:R,Class:V,Style:{...U,...ht(e)},onSizeChange:ct})})),yt.default.createElement(wt,{children:F,roleId:"footer",Tag:Y,onSizeChange:t}),yt.default.createElement("div",{ref:b,style:{width:"vertical"!==n?"0px":"100%",height:"vertical"!==n?"100%":"0px"}}))}var s=yt.default.forwardRef(r);t.VirtualDragList=r,t.default=s,Object.defineProperty(t,"__esModule",{value:!0})});

4

package.json
{
"name": "react-virtual-drag-list",
"version": "2.4.4",
"version": "2.4.5",
"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.6"
"sortable-dnd": "0.2.7"
},

@@ -41,0 +41,0 @@ "devDependencies": {

17

README.md

@@ -73,2 +73,11 @@ <p>

**Callback**
| **Emit** | **Type** | **Required?** | **Default** | **Description** |
|------------------|--------------|---------------|--------------|------------------|
| `v-top` | `Function` | | - | Callback function that fires when scrolling to the top |
| `v-bottom` | `Function` | | - | Callback function that fires when scrolling to the bottom |
| `v-dragstart` | `Function` | | - | Callback function when drag is started |
| `v-dragend` | `Function` | | - | Callback function when drag is complete |
**Common used**

@@ -80,9 +89,7 @@

| `dataSource` | `Array` | ✓ | `[]` | Data list |
| `size` | `Number` | | `50` | Estimated height of each row |
| `size` | `Number` | | `-` | Estimated height of each row |
| `keeps` | `Number` | | `30` | The number of lines rendered by the virtual scroll |
| `direction` | `String` | | `vertical` | `vertical/horizontal`, scroll direction |
| `draggable` | `Function/String` | | - | Specifies which items inside the element should be draggable, the function type must return a boolean |
| `v-top` | `Function` | | - | callback function that fires when scrolling to the top |
| `v-bottom` | `Function` | | - | callback function that fires when scrolling to the bottom |
| `v-dragend` | `Function` | | - | event when drag is complete |
| `keepOffset` | `Boolean` | | `false` | When scrolling up to load data, keep the same offset as the previous scroll |
| `autoScroll` | `Boolean` | | `true` | Automatic scrolling when moving to the edge of the container |

@@ -97,3 +104,3 @@ | `scrollStep` | `Number` | | `5` | The distance to scroll each frame when autoscrolling |

| `disabled` | `Boolean` | | `false` | Disables the sortable if set to true |
| `delay` | `Number` | | `0` | Delay time of debounce function |
| `delay` | `Number` | | `10` | Delay time of debounce function |
| `dragging` | `Function` | | `undefined` | Specifies the drag element, which must return an HTMLElement, such as `(e) => e.target` |

@@ -100,0 +107,0 @@ | `header` | `JSX.Element`| | - | Top of list |

15

src/interface.ts

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

delay?: number; // Delay time of debounce function
keepOffset?: boolean; // keep the same offset as the previous scroll
autoScroll?: boolean; // Automatic scrolling when moving to the edge of the container

@@ -101,4 +102,4 @@ scrollStep?: number; // The distance to scroll each frame when autoscrolling

constructor() {
this.from = { key: null, item: null, index: -1 }
this.to = { key: null, item: null, index: -1 }
this.from = { key: undefined, item: undefined, index: -1 }
this.to = { key: undefined, item: undefined, index: -1 }
}

@@ -127,8 +128,8 @@ }

behind: number;
constructor() {
this.start = 0
this.end = 0
this.front = 0
this.behind = 0
constructor(options: any = {}) {
this.start = options.start || 0
this.end = options.end || 0
this.front = options.front || 0
this.behind = options.behind || 0
}
}

99

src/sortable.ts

@@ -5,3 +5,2 @@ import SortableDnd from 'sortable-dnd'

class Sortable<T> {
getKey: Function;
onDrag: Function;

@@ -14,2 +13,3 @@ onDrop: Function;

dataSource: T[];
cloneList: T[];
rangeIsChanged: boolean;

@@ -21,15 +21,18 @@

this.onDrop = onDrop
this.getKey = options.getKey
this.dataSource = options.dataSource
this.cloneList = new Array()
this.dragState = new DragState
this.dataSource = options.dataSource
this.rangeIsChanged = false
this.init()
}
set(key, value) {
set(key: string, value: any) {
this[key] = value
// When the list data changes when dragging, need to execute onDrag function
if (key === 'dataSource' && this.dragElement) this.dragStart(this.dragElement, false)
}
setOption(key, value) {
setOption(key: string, value: any) {
this.options[key] = value

@@ -53,3 +56,2 @@ this.drag.set(key, value)

let cloneList = new Array()
this.drag = new SortableDnd(

@@ -68,46 +70,61 @@ this.options.scrollEl,

scrollThreshold,
onChange: (from: any, to: any) => this.onChange(from, to),
onDrag: (dragEl: HTMLElement) => this.dragStart(dragEl),
onDrop: (changed: boolean) => this.dragEnd(changed)
}
)
}
onDrag: (dragEl: HTMLElement) => {
this.dragElement = dragEl
cloneList = [...this.dataSource]
dragStart(dragEl: HTMLElement, callback: boolean = true) {
this.dragElement = dragEl
this.cloneList = [...this.dataSource]
const key = dragEl.getAttribute('data-key')
const index = this.dataSource.findIndex(el => this.getKey(el) == key)
const item = this.dataSource[index]
Object.assign(this.dragState.from, { item, index, key })
const key = dragEl.getAttribute('data-key')
this.dataSource.forEach((item, index) => {
if (this.options.getKey(item) == key)
this.dragState.from = { item, index, key }
})
if (callback) {
this.rangeIsChanged = false
this.onDrag(this.dragState.from, dragEl)
} else {
this.rangeIsChanged = true
}
}
this.rangeIsChanged = false
this.onDrag(this.dragState.from)
},
onChange: (_old_, _new_) => {
const oldKey = this.dragState.from.key
const newKey = _new_.node.getAttribute('data-key')
onChange(_old_: any, _new_: any) {
const oldKey = this.dragState.from.key
const newKey = _new_.node.getAttribute('data-key')
const from = { item: null, index: -1 }
const to = { item: null, index: -1 }
const from = { item: null, index: -1 }
const to = { item: null, index: -1 }
cloneList.forEach((el, index) => {
const key = this.getKey(el)
if (key == oldKey) Object.assign(from, { item: el, index })
if (key == newKey) Object.assign(to, { item: el, index })
})
this.cloneList.forEach((el, index) => {
const key = this.options.getKey(el)
if (key == oldKey) Object.assign(from, { item: el, index })
if (key == newKey) Object.assign(to, { item: el, index })
})
cloneList.splice(from.index, 1)
cloneList.splice(to.index, 0, from.item)
},
onDrop: (changed: boolean) => {
if (this.rangeIsChanged && this.dragElement) this.dragElement.remove()
this.cloneList.splice(from.index, 1)
this.cloneList.splice(to.index, 0, from.item)
}
const { from } = this.dragState
const index = cloneList.findIndex(el => this.getKey(el) == from.key)
const item = this.dataSource[index]
this.dragState.to = { item, index, key: this.getKey(item) }
dragEnd(changed: boolean) {
const { getKey } = this.options
if (this.rangeIsChanged && this.dragElement) this.dragElement.remove()
this.onDrop(cloneList, from, this.dragState.to, changed)
const { from } = this.dragState
this.cloneList.forEach((el, index) => {
if (getKey(el) == from.key)
this.dragState.to = {
index,
key: getKey(el),
item: this.dataSource[index]
}
})
this.dataSource = [...cloneList]
this.clear()
}
}
)
this.onDrop(this.cloneList, from, this.dragState.to, changed)
this.dataSource = [...this.cloneList]
this.clear()
}

@@ -114,0 +131,0 @@

20

src/utils.ts

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

/**
* 防抖函数
* @param func callback
* @param delay 延迟
* @param immediate 是否立即执行
* @returns
*/
export function debounce(func: Function, delay: number = 50, immediate:boolean = false){

@@ -33,4 +26,17 @@ let timer: any | undefined

export function throttle(fn: Function, delay: number) {
let timer = null
return function() {
const context = this, args = arguments
if(!timer) {
timer = setTimeout(function() {
timer = null
fn.apply(context, args)
}, delay)
}
}
}
export default {
debounce
}

12

src/virtual.ts

@@ -61,4 +61,14 @@ import { VirtualOptions, CalcSize, Range } from "./interface"

updateRange() {
// check if need to update until loaded enough list item
const start = Math.max(this.range.start, 0)
this.handleUpdate(start, this.getEndByStart(start))
const length = Math.min(this.options.keeps, this.options.uniqueKeys.length)
if (this.sizes.size >= length - 2) {
this.handleUpdate(start, this.getEndByStart(start))
} else {
if (window.requestAnimationFrame) {
window.requestAnimationFrame(() => this.updateRange())
} else {
setTimeout(() => this.updateRange(), 3)
}
}
}

@@ -65,0 +75,0 @@ 

dist/draglist.js

Sorry, the diff of this file is too big to display

src/index.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc