rfc: useSwipe

[SnowingFox]

介绍

一个检测手势的hook

用法

const App =  () => {
  const swipeElRef = useRef()
  const { isSwipeSuccess } = useSwipe(swipeElRef, { direction: 'left' })

  useEffect(() => {
    if (isSwipeSuccess) {
        fetchNextDayData()
    }
  }, [isSwipeSuccess])

  return <div ref={swipeElRef}>
     <Component />
  <div/>
}

类型定义

export type UseSwipeDirection = 'up' | 'down' | 'left' | 'right'

export interface UseSwipeOptions {
  /**
   * 检测滑动的方向
   * 如果不传direction的话就是默认用户自己实现swipe的direction
   * 如果传了direction我们hook内部就自动帮用户检测
   */
  direction?: UseSwipeDirection

  /**
   * Register events as passive
   *
   * @default true
   */
  passive?: boolean

  /**
   * @default 50
   */
  threshold?: number

  /**
   * Callback on swipe start
   */
  onSwipeStart?: (e: TouchEvent) => void

  /**
   * Callback on swipe moves
   */
  onSwipe?: (e: TouchEvent) => void

  /**
   * Callback on swipe ends
   */
  onSwipeEnd?: (e: TouchEvent, direction: UseSwipeDirection) => void
}

export interface UseSwipeReturn {
  /**
   * 是否在滑动
   */
  isSwiping: boolean
  
  /**
   * 停止检测滑动
   */
  stop: () => void

  /**
   * 滑动的 x 轴距离
   */
  lengthX: number

  /**
   * 滑动的 y 轴距离
   */
  lengthY: number

  /**
   * 滑动是否符合预期direction，boolean值在options.direction有的时候再返回，否则是null
   */
  isSwipeSuccess: boolean | null
}


function useSwipe(elRef: Ref<HTMLElement>, options: UseSwipeOptions = {}): UseSwipeReturn {}