Skip to content

Commit 1a16a34

Browse files
mfuumfuu
committed
fix error when the datakey get number value
1 parent 6f8d24b commit 1a16a34

File tree

5 files changed

+109
-76
lines changed

5 files changed

+109
-76
lines changed

‎dist/virtual-drag-list.js‎

Lines changed: 89 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* vue-virtual-drag-list v2.9.5
2+
* vue-virtual-drag-list v2.9.6
33
* open source under the MIT license
44
* https://github.com/mfuu/vue-virtual-drag-list#readme
55
*/
@@ -1015,6 +1015,54 @@
10151015
var sortableDnd_minExports = sortableDnd_min.exports;
10161016
var Dnd = /*@__PURE__*/getDefaultExportFromCjs(sortableDnd_minExports);
10171017

1018+
function throttle(fn, wait) {
1019+
var timer;
1020+
var result = function result() {
1021+
var _this = this;
1022+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1023+
args[_key] = arguments[_key];
1024+
}
1025+
if (timer) return;
1026+
if (wait <= 0) {
1027+
fn.apply(this, args);
1028+
} else {
1029+
timer = setTimeout(function () {
1030+
timer = null;
1031+
fn.apply(_this, args);
1032+
}, wait);
1033+
}
1034+
};
1035+
result['cancel'] = function () {
1036+
if (timer) {
1037+
clearTimeout(timer);
1038+
timer = null;
1039+
}
1040+
};
1041+
return result;
1042+
}
1043+
function debounce(fn, wait) {
1044+
var throttled = throttle(fn, wait);
1045+
var result = function result() {
1046+
throttled['cancel']();
1047+
throttled.apply(this, arguments);
1048+
};
1049+
result['cancel'] = function () {
1050+
throttled['cancel']();
1051+
};
1052+
return result;
1053+
}
1054+
function isSameValue(a, b) {
1055+
return a == b;
1056+
}
1057+
function getDataKey(item, dataKey) {
1058+
return (!Array.isArray(dataKey) ? dataKey.replace(/\[/g, '.').replace(/\]/g, '.').split('.') : dataKey).reduce(function (o, k) {
1059+
return (o || {})[k];
1060+
}, item);
1061+
}
1062+
function elementIsDocumentOrWindow(element) {
1063+
return element instanceof Document && element.nodeType === 9 || element instanceof Window;
1064+
}
1065+
10181066
var SortableAttrs = ['delay', 'group', 'handle', 'lockAxis', 'disabled', 'sortable', 'draggable', 'animation', 'autoScroll', 'ghostClass', 'ghostStyle', 'chosenClass', 'scrollSpeed', 'fallbackOnBody', 'scrollThreshold', 'delayOnTouchOnly', 'placeholderClass'];
10191067
var Sortable = /*#__PURE__*/function () {
10201068
function Sortable(el, options) {
@@ -1081,9 +1129,10 @@
10811129
}, {
10821130
key: "onDrag",
10831131
value: function onDrag(event) {
1084-
var key = event.node.getAttribute('data-key');
1085-
var index = this.getIndex(key);
1132+
var dataKey = event.node.getAttribute('data-key');
1133+
var index = this.getIndex(dataKey);
10861134
var item = this.options.list[index];
1135+
var key = this.options.uniqueKeys[index];
10871136
// store the dragged item
10881137
this.sortable.option('store', {
10891138
item: item,
@@ -1172,7 +1221,16 @@
11721221
}, {
11731222
key: "getIndex",
11741223
value: function getIndex(key) {
1175-
return this.options.uniqueKeys.indexOf(key);
1224+
if (key === null || key === undefined) {
1225+
return -1;
1226+
}
1227+
var uniqueKeys = this.options.uniqueKeys;
1228+
for (var i = 0, len = uniqueKeys.length; i < len; i++) {
1229+
if (isSameValue(uniqueKeys[i], key)) {
1230+
return i;
1231+
}
1232+
}
1233+
return -1;
11761234
}
11771235
}, {
11781236
key: "dispatchEvent",
@@ -1183,51 +1241,6 @@
11831241
}]);
11841242
}();
11851243

1186-
function throttle(fn, wait) {
1187-
var timer;
1188-
var result = function result() {
1189-
var _this = this;
1190-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
1191-
args[_key] = arguments[_key];
1192-
}
1193-
if (timer) return;
1194-
if (wait <= 0) {
1195-
fn.apply(this, args);
1196-
} else {
1197-
timer = setTimeout(function () {
1198-
timer = null;
1199-
fn.apply(_this, args);
1200-
}, wait);
1201-
}
1202-
};
1203-
result['cancel'] = function () {
1204-
if (timer) {
1205-
clearTimeout(timer);
1206-
timer = null;
1207-
}
1208-
};
1209-
return result;
1210-
}
1211-
function debounce(fn, wait) {
1212-
var throttled = throttle(fn, wait);
1213-
var result = function result() {
1214-
throttled['cancel']();
1215-
throttled.apply(this, arguments);
1216-
};
1217-
result['cancel'] = function () {
1218-
throttled['cancel']();
1219-
};
1220-
return result;
1221-
}
1222-
function getDataKey(item, dataKey) {
1223-
return (!Array.isArray(dataKey) ? dataKey.replace(/\[/g, '.').replace(/\]/g, '.').split('.') : dataKey).reduce(function (o, k) {
1224-
return (o || {})[k];
1225-
}, item);
1226-
}
1227-
function elementIsDocumentOrWindow(element) {
1228-
return element instanceof Document && element.nodeType === 9 || element instanceof Window;
1229-
}
1230-
12311244
var VirtualAttrs = ['size', 'keeps', 'scroller', 'direction', 'debounceTime', 'throttleTime'];
12321245
var Virtual = /*#__PURE__*/function () {
12331246
function Virtual(options) {
@@ -1255,7 +1268,8 @@
12551268
start: 0,
12561269
end: 0,
12571270
front: 0,
1258-
behind: 0
1271+
behind: 0,
1272+
total: 0
12591273
};
12601274
this.offset = 0;
12611275
this.direction = 'STATIONARY';
@@ -1319,7 +1333,7 @@
13191333
if (index >= this.options.uniqueKeys.length - 1) {
13201334
this.scrollToBottom();
13211335
} else {
1322-
var indexOffset = this.getOffsetByIndex(index);
1336+
var indexOffset = this.getOffsetByRange(0, index);
13231337
var startOffset = this.getScrollStartOffset();
13241338
this.scrollToOffset(indexOffset + startOffset);
13251339
}
@@ -1447,7 +1461,8 @@
14471461
value: function updateScrollElement() {
14481462
var scroller = this.options.scroller;
14491463
if (elementIsDocumentOrWindow(scroller)) {
1450-
this.scrollEl = document.scrollingElement || document.documentElement || document.body;
1464+
var scrollEl = document.scrollingElement || document.documentElement || document.body;
1465+
this.scrollEl = scrollEl;
14511466
} else {
14521467
this.scrollEl = scroller;
14531468
}
@@ -1534,7 +1549,7 @@
15341549
var middleOffset = 0;
15351550
while (low <= high) {
15361551
middle = low + Math.floor((high - low) / 2);
1537-
middleOffset = this.getOffsetByIndex(middle);
1552+
middleOffset = this.getOffsetByRange(0, middle);
15381553
if (middleOffset === offset) {
15391554
return middle;
15401555
} else if (middleOffset < offset) {
@@ -1566,15 +1581,23 @@
15661581
this.range.end = this.getEndByStart(start);
15671582
this.range.front = this.getFrontOffset();
15681583
this.range.behind = this.getBehindOffset();
1584+
this.range.total = this.getTotalOffset();
15691585
this.options.onUpdate(Object.assign({}, this.range));
15701586
}
1587+
}, {
1588+
key: "getTotalOffset",
1589+
value: function getTotalOffset() {
1590+
var offset = this.range.front + this.range.behind;
1591+
offset += this.getOffsetByRange(this.range.start, this.range.end + 1);
1592+
return offset;
1593+
}
15711594
}, {
15721595
key: "getFrontOffset",
15731596
value: function getFrontOffset() {
15741597
if (this.isFixed()) {
15751598
return this.fixedSize * this.range.start;
15761599
} else {
1577-
return this.getOffsetByIndex(this.range.start);
1600+
return this.getOffsetByRange(0, this.range.start);
15781601
}
15791602
}
15801603
}, {
@@ -1588,13 +1611,13 @@
15881611
return (last - end) * this.getItemSize();
15891612
}
15901613
}, {
1591-
key: "getOffsetByIndex",
1592-
value: function getOffsetByIndex(index) {
1593-
if (!index) {
1614+
key: "getOffsetByRange",
1615+
value: function getOffsetByRange(start, end) {
1616+
if (start >= end) {
15941617
return 0;
15951618
}
15961619
var offset = 0;
1597-
for (var i = 0; i < index; i++) {
1620+
for (var i = start; i < end; i++) {
15981621
var size = this.sizes.get(this.options.uniqueKeys[i]);
15991622
offset = offset + (typeof size === 'number' ? size : this.getItemSize());
16001623
}
@@ -1629,9 +1652,9 @@
16291652
}
16301653
var offset = 0;
16311654
if (scroller && wrapper) {
1632-
var sizeKey = this.isHorizontal() ? 'left' : 'top';
1655+
var offsetKey = this.isHorizontal() ? 'left' : 'top';
16331656
var rect = elementIsDocumentOrWindow(scroller) ? Dnd.utils.getRect(wrapper) : Dnd.utils.getRect(wrapper, true, scroller);
1634-
offset = this.offset + rect[sizeKey];
1657+
offset = this.offset + rect[offsetKey];
16351658
}
16361659
return offset;
16371660
}
@@ -1652,7 +1675,7 @@
16521675
front: 0,
16531676
behind: 0
16541677
},
1655-
choosen: '',
1678+
chosenKey: '',
16561679
dragging: false,
16571680
lastList: [],
16581681
lastLength: null,
@@ -1869,10 +1892,10 @@
18691892
list: this.dataSource,
18701893
uniqueKeys: this.uniqueKeys,
18711894
onChoose: function onChoose(event) {
1872-
_this5.choosen = event.node.getAttribute('data-key');
1895+
_this5.chosenKey = event.node.getAttribute('data-key');
18731896
},
18741897
onUnChoose: function onUnChoose() {
1875-
_this5.choosen = '';
1898+
_this5.chosenKey = '';
18761899
},
18771900
onDrag: function onDrag(event) {
18781901
_this5.dragging = true;
@@ -1901,7 +1924,7 @@
19011924
this.$emit('bottom');
19021925
}, 50),
19031926
_onItemResized: function _onItemResized(key, size) {
1904-
if (key === this.choosen) {
1927+
if (isSameValue(key, this.chosenKey)) {
19051928
return;
19061929
}
19071930
var sizes = this.virtualRef.sizes.size;
@@ -1936,7 +1959,8 @@
19361959
var record = this.dataSource[index];
19371960
if (record) {
19381961
var dataKey = getDataKey(record, this.dataKey);
1939-
var itemStyle = this.dragging && dataKey == this.choosen && {
1962+
var isChosen = isSameValue(dataKey, this.chosenKey);
1963+
var itemStyle = this.dragging && isChosen && {
19401964
display: 'none'
19411965
};
19421966
renders.push(this.$scopedSlots.item ? h(Item, {

‎dist/virtual-drag-list.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-virtual-draglist",
3-
"version": "2.9.5",
3+
"version": "2.9.6",
44
"description": "A virtual scrolling list component that can be sorted by dragging",
55
"main": "dist/virtual-drag-list.min.js",
66
"files": [

‎src/core‎

‎src/index.tsx‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,15 @@
11
import Vue from 'vue';
22
import Item from './item';
33
import { VirtualProps } from './props';
4-
import { Virtual, Sortable, getDataKey, SortableAttrs, VirtualAttrs, throttle } from './core';
4+
import {
5+
Virtual,
6+
Sortable,
7+
getDataKey,
8+
SortableAttrs,
9+
VirtualAttrs,
10+
throttle,
11+
isSameValue,
12+
} from './core';
513

614
const VirtualList = Vue.component('virtual-list', {
715
model: {
@@ -12,7 +20,7 @@ const VirtualList = Vue.component('virtual-list', {
1220
data() {
1321
return {
1422
range: { start: 0, end: 0, front: 0, behind: 0 },
15-
choosen: '',
23+
chosenKey: '',
1624
dragging: false,
1725
lastList: [],
1826
lastLength: null,
@@ -252,10 +260,10 @@ const VirtualList = Vue.component('virtual-list', {
252260
list: this.dataSource,
253261
uniqueKeys: this.uniqueKeys,
254262
onChoose: (event) => {
255-
this.choosen = event.node.getAttribute('data-key');
263+
this.chosenKey = event.node.getAttribute('data-key');
256264
},
257265
onUnChoose: () => {
258-
this.choosen = '';
266+
this.chosenKey = '';
259267
},
260268
onDrag: (event) => {
261269
this.dragging = true;
@@ -288,7 +296,7 @@ const VirtualList = Vue.component('virtual-list', {
288296
}, 50),
289297

290298
_onItemResized(key, size) {
291-
if (key === this.choosen) {
299+
if (isSameValue(key, this.chosenKey)) {
292300
return;
293301
}
294302

@@ -320,7 +328,8 @@ const VirtualList = Vue.component('virtual-list', {
320328
const record = this.dataSource[index];
321329
if (record) {
322330
const dataKey = getDataKey(record, this.dataKey);
323-
const itemStyle = this.dragging && dataKey == this.choosen && { display: 'none' };
331+
const isChosen = isSameValue(dataKey, this.chosenKey);
332+
const itemStyle = this.dragging && isChosen && { display: 'none' };
324333
renders.push(
325334
this.$scopedSlots.item
326335
? h(

0 commit comments

Comments
 (0)