@antsoo-lib/components 0.1.2 → 0.1.4

package/src/vc-virtual-list/ScrollBar.tsx

@@ -0,0 +1,266 @@
+import { defineComponent, reactive } from 'vue'
+import type { PropType } from 'vue'
+
+import classNames from '../_util/classNames'
+import createRef from '../_util/createRef'
+import raf from '../_util/raf'
+import supportsPassive from '../_util/supportsPassive'
+
+const MIN_SIZE = 20
+
+interface ScrollBarState {
+  dragging: boolean
+  pageY: number | null
+  startTop: number | null
+  visible: boolean
+}
+
+function getPageY(e: MouseEvent | TouchEvent) {
+  return 'touches' in e ? e.touches[0].pageY : e.pageY
+}
+
+export default defineComponent({
+  compatConfig: { MODE: 3 },
+  name: 'ScrollBar',
+  inheritAttrs: false,
+  props: {
+    prefixCls: String,
+    scrollTop: Number,
+    scrollHeight: Number,
+    height: Number,
+    count: Number,
+    onScroll: {
+      type: Function as PropType<(scrollTop: number) => void>,
+    },
+    onStartMove: {
+      type: Function as PropType<() => void>,
+    },
+    onStopMove: {
+      type: Function as PropType<() => void>,
+    },
+  },
+  setup() {
+    return {
+      moveRaf: null,
+      scrollbarRef: createRef(),
+      thumbRef: createRef(),
+      visibleTimeout: null,
+      state: reactive<ScrollBarState>({
+        dragging: false,
+        pageY: null,
+        startTop: null,
+        visible: false,
+      }),
+    }
+  },
+  watch: {
+    scrollTop: {
+      handler() {
+        this.delayHidden()
+      },
+      flush: 'post',
+    },
+  },
+
+  mounted() {
+    this.scrollbarRef.current?.addEventListener(
+      'touchstart',
+      this.onScrollbarTouchStart,
+      supportsPassive ? ({ passive: false } as EventListenerOptions) : false,
+    )
+    this.thumbRef.current?.addEventListener(
+      'touchstart',
+      this.onMouseDown,
+      supportsPassive ? ({ passive: false } as EventListenerOptions) : false,
+    )
+  },
+
+  beforeUnmount() {
+    this.removeEvents()
+    clearTimeout(this.visibleTimeout)
+  },
+  methods: {
+    delayHidden() {
+      clearTimeout(this.visibleTimeout)
+      this.state.visible = true
+
+      this.visibleTimeout = setTimeout(() => {
+        this.state.visible = false
+      }, 2000)
+    },
+
+    onScrollbarTouchStart(e: TouchEvent) {
+      e.preventDefault()
+    },
+
+    onContainerMouseDown(e: MouseEvent) {
+      e.stopPropagation()
+      e.preventDefault()
+    },
+
+    // ======================= Clean =======================
+    patchEvents() {
+      window.addEventListener('mousemove', this.onMouseMove)
+      window.addEventListener('mouseup', this.onMouseUp)
+
+      this.thumbRef.current.addEventListener(
+        'touchmove',
+        this.onMouseMove,
+        supportsPassive ? ({ passive: false } as EventListenerOptions) : false,
+      )
+      this.thumbRef.current.addEventListener('touchend', this.onMouseUp)
+    },
+
+    removeEvents() {
+      window.removeEventListener('mousemove', this.onMouseMove)
+      window.removeEventListener('mouseup', this.onMouseUp)
+
+      this.scrollbarRef.current.removeEventListener(
+        'touchstart',
+        this.onScrollbarTouchStart,
+        supportsPassive ? ({ passive: false } as EventListenerOptions) : false,
+      )
+      if (this.thumbRef.current) {
+        this.thumbRef.current.removeEventListener(
+          'touchstart',
+          this.onMouseDown,
+          supportsPassive ? ({ passive: false } as EventListenerOptions) : false,
+        )
+        this.thumbRef.current.removeEventListener(
+          'touchmove',
+          this.onMouseMove,
+          supportsPassive ? ({ passive: false } as EventListenerOptions) : false,
+        )
+        this.thumbRef.current.removeEventListener('touchend', this.onMouseUp)
+      }
+      raf.cancel(this.moveRaf)
+    },
+
+    // ======================= Thumb =======================
+    onMouseDown(e: MouseEvent | TouchEvent) {
+      const { onStartMove } = this.$props
+
+      Object.assign(this.state, {
+        dragging: true,
+        pageY: getPageY(e),
+        startTop: this.getTop(),
+      })
+
+      onStartMove()
+      this.patchEvents()
+      e.stopPropagation()
+      e.preventDefault()
+    },
+
+    onMouseMove(e: MouseEvent | TouchEvent) {
+      const { dragging, pageY, startTop } = this.state
+      const { onScroll } = this.$props
+
+      raf.cancel(this.moveRaf)
+
+      if (dragging) {
+        const offsetY = getPageY(e) - pageY
+        const newTop = startTop + offsetY
+
+        const enableScrollRange = this.getEnableScrollRange()
+        const enableHeightRange = this.getEnableHeightRange()
+
+        const ptg = enableHeightRange ? newTop / enableHeightRange : 0
+        const newScrollTop = Math.ceil(ptg * enableScrollRange)
+        this.moveRaf = raf(() => {
+          onScroll(newScrollTop)
+        })
+      }
+    },
+
+    onMouseUp() {
+      const { onStopMove } = this.$props
+      this.state.dragging = false
+
+      onStopMove()
+      this.removeEvents()
+    },
+
+    // ===================== Calculate =====================
+    getSpinHeight() {
+      const { height, scrollHeight } = this.$props
+      let baseHeight = (height / scrollHeight) * 100
+      baseHeight = Math.max(baseHeight, MIN_SIZE)
+      baseHeight = Math.min(baseHeight, height / 2)
+      return Math.floor(baseHeight)
+    },
+
+    getEnableScrollRange() {
+      const { scrollHeight, height } = this.$props
+      return scrollHeight - height || 0
+    },
+
+    getEnableHeightRange() {
+      const { height } = this.$props
+      const spinHeight = this.getSpinHeight()
+      return height - spinHeight || 0
+    },
+
+    getTop() {
+      const { scrollTop } = this.$props
+      const enableScrollRange = this.getEnableScrollRange()
+      const enableHeightRange = this.getEnableHeightRange()
+      if (scrollTop === 0 || enableScrollRange === 0) {
+        return 0
+      }
+      const ptg = scrollTop / enableScrollRange
+      return ptg * enableHeightRange
+    },
+    // Not show scrollbar when height is large than scrollHeight
+    showScroll() {
+      const { height, scrollHeight } = this.$props
+      return scrollHeight > height
+    },
+  },
+
+  render() {
+    const { dragging, visible } = this.state
+    const { prefixCls } = this.$props
+    const spinHeight = `${this.getSpinHeight()}px`
+    const top = `${this.getTop()}px`
+    const canScroll = this.showScroll()
+    const mergedVisible = canScroll && visible
+    return (
+      <div
+        ref={this.scrollbarRef}
+        class={classNames(`${prefixCls}-scrollbar`, {
+          [`${prefixCls}-scrollbar-show`]: canScroll,
+        })}
+        style={{
+          width: '8px',
+          top: 0,
+          bottom: 0,
+          right: 0,
+          position: 'absolute',
+          display: mergedVisible ? undefined : 'none',
+        }}
+        onMousedown={this.onContainerMouseDown}
+        onMousemove={this.delayHidden}
+      >
+        <div
+          ref={this.thumbRef}
+          class={classNames(`${prefixCls}-scrollbar-thumb`, {
+            [`${prefixCls}-scrollbar-thumb-moving`]: dragging,
+          })}
+          style={{
+            width: '100%',
+            height: spinHeight,
+            top,
+            left: 0,
+            position: 'absolute',
+            background: 'rgba(0, 0, 0, 0.5)',
+            borderRadius: '99px',
+            cursor: 'pointer',
+            userSelect: 'none',
+          }}
+          onMousedown={this.onMouseDown}
+        />
+      </div>
+    )
+  },
+})

