@v-c/virtual-list 1.0.0 → 1.0.2

package/src/hooks/useMobileTouchMove.ts

@@ -1,132 +0,0 @@
-import type { Ref } from 'vue'
-import { onUnmounted, 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

@@ -1,48 +0,0 @@
-import type { Ref } from 'vue'
-import { 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

@@ -1,124 +0,0 @@
-import type { Ref } from 'vue'
-import { onUnmounted, 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/hooks/useScrollTo.tsx

@@ -1,184 +0,0 @@
-import type { Key } from '@v-c/util/dist/type'
-import type { Ref } from 'vue'
-import type { GetKey } from '../interface.ts'
-import type CacheMap from '../utils/CacheMap.ts'
-import { warning } from '@v-c/util'
-import raf from '@v-c/util/dist/raf'
-import { shallowRef, watch } from 'vue'
-
-const MAX_TIMES = 10
-
-export type ScrollAlign = 'top' | 'bottom' | 'auto'
-
-export interface ScrollPos {
-  left?: number
-  top?: number
-}
-
-export type ScrollTarget = {
-  index: number
-  align?: ScrollAlign
-  offset?: number
-} | {
-  key: Key
-  align?: ScrollAlign
-  offset?: number
-}
-
-export default function useScrollTo(
-  containerRef: Ref<HTMLDivElement>,
-  data: Ref<any[]>,
-  heights: CacheMap,
-  itemHeight: Ref<number>,
-  getKey: GetKey<any>,
-  collectHeight: () => void,
-  syncScrollTop: (newTop: number) => void,
-  triggerFlash: () => void,
-): (arg: number | ScrollTarget) => void {
-  const scrollRef = shallowRef<number>()
-
-  const syncState = shallowRef<{
-    times: number
-    index: number
-    offset: number
-    originAlign: ScrollAlign
-    targetAlign?: 'top' | 'bottom'
-    lastTop?: number
-  } | null>(null)
-
-  // ========================== Sync Scroll ==========================
-  watch(
-    [syncState, containerRef],
-    () => {
-      if (syncState.value && syncState.value.times < MAX_TIMES) {
-        // Never reach
-        if (!containerRef.value) {
-          syncState.value = { ...syncState.value }
-          return
-        }
-        collectHeight()
-        const { targetAlign, originAlign, index, offset } = syncState.value
-
-        const height = containerRef.value.clientHeight
-        let needCollectHeight = false
-        let newTargetAlign: 'top' | 'bottom' | null = targetAlign ?? null
-        let targetTop: number | null = null
-        // Go to next frame if height not exist
-        if (height) {
-          const mergedAlign = targetAlign || originAlign
-          // Get top & bottom
-          let stackTop = 0
-          let itemTop = 0
-          let itemBottom = 0
-
-          const maxLen = Math.min(data.value.length - 1, index)
-
-          for (let i = 0; i <= maxLen; i += 1) {
-            const key = getKey(data.value[i])
-            itemTop = stackTop
-            const cacheHeight = heights.get(key)
-            itemBottom = itemTop + (cacheHeight === undefined ? itemHeight.value : cacheHeight)
-
-            stackTop = itemBottom
-          }
-
-          // Check if need sync height (visible range has item not record height)
-          let leftHeight = mergedAlign === 'top' ? offset : height - offset
-          for (let i = maxLen; i >= 0; i -= 1) {
-            const key = getKey(data.value[i])
-            const cacheHeight = heights.get(key)
-
-            if (cacheHeight === undefined) {
-              needCollectHeight = true
-              break
-            }
-
-            leftHeight -= cacheHeight
-            if (leftHeight <= 0) {
-              break
-            }
-          }
-
-          // Scroll to
-          switch (mergedAlign) {
-            case 'top':
-              targetTop = itemTop - offset
-              break
-            case 'bottom':
-              targetTop = itemBottom - height + offset
-              break
-
-            default: {
-              const { scrollTop } = containerRef.value
-              const scrollBottom = scrollTop + height
-              if (itemTop < scrollTop) {
-                newTargetAlign = 'top'
-              }
-              else if (itemBottom > scrollBottom) {
-                newTargetAlign = 'bottom'
-              }
-            }
-          }
-          if (targetTop !== null) {
-            syncScrollTop(targetTop)
-          }
-
-          // One more time for sync
-          if (targetTop !== syncState.value.lastTop) {
-            needCollectHeight = true
-          }
-        }
-
-        if (needCollectHeight) {
-          syncState.value = {
-            ...syncState.value,
-            times: syncState.value.times + 1,
-            targetAlign: newTargetAlign as any,
-            lastTop: targetTop as any,
-          }
-        }
-      }
-      else if (process.env.NODE_ENV !== 'production' && syncState.value?.times === MAX_TIMES) {
-        warning(
-          false,
-          'Seems `scrollTo` with `rc-virtual-list` reach the max limitation. Please fire issue for us. Thanks.',
-        )
-      }
-    },
-    {
-      immediate: true,
-      flush: 'post',
-    },
-  )
-
-  // =========================== Scroll To ===========================
-  return (arg) => {
-    if (arg === null || arg === undefined) {
-      triggerFlash()
-      return
-    }
-    // Normalize target
-    raf.cancel(scrollRef.value!)
-    if (typeof arg === 'number') {
-      syncScrollTop(arg)
-    }
-    else if (arg && typeof arg === 'object') {
-      let index: number
-      const { align } = arg
-      if ('index' in arg) {
-        ({ index } = arg)
-      }
-      else {
-        index = data.value.findIndex(item => getKey(item) === arg.key)
-      }
-      const { offset = 0 } = arg
-
-      syncState.value = {
-        times: 0,
-        index,
-        offset,
-        originAlign: align!,
-      }
-    }
-  }
-}

package/src/index.ts

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

package/src/interface.ts

@@ -1,32 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

package/src/utils/scrollbarUtil.ts

@@ -1,10 +0,0 @@
-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/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "extends": ["../../tsconfig.base.json"],
-  "compilerOptions": {
-
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
-}

package/vite.config.ts

@@ -1,18 +0,0 @@
-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

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