@antsoo-lib/components 0.1.11 → 0.1.13

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

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

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

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

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

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

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

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

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

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