package/src/vc-virtual-list/hooks/useFrameWheel.ts

@@ -0,0 +1,62 @@
+import type { Ref } from 'vue'
+
+import raf from '../../_util/raf'
+import isFF from '../utils/isFirefox'
+import useOriginScroll from './useOriginScroll'
+
+interface FireFoxDOMMouseScrollEvent {
+  detail: number
+  preventDefault: Function
+}
+
+export default function useFrameWheel(
+  inVirtual: Ref<boolean>,
+  isScrollAtTop: Ref<boolean>,
+  isScrollAtBottom: Ref<boolean>,
+  onWheelDelta: (offset: number) => void,
+): [(e: WheelEvent) => void, (e: FireFoxDOMMouseScrollEvent) => void] {
+  let offsetRef = 0
+  let nextFrame: number = null
+
+  // Firefox patch
+  let wheelValue = null
+  let isMouseScroll = false
+
+  // Scroll status sync
+  const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom)
+
+  function onWheel(event: { preventDefault?: any; deltaY?: any }) {
+    if (!inVirtual.value) return
+
+    raf.cancel(nextFrame!)
+
+    const { deltaY } = event
+    offsetRef += deltaY
+    wheelValue = deltaY
+
+    // Do nothing when scroll at the edge, Skip check when is in scroll
+    if (originScroll(deltaY)) return
+
+    // Proxy of scroll events
+    if (!isFF) {
+      event.preventDefault()
+    }
+
+    nextFrame = raf(() => {
+      // Patch a multiple for Firefox to fix wheel number too small
+      // ref: https://github.com/ant-design/ant-design/issues/26372#issuecomment-679460266
+      const patchMultiple = isMouseScroll ? 10 : 1
+      onWheelDelta(offsetRef * patchMultiple)
+      offsetRef = 0
+    })
+  }
+
+  // A patch for firefox
+  function onFireFoxScroll(event: { detail: any }) {
+    if (!inVirtual.value) return
+
+    isMouseScroll = event.detail === wheelValue
+  }
+
+  return [onWheel, onFireFoxScroll]
+}

