@v-c/virtual-list 0.0.1

package/src/hooks/useMobileTouchMove.ts

@@ -0,0 +1,131 @@
+import { onUnmounted, ref, type Ref, watch } from 'vue'
+
+const SMOOTH_PTG = 14 / 15
+
+export default function useMobileTouchMove(
+  inVirtual: Ref<boolean>,
+  listRef: Ref<HTMLDivElement | null | undefined>,
+  callback: (
+    isHorizontal: boolean,
+    offset: number,
+    smoothOffset: boolean,
+    e?: TouchEvent,
+  ) => boolean,
+) {
+  const touchedRef = ref(false)
+  const touchXRef = ref(0)
+  const touchYRef = ref(0)
+
+  let elementRef: HTMLElement | null = null
+  let touchStartElement: HTMLDivElement | null = null
+
+  // Smooth scroll
+  let intervalId: ReturnType<typeof setInterval> | null = null
+
+  let cleanUpEvents: () => void
+
+  const onTouchMove = (e: TouchEvent) => {
+    if (touchedRef.value) {
+      const currentX = Math.ceil(e.touches[0].pageX)
+      const currentY = Math.ceil(e.touches[0].pageY)
+      let offsetX = touchXRef.value - currentX
+      let offsetY = touchYRef.value - currentY
+      const isHorizontal = Math.abs(offsetX) > Math.abs(offsetY)
+      if (isHorizontal) {
+        touchXRef.value = currentX
+      }
+      else {
+        touchYRef.value = currentY
+      }
+
+      const scrollHandled = callback(isHorizontal, isHorizontal ? offsetX : offsetY, false, e)
+      if (scrollHandled) {
+        e.preventDefault()
+      }
+
+      // Smooth interval
+      if (intervalId)
+        clearInterval(intervalId)
+
+      if (scrollHandled) {
+        intervalId = setInterval(() => {
+          if (isHorizontal) {
+            offsetX *= SMOOTH_PTG
+          }
+          else {
+            offsetY *= SMOOTH_PTG
+          }
+          const offset = Math.floor(isHorizontal ? offsetX : offsetY)
+          if (!callback(isHorizontal, offset, true) || Math.abs(offset) <= 0.1) {
+            if (intervalId)
+              clearInterval(intervalId)
+          }
+        }, 16)
+      }
+    }
+  }
+
+  const onTouchEnd = () => {
+    touchedRef.value = false
+
+    cleanUpEvents()
+  }
+
+  const onTouchStart = (e: TouchEvent) => {
+    cleanUpEvents()
+
+    if (e.touches.length === 1 && !touchedRef.value) {
+      touchedRef.value = true
+      touchXRef.value = Math.ceil(e.touches[0].pageX)
+      touchYRef.value = Math.ceil(e.touches[0].pageY)
+
+      elementRef = e.target as HTMLElement
+      elementRef.addEventListener('touchmove', onTouchMove, { passive: false })
+      elementRef.addEventListener('touchend', onTouchEnd, { passive: true } as any)
+    }
+  }
+
+  cleanUpEvents = () => {
+    if (elementRef) {
+      elementRef.removeEventListener('touchmove', onTouchMove)
+      elementRef.removeEventListener('touchend', onTouchEnd)
+      elementRef = null
+    }
+  }
+
+  const removeTouchStartListener = () => {
+    if (touchStartElement) {
+      touchStartElement.removeEventListener('touchstart', onTouchStart)
+      touchStartElement = null
+    }
+  }
+
+  const teardown = () => {
+    removeTouchStartListener()
+    cleanUpEvents()
+    if (intervalId) {
+      clearInterval(intervalId)
+      intervalId = null
+    }
+  }
+
+  onUnmounted(teardown)
+
+  watch(
+    [inVirtual, listRef],
+    ([enabled, ele], _prev, onCleanup) => {
+      if (enabled && ele) {
+        touchStartElement = ele
+        ele.addEventListener('touchstart', onTouchStart, { passive: true } as any)
+
+        onCleanup(() => {
+          teardown()
+        })
+      }
+      else {
+        teardown()
+      }
+    },
+    { immediate: true },
+  )
+}

package/src/hooks/useOriginScroll.ts

