xdesign-vue-next/es/hooks/useVirtualScrollNew.mjs.map

XDesign Component for vue-next

{"version":3,"file":"useVirtualScrollNew.mjs","sources":["../../src/hooks/useVirtualScrollNew.ts"],"sourcesContent":["import { ref, computed, watch, Ref } from 'vue';\nimport { TScroll } from '../common';\nimport useResizeObserver from './useResizeObserver';\n\nexport type UseVirtualScrollParams = Ref<{\n  data: { [key: string]: any }[];\n  scroll: TScroll;\n}>;\n\nexport interface ScrollToElementParams {\n  index: number;\n  top?: number;\n  time?: number;\n  behavior?: 'auto' | 'smooth';\n}\n\nconst useVirtualScroll = (container: Ref<HTMLElement>, params: UseVirtualScrollParams) => {\n  const visibleData = ref<any[]>([]);\n  const translateY = ref((params.value.data?.length || 0) * (params.value.scroll?.rowHeight || 50));\n  const scrollHeight = ref(0);\n  const trScrollTopHeightList = ref<number[]>([]);\n  const trHeightList = ref<number[]>([]);\n  const containerHeight = ref(0);\n  const containerWidth = ref(0);\n  const startAndEndIndex = ref<[number, number]>([0, 15]);\n\n  const tScroll = computed(() => {\n    const { scroll } = params.value;\n    if (!scroll) return {};\n    return {\n      bufferSize: scroll.bufferSize || 10,\n      isFixedRowHeight: scroll.isFixedRowHeight ?? false,\n      rowHeight: scroll.rowHeight || 47,\n      threshold: scroll.threshold || 100,\n      type: scroll.type,\n    };\n  });\n\n  const isVirtualScroll = computed(() => {\n    const { data } = params.value;\n    return tScroll.value.type === 'virtual' && tScroll.value.threshold < data.length;\n  });\n\n  const getTrScrollTopHeightList = (trHeightList: number[], containerHeight: number) => {\n    const list: number[] = [];\n    const { data } = params.value;\n    for (let i = 0, len = data.length; i < len; i++) {\n      list[i] = (list[i - 1] || containerHeight) + (trHeightList[i] || tScroll.value.rowHeight);\n    }\n    return list;\n  };\n\n  const tripleBufferSize = computed(() => tScroll.value.bufferSize * 3);\n\n  const updateVisibleData = (trScrollTopHeightList: number[], scrollTop: number) => {\n    let currentIndex = -1;\n    for (let i = 0, len = trScrollTopHeightList.length; i < len; i++) {\n      if (trScrollTopHeightList[i] > scrollTop) {\n        currentIndex = i;\n        break;\n      }\n    }\n    if (currentIndex < 0) return;\n    const startIndex = Math.min(currentIndex, trScrollTopHeightList.length - tripleBufferSize.value);\n    const endIndex = startIndex + tripleBufferSize.value;\n    if (startAndEndIndex.value.join() !== [startIndex, endIndex].join() && startIndex >= 0) {\n      visibleData.value = params.value.data.slice(startIndex, endIndex);\n      const lastScrollTop = trScrollTopHeightList[startIndex - 1];\n      const top = lastScrollTop > 0 ? lastScrollTop - containerHeight.value : 0;\n      translateY.value = top;\n      startAndEndIndex.value = [startIndex, endIndex];\n    }\n  };\n\n  const handleRowMounted = (rowData: any) => {\n    if (!isVirtualScroll.value || !rowData || tScroll.value.isFixedRowHeight || !container.value) return;\n    const trHeight = rowData.ref.value?.getBoundingClientRect().height;\n    const rowIndex = rowData.data.__VIRTUAL_SCROLL_INDEX;\n    const newTrHeightList = trHeightList.value;\n    if (newTrHeightList[rowIndex] !== trHeight) {\n      newTrHeightList[rowIndex] = trHeight;\n      const scrollTopHeightList = getTrScrollTopHeightList(newTrHeightList, containerHeight.value);\n      trScrollTopHeightList.value = scrollTopHeightList;\n\n      const lastIndex = scrollTopHeightList.length - 1;\n      scrollHeight.value = scrollTopHeightList[lastIndex] - containerHeight.value;\n      updateVisibleData(scrollTopHeightList, container.value.scrollTop);\n    }\n  };\n\n  const handleScroll = () => {\n    if (!isVirtualScroll.value) return;\n    updateVisibleData(trScrollTopHeightList.value, container.value.scrollTop);\n  };\n\n  const refreshVirtualScroll = ([{ contentRect }]: [ResizeObserverEntry]) => {\n    const maxScrollbarWidth = 16;\n    if (Math.abs(contentRect.width - containerWidth.value) > maxScrollbarWidth) {\n      container.value.scrollTop = 0;\n      translateY.value = 0;\n    }\n    containerWidth.value = contentRect.width;\n    containerHeight.value = contentRect.height;\n  };\n\n  const addIndexToData = (data: any[]) => {\n    data.forEach((item, index) => {\n      // eslint-disable-next-line\n      item['__VIRTUAL_SCROLL_INDEX'] = index;\n    });\n  };\n\n  const updateScrollTop = ({ index, top = 0, behavior }: ScrollToElementParams) => {\n    const scrollTop = trScrollTopHeightList.value[index] - containerHeight.value - top;\n    container.value.scrollTo({\n      top: scrollTop,\n      behavior: behavior || 'auto',\n    });\n  };\n\n  const scrollToElement = (p: ScrollToElementParams) => {\n    updateScrollTop(p);\n    // 不同行高的表格需要异步计算\n    if (!tScroll.value.isFixedRowHeight) {\n      const duration = p.time ?? 60;\n      const timer = setTimeout(() => {\n        updateScrollTop(p);\n        clearTimeout(timer);\n      }, duration);\n    }\n  };\n\n  useResizeObserver(isVirtualScroll.value ? container : undefined, refreshVirtualScroll);\n\n  watch(\n    () => [[...params.value.data, tScroll, isVirtualScroll, container]],\n    () => {\n      if (!isVirtualScroll.value) return;\n      const { data } = params.value;\n      addIndexToData(data);\n      const startIndex = startAndEndIndex.value[0];\n      visibleData.value = data.slice(startIndex, startIndex + tripleBufferSize.value);\n\n      // get container dom after one tick\n      const timer = setTimeout(() => {\n        if (container.value) {\n          containerHeight.value = container.value.getBoundingClientRect().height;\n          const scrollTopHeightList = getTrScrollTopHeightList(trHeightList.value || [], containerHeight.value);\n          trScrollTopHeightList.value = scrollTopHeightList;\n        }\n        clearTimeout(timer);\n      }, 0);\n    },\n    { immediate: true },\n  );\n\n  return {\n    visibleData,\n    translateY,\n    scrollHeight,\n    isVirtualScroll,\n    handleScroll,\n    handleRowMounted,\n    scrollToElement,\n  };\n};\n\nexport type VirtualScrollConfig = ReturnType<typeof useVirtualScroll>;\n\nexport default useVirtualScroll;\n"],"names":["bufferSize","rowHeight","threshold","trScrollTopHeightList","currentIndex","visibleData","startAndEndIndex","newTrHeightList","container","containerWidth","containerHeight","data","item","top","watch","immediate","translateY","scrollHeight","isVirtualScroll","handleScroll","handleRowMounted","scrollToElement"],"mappings":"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"}