package/src/vc-virtual-list/hooks/useHeights.tsx

@@ -0,0 +1,67 @@
+import type { Ref, ShallowRef, VNodeProps } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
+
+import wrapperRaf from '../../_util/raf'
+import type { GetKey } from '../interface'
+
+export type CacheMap = Map<any, number>
+
+export default function useHeights<T>(
+  mergedData: ShallowRef<any[]>,
+  getKey: GetKey<T>,
+  onItemAdd?: ((item: T) => void) | null,
+  onItemRemove?: ((item: T) => void) | null,
+): [(item: T, instance: HTMLElement) => void, () => void, CacheMap, Ref<symbol>] {
+  const instance = new Map<VNodeProps['key'], HTMLElement>()
+  const heights = new Map()
+  const updatedMark = ref(Symbol('update'))
+  watch(mergedData, () => {
+    updatedMark.value = Symbol('update')
+  })
+  let collectRaf: number
+
+  function cancelRaf() {
+    wrapperRaf.cancel(collectRaf)
+  }
+  function collectHeight() {
+    cancelRaf()
+    collectRaf = wrapperRaf(() => {
+      instance.forEach((element, key) => {
+        if (element && element.offsetParent) {
+          const { offsetHeight } = element
+          if (heights.get(key) !== offsetHeight) {
+            //changed = true;
+            updatedMark.value = Symbol('update')
+            heights.set(key, element.offsetHeight)
+          }
+        }
+      })
+    })
+  }
+
+  function setInstance(item: T, ins: HTMLElement) {
+    const key = getKey(item)
+    const origin = instance.get(key)
+
+    if (ins) {
+      instance.set(key, (ins as any).$el || ins)
+      collectHeight()
+    } else {
+      instance.delete(key)
+    }
+
+    // Instance changed
+    if (!origin !== !ins) {
+      if (ins) {
+        onItemAdd?.(item)
+      } else {
+        onItemRemove?.(item)
+      }
+    }
+  }
+  onUnmounted(() => {
+    cancelRaf()
+  })
+
+  return [setInstance, collectHeight, heights, updatedMark]
+}

package/src/vc-virtual-list/hooks/useMobileTouchMove.ts

@@ -0,0 +1,85 @@
+import type { Ref } from 'vue'
+import { onBeforeUnmount, onMounted, watch } from 'vue'
+
+const SMOOTH_PTG = 14 / 15
+export default function useMobileTouchMove(
+  inVirtual: Ref<boolean>,
+  listRef: Ref<HTMLDivElement | undefined>,
+  callback: (offsetY: number, smoothOffset?: boolean) => boolean,
+) {
+  let touched = false
+  let touchY = 0
+
+  let element: HTMLElement | null = null
+
+  // Smooth scroll
+  let interval: any = null
+
+  const cleanUpEvents = () => {
+    if (element) {
+      element.removeEventListener('touchmove', onTouchMove)
+      element.removeEventListener('touchend', onTouchEnd)
+    }
+  }
+
+  const onTouchMove = (e: TouchEvent) => {
+    if (touched) {
+      const currentY = Math.ceil(e.touches[0].pageY)
+      let offsetY = touchY - currentY
+      touchY = currentY
+
+      if (callback(offsetY)) {
+        e.preventDefault()
+      }
+
+      // Smooth interval
+      clearInterval(interval)
+      interval = setInterval(() => {
+        offsetY *= SMOOTH_PTG
+
+        if (!callback(offsetY, true) || Math.abs(offsetY) <= 0.1) {
+          clearInterval(interval)
+        }
+      }, 16)
+    }
+  }
+
+  const onTouchEnd = () => {
+    touched = false
+
+    cleanUpEvents()
+  }
+
+  const onTouchStart = (e: TouchEvent) => {
+    cleanUpEvents()
+
+    if (e.touches.length === 1 && !touched) {
+      touched = true
+      touchY = Math.ceil(e.touches[0].pageY)
+
+      element = e.target as HTMLElement
+      element!.addEventListener('touchmove', onTouchMove, { passive: false })
+      element!.addEventListener('touchend', onTouchEnd)
+    }
+  }
+  const noop = () => {}
+
+  onMounted(() => {
+    document.addEventListener('touchmove', noop, { passive: false })
+    watch(
+      inVirtual,
+      (val) => {
+        listRef.value.removeEventListener('touchstart', onTouchStart)
+        cleanUpEvents()
+        clearInterval(interval)
+        if (val) {
+          listRef.value.addEventListener('touchstart', onTouchStart, { passive: false })
+        }
+      },
+      { immediate: true },
+    )
+  })
+  onBeforeUnmount(() => {
+    document.removeEventListener('touchmove', noop)
+  })
+}

