tdesign-vue
Version:
158 lines (154 loc) • 6.59 kB
JavaScript
/**
* tdesign v1.14.1
* (c) 2025 tdesign
* @license MIT
*/
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import { ref, computed, watch } from '@vue/composition-api';
import useResizeObserver from './useResizeObserver.js';
var useVirtualScroll = function useVirtualScroll(container, params) {
var _params$value$data, _params$value$scroll;
var visibleData = ref([]);
var translateY = ref((((_params$value$data = params.value.data) === null || _params$value$data === void 0 ? void 0 : _params$value$data.length) || 0) * (((_params$value$scroll = params.value.scroll) === null || _params$value$scroll === void 0 ? void 0 : _params$value$scroll.rowHeight) || 50));
var scrollHeight = ref(0);
var trScrollTopHeightList = ref([]);
var trHeightList = ref([]);
var containerHeight = ref(0);
var containerWidth = ref(0);
var startAndEndIndex = ref([0, 15]);
var tScroll = computed(function () {
var _scroll$isFixedRowHei;
var scroll = params.value.scroll;
if (!scroll) return {};
return {
bufferSize: scroll.bufferSize || 10,
isFixedRowHeight: (_scroll$isFixedRowHei = scroll.isFixedRowHeight) !== null && _scroll$isFixedRowHei !== void 0 ? _scroll$isFixedRowHei : false,
rowHeight: scroll.rowHeight || 47,
threshold: scroll.threshold || 100,
type: scroll.type
};
});
var isVirtualScroll = computed(function () {
var data = params.value.data;
return tScroll.value.type === "virtual" && tScroll.value.threshold < data.length;
});
var getTrScrollTopHeightList = function getTrScrollTopHeightList(trHeightList2, containerHeight2) {
var list = [];
var data = params.value.data;
for (var i = 0, len = data.length; i < len; i++) {
list[i] = (list[i - 1] || containerHeight2) + (trHeightList2[i] || tScroll.value.rowHeight);
}
return list;
};
var tripleBufferSize = computed(function () {
return tScroll.value.bufferSize * 3;
});
var updateVisibleData = function updateVisibleData(trScrollTopHeightList2, scrollTop) {
var currentIndex = -1;
for (var i = 0, len = trScrollTopHeightList2.length; i < len; i++) {
if (trScrollTopHeightList2[i] > scrollTop) {
currentIndex = i;
break;
}
}
if (currentIndex < 0) return;
var startIndex = Math.min(currentIndex, trScrollTopHeightList2.length - tripleBufferSize.value);
var endIndex = startIndex + tripleBufferSize.value;
if (startAndEndIndex.value.join() !== [startIndex, endIndex].join() && startIndex >= 0) {
visibleData.value = params.value.data.slice(startIndex, endIndex);
var lastScrollTop = trScrollTopHeightList2[startIndex - 1];
var top = lastScrollTop > 0 ? lastScrollTop - containerHeight.value : 0;
translateY.value = top;
startAndEndIndex.value = [startIndex, endIndex];
}
};
var handleRowMounted = function handleRowMounted(rowData) {
var _rowData$ref$value;
if (!isVirtualScroll.value || !rowData || tScroll.value.isFixedRowHeight || !container.value) return;
var trHeight = (_rowData$ref$value = rowData.ref.value) === null || _rowData$ref$value === void 0 ? void 0 : _rowData$ref$value.getBoundingClientRect().height;
var rowIndex = rowData.data.__VIRTUAL_SCROLL_INDEX;
var newTrHeightList = trHeightList.value;
if (newTrHeightList[rowIndex] !== trHeight) {
newTrHeightList[rowIndex] = trHeight;
var scrollTopHeightList = getTrScrollTopHeightList(newTrHeightList, containerHeight.value);
trScrollTopHeightList.value = scrollTopHeightList;
var lastIndex = scrollTopHeightList.length - 1;
scrollHeight.value = scrollTopHeightList[lastIndex] - containerHeight.value;
updateVisibleData(scrollTopHeightList, container.value.scrollTop);
}
};
var handleScroll = function handleScroll() {
if (!isVirtualScroll.value) return;
updateVisibleData(trScrollTopHeightList.value, container.value.scrollTop);
};
var refreshVirtualScroll = function refreshVirtualScroll(_ref) {
var _ref2 = _slicedToArray(_ref, 1),
contentRect = _ref2[0].contentRect;
var maxScrollbarWidth = 16;
if (Math.abs(contentRect.width - containerWidth.value) > maxScrollbarWidth) {
container.value.scrollTop = 0;
translateY.value = 0;
}
containerWidth.value = contentRect.width;
containerHeight.value = contentRect.height;
};
var addIndexToData = function addIndexToData(data) {
data.forEach(function (item, index) {
item["__VIRTUAL_SCROLL_INDEX"] = index;
});
};
var updateScrollTop = function updateScrollTop(_ref3) {
var index = _ref3.index,
_ref3$top = _ref3.top,
top = _ref3$top === void 0 ? 0 : _ref3$top,
behavior = _ref3.behavior;
var scrollTop = trScrollTopHeightList.value[index] - containerHeight.value - top;
container.value.scrollTo({
top: scrollTop,
behavior: behavior || "auto"
});
};
var scrollToElement = function scrollToElement(p) {
updateScrollTop(p);
if (!tScroll.value.isFixedRowHeight) {
var _p$time;
var duration = (_p$time = p.time) !== null && _p$time !== void 0 ? _p$time : 60;
var timer = setTimeout(function () {
updateScrollTop(p);
clearTimeout(timer);
}, duration);
}
};
useResizeObserver(isVirtualScroll.value ? container : void 0, refreshVirtualScroll);
watch(function () {
return [[].concat(_toConsumableArray(params.value.data), [tScroll.value, isVirtualScroll.value, container.value])];
}, function () {
if (!isVirtualScroll.value) return;
var data = params.value.data;
addIndexToData(data);
var startIndex = startAndEndIndex.value[0];
visibleData.value = data.slice(startIndex, startIndex + tripleBufferSize.value);
var timer = setTimeout(function () {
if (container.value) {
containerHeight.value = container.value.getBoundingClientRect().height;
var scrollTopHeightList = getTrScrollTopHeightList(trHeightList.value || [], containerHeight.value);
trScrollTopHeightList.value = scrollTopHeightList;
}
clearTimeout(timer);
}, 0);
}, {
immediate: true
});
return {
visibleData: visibleData,
translateY: translateY,
scrollHeight: scrollHeight,
isVirtualScroll: isVirtualScroll,
handleScroll: handleScroll,
handleRowMounted: handleRowMounted,
scrollToElement: scrollToElement
};
};
export { useVirtualScroll as default };
//# sourceMappingURL=useVirtualScrollNew.js.map