@@ -0,0 +1,47 @@
+import { ref, type Ref } from 'vue'
+
+export default function useOriginScroll(
+  isScrollAtTop: Ref<boolean>,
+  isScrollAtBottom: Ref<boolean>,
+  isScrollAtLeft: Ref<boolean>,
+  isScrollAtRight: Ref<boolean>,
+) {
+  // Do lock for a wheel when scrolling
+  const lockRef = ref(false)
+  let lockTimeout: ReturnType<typeof setTimeout> | null = null
+
+  function lockScroll() {
+    if (lockTimeout)
+      clearTimeout(lockTimeout)
+
+    lockRef.value = true
+
+    lockTimeout = setTimeout(() => {
+      lockRef.value = false
+    }, 50)
+  }
+
+  return (isHorizontal: boolean, delta: number, smoothOffset = false) => {
+    const originScroll = isHorizontal
+      // Pass origin wheel when on the left
+      ? (delta < 0 && isScrollAtLeft.value)
+        // Pass origin wheel when on the right
+      || (delta > 0 && isScrollAtRight.value)
+      // Pass origin wheel when on the top
+      : (delta < 0 && isScrollAtTop.value)
+        // Pass origin wheel when on the bottom
+        || (delta > 0 && isScrollAtBottom.value)
+
+    if (smoothOffset && originScroll) {
+      // No need lock anymore when it's smooth offset from touchMove interval
+      if (lockTimeout)
+        clearTimeout(lockTimeout)
+      lockRef.value = false
+    }
+    else if (!originScroll || lockRef.value) {
+      lockScroll()
+    }
+
+    return !lockRef.value && originScroll
+  }
+}

package/src/hooks/useScrollDrag.ts

@@ -0,0 +1,123 @@
+import { onUnmounted, type Ref, watch } from 'vue'
+
+function smoothScrollOffset(offset: number) {
+  return Math.floor(offset ** 0.5)
+}
+
+export function getPageXY(
+  e: MouseEvent | TouchEvent,
+  horizontal: boolean,
+): number {
+  const obj = 'touches' in e ? e.touches[0] : e
+  return obj[horizontal ? 'pageX' : 'pageY'] - window[horizontal ? 'scrollX' : 'scrollY']
+}
+
+export default function useScrollDrag(
+  inVirtual: Ref<boolean>,
+  componentRef: Ref<HTMLElement | null | undefined>,
+  onScrollOffset: (offset: number) => void,
+) {
+  let cachedElement: HTMLElement | null = null
+  let cachedDocument: Document | null = null
+  let mouseDownLock = false
+  let rafId: number | null = null
+  let offset = 0
+
+  const stopScroll = () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId)
+      rafId = null
+    }
+  }
+
+  const continueScroll = () => {
+    stopScroll()
+
+    rafId = requestAnimationFrame(() => {
+      onScrollOffset(offset)
+      continueScroll()
+    })
+  }
+
+  const clearDragState = () => {
+    mouseDownLock = false
+    stopScroll()
+  }
+
+  const onMouseDown = (e: MouseEvent) => {
+    // Skip if element set draggable
+    if ((e.target as HTMLElement).draggable || e.button !== 0) {
+      return
+    }
+    // Skip if nest List has handled this event
+    const event = e as MouseEvent & {
+      _virtualHandled?: boolean
+    }
+    if (!event._virtualHandled) {
+      event._virtualHandled = true
+      mouseDownLock = true
+    }
+  }
+
+  const onMouseMove = (e: MouseEvent) => {
+    if (mouseDownLock && cachedElement) {
+      const mouseY = getPageXY(e, false)
+      const { top, bottom } = cachedElement.getBoundingClientRect()
+
+      if (mouseY <= top) {
+        const diff = top - mouseY
+        offset = -smoothScrollOffset(diff)
+        continueScroll()
+      }
+      else if (mouseY >= bottom) {
+        const diff = mouseY - bottom
+        offset = smoothScrollOffset(diff)
+        continueScroll()
+      }
+      else {
+        stopScroll()
+      }
+    }
+  }
+
+  const teardown = () => {
+    if (cachedElement) {
+      cachedElement.removeEventListener('mousedown', onMouseDown)
+      cachedElement = null
+    }
+
+    if (cachedDocument) {
+      cachedDocument.removeEventListener('mouseup', clearDragState)
+      cachedDocument.removeEventListener('mousemove', onMouseMove)
+      cachedDocument.removeEventListener('dragend', clearDragState)
+      cachedDocument = null
+    }
+
+    clearDragState()
+  }
+
+  onUnmounted(teardown)
+
+  watch(
+    [inVirtual, componentRef],
+    ([enabled, ele], _prev, onCleanup) => {
+      if (enabled && ele) {
+        cachedElement = ele
+        cachedDocument = ele.ownerDocument
+
+        cachedElement.addEventListener('mousedown', onMouseDown)
+        cachedDocument.addEventListener('mouseup', clearDragState)
+        cachedDocument.addEventListener('mousemove', onMouseMove)
+        cachedDocument.addEventListener('dragend', clearDragState)
+
+        onCleanup(() => {
+          teardown()
+        })
+      }
+      else {
+        teardown()
+      }
+    },
+    { immediate: true },
+  )
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import List from './List'
+
+export type { ListProps, ListRef, ScrollConfig, ScrollInfo } from './List'
+
+export default List