package/src/vc-virtual-list/hooks/useOriginScroll.ts

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

package/src/vc-virtual-list/hooks/useScrollTo.tsx

@@ -0,0 +1,113 @@
+import type { Ref, ShallowRef } from 'vue'
+
+import raf from '../../_util/raf'
+import type { GetKey } from '../interface'
+import type { CacheMap } from './useHeights'
+
+export default function useScrollTo(
+  containerRef: Ref<Element | undefined>,
+  mergedData: ShallowRef<any[]>,
+  heights: CacheMap,
+  props,
+  getKey: GetKey,
+  collectHeight: () => void,
+  syncScrollTop: (newTop: number) => void,
+  triggerFlash: () => void,
+) {
+  let scroll: number
+
+  return (arg?: any) => {
+    // When not argument provided, we think dev may want to show the scrollbar
+    if (arg === null || arg === undefined) {
+      triggerFlash()
+      return
+    }
+
+    // Normal scroll logic
+    raf.cancel(scroll!)
+    const data = mergedData.value
+    const itemHeight = props.itemHeight
+    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.findIndex((item: object) => getKey(item) === arg.key)
+      }
+
+      const { offset = 0 } = arg
+
+      // We will retry 3 times in case dynamic height shaking
+      const syncScroll = (times: number, targetAlign?: 'top' | 'bottom') => {
+        if (times < 0 || !containerRef.value) return
+
+        const height = containerRef.value.clientHeight
+        let needCollectHeight = false
+        let newTargetAlign = targetAlign
+
+        // Go to next frame if height not exist
+        if (height) {
+          const mergedAlign = targetAlign || align
+
+          // Get top & bottom
+          let stackTop = 0
+          let itemTop = 0
+          let itemBottom = 0
+
+          const maxLen = Math.min(data.length, index)
+          for (let i = 0; i <= maxLen; i += 1) {
+            const key = getKey(data[i])
+            itemTop = stackTop
+            const cacheHeight = heights.get(key)
+            itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight)
+
+            stackTop = itemBottom
+
+            if (i === index && cacheHeight === undefined) {
+              needCollectHeight = true
+            }
+          }
+          const scrollTop = containerRef.value.scrollTop
+          // Scroll to
+          let targetTop: number | null = null
+
+          switch (mergedAlign) {
+            case 'top':
+              targetTop = itemTop - offset
+              break
+            case 'bottom':
+              targetTop = itemBottom - height + offset
+              break
+
+            default: {
+              const scrollBottom = scrollTop + height
+              if (itemTop < scrollTop) {
+                newTargetAlign = 'top'
+              } else if (itemBottom > scrollBottom) {
+                newTargetAlign = 'bottom'
+              }
+            }
+          }
+
+          if (targetTop !== null && targetTop !== scrollTop) {
+            syncScrollTop(targetTop)
+          }
+        }
+
+        // We will retry since element may not sync height as it described
+        scroll = raf(() => {
+          if (needCollectHeight) {
+            collectHeight()
+          }
+          syncScroll(times - 1, newTargetAlign)
+        }, 2)
+      }
+
+      syncScroll(5)
+    }
+  }
+}

package/src/vc-virtual-list/index.ts

@@ -0,0 +1,4 @@
+// base rc-virtual-list 3.4.13
+import List from './List'
+
+export default List

package/src/vc-virtual-list/interface.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties, VNodeTypes } from 'vue'
+
+import type { Key } from '../_util/type'
+
+export type RenderFunc<T> = (item: T, index: number, props: { style?: CSSProperties }) => VNodeTypes
+
+export interface SharedConfig<T> {
+  getKey: (item: T) => Key
+}
+
+export type GetKey<T = object> = (item: T) => Key