Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-virtual-drag-list
Advanced tools
react-virtual-drag-list - npm Package Compare versions
Comparing version 2.4.2 to 2.4.3
| /*! | ||
| * react-virtual-drag-list v2.4.2 | ||
| * react-virtual-drag-list v2.4.3 | ||
| * open source under the MIT license | ||
@@ -91,3 +91,2 @@ * https://github.com/mfuu/react-virtual-drag-list#readme | ||
| }; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [elementRef]); | ||
@@ -146,195 +145,2 @@ return React__namespace.cloneElement(mergedChildren, { | ||
| const CACLTYPE = { | ||
| INIT: 'INIT', | ||
| FIXED: 'FIXED', | ||
| DYNAMIC: 'DYNAMIC' | ||
| }; | ||
| const DIRECTION = { | ||
| FRONT: 'FRONT', | ||
| BEHIND: 'BEHIND' | ||
| }; | ||
| class Virtual { | ||
| options; | ||
| callback; | ||
| sizes; // 用于存储列表项的高度 | ||
| isHorizontal; // 是否为横向滚动 | ||
| calcIndex; // 记录上次计算的index | ||
| calcType; // 记录列表项高度是动态还是静态 | ||
| calcSize; | ||
| range; | ||
| direction; // 滚动方向 | ||
| offset; // 记录滚动距离 | ||
| constructor(options, callback) { | ||
| this.options = { ...options }; | ||
| this.callback = callback; | ||
| this.sizes = new Map(); | ||
| this.isHorizontal = options.isHorizontal; | ||
| this.calcIndex = 0; | ||
| this.calcType = CACLTYPE.INIT; | ||
| this.calcSize = new CalcSize; | ||
| this.direction = ''; | ||
| this.offset = 0; | ||
| this.range = new Range; | ||
| if (options) | ||
| this.checkIfUpdate(0, options.keeps - 1); | ||
| } | ||
| // --------------------------- update ------------------------------ | ||
| updateUniqueKeys(value) { | ||
| this.options.uniqueKeys = value; | ||
| } | ||
| // 更新 sizes，删除不在当前列表中的数据 | ||
| updateSizes(uniqueKeys) { | ||
| this.sizes.forEach((v, k) => { | ||
| if (!uniqueKeys.includes(k)) | ||
| this.sizes.delete(k); | ||
| }); | ||
| } | ||
| updateRange() { | ||
| const start = Math.max(this.range.start, 0); | ||
| this.handleUpdate(start, this.getEndByStart(start)); | ||
| } | ||
| // --------------------------- scroll ------------------------------ | ||
| // 滚动事件 | ||
| handleScroll(offset) { | ||
| this.direction = offset < this.offset ? DIRECTION.FRONT : DIRECTION.BEHIND; | ||
| this.offset = offset; | ||
| const scrolls = this.getScrollItems(offset); | ||
| if (this.isFront()) { | ||
| this.handleScrollFront(scrolls); | ||
| } | ||
| else if (this.isBehind()) { | ||
| this.handleScrollBehind(scrolls); | ||
| } | ||
| } | ||
| isFront() { | ||
| return this.direction === DIRECTION.FRONT; | ||
| } | ||
| isBehind() { | ||
| return this.direction === DIRECTION.BEHIND; | ||
| } | ||
| getScrollItems(offset) { | ||
| const { fixed, header } = this.calcSize; | ||
| // 减去顶部插槽高度 | ||
| if (header) | ||
| offset -= header; | ||
| if (offset <= 0) | ||
| return 0; | ||
| // 固定高度 | ||
| if (this.calcType === CACLTYPE.FIXED) | ||
| return Math.floor(offset / fixed); | ||
| // 非固定高度使用二分查找 | ||
| let low = 0, high = this.options.uniqueKeys.length; | ||
| let middle = 0, middleOffset = 0; | ||
| while (low <= high) { | ||
| middle = low + Math.floor((high - low) / 2); | ||
| middleOffset = this.getOffsetByIndex(middle); | ||
| if (middleOffset === offset) | ||
| return middle; | ||
| else if (middleOffset < offset) | ||
| low = middle + 1; | ||
| else if (middleOffset > offset) | ||
| high = middle - 1; | ||
| } | ||
| return low > 0 ? --low : 0; | ||
| } | ||
| handleScrollFront(scrolls) { | ||
| if (scrolls > this.range.start) | ||
| return; | ||
| const start = Math.max(scrolls - Math.round(this.options.keeps / 3), 0); | ||
| this.checkIfUpdate(start, this.getEndByStart(start)); | ||
| } | ||
| handleScrollBehind(scrolls) { | ||
| if (scrolls < this.range.start + Math.round(this.options.keeps / 3)) | ||
| return; | ||
| this.checkIfUpdate(scrolls, this.getEndByStart(scrolls)); | ||
| } | ||
| checkIfUpdate(start, end) { | ||
| const { uniqueKeys, keeps } = this.options; | ||
| if (uniqueKeys.length <= keeps) { | ||
| start = 0; | ||
| end = uniqueKeys.length - 1; | ||
| } | ||
| else if (end - start < keeps - 1) { | ||
| start = end - keeps + 1; | ||
| } | ||
| if (this.range.start !== start) | ||
| this.handleUpdate(start, end); | ||
| } | ||
| handleUpdate(start, end) { | ||
| this.range.start = start; | ||
| this.range.end = end; | ||
| this.range.front = this.getFrontOffset(); | ||
| this.range.behind = this.getBehindOffset(); | ||
| this.callback({ ...this.range }); | ||
| } | ||
| getFrontOffset() { | ||
| if (this.calcType === CACLTYPE.FIXED) { | ||
| return this.calcSize.fixed * this.range.start; | ||
| } | ||
| else { | ||
| return this.getOffsetByIndex(this.range.start); | ||
| } | ||
| } | ||
| getBehindOffset() { | ||
| const last = this.getLastIndex(); | ||
| if (this.calcType === CACLTYPE.FIXED) { | ||
| return (last - this.range.end) * this.calcSize.fixed; | ||
| } | ||
| if (this.calcIndex === last) { | ||
| return this.getOffsetByIndex(last) - this.getOffsetByIndex(this.range.end); | ||
| } | ||
| return (last - this.range.end) * this.getItemSize(); | ||
| } | ||
| getOffsetByIndex(index) { | ||
| if (!index) | ||
| return 0; | ||
| let offset = 0; | ||
| for (let i = 0; i < index; i++) { | ||
| const size = this.sizes.get(this.options.uniqueKeys[i]); | ||
| offset = offset + (typeof size === 'number' ? size : this.getItemSize()); | ||
| } | ||
| this.calcIndex = Math.max(this.calcIndex, index - 1); | ||
| this.calcIndex = Math.min(this.calcIndex, this.getLastIndex()); | ||
| return offset; | ||
| } | ||
| getEndByStart(start) { | ||
| return Math.min(start + this.options.keeps - 1, this.getLastIndex()); | ||
| } | ||
| getLastIndex() { | ||
| return this.options.uniqueKeys.length - 1; | ||
| } | ||
| // --------------------------- size ------------------------------ | ||
| // 获取列表项的高度 | ||
| getItemSize() { | ||
| return this.calcType === CACLTYPE.FIXED ? this.calcSize.fixed : (this.calcSize.average || this.options.size); | ||
| } | ||
| // 列表项高度变化 | ||
| handleItemSizeChange(id, size) { | ||
| this.sizes.set(id, size); | ||
| // 'INIT' 状态表示每一项的高度都相同 | ||
| if (this.calcType === CACLTYPE.INIT) { | ||
| this.calcType = CACLTYPE.FIXED; // 固定高度 | ||
| this.calcSize.fixed = size; | ||
| } | ||
| else if (this.calcType === CACLTYPE.FIXED && this.calcSize.fixed !== size) { | ||
| // 如果当前为 'FIXED' 状态并且 size 与固定高度不同，表示当前高度不固定，fixed值也就不需要了 | ||
| this.calcType = CACLTYPE.DYNAMIC; | ||
| this.calcSize.fixed = undefined; | ||
| } | ||
| // 非固定高度的情况下，计算平均高度与总高度 | ||
| if (this.calcType !== CACLTYPE.FIXED) { | ||
| this.calcSize.total = [...this.sizes.values()].reduce((t, i) => t + i, 0); | ||
| this.calcSize.average = Math.round(this.calcSize.total / this.sizes.size); | ||
| } | ||
| } | ||
| // header 插槽高度变化 | ||
| handleHeaderSizeChange(size) { | ||
| this.calcSize.header = size; | ||
| } | ||
| // footer 插槽高度变化 | ||
| handleFooterSizeChange(size) { | ||
| this.calcSize.footer = size; | ||
| } | ||
| } | ||
| var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; | ||
@@ -351,4 +157,4 @@ | ||
| function d(t) { | ||
| return (d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) { | ||
| function i(t) { | ||
| return (i = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) { | ||
| return typeof t; | ||
@@ -371,11 +177,11 @@ } : function (t) { | ||
| function i(t, e, o) { | ||
| e && n(t.prototype, e), o && n(t, o), Object.defineProperty(t, "prototype", { | ||
| function r(t, e, o) { | ||
| return e && n(t.prototype, e), o && n(t, o), Object.defineProperty(t, "prototype", { | ||
| writable: !1 | ||
| }); | ||
| }), t; | ||
| } | ||
| function r(t) { | ||
| function s(t) { | ||
| return function (t) { | ||
| if (Array.isArray(t)) return s(t); | ||
| if (Array.isArray(t)) return a(t); | ||
| }(t) || function (t) { | ||
@@ -385,5 +191,5 @@ if ("undefined" != typeof Symbol && null != t[Symbol.iterator] || null != t["@@iterator"]) return Array.from(t); | ||
| if (t) { | ||
| if ("string" == typeof t) return s(t, e); | ||
| if ("string" == typeof t) return a(t, e); | ||
| var o = Object.prototype.toString.call(t).slice(8, -1); | ||
| return "Map" === (o = "Object" === o && t.constructor ? t.constructor.name : o) || "Set" === o ? Array.from(t) : "Arguments" === o || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o) ? s(t, e) : void 0; | ||
| return "Map" === (o = "Object" === o && t.constructor ? t.constructor.name : o) || "Set" === o ? Array.from(t) : "Arguments" === o || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o) ? a(t, e) : void 0; | ||
| } | ||
@@ -395,3 +201,3 @@ }(t) || function () { | ||
| function s(t, e) { | ||
| function a(t, e) { | ||
| (null == e || e > t.length) && (e = t.length); | ||
@@ -408,42 +214,49 @@ | ||
| var a = t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i), | ||
| l = t(/Edge/i), | ||
| f = t(/safari/i) && !t(/chrome/i) && !t(/android/i), | ||
| e = t(/iP(ad|od|hone)/i), | ||
| h = t(/chrome/i) && t(/android/i), | ||
| c = { | ||
| var e, | ||
| l = t(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i), | ||
| c = t(/Edge/i), | ||
| h = t(/safari/i) && !t(/chrome/i) && !t(/android/i), | ||
| u = t(/iP(ad|od|hone)/i), | ||
| f = t(/chrome/i) && t(/android/i), | ||
| d = { | ||
| capture: !1, | ||
| passive: !1 | ||
| }, | ||
| u = /\s+/g, | ||
| p = ["-webkit-transition", "-moz-transition", "-ms-transition", "-o-transition", "transition"], | ||
| v = ["-webkit-transform", "-moz-transform", "-ms-transform", "-o-transform", "transform"]; | ||
| p = /\s+/g, | ||
| m = ["-webkit-transition", "-moz-transition", "-ms-transition", "-o-transition", "transition"], | ||
| g = ["-webkit-transform", "-moz-transform", "-ms-transform", "-o-transform", "transform"], | ||
| v = (e = !1, document.addEventListener("checkIfSupportPassive", null, { | ||
| get passive() { | ||
| return e = !0; | ||
| } | ||
| function m(e, o) { | ||
| o ? "none" === o ? p.forEach(function (t) { | ||
| return D(e, t, "none"); | ||
| }) : p.forEach(function (t) { | ||
| return D(e, t, "".concat(t.split("transition")[0], "transform ").concat(o)); | ||
| }) : p.forEach(function (t) { | ||
| return D(e, t, ""); | ||
| }), e); | ||
| function y(e, o) { | ||
| o ? "none" === o ? m.forEach(function (t) { | ||
| return M(e, t, "none"); | ||
| }) : m.forEach(function (t) { | ||
| return M(e, t, "".concat(t.split("transition")[0], "transform ").concat(o)); | ||
| }) : m.forEach(function (t) { | ||
| return M(e, t, ""); | ||
| }); | ||
| } | ||
| function g(e, o) { | ||
| o ? v.forEach(function (t) { | ||
| return D(e, t, "".concat(t.split("transform")[0]).concat(o)); | ||
| }) : v.forEach(function (t) { | ||
| return D(e, t, ""); | ||
| function w(e, o) { | ||
| o ? g.forEach(function (t) { | ||
| return M(e, t, "".concat(t.split("transform")[0]).concat(o)); | ||
| }) : g.forEach(function (t) { | ||
| return M(e, t, ""); | ||
| }); | ||
| } | ||
| function w(t, e, o, n) { | ||
| window.addEventListener ? t.addEventListener(e, o, !(!n && a) && c) : window.attachEvent && t.attachEvent("on" + e, o); | ||
| function b(t, e, o) { | ||
| window.addEventListener ? t.addEventListener(e, o, !(!v && l) && d) : window.attachEvent && t.attachEvent("on" + e, o); | ||
| } | ||
| function y(t, e, o, n) { | ||
| window.removeEventListener ? t.removeEventListener(e, o, !(!n && a) && c) : window.detachEvent && t.detachEvent("on" + e, o); | ||
| function E(t, e, o) { | ||
| window.removeEventListener ? t.removeEventListener(e, o, !(!v && l) && d) : window.detachEvent && t.detachEvent("on" + e, o); | ||
| } | ||
| function b(t) { | ||
| function S(t) { | ||
| for (var e = { | ||
@@ -459,4 +272,29 @@ top: 0, | ||
| function E(t) { | ||
| var e, o; | ||
| function _(t, e) { | ||
| if (!t || !t.getBoundingClientRect) return D(); | ||
| var o = t, | ||
| n = !1; | ||
| do { | ||
| if (o.clientWidth < o.scrollWidth || o.clientHeight < o.scrollHeight) { | ||
| var i = M(o); | ||
| if (o.clientWidth < o.scrollWidth && ("auto" == i.overflowX || "scroll" == i.overflowX) || o.clientHeight < o.scrollHeight && ("auto" == i.overflowY || "scroll" == i.overflowY)) { | ||
| if (!o.getBoundingClientRect || o === document.body) return D(); | ||
| if (n || e) return o; | ||
| n = !0; | ||
| } | ||
| } | ||
| } while (o = o.parentNode); | ||
| return D(); | ||
| } | ||
| function D() { | ||
| var t = document.scrollingElement; | ||
| return !t || t.contains(document.body) ? document : t; | ||
| } | ||
| function T(t) { | ||
| var e; | ||
| if (t.getBoundingClientRect || t === window) return e = { | ||
@@ -469,7 +307,7 @@ top: 0, | ||
| width: 0 | ||
| }, t !== window && t.parentNode && t !== (!(o = document.scrollingElement) || o.contains(document.body) ? document : o) ? (o = t.getBoundingClientRect(), e.top = o.top, e.left = o.left, e.bottom = o.bottom, e.right = o.right, e.height = o.height, e.width = o.width) : (e.top = 0, e.left = 0, e.bottom = window.innerHeight, e.right = window.innerWidth, e.height = window.innerHeight, e.width = window.innerWidth), e; | ||
| }, t !== window && t.parentNode && t !== D() ? (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 S(t, e, o) { | ||
| var n = r(Array.from(t.children)), | ||
| function x(t, e, o) { | ||
| var n = s(Array.from(t.children)), | ||
| t = n.indexOf(e); | ||
@@ -479,4 +317,4 @@ if (-1 < t) return o ? n[t] : { | ||
| el: n[t], | ||
| rect: E(n[t]), | ||
| offset: b(n[t]) | ||
| rect: T(n[t]), | ||
| offset: S(n[t]) | ||
| }; | ||
@@ -494,4 +332,4 @@ | ||
| el: n[i], | ||
| rect: E(n[i]), | ||
| offset: b(n[i]) | ||
| rect: T(n[i]), | ||
| offset: S(n[i]) | ||
| }; | ||
@@ -507,8 +345,8 @@ | ||
| function _(t, e, o) { | ||
| function $(t, e, o) { | ||
| var n; | ||
| t && e && (t.classList ? t.classList[o ? "add" : "remove"](e) : (n = (" " + t.className + " ").replace(u, " ").replace(" " + e + " ", " "), t.className = (n + (o ? " " + e : "")).replace(u, " "))); | ||
| t && e && (t.classList ? t.classList[o ? "add" : "remove"](e) : (n = (" " + t.className + " ").replace(p, " ").replace(" " + e + " ", " "), t.className = (n + (o ? " " + e : "")).replace(p, " "))); | ||
| } | ||
| function D(t, e, o) { | ||
| function M(t, e, o) { | ||
| var n = t && t.style; | ||
@@ -522,3 +360,28 @@ | ||
| var x = function () { | ||
| function k(o, n, i) { | ||
| var r = null; | ||
| return function () { | ||
| var t = this, | ||
| e = arguments; | ||
| r && clearTimeout(r), i && !r && o.apply(t, e), r = setTimeout(function () { | ||
| o.apply(t, e); | ||
| }, n); | ||
| }; | ||
| } | ||
| function P(o, n) { | ||
| var i = null; | ||
| return function () { | ||
| var t = this, | ||
| e = arguments; | ||
| i = i || setTimeout(function () { | ||
| i = null, o.apply(t, e); | ||
| }, n); | ||
| }; | ||
| } | ||
| var A = r(function t() { | ||
| o(this, t), this.sortableDown = void 0, this.sortableMove = void 0, this.animationEnd = void 0; | ||
| }), | ||
| C = function () { | ||
| function t() { | ||
@@ -536,3 +399,3 @@ o(this, t), this.from = { | ||
| return i(t, [{ | ||
| return r(t, [{ | ||
| key: "get", | ||
@@ -562,31 +425,24 @@ value: function (t) { | ||
| }(), | ||
| $ = function () { | ||
| L = function () { | ||
| function e(t) { | ||
| o(this, e), this.options = t, this.diff = { | ||
| o(this, e), this.$el = null, this.distance = { | ||
| x: 0, | ||
| y: 0 | ||
| }, this.position = { | ||
| x: 0, | ||
| y: 0 | ||
| }, this.exist = !1; | ||
| }, this.options = t.options, this.container = t.container; | ||
| } | ||
| return i(e, [{ | ||
| return r(e, [{ | ||
| key: "init", | ||
| value: function (t, e) { | ||
| var o, n; | ||
| this.$el && this.$el.remove(), t && (this.$el = t, o = (t = this.options).ghostClass, t = void 0 === (t = t.ghostStyle) ? {} : t, n = e.width, e = e.height, this.$el.class = o, this.$el.style.width = n + "px", this.$el.style.height = e + "px", this.$el.style.position = "fixed", this.$el.style.left = 0, this.$el.style.top = 0, this.$el.style.zIndex = 1e5, this.$el.style.opacity = .8, this.$el.style.pointerEvents = "none", this.$el.style.cursor = "move", m(this.$el, "none"), g(this.$el, "translate3d(0px, 0px, 0px)"), this.setStyle(t)); | ||
| this.$el = t; | ||
| var t = this.options, | ||
| o = t.ghostClass, | ||
| t = t.ghostStyle, | ||
| t = void 0 === t ? {} : t; | ||
| $(this.$el, o, !0), M(this.$el, "box-sizing", "border-box"), M(this.$el, "margin", 0), M(this.$el, "top", e.top), M(this.$el, "left", e.left), M(this.$el, "width", e.width), M(this.$el, "height", e.height), M(this.$el, "opacity", "0.8"), M(this.$el, "position", "fixed"), M(this.$el, "zIndex", "100000"), M(this.$el, "pointerEvents", "none"), this.setStyle(t), y(this.$el, "none"), w(this.$el, "translate3d(0px, 0px, 0px)"), this.container.appendChild(this.$el), M(this.$el, "transform-origin", this.distance.x / parseInt(this.$el.style.width) * 100 + "% " + this.distance.y / parseInt(this.$el.style.height) * 100 + "%"); | ||
| } | ||
| }, { | ||
| key: "setPosition", | ||
| value: function (t, e) { | ||
| this.position = { | ||
| x: t - this.diff.x, | ||
| y: e - this.diff.y | ||
| }; | ||
| } | ||
| }, { | ||
| key: "setStyle", | ||
| value: function (t) { | ||
| for (var e in t) D(this.$el, e, t[e]); | ||
| for (var e in t) M(this.$el, e, t[e]); | ||
| } | ||
@@ -596,9 +452,8 @@ }, { | ||
| value: function () { | ||
| return E(this.$el); | ||
| return T(this.$el); | ||
| } | ||
| }, { | ||
| key: "move", | ||
| value: function (t) { | ||
| var e; | ||
| this.$el && (e = this.options.ghostAnimation, m(this.$el, t ? "".concat(e, "ms") : "none"), this.exist || (document.body.appendChild(this.$el), this.exist = !0), g(this.$el, "translate3d(".concat(this.position.x, "px, ").concat(this.position.y, "px, 0)")), "move" !== this.$el.style.cursor && (this.$el.style.cursor = "move")); | ||
| value: function (t, e) { | ||
| this.$el && (y(this.$el, 2 < arguments.length && void 0 !== arguments[2] && arguments[2] ? "".concat(this.options.ghostAnimation, "ms") : "none"), w(this.$el, "translate3d(".concat(t, "px, ").concat(e, "px, 0)"))); | ||
| } | ||
@@ -608,10 +463,8 @@ }, { | ||
| value: function (t) { | ||
| var e = this, | ||
| t = (t && (this.position = { | ||
| x: t.left, | ||
| y: t.top | ||
| }, this.move(!0)), this.options.ghostAnimation); | ||
| t ? setTimeout(function () { | ||
| return e.clear(); | ||
| }, t) : this.clear(); | ||
| var e, | ||
| o, | ||
| n = this; | ||
| this.$el && (o = parseInt(this.$el.style.left), e = parseInt(this.$el.style.top), this.move(t.left - o, t.top - e, !0), (o = this.options.ghostAnimation) ? setTimeout(function () { | ||
| return n.clear(); | ||
| }, o) : this.clear()); | ||
| } | ||
@@ -621,9 +474,6 @@ }, { | ||
| value: function () { | ||
| this.$el && this.$el.remove(), this.$el = null, this.diff = { | ||
| this.$el && this.$el.remove(), this.distance = { | ||
| x: 0, | ||
| y: 0 | ||
| }, this.position = { | ||
| x: 0, | ||
| y: 0 | ||
| }, this.exist = !1; | ||
| }, this.$el = null; | ||
| } | ||
@@ -633,7 +483,7 @@ }]), e; | ||
| function P() { | ||
| function O() { | ||
| var i = []; | ||
| return { | ||
| captureAnimationState: function () { | ||
| var t = r(Array.from(this.$el.children)), | ||
| var t = s(Array.from(this.rootEl.children)), | ||
| e = (o = t, n = this.dragEl, e = this.dropEl, n = o.indexOf(n), o = o.indexOf(e), n < o ? { | ||
@@ -651,3 +501,3 @@ start: n, | ||
| target: t, | ||
| rect: E(t) | ||
| rect: T(t) | ||
| }); | ||
@@ -661,3 +511,3 @@ }); | ||
| t = t.rect; | ||
| o.animate(e, t, o.animation); | ||
| o.animate(e, t, o.options.animation); | ||
| }); | ||
@@ -667,7 +517,7 @@ }, | ||
| var o = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : 150, | ||
| n = E(t), | ||
| n = T(t), | ||
| i = e.left - n.left, | ||
| e = e.top - n.top; | ||
| m(t, "none"), g(t, "translate3d(".concat(i, "px, ").concat(e, "px, 0)")), t.offsetLeft, m(t, "".concat(o, "ms")), g(t, "translate3d(0px, 0px, 0px)"), clearTimeout(t.animated), t.animated = setTimeout(function () { | ||
| m(t, ""), g(t, ""), t.animated = null; | ||
| y(t, "none"), w(t, "translate3d(".concat(i, "px, ").concat(e, "px, 0)")), t.offsetLeft, y(t, "".concat(o, "ms")), w(t, "translate3d(0px, 0px, 0px)"), clearTimeout(t.animated), t.animated = setTimeout(function () { | ||
| y(t, ""), w(t, ""), t.animated = null; | ||
| }, o); | ||
@@ -678,10 +528,12 @@ } | ||
| var M = "undefined" != typeof document && !h && !e && "draggable" in document.createElement("div"); | ||
| var I = "undefined" != typeof document && !f && !u && "draggable" in document.createElement("div"); | ||
| function O(t, e) { | ||
| function H(t, e) { | ||
| if (!t || !t.nodeType || 1 !== t.nodeType) throw "Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t)); | ||
| this.$el = t, this.options = e = Object.assign({}, e), this.dragEl = null, this.dropEl = null, this.differ = null, this.ghost = null; | ||
| this.rootEl = t, this.scrollEl = _(t, !0), this.options = e = Object.assign({}, e), this.ownerDocument = t.ownerDocument; | ||
| var o, | ||
| n, | ||
| i = { | ||
| n = { | ||
| autoScroll: !0, | ||
| scrollStep: 5, | ||
| scrollThreshold: 15, | ||
| delay: 0, | ||
@@ -701,77 +553,68 @@ delayOnTouchOnly: !1, | ||
| onChange: void 0, | ||
| fallbackOnBody: !1, | ||
| forceFallback: !1, | ||
| stopPropagation: !1, | ||
| supportPassive: (o = !1, document.addEventListener("checkIfSupportPassive", null, { | ||
| get passive() { | ||
| return o = !0; | ||
| } | ||
| }), o), | ||
| supportPointer: "PointerEvent" in window && !f, | ||
| supportTouch: "ontouchstart" in window, | ||
| ownerDocument: this.$el.ownerDocument | ||
| supportPointer: "PointerEvent" in window && !h, | ||
| supportTouch: "ontouchstart" in window | ||
| }; | ||
| for (n in i) n in this.options || (this.options[n] = i[n]); | ||
| for (o in n) o in this.options || (this.options[o] = n[o]); | ||
| this.nativeDraggable = !this.options.forceFallback && M, this.differ = new x(), this.ghost = new $(this.options), Object.assign(this, P(), { | ||
| this.container = this.options.fallbackOnBody ? document.body : this.rootEl, this.nativeDraggable = !this.options.forceFallback && I, this.move = { | ||
| x: 0, | ||
| y: 0 | ||
| }, this.state = new A(), this.differ = new C(), this.ghost = new L(this), this.dragEl = null, this.dropEl = null, this.dragStartTimer = null, this.autoScrollTimer = null, Object.assign(this, O(), { | ||
| _bindEventListener: function () { | ||
| this._onStart = this._onStart.bind(this), this._onMove = this._onMove.bind(this), this._onDrop = this._onDrop.bind(this); | ||
| var t = this.options, | ||
| e = t.supportPointer, | ||
| o = t.supportTouch, | ||
| t = t.supportPassive; | ||
| w(this.$el, e ? "pointerdown" : o ? "touchstart" : "mousedown", this._onStart, t); | ||
| t = t.supportTouch; | ||
| b(this.rootEl, e ? "pointerdown" : t ? "touchstart" : "mousedown", this._onStart); | ||
| }, | ||
| _unbindEventListener: function () { | ||
| var t = this.options.supportPassive; | ||
| y(this.$el, "pointerdown", this._onStart, t), y(this.$el, "touchstart", this._onStart, t), y(this.$el, "mousedown", this._onStart, t); | ||
| E(this.rootEl, "pointerdown", this._onStart), E(this.rootEl, "touchstart", this._onStart), E(this.rootEl, "mousedown", this._onStart); | ||
| }, | ||
| _bindMoveEvents: function (t) { | ||
| var e = this.options, | ||
| o = e.supportPointer, | ||
| n = e.ownerDocument, | ||
| e = e.supportPassive; | ||
| w(n, o ? "pointermove" : t ? "touchmove" : "mousemove", this._onMove, e); | ||
| this.options.supportPointer ? b(this.ownerDocument, "pointermove", this._onMove) : b(this.ownerDocument, t ? "touchmove" : "mousemove", this._onMove); | ||
| }, | ||
| _bindUpEvents: function () { | ||
| var t = this.options, | ||
| e = t.ownerDocument, | ||
| t = t.supportPassive; | ||
| w(e, "pointerup", this._onDrop, t), w(e, "pointercancel", this._onDrop, t), w(e, "touchend", this._onDrop, t), w(e, "touchcancel", this._onDrop, t), w(e, "mouseup", this._onDrop, t); | ||
| b(this.ownerDocument, "pointerup", this._onDrop), b(this.ownerDocument, "pointercancel", this._onDrop), b(this.ownerDocument, "touchend", this._onDrop), b(this.ownerDocument, "touchcancel", this._onDrop), b(this.ownerDocument, "mouseup", this._onDrop); | ||
| }, | ||
| _unbindMoveEvents: function () { | ||
| var t = this.options, | ||
| e = t.ownerDocument, | ||
| t = t.supportPassive; | ||
| y(e, "pointermove", this._onMove, t), y(e, "touchmove", this._onMove, t), y(e, "mousemove", this._onMove, t); | ||
| E(this.ownerDocument, "pointermove", this._onMove), E(this.ownerDocument, "touchmove", this._onMove), E(this.ownerDocument, "mousemove", this._onMove); | ||
| }, | ||
| _unbindUpEvents: function () { | ||
| var t = this.options, | ||
| e = t.ownerDocument, | ||
| t = t.supportPassive; | ||
| y(e, "pointerup", this._onDrop, t), y(e, "pointercancel", this._onDrop, t), y(e, "touchend", this._onDrop, t), y(e, "touchcancel", this._onDrop, t), y(e, "mouseup", this._onDrop, t); | ||
| E(this.ownerDocument, "pointerup", this._onDrop), E(this.ownerDocument, "pointercancel", this._onDrop), E(this.ownerDocument, "touchend", this._onDrop), E(this.ownerDocument, "touchcancel", this._onDrop), E(this.ownerDocument, "mouseup", this._onDrop); | ||
| } | ||
| }), this._bindEventListener(), this._handleDestroy(); | ||
| }), 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); | ||
| }); | ||
| } | ||
| return O.prototype = { | ||
| constructor: O, | ||
| return H.prototype = { | ||
| constructor: H, | ||
| destroy: function () { | ||
| this._unbindEventListener(), this._resetState(); | ||
| 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.options, | ||
| o = e.delay, | ||
| n = e.disabled, | ||
| i = e.stopPropagation, | ||
| e = e.delayOnTouchOnly; | ||
| var e = this; | ||
| if (!(/mousedown|pointerdown/.test(t.type) && 0 !== t.button || n)) { | ||
| var n = t.touches && t.touches[0] || t.pointerType && "touch" === t.pointerType && t, | ||
| r = n || t; | ||
| if (!(/mousedown|pointerdown/.test(t.type) && 0 !== t.button || this.options.disabled)) { | ||
| var o = t.touches && t.touches[0] || t.pointerType && "touch" === t.pointerType && t, | ||
| n = o || t; | ||
| if (this.nativeDraggable || !f || !r.target || "SELECT" !== r.target.tagName.toUpperCase()) { | ||
| if (r.target === this.$el) return !0; | ||
| i && t.stopPropagation(), !o || e && !n || this.nativeDraggable && (l || a) ? this._onDrag(r, n) : this.dragStartTimer = setTimeout(this._onDrag(r, n), o); | ||
| if (this.nativeDraggable || !h || !n.target || "SELECT" !== n.target.tagName.toUpperCase()) { | ||
| if (n.target === this.rootEl) return !0; | ||
| this.options.stopPropagation && t.stopPropagation(); | ||
| var t = this.options, | ||
| i = t.delay, | ||
| t = t.delayOnTouchOnly; | ||
| !i || t && !o || this.nativeDraggable && (c || l) ? this._onDrag(n, o) : (clearTimeout(this.dragStartTimer), this.dragStartTimer = setTimeout(function () { | ||
| return e._onDrag(n, o); | ||
| }, i)); | ||
| } | ||
@@ -797,22 +640,14 @@ } | ||
| }(t.target, n)) return !0; | ||
| } else if (void 0 !== n) throw new Error('draggable expected "function" or "string" but received "'.concat(d(n), '"')); | ||
| } else if (void 0 !== n) throw new Error('draggable expected "function" or "string" but received "'.concat(i(n), '"')); | ||
| try { | ||
| document.selection ? setTimeout(function () { | ||
| document.selection.empty(); | ||
| }, 0) : window.getSelection().removeAllRanges(); | ||
| } catch (t) { | ||
| throw new Error(t); | ||
| } | ||
| if (o) { | ||
| if ("function" != typeof o) throw new Error('dragging expected "function" or "string" but received "'.concat(d(o), '"')); | ||
| 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 = S(this.$el, t.target, !0); | ||
| } else this.dragEl = x(this.rootEl, t.target, !0); | ||
| if (!this.dragEl || this.dragEl.animated) return !0; | ||
| n = S(this.$el, this.dragEl), o = n.rect, n = n.offset; | ||
| window.sortableDndOnDownState = !0, this.ghost.setPosition(o.left, o.top), this.ghost.diff = { | ||
| x: t.clientX - o.left, | ||
| y: t.clientY - o.top | ||
| n = x(this.rootEl, this.dragEl), o = n.rect, n = n.offset; | ||
| this.move = { | ||
| x: t.clientX, | ||
| y: t.clientY | ||
| }, this.differ.from = { | ||
@@ -822,109 +657,72 @@ node: this.dragEl, | ||
| offset: n | ||
| }, this._bindMoveEvents(e), this._bindUpEvents(e); | ||
| }, 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 o; | ||
| this.ghost.$el || (o = this.differ.from.rect, this.ghost.init(this.dragEl.cloneNode(!0), o), $(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), h && M(document.body, "user-select", "none")); | ||
| }, | ||
| _onMove: function (t) { | ||
| void 0 !== t.preventDefault && t.preventDefault(); | ||
| var e = this.options, | ||
| o = e.chosenClass, | ||
| n = e.stopPropagation, | ||
| i = e.onMove, | ||
| e = e.onDrag, | ||
| n = (n && t.stopPropagation(), t.touches && t.touches[0]), | ||
| r = n || t, | ||
| s = r.clientX, | ||
| a = r.clientY, | ||
| n = n ? document.elementFromPoint(s, a) : r.target; | ||
| if (!this.ghost.$el && (this.ghost.init(this.dragEl.cloneNode(!0), this.differ.from.rect), void 0 !== e)) { | ||
| if ("function" != typeof e) throw new Error('onDrag expected "function" but received "'.concat(d(e), '"')); | ||
| e(this.dragEl, r, t); | ||
| } | ||
| if (void 0 !== i) { | ||
| if ("function" != typeof i) throw new Error('onMove expected "function" but received "'.concat(d(i), '"')); | ||
| i(this.differ.from, this.ghost.$el, r, t); | ||
| } | ||
| if (_(this.dragEl, o, !0), this.ghost.move(), window.sortableDndOnDownState && !(s < 0 || a < 0)) { | ||
| window.sortableDndOnMoveState = !0, this.ghost.setPosition(s, a), this.ghost.move(); | ||
| e = E(this.$el); | ||
| if (s < e.left || s > e.right || a < e.top || a > e.bottom) this.ghost.setStyle({ | ||
| cursor: "not-allowed" | ||
| });else { | ||
| var i = S(this.$el, n), | ||
| o = i.index, | ||
| e = i.el, | ||
| n = i.rect, | ||
| i = i.offset, | ||
| l = n.left, | ||
| f = n.right, | ||
| h = n.top, | ||
| c = n.bottom; | ||
| if (e && !(o < 0) && (this.dropEl = e, l < s && s < f && h < a && a < c && e !== this.dragEl && (this.differ.to = { | ||
| node: this.dropEl, | ||
| rect: n, | ||
| offset: i | ||
| }, !e.animated))) { | ||
| this.captureAnimationState(); | ||
| o = this.options.onChange, l = b(this.dragEl); | ||
| if (void 0 !== o) { | ||
| if ("function" != typeof o) throw new Error('onChange expected "function" but received "'.concat(d(o), '"')); | ||
| o(this.differ.from, this.differ.to, r, t); | ||
| } | ||
| l.top < i.top || l.left < i.left ? this.$el.insertBefore(this.dragEl, e.nextElementSibling) : this.$el.insertBefore(this.dragEl, e), this.animateRange(); | ||
| } | ||
| } | ||
| } | ||
| var e, | ||
| o, | ||
| n, | ||
| i, | ||
| r, | ||
| s, | ||
| a, | ||
| l, | ||
| c = this; | ||
| this.state.sortableDown && (o = (e = (i = t.touches && t.touches[0] || t.pointerType && "touch" === t.pointerType && t) || t).clientX, n = e.clientY, i = i ? document.elementFromPoint(o, n) : e.target, s = o - this.move.x, r = n - this.move.y, void 0 !== o && Math.abs(s) <= 0 && void 0 !== n && 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), o < 0 || n < 0 || (s = (r = T(this.rootEl)).top, a = r.right, l = r.bottom, o < r.left || a < o || n < s || l < n || (this._onChange(this, i, e, t), this.autoScrollTimer && clearTimeout(this.autoScrollTimer), this.options.autoScroll && (this.autoScrollTimer = setTimeout(function () { | ||
| return c._autoScroll(c); | ||
| }, 0)))))); | ||
| }, | ||
| _onChange: k(function (t, e, o, n) { | ||
| var i, | ||
| r, | ||
| s, | ||
| a, | ||
| l, | ||
| c, | ||
| e = x(t.rootEl, e), | ||
| h = e.el, | ||
| u = e.rect, | ||
| e = e.offset; | ||
| h && !h.animated && (t.dropEl = h, c = o.clientX, i = o.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 = S(t.dragEl), l && "function" == typeof l && l(t.differ.from, t.differ.to, o, n), 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._unbindMoveEvents(), this._unbindUpEvents(), clearTimeout(this.dragStartTimer); | ||
| var e = this.options, | ||
| o = e.onDrop, | ||
| n = e.chosenClass; | ||
| if (e.stopPropagation && t.stopPropagation(), _(this.dragEl, n, !1), window.sortableDndOnDownState && window.sortableDndOnMoveState) { | ||
| this.differ.to.offset = b(this.dragEl), this.differ.to.rect = E(this.dragEl); | ||
| e = this.differ, n = e.from, e = e.to, n = n.offset.top !== e.offset.top || n.offset.left !== e.offset.left; | ||
| if (void 0 !== o) { | ||
| if ("function" != typeof o) throw new Error('onDrop expected "function" but received "'.concat(d(o), '"')); | ||
| o(n, t); | ||
| } | ||
| this.ghost.destroy(E(this.dragEl)); | ||
| } | ||
| this.differ.destroy(), this._removeWindowState(); | ||
| var e, o, n; | ||
| this._unbindMoveEvents(), this._unbindUpEvents(), clearTimeout(this.dragStartTimer), this.options.stopPropagation && t.stopPropagation(), t.cancelable && t.preventDefault(), $(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 = S(this.dragEl), this.differ.to.rect = T(this.dragEl), o = (e = this.differ).from, e = e.to, o = o.offset.top !== e.offset.top || o.offset.left !== e.offset.left, (n = this.options.onDrop) && "function" == typeof n && n(o, t), this.ghost.destroy(e.rect)), this.differ.destroy(), this.state = new A(), h && M(document.body, "user-select", ""); | ||
| }, | ||
| _resetState: function () { | ||
| this.dragEl = null, this.dropEl = null, this.ghost.destroy(), this.differ.destroy(), this._removeWindowState(); | ||
| _autoScroll: P(function (t) { | ||
| var e, o, n, i, r, s, a, l, c, h, u, f, d, p, m; | ||
| t.state.sortableDown && t.state.sortableMove && (e = (o = t.state.sortableMove).clientX, o = o.clientY, void 0 !== e && void 0 !== o && t.scrollEl !== t.ownerDocument && (n = (p = t.scrollEl).scrollTop, i = p.scrollLeft, r = p.scrollHeight, p = p.scrollWidth, s = (d = T(t.scrollEl)).top, u = d.right, a = d.bottom, f = d.left, l = d.height, d = d.width, c = (h = t.options).scrollStep, h = h.scrollThreshold, f = 0 < i && f <= e && e <= f + h, d = i + d < p && e <= u && u - h <= e, p = n + l < r && o <= a && a - h <= o, m = { | ||
| x: i, | ||
| y: n | ||
| }, (u = 0 < n && s <= o && o <= s + h) ? (m.x = f ? i - c : d ? i + c : i, m.y = n - c) : p ? (m.x = f ? i - c : d ? i + c : i, m.y = n + c) : f ? (m.x = i - c, m.y = n) : d && (m.x = i + c, m.y = n), (u || f || d || p) && requestAnimationFrame(function () { | ||
| t.scrollEl.scrollTo(m.x, m.y), t._autoScroll(t); | ||
| }))); | ||
| }, 10), | ||
| _removeSelection: function () { | ||
| try { | ||
| document.selection ? setTimeout(function () { | ||
| document.selection.empty(); | ||
| }, 0) : window.getSelection().removeAllRanges(); | ||
| } catch (t) {} | ||
| }, | ||
| _removeWindowState: function () { | ||
| window.sortableDndOnDownState = null, window.sortableDndOnMoveState = null, window.sortableDndAnimationEnd = null, delete window.sortableDndOnDownState, delete window.sortableDndOnMoveState, delete window.sortableDndAnimationEnd; | ||
| }, | ||
| _handleDestroy: function () { | ||
| var t = this, | ||
| e = null, | ||
| o = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; | ||
| if (o) { | ||
| var n = this.options.ownerDocument; | ||
| if (!n) return; | ||
| (e = new o(function () { | ||
| n.body.contains(t.$el) || (e.disconnect(), e = null, t._unbindEventListener(), t._resetState()); | ||
| })).observe(this.$el.parentNode, { | ||
| childList: !0, | ||
| attributes: !1, | ||
| subtree: !1 | ||
| }); | ||
| } | ||
| window.onbeforeunload = function () { | ||
| e && e.disconnect(), e = null, t._unbindEventListener(), t._resetState(); | ||
| }; | ||
| _clearState: function () { | ||
| this.dragEl = null, this.dropEl = null, this.state = new A(), this.ghost.destroy(), this.differ.destroy(); | ||
| } | ||
| }, O; | ||
| }, H.utils = { | ||
| getRect: T, | ||
| getOffset: S, | ||
| debounce: k, | ||
| throttle: P, | ||
| getParentAutoScrollElement: _ | ||
| }, H; | ||
| }); | ||
@@ -956,13 +754,20 @@ }); | ||
| } | ||
| setOption(key, value) { | ||
| this.options[key] = value; | ||
| this.drag.set(key, value); | ||
| } | ||
| init() { | ||
| this.destroy(); | ||
| const { disabled, dragging, draggable, ghostClass, ghostStyle, chosenClass, animation, autoScroll, scrollStep, scrollThreshold } = this.options; | ||
| let cloneList = new Array(); | ||
| this.drag = new sortable_min(this.options.scrollEl, { | ||
| disabled: this.options.disabled, | ||
| draggable: this.options.draggable, | ||
| dragging: this.options.dragging, | ||
| ghostStyle: this.options.ghostStyle, | ||
| ghostClass: this.options.ghostClass, | ||
| chosenClass: this.options.chosenClass, | ||
| animation: this.options.animation, | ||
| disabled, | ||
| dragging, | ||
| draggable, | ||
| ghostClass, | ||
| ghostStyle, | ||
| chosenClass, | ||
| animation, | ||
| autoScroll, | ||
| scrollStep, | ||
| scrollThreshold, | ||
| onDrag: (dragEl) => { | ||
@@ -1013,9 +818,202 @@ this.dragElement = dragEl; | ||
| this.drag && this.drag.destroy(); | ||
| delete this.drag; | ||
| this.drag = null; | ||
| } | ||
| } | ||
| const CACLTYPE = { | ||
| INIT: 'INIT', | ||
| FIXED: 'FIXED', | ||
| DYNAMIC: 'DYNAMIC' | ||
| }; | ||
| const DIRECTION = { | ||
| FRONT: 'FRONT', | ||
| BEHIND: 'BEHIND' | ||
| }; | ||
| class Virtual { | ||
| options; | ||
| callback; | ||
| sizes; // 用于存储列表项的高度 | ||
| isHorizontal; // 是否为横向滚动 | ||
| calcIndex; // 记录上次计算的index | ||
| calcType; // 记录列表项高度是动态还是静态 | ||
| calcSize; | ||
| range; | ||
| direction; // 滚动方向 | ||
| offset; // 记录滚动距离 | ||
| constructor(options, callback) { | ||
| this.options = { ...options }; | ||
| this.callback = callback; | ||
| this.sizes = new Map(); | ||
| this.isHorizontal = options.isHorizontal; | ||
| this.calcIndex = 0; | ||
| this.calcType = CACLTYPE.INIT; | ||
| this.calcSize = new CalcSize; | ||
| this.direction = ''; | ||
| this.offset = 0; | ||
| this.range = new Range; | ||
| if (options) | ||
| this.checkIfUpdate(0, options.keeps - 1); | ||
| } | ||
| // --------------------------- update ------------------------------ | ||
| updateUniqueKeys(value) { | ||
| this.options.uniqueKeys = value; | ||
| } | ||
| // 更新 sizes，删除不在当前列表中的数据 | ||
| updateSizes(uniqueKeys) { | ||
| this.sizes.forEach((v, k) => { | ||
| if (!uniqueKeys.includes(k)) | ||
| this.sizes.delete(k); | ||
| }); | ||
| } | ||
| updateRange() { | ||
| const start = Math.max(this.range.start, 0); | ||
| this.handleUpdate(start, this.getEndByStart(start)); | ||
| } | ||
| // --------------------------- scroll ------------------------------ | ||
| // 滚动事件 | ||
| handleScroll(offset) { | ||
| this.direction = offset < this.offset ? DIRECTION.FRONT : DIRECTION.BEHIND; | ||
| this.offset = offset; | ||
| const scrolls = this.getScrollItems(offset); | ||
| if (this.isFront()) { | ||
| this.handleScrollFront(scrolls); | ||
| } | ||
| else if (this.isBehind()) { | ||
| this.handleScrollBehind(scrolls); | ||
| } | ||
| } | ||
| isFront() { | ||
| return this.direction === DIRECTION.FRONT; | ||
| } | ||
| isBehind() { | ||
| return this.direction === DIRECTION.BEHIND; | ||
| } | ||
| getScrollItems(offset) { | ||
| const { fixed, header } = this.calcSize; | ||
| // 减去顶部插槽高度 | ||
| if (header) | ||
| offset -= header; | ||
| if (offset <= 0) | ||
| return 0; | ||
| // 固定高度 | ||
| if (this.calcType === CACLTYPE.FIXED) | ||
| return Math.floor(offset / fixed); | ||
| // 非固定高度使用二分查找 | ||
| let low = 0, high = this.options.uniqueKeys.length; | ||
| let middle = 0, middleOffset = 0; | ||
| while (low <= high) { | ||
| middle = low + Math.floor((high - low) / 2); | ||
| middleOffset = this.getOffsetByIndex(middle); | ||
| if (middleOffset === offset) | ||
| return middle; | ||
| else if (middleOffset < offset) | ||
| low = middle + 1; | ||
| else if (middleOffset > offset) | ||
| high = middle - 1; | ||
| } | ||
| return low > 0 ? --low : 0; | ||
| } | ||
| handleScrollFront(scrolls) { | ||
| if (scrolls > this.range.start) | ||
| return; | ||
| const start = Math.max(scrolls - Math.round(this.options.keeps / 3), 0); | ||
| this.checkIfUpdate(start, this.getEndByStart(start)); | ||
| } | ||
| handleScrollBehind(scrolls) { | ||
| if (scrolls < this.range.start + Math.round(this.options.keeps / 3)) | ||
| return; | ||
| this.checkIfUpdate(scrolls, this.getEndByStart(scrolls)); | ||
| } | ||
| checkIfUpdate(start, end) { | ||
| const { uniqueKeys, keeps } = this.options; | ||
| if (uniqueKeys.length <= keeps) { | ||
| start = 0; | ||
| end = uniqueKeys.length - 1; | ||
| } | ||
| else if (end - start < keeps - 1) { | ||
| start = end - keeps + 1; | ||
| } | ||
| if (this.range.start !== start) | ||
| this.handleUpdate(start, end); | ||
| } | ||
| handleUpdate(start, end) { | ||
| this.range.start = start; | ||
| this.range.end = end; | ||
| this.range.front = this.getFrontOffset(); | ||
| this.range.behind = this.getBehindOffset(); | ||
| this.callback({ ...this.range }); | ||
| } | ||
| getFrontOffset() { | ||
| if (this.calcType === CACLTYPE.FIXED) { | ||
| return this.calcSize.fixed * this.range.start; | ||
| } | ||
| else { | ||
| return this.getOffsetByIndex(this.range.start); | ||
| } | ||
| } | ||
| getBehindOffset() { | ||
| const last = this.getLastIndex(); | ||
| if (this.calcType === CACLTYPE.FIXED) { | ||
| return (last - this.range.end) * this.calcSize.fixed; | ||
| } | ||
| if (this.calcIndex === last) { | ||
| return this.getOffsetByIndex(last) - this.getOffsetByIndex(this.range.end); | ||
| } | ||
| return (last - this.range.end) * this.getItemSize(); | ||
| } | ||
| getOffsetByIndex(index) { | ||
| if (!index) | ||
| return 0; | ||
| let offset = 0; | ||
| for (let i = 0; i < index; i++) { | ||
| const size = this.sizes.get(this.options.uniqueKeys[i]); | ||
| offset = offset + (typeof size === 'number' ? size : this.getItemSize()); | ||
| } | ||
| this.calcIndex = Math.max(this.calcIndex, index - 1); | ||
| this.calcIndex = Math.min(this.calcIndex, this.getLastIndex()); | ||
| return offset; | ||
| } | ||
| getEndByStart(start) { | ||
| return Math.min(start + this.options.keeps - 1, this.getLastIndex()); | ||
| } | ||
| getLastIndex() { | ||
| return this.options.uniqueKeys.length - 1; | ||
| } | ||
| // --------------------------- size ------------------------------ | ||
| // 获取列表项的高度 | ||
| getItemSize() { | ||
| return this.calcType === CACLTYPE.FIXED ? this.calcSize.fixed : (this.calcSize.average || this.options.size); | ||
| } | ||
| // 列表项高度变化 | ||
| handleItemSizeChange(id, size) { | ||
| this.sizes.set(id, size); | ||
| // 'INIT' 状态表示每一项的高度都相同 | ||
| if (this.calcType === CACLTYPE.INIT) { | ||
| this.calcType = CACLTYPE.FIXED; // 固定高度 | ||
| this.calcSize.fixed = size; | ||
| } | ||
| else if (this.calcType === CACLTYPE.FIXED && this.calcSize.fixed !== size) { | ||
| // 如果当前为 'FIXED' 状态并且 size 与固定高度不同，表示当前高度不固定，fixed值也就不需要了 | ||
| this.calcType = CACLTYPE.DYNAMIC; | ||
| this.calcSize.fixed = undefined; | ||
| } | ||
| // 非固定高度的情况下，计算平均高度与总高度 | ||
| if (this.calcType !== CACLTYPE.FIXED) { | ||
| this.calcSize.total = [...this.sizes.values()].reduce((t, i) => t + i, 0); | ||
| this.calcSize.average = Math.round(this.calcSize.total / this.sizes.size); | ||
| } | ||
| } | ||
| // header 插槽高度变化 | ||
| handleHeaderSizeChange(size) { | ||
| this.calcSize.header = size; | ||
| } | ||
| // footer 插槽高度变化 | ||
| handleFooterSizeChange(size) { | ||
| this.calcSize.footer = size; | ||
| } | ||
| } | ||
| const CALLBACKS = { top: 'v-top', bottom: 'v-bottom', dragend: 'v-dragend' }; // 组件传入的事件回调 | ||
| function VirtualDragList(props, ref) { | ||
| const { header, footer, children, dataSource = [], dataKey, direction = 'vertical', keeps = 30, size = 50, delay = 0, style = {}, className = '', wrapTag = 'div', rootTag = 'div', itemTag = 'div', headerTag = 'div', footerTag = 'div', itemStyle = {}, itemClass = '', wrapStyle = {}, wrapClass = '', disabled = false, draggable = undefined, dragging = undefined, ghostClass = '', ghostStyle = {}, chosenClass = '', animation = 150 } = props; | ||
| const { header, footer, children, dataSource = [], dataKey, direction = 'vertical', keeps = 30, size = 50, delay = 0, autoScroll = true, scrollStep = 5, scrollThreshold = 15, style = {}, className = '', wrapTag = 'div', rootTag = 'div', itemTag = 'div', headerTag = 'div', footerTag = 'div', itemStyle = {}, itemClass = '', wrapStyle = {}, wrapClass = '', disabled = false, draggable = undefined, dragging = undefined, ghostClass = '', ghostStyle = {}, chosenClass = '', animation = 150 } = props; | ||
| // =============================== State =============================== | ||
@@ -1137,20 +1135,17 @@ const [list, setList] = React.useState([]); | ||
| sortable.current.set('dataSource', dataSource); | ||
| }, [dataSource]); | ||
| React.useEffect(() => { | ||
| return () => { | ||
| destroyDraggable(); | ||
| destroySortable(); | ||
| }; | ||
| }, []); | ||
| }, [dataSource]); | ||
| React.useLayoutEffect(() => { | ||
| if (draggable) { | ||
| initDraggable(); | ||
| if (!sortable.current) { | ||
| // fix autoScroll does not take effect | ||
| setTimeout(() => { initSortable(); }, 0); | ||
| } | ||
| else { | ||
| destroyDraggable(); | ||
| sortable.current.setOption('disabled', disabled); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [draggable]); | ||
| }, [disabled]); | ||
| // =============================== sortable =============================== | ||
| const initDraggable = () => { | ||
| destroyDraggable(); | ||
| const initSortable = () => { | ||
| sortable.current = new Sortable({ | ||
@@ -1167,2 +1162,5 @@ getKey, | ||
| animation, | ||
| autoScroll, | ||
| scrollStep, | ||
| scrollThreshold | ||
| }, (state) => { | ||
@@ -1180,3 +1178,3 @@ dragState.current.from = state; | ||
| }; | ||
| const destroyDraggable = () => { | ||
| const destroySortable = () => { | ||
| sortable.current && sortable.current.destroy(); | ||
@@ -1298,2 +1296,1 @@ sortable.current = null; | ||
| })); | ||
| //# sourceMappingURL=draglist.js.map |
@@ -1,2 +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,ht){"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 i=Object.create(null);return n&&Object.keys(n).forEach(function(t){var e;"default"!==t&&(e=Object.getOwnPropertyDescriptor(n,t),Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:function(){return n[t]}}))}),i.default=n,Object.freeze(i)}var l=n(ht),dt=e(ht);class ut{from;to;constructor(){this.from={key:null,item:null,index:-1},this.to={key:null,item:null,index:-1}}}class i{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 ft{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:i}=t,o=l.useRef(null);t="function"==typeof n?n(o):n;return l.useLayoutEffect(()=>{let t;return t=new ResizeObserver(()=>{var t=o.current.clientHeight;i&&i(e,t)}),o.current&&t.observe(o.current),()=>{t&&(t.disconnect(),t=null)}},[o]),l.cloneElement(t,{ref:o})}function gt(t){const{children:e,dataKey:n,Class:i,Style:o,Tag:r="div"}=t;var{record:t,index:s,onSizeChange:a}=t;return l.createElement(c,{dataKey:n,onSizeChange:a},l.createElement(r,{className:i,style:o,"data-key":n},"function"==typeof e?e(t,s,n):e))}function pt(t){var{Tag:t="div",Style:e,Class:n,children:i,roleId:o,onSizeChange:r}=t;return i?l.createElement(c,{dataKey:o,onSizeChange:r},l.createElement(t,{"v-role":o,style:e,className:n},i)):l.createElement(l.Fragment,null)}function vt(n,i=50,o=!1){let r,s;function t(...t){var e;return r&&clearTimeout(r),o?(e=!r,r=setTimeout(()=>{r=null},i),e&&(s=n.apply(this,t))):r=setTimeout(()=>{n.apply(this,t)},i),s}return t.prototype.cancel=function(){clearTimeout(r),r=null},t}const a={INIT:"INIT",FIXED:"FIXED",DYNAMIC:"DYNAMIC"},o={FRONT:"FRONT",BEHIND:"BEHIND"};class mt{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 i,this.direction="",this.offset=0,this.range=new ft,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?o.FRONT:o.BEHIND,this.offset=t;t=this.getScrollItems(t);this.isFront()?this.handleScrollFront(t):this.isBehind()&&this.handleScrollBehind(t)}isFront(){return this.direction===o.FRONT}isBehind(){return this.direction===o.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 i=0,o=this.options.uniqueKeys.length;for(var r,s;i<=o;){if(r=i+Math.floor((o-i)/2),(s=this.getOffsetByIndex(r))===t)return r;s<t?i=r+1:t<s&&(o=r-1)}return 0<i?--i: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:i}=this.options;n.length<=i?(t=0,e=n.length-1):e-t<i-1&&(t=e-i+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 i=this.sizes.get(this.options.uniqueKeys[t]);n+="number"==typeof i?i: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}}(function(t){function u(t){return(u="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 i(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function o(t,e,n){e&&i(t.prototype,e),n&&i(t,n),Object.defineProperty(t,"prototype",{writable:!1})}function s(t){return function(t){if(Array.isArray(t))return r(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 r(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)?r(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 r(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function e(t){if("undefined"!=typeof window&&window.navigator)return!!navigator.userAgent.match(t)}function a(e,n){n?"none"===n?D.forEach(function(t){return d(e,t,"none")}):D.forEach(function(t){return d(e,t,"".concat(t.split("transition")[0],"transform ").concat(n))}):D.forEach(function(t){return d(e,t,"")})}function l(e,n){n?I.forEach(function(t){return d(e,t,"".concat(t.split("transform")[0]).concat(n))}):I.forEach(function(t){return d(e,t,"")})}function c(t,e,n,i){window.addEventListener?t.addEventListener(e,n,!(!i&&y)&&E):window.attachEvent&&t.attachEvent("on"+e,n)}function h(t,e,n,i){window.removeEventListener?t.removeEventListener(e,n,!(!i&&y)&&E):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){var e,n;if(t.getBoundingClientRect||t===window)return e={top:0,left:0,bottom:0,right:0,height:0,width:0},t!==window&&t.parentNode&&t!==(!(n=document.scrollingElement)||n.contains(document.body)?document:n)?(n=t.getBoundingClientRect(),e.top=n.top,e.left=n.left,e.bottom=n.bottom,e.right=n.right,e.height=n.height,e.width=n.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 i=s(Array.from(t.children));if(-1<(t=i.indexOf(n)))return e?i[t]:{index:t,el:i[t],rect:g(i[t]),offset:f(i[t])};for(var o=0;o<i.length;o++)if(function(t){var e;if(n&&t)for(e=n.parentNode;e;){if(t===e)return 1;e=e.parentNode}}(i[o]))return e?i[o]:{index:o,el:i[o],rect:g(i[o]),offset:f(i[o])};return e?null:{index:-1,el:null,rect:{},offset:{}}}function v(t,e,n){var i;t&&e&&(t.classList?t.classList[n?"add":"remove"](e):(i=(" "+t.className+" ").replace(x," ").replace(" "+e+" "," "),t.className=(i+(n?" "+e:"")).replace(x," ")))}function d(t,e,n){var i=t&&t.style;if(i){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];i[e=e in i||-1!==e.indexOf("webkit")?e:"-webkit-"+e]=n+("string"==typeof n?"":"px")}}function m(t,e){if(!t||!t.nodeType||1!==t.nodeType)throw"Sortable: `el` must be an HTMLElement, not ".concat({}.toString.call(t));this.$el=t,this.options=e=Object.assign({},e),this.dragEl=null,this.dropEl=null,this.differ=null,this.ghost=null;var n,i,o,r={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,forceFallback:!1,stopPropagation:!1,supportPassive:(n=!1,document.addEventListener("checkIfSupportPassive",null,{get passive(){return n=!0}}),n),supportPointer:"PointerEvent"in window&&!S,supportTouch:"ontouchstart"in window,ownerDocument:this.$el.ownerDocument};for(i in r)i in this.options||(this.options[i]=r[i]);this.nativeDraggable=!this.options.forceFallback&&C,this.differ=new T,this.ghost=new z(this.options),Object.assign(this,(o=[],{captureAnimationState:function(){var t=s(Array.from(this.$el.children)),e=(i=this.dragEl,e=this.dropEl,(i=(n=t).indexOf(i))<(n=n.indexOf(e))?{start:i,end:n}:{start:n,end:i}),n=e.start,i=e.end;o.length=0,t.slice(n,i+1).forEach(function(t){o.push({target:t,rect:g(t)})})},animateRange:function(){var n=this;o.forEach(function(t){var e=t.target,t=t.rect;n.animate(e,t,n.animation)})},animate:function(t,e){var n=2<arguments.length&&void 0!==arguments[2]?arguments[2]:150,i=g(t),o=e.left-i.left,e=e.top-i.top;a(t,"none"),l(t,"translate3d(".concat(o,"px, ").concat(e,"px, 0)")),t.offsetLeft,a(t,"".concat(n,"ms")),l(t,"translate3d(0px, 0px, 0px)"),clearTimeout(t.animated),t.animated=setTimeout(function(){a(t,""),l(t,""),t.animated=null},n)}}),{_bindEventListener:function(){this._onStart=this._onStart.bind(this),this._onMove=this._onMove.bind(this),this._onDrop=this._onDrop.bind(this);var t=(n=this.options).supportPointer,e=n.supportTouch,n=n.supportPassive;c(this.$el,t?"pointerdown":e?"touchstart":"mousedown",this._onStart,n)},_unbindEventListener:function(){var t=this.options.supportPassive;h(this.$el,"pointerdown",this._onStart,t),h(this.$el,"touchstart",this._onStart,t),h(this.$el,"mousedown",this._onStart,t)},_bindMoveEvents:function(t){var e=(i=this.options).supportPointer,n=i.ownerDocument,i=i.supportPassive;c(n,e?"pointermove":t?"touchmove":"mousemove",this._onMove,i)},_bindUpEvents:function(){var t=(e=this.options).ownerDocument,e=e.supportPassive;c(t,"pointerup",this._onDrop,e),c(t,"pointercancel",this._onDrop,e),c(t,"touchend",this._onDrop,e),c(t,"touchcancel",this._onDrop,e),c(t,"mouseup",this._onDrop,e)},_unbindMoveEvents:function(){var t=(e=this.options).ownerDocument,e=e.supportPassive;h(t,"pointermove",this._onMove,e),h(t,"touchmove",this._onMove,e),h(t,"mousemove",this._onMove,e)},_unbindUpEvents:function(){var t=(e=this.options).ownerDocument,e=e.supportPassive;h(t,"pointerup",this._onDrop,e),h(t,"pointercancel",this._onDrop,e),h(t,"touchend",this._onDrop,e),h(t,"touchcancel",this._onDrop,e),h(t,"mouseup",this._onDrop,e)}}),this._bindEventListener(),this._handleDestroy()}var y,w,S,b,E,x,D,I,T,z,C;t.exports=(y=e(/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i),w=e(/Edge/i),S=e(/safari/i)&&!e(/chrome/i)&&!e(/android/i),t=e(/iP(ad|od|hone)/i),b=e(/chrome/i)&&e(/android/i),E={capture:!1,passive:!1},x=/\s+/g,D=["-webkit-transition","-moz-transition","-ms-transition","-o-transition","transition"],I=["-webkit-transform","-moz-transform","-ms-transform","-o-transform","transform"],T=function(){function t(){n(this,t),this.from={node:null,rect:{},offset:{}},this.to={node:null,rect:{},offset:{}}}return o(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}(),z=function(){function e(t){n(this,e),this.options=t,this.diff={x:0,y:0},this.position={x:0,y:0},this.exist=!1}return o(e,[{key:"init",value:function(t,e){var n,i;this.$el&&this.$el.remove(),t&&(this.$el=t,n=(t=this.options).ghostClass,t=void 0===(t=t.ghostStyle)?{}:t,i=e.width,e=e.height,this.$el.class=n,this.$el.style.width=i+"px",this.$el.style.height=e+"px",this.$el.style.position="fixed",this.$el.style.left=0,this.$el.style.top=0,this.$el.style.zIndex=1e5,this.$el.style.opacity=.8,this.$el.style.pointerEvents="none",this.$el.style.cursor="move",a(this.$el,"none"),l(this.$el,"translate3d(0px, 0px, 0px)"),this.setStyle(t))}},{key:"setPosition",value:function(t,e){this.position={x:t-this.diff.x,y:e-this.diff.y}}},{key:"setStyle",value:function(t){for(var e in t)d(this.$el,e,t[e])}},{key:"rect",value:function(){return g(this.$el)}},{key:"move",value:function(t){var e;this.$el&&(e=this.options.ghostAnimation,a(this.$el,t?"".concat(e,"ms"):"none"),this.exist||(document.body.appendChild(this.$el),this.exist=!0),l(this.$el,"translate3d(".concat(this.position.x,"px, ").concat(this.position.y,"px, 0)")),"move"!==this.$el.style.cursor&&(this.$el.style.cursor="move"))}},{key:"destroy",value:function(t){var e=this;t&&(this.position={x:t.left,y:t.top},this.move(!0)),(t=this.options.ghostAnimation)?setTimeout(function(){return e.clear()},t):this.clear()}},{key:"clear",value:function(){this.$el&&this.$el.remove(),this.$el=null,this.diff={x:0,y:0},this.position={x:0,y:0},this.exist=!1}}]),e}(),C="undefined"!=typeof document&&!b&&!t&&"draggable"in document.createElement("div"),m.prototype={constructor:m,destroy:function(){this._unbindEventListener(),this._resetState()},_onStart:function(t){var e=(o=this.options).delay,n=o.disabled,i=o.stopPropagation,o=o.delayOnTouchOnly;if(!(/mousedown|pointerdown/.test(t.type)&&0!==t.button||n)){var r=(n=t.touches&&t.touches[0]||t.pointerType&&"touch"===t.pointerType&&t)||t;if(this.nativeDraggable||!S||!r.target||"SELECT"!==r.target.tagName.toUpperCase()){if(r.target===this.$el)return!0;i&&t.stopPropagation(),!e||o&&!n||this.nativeDraggable&&(w||y)?this._onDrag(r,n):this.dragStartTimer=setTimeout(this._onDrag(r,n),e)}}},_onDrag:function(t,e){var n=(i=this.options).draggable,i=i.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(u(n),'"'));try{document.selection?setTimeout(function(){document.selection.empty()},0):window.getSelection().removeAllRanges()}catch(t){throw new Error(t)}if(i){if("function"!=typeof i)throw new Error('dragging expected "function" or "string" but received "'.concat(u(i),'"'));this.dragEl=i(t)}else this.dragEl=p(this.$el,t.target,!0);if(!this.dragEl||this.dragEl.animated)return!0;i=(n=p(this.$el,this.dragEl)).rect,n=n.offset,window.sortableDndOnDownState=!0,this.ghost.setPosition(i.left,i.top),this.ghost.diff={x:t.clientX-i.left,y:t.clientY-i.top},this.differ.from={node:this.dragEl,rect:i,offset:n},this._bindMoveEvents(e),this._bindUpEvents(e)},_onMove:function(t){void 0!==t.preventDefault&&t.preventDefault();var e=(o=this.options).chosenClass,n=o.stopPropagation,i=o.onMove,o=o.onDrag;n&&t.stopPropagation();var r=(n=t.touches&&t.touches[0])||t,s=r.clientX,a=r.clientY,n=n?document.elementFromPoint(s,a):r.target;if(!this.ghost.$el&&(this.ghost.init(this.dragEl.cloneNode(!0),this.differ.from.rect),void 0!==o)){if("function"!=typeof o)throw new Error('onDrag expected "function" but received "'.concat(u(o),'"'));o(this.dragEl,r,t)}if(void 0!==i){if("function"!=typeof i)throw new Error('onMove expected "function" but received "'.concat(u(i),'"'));i(this.differ.from,this.ghost.$el,r,t)}if(v(this.dragEl,e,!0),this.ghost.move(),window.sortableDndOnDownState&&!(s<0||a<0))if(window.sortableDndOnMoveState=!0,this.ghost.setPosition(s,a),this.ghost.move(),s<(o=g(this.$el)).left||s>o.right||a<o.top||a>o.bottom)this.ghost.setStyle({cursor:"not-allowed"});else{var e=(i=p(this.$el,n)).index,o=i.el,n=i.rect,i=i.offset,l=n.left,c=n.right,h=n.top,d=n.bottom;if(o&&!(e<0)&&(this.dropEl=o,l<s&&s<c&&h<a&&a<d&&o!==this.dragEl&&(this.differ.to={node:this.dropEl,rect:n,offset:i},!o.animated))){if(this.captureAnimationState(),e=this.options.onChange,l=f(this.dragEl),void 0!==e){if("function"!=typeof e)throw new Error('onChange expected "function" but received "'.concat(u(e),'"'));e(this.differ.from,this.differ.to,r,t)}l.top<i.top||l.left<i.left?this.$el.insertBefore(this.dragEl,o.nextElementSibling):this.$el.insertBefore(this.dragEl,o),this.animateRange()}}},_onDrop:function(t){this._unbindMoveEvents(),this._unbindUpEvents(),clearTimeout(this.dragStartTimer);var e=this.options,n=e.onDrop,i=e.chosenClass;if(e.stopPropagation&&t.stopPropagation(),v(this.dragEl,i,!1),window.sortableDndOnDownState&&window.sortableDndOnMoveState){if(this.differ.to.offset=f(this.dragEl),this.differ.to.rect=g(this.dragEl),i=(e=this.differ).from,e=e.to,i=i.offset.top!==e.offset.top||i.offset.left!==e.offset.left,void 0!==n){if("function"!=typeof n)throw new Error('onDrop expected "function" but received "'.concat(u(n),'"'));n(i,t)}this.ghost.destroy(g(this.dragEl))}this.differ.destroy(),this._removeWindowState()},_resetState:function(){this.dragEl=null,this.dropEl=null,this.ghost.destroy(),this.differ.destroy(),this._removeWindowState()},_removeWindowState:function(){window.sortableDndOnDownState=null,window.sortableDndOnMoveState=null,window.sortableDndAnimationEnd=null,delete window.sortableDndOnDownState,delete window.sortableDndOnMoveState,delete window.sortableDndAnimationEnd},_handleDestroy:function(){var t=this,e=null,n=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver;if(n){var i=this.options.ownerDocument;if(!i)return;(e=new n(function(){i.body.contains(t.$el)||(e.disconnect(),e=null,t._unbindEventListener(),t._resetState())})).observe(this.$el.parentNode,{childList:!0,attributes:!1,subtree:!1})}window.onbeforeunload=function(){e&&e.disconnect(),e=null,t._unbindEventListener(),t._resetState()}}},m)})(h={exports:{}});var r=h.exports;class yt{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 ut,this.dataSource=t.dataSource,this.rangeIsChanged=!1,this.init()}set(t,e){this[t]=e}init(){this.destroy();let a=new Array;this.drag=new r(this.options.scrollEl,{disabled:this.options.disabled,draggable:this.options.draggable,dragging:this.options.dragging,ghostStyle:this.options.ghostStyle,ghostClass:this.options.ghostClass,chosenClass:this.options.chosenClass,animation:this.options.animation,onDrag:t=>{this.dragElement=t,a=[...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 i=this.dragState.from.key,o=e.node.getAttribute("data-key"),r={item:null,index:-1},s={item:null,index:-1};a.forEach((t,e)=>{var n=this.getKey(t);n==i&&Object.assign(r,{item:t,index:e}),n==o&&Object.assign(s,{item:t,index:e})}),a.splice(r.index,1),a.splice(s.index,0,r.item)},onDrop:t=>{this.rangeIsChanged&&this.dragElement&&this.dragElement.remove();const e=this.dragState["from"];var n=a.findIndex(t=>this.getKey(t)==e.key),i=this.dataSource[n];this.dragState.to={item:i,index:n,key:this.getKey(i)},this.onDrop(a,e,this.dragState.to,t),this.dataSource=[...a],this.clear()}})}clear(){this.dragElement=null,this.rangeIsChanged=!1,this.dragState=new ut}destroy(){this.drag&&this.drag.destroy(),delete this.drag}}const wt={top:"v-top",bottom:"v-bottom",dragend:"v-dragend"};function s(r,t){const{header:e,footer:n,children:o,dataSource:s=[],dataKey:i,direction:a="vertical",keeps:l=30,size:L=50,delay:c=0,style:h={},className:N="",wrapTag:d="div",rootTag:u="div",itemTag:B="div",headerTag:F="div",footerTag:R="div",itemStyle:A={},itemClass:j="",wrapStyle:f={},wrapClass:H="",disabled:U=!1,draggable:g=void 0,dragging:W=void 0,ghostClass:X="",ghostStyle:q={},chosenClass:V="",animation:Y=150}=r,[G,p]=ht.useState([]),v=ht.useRef([]),m=ht.useRef([]),[y,J]=ht.useState(new ft),w=ht.useRef(null),S=ht.useRef(null),b=ht.useRef(null),E=ht.useRef(new ut),x=ht.useRef(null),D=ht.useRef(new mt({size:L,keeps:l,uniqueKeys:m.current,isHorizontal:"vertical"===a},t=>{J(()=>t);var e=(E.current.from||{})["index"];-1<e&&!(e>=t.start&&e<=t.end)&&x.current&&x.current.set("rangeIsChanged",!0)})),I=()=>{var t=w.current;return t?Math.ceil(t[P]):0},T=t=>{w.current[P]=t},z=t=>{var e;t>=s.length-1?_():(e=D.current.getOffsetByIndex(t),T(e),setTimeout(()=>{I()!==D.current.getOffsetByIndex(t)&&z(t)},5))},C=()=>{w.current[P]=0},_=()=>{var t;b.current&&(t=b.current[Z],w.current[P]=t,setTimeout(()=>{var t=w.current;I()+Math.ceil(t[K])<Math.ceil(t[$])&&_()},5))},Q=(dt.default.useImperativeHandle(t,()=>({reset:()=>{C(),p(()=>[...s]),v.current=[...s]},getSize:t=>D.current.sizes.get(t),getOffset:I,scrollToTop:C,scrollToIndex:z,scrollToOffset:T,scrollToBottom:_})),ht.useEffect(()=>{p(()=>[...s]),v.current=[...s],O(),D.current.updateUniqueKeys(m.current),D.current.updateSizes(m.current),D.current.updateRange(),x.current&&x.current.set("dataSource",s)},[s]),ht.useEffect(()=>()=>{M()},[]),ht.useLayoutEffect(()=>{(g?Q:M)()},[g]),()=>{M(),x.current=new yt({getKey:k,scrollEl:S.current,dataSource:v.current,disabled:U,draggable:g,dragging:W,ghostStyle:q,ghostClass:X,chosenClass:V,animation:Y},t=>{E.current.from=t},(t,e,n,i)=>{E.current.to=n;const o=r[wt.dragend];o&&o(t,e,n,i),v.current=[...t],p(()=>[...t]),O(),setTimeout(()=>E.current=new ut,c+10)})}),M=()=>{x.current&&x.current.destroy(),x.current=null},O=()=>{m.current=v.current.map(t=>k(t))},k=dt.default.useCallback(t=>i.replace(/\[/g,".").replace(/\]/g,"").split(".").reduce((t,e)=>(t||{})[e],t),[i]),{scrollSizeKey:$,scrollDirectionKey:P,offsetSizeKey:Z,clientSizeKey:K}=dt.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 tt=vt(function(t){const e=t[wt.top];e&&e()}),et=vt(function(t){const e=t[wt.bottom];e&&e()}),nt=(t,e)=>{D.current.handleItemSizeChange(t,e)};t=(t,e)=>{"header"===t&&D.current.handleHeaderSizeChange(e),"footer"===t&&D.current.handleFooterSizeChange(e)};const it=dt.default.useCallback(t=>{var e=x.current&&x.current.rangeIsChanged,n=(E.current.from||{})["key"];return e&&t==n?{display:"none"}:{}},[E.current]);var{RTag:ot,WTag:rt}=dt.default.useMemo(()=>({RTag:u,WTag:d}),[d,u]),st=dt.default.useMemo(()=>({...h,overflow:"vertical"!==a?"auto hidden":"hidden auto"}),[h,a]),at=dt.default.useMemo(()=>{var{front:t,behind:e}=y;return{...f,padding:"vertical"!==a?`0px ${e}px 0px ${t}px`:t+`px 0px ${e}px`}},[f,a,y]),{start:lt,end:ct}=dt.default.useMemo(()=>({...y}),[y]);return dt.default.createElement(ot,{ref:w,className:N,style:st,onScroll:vt(t=>{var e,n,i;E.current.to&&E.current.to.key||(i=w.current,e=I(),n=Math.ceil(i[K]),i=Math.ceil(i[$]),e<0||i+1<e+n||!i||(D.current.handleScroll(e),D.current.isFront()?s.length&&e<=0&&tt(r):D.current.isBehind()&&i<=n+e&&et(r)))},c)},dt.default.createElement(pt,{children:e,roleId:"header",Tag:F,onSizeChange:t}),dt.default.createElement(rt,{ref:S,"v-role":"group",className:H,style:at},G.slice(lt,ct+1).map(t=>{var e,n=k(t),i=(e=t,v.current.findIndex(t=>k(t)===k(e)));return dt.default.createElement(gt,{key:n,Tag:B,record:t,index:i,dataKey:n,children:o,Class:j,Style:{...A,...it(n)},onSizeChange:nt})})),dt.default.createElement(pt,{children:n,roleId:"footer",Tag:R,onSizeChange:t}),dt.default.createElement("div",{ref:b,style:{width:"vertical"!==a?"0px":"100%",height:"vertical"!==a?"100%":"0px"}}))}var h=dt.default.forwardRef(s);t.VirtualDragList=s,t.default=h,Object.defineProperty(t,"__esModule",{value:!0})}); | ||
| //# sourceMappingURL=draglist.min.js.map | ||
| !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})}); |
| { | ||
| "name": "react-virtual-drag-list", | ||
| "version": "2.4.2", | ||
| "version": "2.4.3", | ||
| "description": "A virtual scrolling list component that can be sorted by dragging", | ||
@@ -23,3 +23,4 @@ "main": "dist/draglist.js", | ||
| "drop", | ||
| "react", | ||
| "sortable", | ||
| "draggable", | ||
| "virtual", | ||
@@ -38,3 +39,3 @@ "virtual-list", | ||
| "dependencies": { | ||
| "sortable-dnd": "0.2.2" | ||
| "sortable-dnd": "0.2.5" | ||
| }, | ||
@@ -41,0 +42,0 @@ "devDependencies": { |
@@ -10,6 +10,6 @@ <p> | ||
| A virtual scrolling list component that can be sorted by dragging, [demo](https://mfuu.github.io/react-virtual-drag-list/) | ||
| A virtual scrolling list component that can be sorted by dragging | ||
| ### [demo](https://mfuu.github.io/react-virtual-drag-list/) | ||
| ## Simple usage | ||
@@ -74,38 +74,41 @@ | ||
| **common used** | ||
| **Common used** | ||
| | **Prop** | **Type** | **Required?** | **Description** | **Default** | | ||
| |-----------------|--------------|---------------|------------------|------------------| | ||
| | `dataKey` | `String` | ✓ | the unique identifier of each piece of data, in the form of `'a.b.c'` | - | | ||
| | `dataSource` | `Array` | ✓ | data list | `[]` | | ||
| | `size` | `Number` | | estimated height of each row | `50` | | ||
| | `keeps` | `Number` | | the number of lines rendered by the virtual scroll | `30` | | ||
| | `direction` | `String` | | `vertical/horizontal`, scroll direction | `vertical` | | ||
| | `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 | - | | ||
| | `draggable` | `Function/String` | | Specifies which items inside the element should be draggable, the function type must return a boolean | `undefined` | | ||
| | `dragging` | `Function` | | Specifies the drag element, which must return an HTMLElement, such as `(e) => e.target` | `undefined` | | ||
| | **Prop** | **Type** | **Required?** | **Default** | **Description** | | ||
| |------------------|--------------|---------------|--------------|------------------| | ||
| | `dataKey` | `String` | ✓ | - | The unique identifier of each piece of data, in the form of `'a.b.c'` | | ||
| | `dataSource` | `Array` | ✓ | `[]` | Data list | | ||
| | `size` | `Number` | | `50` | 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 | | ||
| | `autoScroll` | `Boolean` | | `true` | Automatic scrolling when moving to the edge of the container | | ||
| | `scrollStep` | `Number` | | `5` | The distance to scroll each frame when autoscrolling | | ||
| | `scrollThreshold`| `Number` | | `15` | Threshold to trigger autoscroll | | ||
| **Uncommonly used** | ||
| | **Prop** | **Type** | **Required?** | **Description** | **Default** | | ||
| |-----------------|--------------|---------------|------------------|------------------| | ||
| | `disabled` | `Boolean` | | Disables the sortable if set to true | `false` | | ||
| | `delay` | `Number` | | Delay time of debounce function | `0` | | ||
| | `header` | `JSX.Element`| | top of list | - | | ||
| | `footer` | `JSX.Element`| | bottom of list | - | | ||
| | `rootTag` | `String` | | Label type for root element | `div` | | ||
| | `wrapTag` | `String` | | Label type for list wrap element | `div` | | ||
| | `itemTag` | `String` | | Label type for list item element | `div` | | ||
| | `headerTag` | `String` | | Label type for header slot element | `div` | | ||
| | `footerTag` | `String` | | Label type for footer slot element | `div` | | ||
| | `itemStyle` | `Object` | | style for each line | `{}` | | ||
| | `itemClass` | `String` | | class for each line | `''` | | ||
| | `wrapStyle` | `Object` | | List wrapper element style | `{}` | | ||
| | `wrapClass` | `String` | | List wrapper element class | `''` | | ||
| | `animation` | `Number` | | Drag-and-drop's animation delay | `150` | | ||
| | `ghostStyle` | `Object` | | The style of the mask element when dragging | `{}` | | ||
| | `ghostClass` | `String` | | The class of the mask element when dragging | `''` | | ||
| | `chosenClass` | `String` | | The class of the selected element when dragging | `''` | | ||
| | **Prop** | **Type** | **Required?** | **Default** | **Description** | | ||
| |-----------------|--------------|---------------|-------------|------------------| | ||
| | `disabled` | `Boolean` | | `false` | Disables the sortable if set to true | | ||
| | `delay` | `Number` | | `0` | Delay time of debounce function | | ||
| | `dragging` | `Function` | | `undefined` | Specifies the drag element, which must return an HTMLElement, such as `(e) => e.target` | | ||
| | `header` | `JSX.Element`| | - | Top of list | | ||
| | `footer` | `JSX.Element`| | - | Bottom of list | | ||
| | `rootTag` | `String` | | `div` | Label type for root element | | ||
| | `wrapTag` | `String` | | `div` | Label type for list wrap element | | ||
| | `itemTag` | `String` | | `div` | Label type for list item element | | ||
| | `headerTag` | `String` | | `div` | Label type for header slot element | | ||
| | `footerTag` | `String` | | `div` | Label type for footer slot element | | ||
| | `itemStyle` | `Object` | | `{}` | Style for each line | | ||
| | `itemClass` | `String` | | `''` | Class for each line | | ||
| | `wrapStyle` | `Object` | | `{}` | List wrapper element style | | ||
| | `wrapClass` | `String` | | `''` | List wrapper element class | | ||
| | `animation` | `Number` | | `150` | Drag-and-drop's animation delay | | ||
| | `ghostStyle` | `Object` | | `{}` | The style of the mask element when dragging | | ||
| | `ghostClass` | `String` | | `''` | The class of the mask element when dragging | | ||
| | `chosenClass` | `String` | | `''` | The class of the selected element when dragging | | ||
@@ -112,0 +115,0 @@ ## Methods |
@@ -35,3 +35,2 @@ import * as React from 'react' | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [elementRef]) | ||
@@ -51,3 +50,2 @@ | ||
| ref.current = fn | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [fn, ...dependencies]) | ||
@@ -54,0 +52,0 @@ |
@@ -27,2 +27,5 @@ import * as React from 'react' | ||
| delay?: number; // Delay time of debounce function | ||
| autoScroll?: boolean; // Automatic scrolling when moving to the edge of the container | ||
| scrollStep?: number; // The distance to scroll each frame when autoscrolling | ||
| scrollThreshold?: number; // Threshold to trigger autoscroll | ||
@@ -81,2 +84,5 @@ style?: object; | ||
| animation: number; | ||
| autoScroll: boolean; | ||
| scrollStep: number; | ||
| scrollThreshold: number; | ||
| } | ||
@@ -83,0 +89,0 @@ |
@@ -31,4 +31,20 @@ import SortableDnd from 'sortable-dnd' | ||
| setOption(key, value) { | ||
| this.options[key] = value | ||
| this.drag.set(key, value) | ||
| } | ||
| init() { | ||
| this.destroy() | ||
| const { | ||
| disabled, | ||
| dragging, | ||
| draggable, | ||
| ghostClass, | ||
| ghostStyle, | ||
| chosenClass, | ||
| animation, | ||
| autoScroll, | ||
| scrollStep, | ||
| scrollThreshold | ||
| } = this.options | ||
@@ -39,9 +55,12 @@ let cloneList = new Array() | ||
| { | ||
| disabled: this.options.disabled, | ||
| draggable: this.options.draggable, | ||
| dragging: this.options.dragging, | ||
| ghostStyle: this.options.ghostStyle, | ||
| ghostClass: this.options.ghostClass, | ||
| chosenClass: this.options.chosenClass, | ||
| animation: this.options.animation, | ||
| disabled, | ||
| dragging, | ||
| draggable, | ||
| ghostClass, | ||
| ghostStyle, | ||
| chosenClass, | ||
| animation, | ||
| autoScroll, | ||
| scrollStep, | ||
| scrollThreshold, | ||
@@ -101,3 +120,3 @@ onDrag: (dragEl: HTMLElement) => { | ||
| this.drag && this.drag.destroy() | ||
| delete this.drag | ||
| this.drag = null | ||
| } | ||
@@ -104,0 +123,0 @@ } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by4.37%
115305
- Lines of code
- increased by1.93%
2162
- Number of lines in readme file
- increased by2.08%
147
Dependency changes
+ Addedsortable-dnd@0.2.5(transitive)
- Removedsortable-dnd@0.2.2(transitive)
Updatedsortable-dnd@0.2.5