@v-c/virtual-list 0.0.1 → 1.0.0

package/src/ScrollBar.tsx

@@ -1,4 +1,8 @@
-import { computed, type CSSProperties, defineComponent, onMounted, onUnmounted, type PropType, ref, shallowRef, watch } from 'vue'
+import type { CSSProperties } from 'vue'
+import raf from '@v-c/util/dist/raf'
+import { computed, defineComponent, onMounted, onUnmounted, ref, shallowRef, watch } from 'vue'
+
+export type ScrollBarDirectionType = 'ltr' | 'rtl'
 
 export interface ScrollBarProps {
   prefixCls: string
@@ -28,23 +32,8 @@ function getPageXY(
   return obj[horizontal ? 'pageX' : 'pageY'] - window[horizontal ? 'scrollX' : 'scrollY']
 }
 
-export default defineComponent({
+export default defineComponent<ScrollBarProps>({
   name: 'ScrollBar',
-  props: {
-    prefixCls: { type: String, required: true },
-    scrollOffset: { type: Number, required: true },
-    scrollRange: { type: Number, required: true },
-    rtl: { type: Boolean, default: false },
-    onScroll: { type: Function as PropType<(scrollOffset: number, horizontal?: boolean) => void>, required: true },
-    onStartMove: { type: Function as PropType<() => void>, required: true },
-    onStopMove: { type: Function as PropType<() => void>, required: true },
-    horizontal: { type: Boolean, default: false },
-    style: Object as PropType<CSSProperties>,
-    thumbStyle: Object as PropType<CSSProperties>,
-    spinSize: { type: Number, required: true },
-    containerSize: { type: Number, required: true },
-    showScrollBar: { type: [Boolean, String] as PropType<boolean | 'optional'> },
-  },
   setup(props, { expose }) {
     const dragging = ref(false)
     const pageXY = ref<number | null>(null)
@@ -52,13 +41,11 @@ export default defineComponent({
 
     const isLTR = computed(() => !props.rtl)
 
-    // Refs
+    // ========================= Refs =========================
     const scrollbarRef = shallowRef<HTMLDivElement>()
     const thumbRef = shallowRef<HTMLDivElement>()
 
-    // Visible
-    // When showScrollBar is 'optional', start as visible (true)
-    // When showScrollBar is true/false, use that value
+    // ======================= Visible ========================
     const visible = ref(props.showScrollBar === 'optional' ? true : props.showScrollBar)
     let visibleTimeout: ReturnType<typeof setTimeout> | null = null
 
@@ -74,11 +61,11 @@ export default defineComponent({
       }, 3000)
     }
 
-    // Range
+    // ======================== Range =========================
     const enableScrollRange = computed(() => props.scrollRange - props.containerSize || 0)
     const enableOffsetRange = computed(() => props.containerSize - props.spinSize || 0)
 
-    // Top position
+    // ========================= Top ==========================
     const top = computed(() => {
       if (props.scrollOffset === 0 || enableScrollRange.value === 0) {
         return 0
@@ -87,7 +74,7 @@ export default defineComponent({
       return ptg * enableOffsetRange.value
     })
 
-    // State ref for event handlers
+    // ======================== Thumb =========================
     const stateRef = shallowRef({
       top: top.value,
       dragging: dragging.value,
@@ -114,12 +101,16 @@ export default defineComponent({
       pageXY.value = getPageXY(e, props.horizontal || false)
       startTop.value = stateRef.value.top
 
-      props.onStartMove()
+      props?.onStartMove?.()
       e.stopPropagation()
       e.preventDefault()
     }
 
-    // Effect: Add passive:false event listeners
+    // ======================== Effect ========================
+
+    // React make event as passive, but we need to preventDefault
+    // Add event on dom directly instead.
+    // ref: https://github.com/facebook/react/issues/9809
     onMounted(() => {
       const onScrollbarTouchStart = (e: TouchEvent) => {
         e.preventDefault()
@@ -140,7 +131,7 @@ export default defineComponent({
     })
 
     // Effect: Handle dragging
-    watch(dragging, (isDragging) => {
+    watch(dragging, (isDragging, _O, onCleanup) => {
       if (isDragging) {
         let moveRafId: number | null = null
 
@@ -150,9 +141,7 @@ export default defineComponent({
             pageY: statePageY,
             startTop: stateStartTop,
           } = stateRef.value
-
-          if (moveRafId)
-            cancelAnimationFrame(moveRafId)
+          raf.cancel(moveRafId!)
 
           const rect = scrollbarRef.value!.getBoundingClientRect()
           const scale = props.containerSize / (props.horizontal ? rect.width : rect.height)
@@ -177,8 +166,8 @@ export default defineComponent({
             newScrollTop = Math.max(newScrollTop, 0)
             newScrollTop = Math.min(newScrollTop, tmpEnableScrollRange)
 
-            moveRafId = requestAnimationFrame(() => {
-              props.onScroll(newScrollTop, props.horizontal)
+            moveRafId = raf(() => {
+              props?.onScroll?.(newScrollTop, props.horizontal)
             })
           }
         }
@@ -193,26 +182,25 @@ export default defineComponent({
         window.addEventListener('mouseup', onMouseUp, { passive: true } as any)
         window.addEventListener('touchend', onMouseUp, { passive: true } as any)
 
-        onUnmounted(() => {
+        onCleanup(() => {
           window.removeEventListener('mousemove', onMouseMove)
           window.removeEventListener('touchmove', onMouseMove)
           window.removeEventListener('mouseup', onMouseUp)
           window.removeEventListener('touchend', onMouseUp)
 
-          if (moveRafId)
-            cancelAnimationFrame(moveRafId)
+          raf.cancel(moveRafId!)
         })
       }
     })
 
     // Effect: Delay hidden on scroll offset change
-    watch(() => props.scrollOffset, () => {
+    watch(() => props.scrollOffset, (_n, _o, onCleanup) => {
       delayHidden()
-    })
-
-    onUnmounted(() => {
-      if (visibleTimeout)
-        clearTimeout(visibleTimeout)
+      onCleanup(() => {
+        if (visibleTimeout) {
+          clearTimeout(visibleTimeout)
+        }
+      })
     })
 
     // Imperative handle
@@ -221,7 +209,8 @@ export default defineComponent({
     })
 
     return () => {
-      const scrollbarPrefixCls = `${props.prefixCls}-scrollbar`
+      const { prefixCls, horizontal } = props
+      const scrollbarPrefixCls = `${prefixCls}-scrollbar`
 
       const containerStyle: CSSProperties = {
         position: 'absolute',
@@ -271,8 +260,8 @@ export default defineComponent({
           class={[
             scrollbarPrefixCls,
             {
-              [`${scrollbarPrefixCls}-horizontal`]: props.horizontal,
-              [`${scrollbarPrefixCls}-vertical`]: !props.horizontal,
+              [`${scrollbarPrefixCls}-horizontal`]: horizontal,
+              [`${scrollbarPrefixCls}-vertical`]: !horizontal,
               [`${scrollbarPrefixCls}-visible`]: visible.value,
             },
           ]}

package/src/hooks/useDiffItem.ts

@@ -1,4 +1,5 @@
-import { ref, type Ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { ref, watch } from 'vue'
 
 export default function useDiffItem<T>(data: Ref<T[]>, getKey: (item: T) => any): Ref<T | undefined> {
   const prevDataRef = ref<T[]>([])
@@ -13,7 +14,7 @@ export default function useDiffItem<T>(data: Ref<T[]>, getKey: (item: T) => any)
         // Find added item
         const addedItem = newData.find((item) => {
           const key = getKey(item)
-          return !prevData.some(prevItem => getKey(prevItem) === key)
+          return !prevData.some(prevItem => getKey(prevItem as any) === key)
         })
 
         diffItem.value = addedItem

package/src/hooks/useFrameWheel.ts

@@ -1,4 +1,5 @@
-import { onUnmounted, ref, type Ref } from 'vue'
+import type { Ref } from 'vue'
+import { onUnmounted, ref } from 'vue'
 import isFF from '../utils/isFirefox'
 import useOriginScroll from './useOriginScroll'
 

package/src/hooks/useGetSize.ts

@@ -1,12 +1,13 @@
+import type { ComputedRef, Ref } from 'vue'
 import type { GetKey } from '../interface'
 import type CacheMap from '../utils/CacheMap'
-import { computed, type ComputedRef, type Ref } from 'vue'
+import { computed } from 'vue'
 
 export function useGetSize<T>(
   mergedData: Ref<T[]>,
   getKey: GetKey<T>,
   heights: CacheMap,
-  itemHeight: number,
+  itemHeight: Ref<number>,
 ): ComputedRef<(startKey: any, endKey?: any) => { top: number, bottom: number }> {
   return computed(() => {
     return (startKey: any, endKey?: any) => {
@@ -25,14 +26,14 @@ export function useGetSize<T>(
       for (let i = 0; i < topIndex; i += 1) {
         const key = getKey(mergedData.value[i])
         const cacheHeight = heights.get(key)
-        top += cacheHeight === undefined ? itemHeight : cacheHeight
+        top += cacheHeight === undefined ? itemHeight.value : cacheHeight
       }
 
       let bottom = 0
       for (let i = mergedData.value.length - 1; i > bottomIndex; i -= 1) {
         const key = getKey(mergedData.value[i])
         const cacheHeight = heights.get(key)
-        bottom += cacheHeight === undefined ? itemHeight : cacheHeight
+        bottom += cacheHeight === undefined ? itemHeight.value : cacheHeight
       }
 
       return {

package/src/hooks/useHeights.ts

@@ -1,6 +1,7 @@
 import type { Key } from '@v-c/util/dist/type'
+import type { Ref } from 'vue'
 import type { GetKey } from '../interface'
-import { onUnmounted, ref, type Ref } from 'vue'
+import { onUnmounted, reactive, ref } from 'vue'
 import CacheMap from '../utils/CacheMap'
 
 function parseNumber(value: string) {
@@ -17,10 +18,10 @@ export default function useHeights<T>(
   collectHeight: (sync?: boolean) => void,
   cacheMap: CacheMap,
   updatedMark: Ref<number>,
-  ] {
+] {
   const updatedMark = ref(0)
   const instanceRef = ref(new Map<Key, HTMLElement>())
-  const heightsRef = ref(new CacheMap())
+  const heightsRef = reactive(new CacheMap())
 
   const promiseIdRef = ref<number>(0)
 
@@ -43,8 +44,8 @@ export default function useHeights<T>(
           const marginBottomNum = parseNumber(marginBottom)
           const totalHeight = offsetHeight + marginTopNum + marginBottomNum
 
-          if (heightsRef.value.get(key) !== totalHeight) {
-            heightsRef.value.set(key, totalHeight)
+          if (heightsRef.get(key) !== totalHeight) {
+            heightsRef.set(key, totalHeight)
             changed = true
           }
         }
@@ -102,5 +103,5 @@ export default function useHeights<T>(
     cancelRaf()
   })
 
-  return [setInstanceRef, collectHeight, heightsRef.value, updatedMark]
+  return [setInstanceRef, collectHeight, heightsRef, updatedMark]
 }

package/src/hooks/useMobileTouchMove.ts

@@ -1,4 +1,5 @@
-import { onUnmounted, ref, type Ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 
 const SMOOTH_PTG = 14 / 15
 

package/src/hooks/useOriginScroll.ts

@@ -1,4 +1,5 @@
-import { ref, type Ref } from 'vue'
+import type { Ref } from 'vue'
+import { ref } from 'vue'
 
 export default function useOriginScroll(
   isScrollAtTop: Ref<boolean>,

package/src/hooks/useScrollDrag.ts

@@ -1,4 +1,5 @@
-import { onUnmounted, type Ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { onUnmounted, watch } from 'vue'
 
 function smoothScrollOffset(offset: number) {
   return Math.floor(offset ** 0.5)

package/src/hooks/useScrollTo.tsx

@@ -0,0 +1,184 @@
+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 +1,5 @@
 import List from './List'
 
-export type { ListProps, ListRef, ScrollConfig, ScrollInfo } from './List'
+export type { ListProps, ListRef, ScrollConfig, ScrollInfo, ScrollTo } from './List'
 
 export default List

package/tsconfig.json

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

package/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineProject, mergeConfig } from 'vitest/config'
-import configShared from '../../vitest.config.ts'
+import configShared from '../../vitest.config'
 
 export default mergeConfig(
   configShared,