fix: Touch event should work on list (#52)

* fix: Scroll

* smooth it

* touch move scroll bar

* coverage

Author: zombieJ

src/List.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import Filler from './Filler';
 import ScrollBar from './ScrollBar';
@@ -10,6 +10,7 @@ import useInRange from './hooks/useInRange';
 import useScrollTo from './hooks/useScrollTo';
 import useDiffItem from './hooks/useDiffItem';
 import useFrameWheel from './hooks/useFrameWheel';
+import useMobileTouchMove from './hooks/useMobileTouchMove';
 
 const EMPTY_DATA = [];
 
@@ -70,8 +71,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   const inVirtual =
     virtual !== false && height && itemHeight && data && itemHeight * data.length > height;
 
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const [scrollMoving, setScrollMoving] = React.useState(false);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [scrollMoving, setScrollMoving] = useState(false);
 
   const mergedClassName = classNames(prefixCls, className);
   const mergedData = data || EMPTY_DATA;
@@ -215,6 +216,11 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     });
   });
 
+  // Mobile touch move
+  useMobileTouchMove(componentRef, deltaY => {
+    onRawWheel({ preventDefault() {}, deltaY } as WheelEvent);
+  });
+
   React.useEffect(() => {
     componentRef.current.addEventListener('wheel', onRawWheel);
     componentRef.current.addEventListener('DOMMouseScroll', onFireFoxScroll as any);

src/ScrollBar.tsx

@@ -22,9 +22,17 @@ interface ScrollBarState {
   visible: boolean;
 }
 
+function getPageY(e: React.MouseEvent | MouseEvent | TouchEvent) {
+  return 'touches' in e ? e.touches[0].pageY : e.pageY;
+}
+
 export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBarState> {
   moveRaf: number = null;
 
+  scrollbarRef = React.createRef<HTMLDivElement>();
+
+  thumbRef = React.createRef<HTMLDivElement>();
+
   visibleTimeout: NodeJS.Timeout = null;
 
   state: ScrollBarState = {
@@ -34,6 +42,11 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     visible: false,
   };
 
+  componentDidMount() {
+    this.scrollbarRef.current.addEventListener('touchstart', this.onScrollbarTouchStart);
+    this.thumbRef.current.addEventListener('touchstart', this.onMouseDown);
+  }
+
   componentDidUpdate(prevProps: ScrollBarProps) {
     if (prevProps.scrollTop !== this.props.scrollTop) {
       this.delayHidden();
@@ -54,28 +67,43 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     }, 2000);
   };
 
+  onScrollbarTouchStart = (e: TouchEvent) => {
+    e.preventDefault();
+  };
+
+  onContainerMouseDown: React.MouseEventHandler = e => {
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  // ======================= Clean =======================
   patchEvents = () => {
     window.addEventListener('mousemove', this.onMouseMove);
     window.addEventListener('mouseup', this.onMouseUp);
+
+    this.thumbRef.current.addEventListener('touchmove', this.onMouseMove);
+    this.thumbRef.current.addEventListener('touchend', this.onMouseUp);
   };
 
   removeEvents = () => {
     window.removeEventListener('mousemove', this.onMouseMove);
     window.removeEventListener('mouseup', this.onMouseUp);
-    raf.cancel(this.moveRaf);
-  };
 
-  onContainerMouseDown: React.MouseEventHandler = e => {
-    e.stopPropagation();
-    e.preventDefault();
+    this.scrollbarRef.current.removeEventListener('touchstart', this.onScrollbarTouchStart);
+    this.thumbRef.current.removeEventListener('touchstart', this.onMouseDown);
+    this.thumbRef.current.removeEventListener('touchmove', this.onMouseMove);
+    this.thumbRef.current.removeEventListener('touchend', this.onMouseUp);
+
+    raf.cancel(this.moveRaf);
   };
 
-  onMouseDown: React.MouseEventHandler = e => {
+  // ======================= Thumb =======================
+  onMouseDown = (e: React.MouseEvent | TouchEvent) => {
     const { onStartMove } = this.props;
 
     this.setState({
       dragging: true,
-      pageY: e.pageY,
+      pageY: getPageY(e),
       startTop: this.getTop(),
     });
 
@@ -85,14 +113,14 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     e.preventDefault();
   };
 
-  onMouseMove = (e: MouseEvent) => {
+  onMouseMove = (e: MouseEvent | TouchEvent) => {
     const { dragging, pageY, startTop } = this.state;
     const { onScroll } = this.props;
 
     raf.cancel(this.moveRaf);
 
     if (dragging) {
-      const offsetY = e.pageY - pageY;
+      const offsetY = getPageY(e) - pageY;
       const newTop = startTop + offsetY;
 
       const enableScrollRange = this.getEnableScrollRange();
@@ -114,6 +142,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
     this.removeEvents();
   };
 
+  // ===================== Calculate =====================
   getSpinHeight = () => {
     const { height, count } = this.props;
     let baseHeight = (height / count) * 10;
@@ -149,6 +178,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
 
     return (
       <div
+        ref={this.scrollbarRef}
         className={`${prefixCls}-scrollbar`}
         style={{
           width: 8,
@@ -162,6 +192,7 @@ export default class ScrollBar extends React.Component<ScrollBarProps, ScrollBar
         onMouseMove={this.delayHidden}
       >
         <div
+          ref={this.thumbRef}
           className={classNames(`${prefixCls}-scrollbar-thumb`, {
             [`${prefixCls}-scrollbar-thumb-moving`]: dragging,
           })}

src/hooks/useMobileTouchMove.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { useRef } from 'react';
+
+const SMOOTH_PTG = 14 / 15;
+
+export default function useMobileTouchMove(
+  listRef: React.RefObject<HTMLDivElement>,
+  callback: (offsetY: number) => void,
+) {
+  const touchedRef = useRef(false);
+  const touchYRef = useRef(0);
+
+  const elementRef = useRef<HTMLElement>(null);
+
+  // Smooth scroll
+  const intervalRef = useRef(null);
+
+  let cleanUpEvents: () => void;
+
+  const onTouchMove = (e: TouchEvent) => {
+    if (touchedRef.current) {
+      const currentY = Math.ceil(e.touches[0].pageY);
+      let offsetY = touchYRef.current - currentY;
+      console.log('>>>', offsetY);
+      touchYRef.current = currentY;
+
+      callback(offsetY);
+
+      // Smooth interval
+      clearInterval(intervalRef.current);
+      intervalRef.current = setInterval(() => {
+        offsetY *= SMOOTH_PTG;
+        callback(offsetY);
+
+        if (Math.abs(offsetY) <= 0.1) {
+          clearInterval(intervalRef.current);
+        }
+      }, 16);
+    }
+  };
+
+  const onTouchEnd = () => {
+    touchedRef.current = false;
+
+    cleanUpEvents();
+  };
+
+  const onTouchStart = (e: TouchEvent) => {
+    cleanUpEvents();
+
+    if (e.touches.length === 1 && !touchedRef.current) {
+      touchedRef.current = true;
+      touchYRef.current = Math.ceil(e.touches[0].pageY);
+      e.preventDefault();
+
+      elementRef.current = e.target as HTMLElement;
+      elementRef.current.addEventListener('touchmove', onTouchMove);
+      elementRef.current.addEventListener('touchend', onTouchEnd);
+    }
+  };
+
+  cleanUpEvents = () => {
+    if (elementRef.current) {
+      elementRef.current.removeEventListener('touchmove', onTouchMove);
+      elementRef.current.removeEventListener('touchend', onTouchEnd);
+    }
+  };
+
+  React.useEffect(() => {
+    listRef.current.addEventListener('touchstart', onTouchStart);
+
+    return () => {
+      listRef.current.removeEventListener('touchstart', onTouchStart);
+      cleanUpEvents();
+      clearInterval(intervalRef.current);
+    };
+  }, []);
+}

tests/touch.test.js

@@ -0,0 +1,92 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { spyElementPrototypes } from './utils/domHook';
+import List from '../src';
+
+function genData(count) {
+  return new Array(count).fill(null).map((_, index) => ({ id: String(index) }));
+}
+
+describe('List.Touch', () => {
+  let mockElement;
+
+  beforeAll(() => {
+    mockElement = spyElementPrototypes(HTMLElement, {
+      offsetHeight: {
+        get: () => 20,
+      },
+      clientHeight: {
+        get: () => 100,
+      },
+    });
+  });
+
+  afterAll(() => {
+    mockElement.mockRestore();
+  });
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  function genList(props) {
+    let node = (
+      <List component="ul" itemKey="id" {...props}>
+        {({ id }) => <li>{id}</li>}
+      </List>
+    );
+
+    if (props.ref) {
+      node = <div>{node}</div>;
+    }
+
+    return mount(node);
+  }
+
+  it('touch content', () => {
+    const listRef = React.createRef();
+    const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100), ref: listRef });
+
+    function getElement() {
+      return wrapper.find('.rc-virtual-list-holder').instance();
+    }
+
+    // start
+    const touchEvent = new Event('touchstart');
+    touchEvent.touches = [{ pageY: 100 }];
+    getElement().dispatchEvent(touchEvent);
+
+    // move
+    const moveEvent = new Event('touchmove');
+    moveEvent.touches = [{ pageY: 90 }];
+    getElement().dispatchEvent(moveEvent);
+
+    // end
+    const endEvent = new Event('touchend');
+    getElement().dispatchEvent(endEvent);
+
+    // smooth
+    jest.runAllTimers();
+    expect(wrapper.find('ul').instance().scrollTop > 10).toBeTruthy();
+
+    wrapper.unmount();
+  });
+
+  it('should container preventDefault', () => {
+    const preventDefault = jest.fn();
+    const wrapper = genList({ itemHeight: 20, height: 100, data: genData(100) });
+
+    const touchEvent = new Event('touchstart');
+    touchEvent.preventDefault = preventDefault;
+    wrapper
+      .find('.rc-virtual-list-scrollbar')
+      .instance()
+      .dispatchEvent(touchEvent);
+
+    expect(preventDefault).toHaveBeenCalled();
+  });
+});