package/src/interface.ts

@@ -0,0 +1,32 @@
+import type { Key } from '@v-c/util/dist/type'
+import type { CSSProperties, VNode } from 'vue'
+
+export type RenderFunc<T> = (
+  item: T,
+  index: number,
+  props: { style: CSSProperties, offsetX: number },
+) => VNode
+
+export interface SharedConfig<T> {
+  getKey: (item: T) => Key
+}
+
+export type GetKey<T> = (item: T) => Key
+
+export type GetSize = (startKey: Key, endKey?: Key) => { top: number, bottom: number }
+
+export interface ExtraRenderInfo {
+  /** Virtual list start line */
+  start: number
+  /** Virtual list end line */
+  end: number
+  /** Is current in virtual render */
+  virtual: boolean
+  /** Used for `scrollWidth` tell the horizontal offset */
+  offsetX: number
+  offsetY: number
+
+  rtl: boolean
+
+  getSize: GetSize
+}

package/src/utils/CacheMap.ts

@@ -0,0 +1,42 @@
+import type { Key } from '@v-c/util/dist/type'
+
+// Firefox has low performance of map.
+class CacheMap {
+  maps: Record<string, number>
+
+  // Used for cache key
+  // `useMemo` no need to update if `id` not change
+  id: number = 0
+
+  diffRecords = new Map<Key, number>()
+
+  constructor() {
+    this.maps = Object.create(null)
+  }
+
+  set(key: Key, value: number) {
+    // Record prev value
+    this.diffRecords.set(key, this.maps[key as string])
+
+    this.maps[key as string] = value
+    this.id += 1
+  }
+
+  get(key: Key) {
+    return this.maps[key as string]
+  }
+
+  /**
+   * CacheMap will record the key changed.
+   * To help to know what's update in the next render.
+   */
+  resetRecord() {
+    this.diffRecords.clear()
+  }
+
+  getRecord() {
+    return this.diffRecords
+  }
+}
+
+export default CacheMap

package/src/utils/isFirefox.ts

@@ -0,0 +1,3 @@
+const isFF = typeof navigator === 'object' && /Firefox/i.test(navigator.userAgent)
+
+export default isFF

package/src/utils/scrollbarUtil.ts

@@ -0,0 +1,10 @@
+const MIN_SIZE = 20
+
+export function getSpinSize(containerSize = 0, scrollRange = 0) {
+  let baseSize = (containerSize / scrollRange) * containerSize
+  if (isNaN(baseSize)) {
+    baseSize = 0
+  }
+  baseSize = Math.max(baseSize, MIN_SIZE)
+  return Math.floor(baseSize)
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+import type { UserConfig } from 'vite'
+import fg from 'fast-glob'
+import { defineConfig, mergeConfig } from 'vite'
+import { buildCommon } from '../../scripts/build.common'
+
+const entry = fg.sync(['src/**/*.ts', 'src/**/*.tsx', '!src/**/*.test.ts', '!src/**/*.test.tsx', '!src/**/tests'])
+
+export default defineConfig({
+  ...mergeConfig(buildCommon({
+    external: ['vue', /^@v-c\//],
+  }), {
+    build: {
+      lib: {
+        entry,
+      },
+    },
+  } as UserConfig),
+})

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineProject, mergeConfig } from 'vitest/config'
+import configShared from '../../vitest.config.ts'
+
+export default mergeConfig(
+  configShared,
+  defineProject({
+    test: {
+      environment: 'jsdom',
+    },
+  }),
+)