fix(FloatingPanel): fix stuck during indetermine direction (#631)

* fix(FloatingPanel): unexpected stuck at  horizontal

* revert: unexpected stuck at horizontal

* fix: ignore if direction is indetermine

* chore: use scroll utils for compatiable

* feat(useTouch): use nullable firstMove

* fix: remove direction check

* fix: useTouch firstMove

* feat: use EL contains to force dragging

* feat: use non-passive listener
* style: improve code reading

Author: luo3house

packages/react-vant/src/components/floating-panel/FloatingPanel.tsx

@@ -1,6 +1,11 @@
 import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'
 import clsx from 'clsx'
-import { createNamespace, preventDefault } from '../utils'
+import {
+  createNamespace,
+  getScrollTop,
+  getVisibleHeight,
+  preventDefault,
+} from '../utils'
 import useEventListener from '../hooks/use-event-listener'
 import { useTouch } from '../hooks'
 import { FloatingPanelInstance, FloatingPanelProps } from './PropsType'
@@ -9,6 +14,12 @@ import { bound } from '../utils/bound'
 
 const [bem] = createNamespace('floating-panel')
 
+/** Check if EL is scrolling reach its bottom */
+function scrollReachBottom(el: Element) {
+  const scrollTop = getScrollTop(el)
+  return scrollTop >= el.scrollHeight - getVisibleHeight(el)
+}
+
 const FloatingPanel = forwardRef<FloatingPanelInstance, FloatingPanelProps>(
   (props, ref) => {
     const { className, style, onHeightChange, anchors = [100] } = props
@@ -44,24 +55,22 @@ const FloatingPanel = forwardRef<FloatingPanelInstance, FloatingPanelProps>(
     }
 
     const onTouchMove: EventListener = event => {
-      if (!body.current || !header.current) return
+      const [headerEL, bodyEL] = [header.current, body.current]
       touch.move(event)
-      if (touch.firstMove.current && touch.isVertical()) {
-        const bodyEL = body.current
+      if (visibleH.goal >= maxAnchor && bodyEL) {
         if (
-          // attempt scroll at max anchor
-          (touch.deltaY.current < 0 &&
-            visibleH.goal >= maxAnchor &&
-            bodyEL.offsetHeight < bodyEL.scrollHeight &&
-            !(bodyEL.scrollTop + bodyEL.offsetHeight >= bodyEL.scrollHeight)) ||
-          // attempt scroll back to top at max anchor
-          (touch.deltaY.current > 0 && bodyEL.scrollTop > 0)
+          touch.firstMove.current &&
+          // try going up to body top
+          ((touch.deltaY.current > 0 && getScrollTop(bodyEL) > 0) ||
+            // try going down to body bottom
+            (touch.deltaY.current < 0 && !scrollReachBottom(bodyEL)))
         ) {
           dragging.current = false
-          return
         }
       }
-      if (event.target === header.current) dragging.current = true
+      if (headerEL && headerEL.contains(event.target as Element)) {
+        dragging.current = true
+      }
       if (!dragging.current) return
       preventDefault(event, true)
       api.start({
@@ -87,9 +96,12 @@ const FloatingPanel = forwardRef<FloatingPanelInstance, FloatingPanelProps>(
       }
     }
 
-    useEventListener('touchstart', onTouchStart, { target: root })
-    useEventListener('touchmove', onTouchMove, { target: root })
-    useEventListener('touchend', onTouchEnd, { target: root })
+    useEventListener('touchstart', onTouchStart, {
+      target: root,
+      passive: false,
+    })
+    useEventListener('touchmove', onTouchMove, { target: root, passive: false })
+    useEventListener('touchend', onTouchEnd, { target: root, passive: false })
 
     return (
       <animated.div

packages/react-vant/src/components/hooks/use-touch.ts

@@ -22,7 +22,7 @@ export default function useTouch() {
   const offsetX = useRef(0)
   const offsetY = useRef(0)
   const direction = useRef<Direction>('')
-  const firstMove = useRef(false)
+  const firstMove = useRef<boolean>(null)
 
   const isVertical = () => direction.current === 'vertical'
   const isHorizontal = () => direction.current === 'horizontal'
@@ -33,7 +33,7 @@ export default function useTouch() {
     offsetX.current = 0
     offsetY.current = 0
     direction.current = ''
-    firstMove.current = false
+    firstMove.current = null
   }
 
   const start = ((event: TouchEvent) => {
@@ -49,7 +49,11 @@ export default function useTouch() {
     deltaY.current = touch.clientY - startY.current
     offsetX.current = Math.abs(deltaX.current)
     offsetY.current = Math.abs(deltaY.current)
-    firstMove.current = !direction.current
+    if (firstMove.current === null) {
+      firstMove.current = true
+    } else {
+      firstMove.current = false
+    }
 
     if (!direction.current) {
       direction.current = getDirection(offsetX.current, offsetY.current)