feat: support touch horizontal scroll (#271)

* feat: support touch horizontal scroll

* update

Author: linxianxi

src/List.tsx

@@ -309,8 +309,15 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   const isScrollAtTop = offsetTop <= 0;
   const isScrollAtBottom = offsetTop >= maxScrollHeight;
+  const isScrollAtLeft = offsetLeft <= 0;
+  const isScrollAtRight = offsetLeft >= scrollWidth;
 
-  const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+  const originScroll = useOriginScroll(
+    isScrollAtTop,
+    isScrollAtBottom,
+    isScrollAtLeft,
+    isScrollAtRight,
+  );
 
   // ================================ Scroll ================================
   const getVirtualScrollInfo = () => ({
@@ -370,7 +377,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     return tmpOffsetLeft;
   };
 
-  const onWheelDelta: Parameters<typeof useFrameWheel>[4] = useEvent((offsetXY, fromHorizontal) => {
+  const onWheelDelta: Parameters<typeof useFrameWheel>[6] = useEvent((offsetXY, fromHorizontal) => {
     if (fromHorizontal) {
       // Horizontal scroll no need sync virtual position
 
@@ -396,17 +403,23 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     useVirtual,
     isScrollAtTop,
     isScrollAtBottom,
+    isScrollAtLeft,
+    isScrollAtRight,
     !!scrollWidth,
     onWheelDelta,
   );
 
   // Mobile touch move
-  useMobileTouchMove(useVirtual, componentRef, (deltaY, smoothOffset) => {
-    if (originScroll(deltaY, smoothOffset)) {
+  useMobileTouchMove(useVirtual, componentRef, (isHorizontal, delta, smoothOffset) => {
+    if (originScroll(isHorizontal, delta, smoothOffset)) {
       return false;
     }
 
-    onRawWheel({ preventDefault() {}, deltaY } as WheelEvent);
+    onRawWheel({
+      preventDefault() {},
+      deltaX: isHorizontal ? delta : 0,
+      deltaY: isHorizontal ? 0 : delta,
+    } as WheelEvent);
     return true;
   });
 

src/hooks/useFrameWheel.ts

@@ -1,5 +1,5 @@
-import { useRef } from 'react';
 import raf from 'rc-util/lib/raf';
+import { useRef } from 'react';
 import isFF from '../utils/isFirefox';
 import useOriginScroll from './useOriginScroll';
 
@@ -12,6 +12,8 @@ export default function useFrameWheel(
   inVirtual: boolean,
   isScrollAtTop: boolean,
   isScrollAtBottom: boolean,
+  isScrollAtLeft: boolean,
+  isScrollAtRight: boolean,
   horizontalScroll: boolean,
   /***
    * Return `true` when you need to prevent default event
@@ -26,7 +28,12 @@ export default function useFrameWheel(
   const isMouseScrollRef = useRef<boolean>(false);
 
   // Scroll status sync
-  const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
+  const originScroll = useOriginScroll(
+    isScrollAtTop,
+    isScrollAtBottom,
+    isScrollAtLeft,
+    isScrollAtRight,
+  );
 
   function onWheelY(event: WheelEvent, deltaY: number) {
     raf.cancel(nextFrameRef.current);
@@ -35,7 +42,7 @@ export default function useFrameWheel(
     wheelValueRef.current = deltaY;
 
     // Do nothing when scroll at the edge, Skip check when is in scroll
-    if (originScroll(deltaY)) return;
+    if (originScroll(false, deltaY)) return;
 
     // Proxy of scroll events
     if (!isFF) {

src/hooks/useMobileTouchMove.ts

@@ -1,15 +1,16 @@
-import * as React from 'react';
-import { useRef } from 'react';
 import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect';
+import type * as React from 'react';
+import { useRef } from 'react';
 
 const SMOOTH_PTG = 14 / 15;
 
 export default function useMobileTouchMove(
   inVirtual: boolean,
   listRef: React.RefObject<HTMLDivElement>,
-  callback: (offsetY: number, smoothOffset?: boolean) => boolean,
+  callback: (isHorizontal: boolean, offset: number, smoothOffset?: boolean) => boolean,
 ) {
   const touchedRef = useRef(false);
+  const touchXRef = useRef(0);
   const touchYRef = useRef(0);
 
   const elementRef = useRef<HTMLElement>(null);
@@ -22,20 +23,30 @@ export default function useMobileTouchMove(
 
   const onTouchMove = (e: TouchEvent) => {
     if (touchedRef.current) {
+      const currentX = Math.ceil(e.touches[0].pageX);
       const currentY = Math.ceil(e.touches[0].pageY);
+      let offsetX = touchXRef.current - currentX;
       let offsetY = touchYRef.current - currentY;
-      touchYRef.current = currentY;
+      const isHorizontal = Math.abs(offsetX) > Math.abs(offsetY);
+      if (isHorizontal) {
+        touchXRef.current = currentX;
+      } else {
+        touchYRef.current = currentY;
+      }
 
-      if (callback(offsetY)) {
+      if (callback(isHorizontal, isHorizontal ? offsetX : offsetY)) {
         e.preventDefault();
       }
-
       // Smooth interval
       clearInterval(intervalRef.current);
       intervalRef.current = setInterval(() => {
-        offsetY *= SMOOTH_PTG;
-
-        if (!callback(offsetY, true) || Math.abs(offsetY) <= 0.1) {
+        if (isHorizontal) {
+          offsetX *= SMOOTH_PTG;
+        } else {
+          offsetY *= SMOOTH_PTG;
+        }
+        const offset = isHorizontal ? offsetX : offsetY;
+        if (!callback(isHorizontal, offset, true) || Math.abs(offset) <= 0.1) {
           clearInterval(intervalRef.current);
         }
       }, 16);
@@ -53,6 +64,7 @@ export default function useMobileTouchMove(
 
     if (e.touches.length === 1 && !touchedRef.current) {
       touchedRef.current = true;
+      touchXRef.current = Math.ceil(e.touches[0].pageX);
       touchYRef.current = Math.ceil(e.touches[0].pageY);
 
       elementRef.current = e.target as HTMLElement;

src/hooks/useOriginScroll.ts

@@ -1,6 +1,11 @@
 import { useRef } from 'react';
 
-export default (isScrollAtTop: boolean, isScrollAtBottom: boolean) => {
+export default (
+  isScrollAtTop: boolean,
+  isScrollAtBottom: boolean,
+  isScrollAtLeft: boolean,
+  isScrollAtRight: boolean,
+) => {
   // Do lock for a wheel when scrolling
   const lockRef = useRef(false);
   const lockTimeoutRef = useRef(null);
@@ -18,16 +23,23 @@ export default (isScrollAtTop: boolean, isScrollAtBottom: boolean) => {
   const scrollPingRef = useRef({
     top: isScrollAtTop,
     bottom: isScrollAtBottom,
+    left: isScrollAtLeft,
+    right: isScrollAtRight,
   });
   scrollPingRef.current.top = isScrollAtTop;
   scrollPingRef.current.bottom = isScrollAtBottom;
+  scrollPingRef.current.left = isScrollAtLeft;
+  scrollPingRef.current.right = isScrollAtRight;
 
-  return (deltaY: number, smoothOffset = false) => {
-    const originScroll =
-      // Pass origin wheel when on the top
-      (deltaY < 0 && scrollPingRef.current.top) ||
-      // Pass origin wheel when on the bottom
-      (deltaY > 0 && scrollPingRef.current.bottom);
+  return (isHorizontal: boolean, delta: number, smoothOffset = false) => {
+    const originScroll = isHorizontal
+      ? // Pass origin wheel when on the left
+        (delta < 0 && scrollPingRef.current.left) ||
+        // Pass origin wheel when on the right
+        (delta > 0 && scrollPingRef.current.right) // Pass origin wheel when on the top
+      : (delta < 0 && scrollPingRef.current.top) ||
+        // Pass origin wheel when on the bottom
+        (delta > 0 && scrollPingRef.current.bottom);
 
     if (smoothOffset && originScroll) {
       // No need lock anymore when it's smooth offset from touchMove interval

tests/scrollWidth.test.tsx

@@ -273,4 +273,33 @@ describe('List.scrollWidth', () => {
       marginLeft: '-800px',
     });
   });
+
+  it('touch horizontal', async () => {
+    const { container } = await genList({
+      itemHeight: ITEM_HEIGHT,
+      height: 100,
+      data: genData(100),
+      scrollWidth: 1000,
+    });
+
+    fireEvent.touchStart(container.querySelector('.rc-virtual-list-holder')!, {
+      touches: [{ pageX: 100, pageY: 0 }],
+    });
+
+    fireEvent.touchMove(container.querySelector('.rc-virtual-list-holder')!, {
+      touches: [{ pageX: 0, pageY: 0 }],
+    });
+
+    fireEvent.touchEnd(container.querySelector('.rc-virtual-list-holder')!, {
+      touches: [{ pageX: 0, pageY: 0 }],
+    });
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(container.querySelector('.rc-virtual-list-holder-inner')).toHaveStyle({
+      marginLeft: '-900px',
+    });
+  });
 });