xdesign-vue-next/cjs/hooks/useVirtualScrollNew.js

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
var vue = require('vue');
var hooks_useResizeObserver = require('./useResizeObserver.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);

var useVirtualScroll = function useVirtualScroll(container, params) {
  var _params$value$data, _params$value$scroll;
  var visibleData = vue.ref([]);
  var translateY = vue.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 = vue.ref(0);
  var trScrollTopHeightList = vue.ref([]);
  var trHeightList = vue.ref([]);
  var containerHeight = vue.ref(0);
  var containerWidth = vue.ref(0);
  var startAndEndIndex = vue.ref([0, 15]);
  var tScroll = vue.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 = vue.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 = vue.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__default["default"](_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);
    }
  };
  hooks_useResizeObserver["default"](isVirtualScroll.value ? container : void 0, refreshVirtualScroll);
  vue.watch(function () {
    return [[].concat(_toConsumableArray__default["default"](params.value.data), [tScroll, isVirtualScroll, container])];
  }, 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
  };
};

exports["default"] = useVirtualScroll;
//# sourceMappingURL=useVirtualScrollNew.js.map