feat: support onVirtualScroll event (#214)

* feat: support onVirtualScroll * chore: use scroll event * fix: not repeat trigger
react-component · Aug 17, 2023 · bc4c181 · bc4c181
1 parent c3ee0f6
commit bc4c181
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 41 deletions.
diff --git a/examples/horizontal-scroll.tsx b/examples/horizontal-scroll.tsx
@@ -119,8 +119,8 @@ const Demo = () => {
                 </div>
               );
             }}
-            onScroll={(e) => {
-              // console.log('Scroll:', e);
+            onVirtualScroll={(e) => {
+              console.warn('Scroll:', e);
             }}
           >
             {(item, _, props) => <ForwardMyItem {...item} {...props} />}

diff --git a/src/Filler.tsx b/src/Filler.tsx
@@ -88,9 +88,9 @@ const Filler = React.forwardRef(
           >
             {children}
           </div>
-
-          {extra}
         </ResizeObserver>
+
+        {extra}
       </div>
     );
   },

diff --git a/src/List.tsx b/src/List.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
 import classNames from 'classnames';
 import type { ResizeObserverProps } from 'rc-resize-observer';
 import ResizeObserver from 'rc-resize-observer';
@@ -64,6 +65,13 @@ export interface ListProps<T> extends Omit<React.HTMLAttributes<any>, 'children'
   scrollWidth?: number;
 
   onScroll?: React.UIEventHandler<HTMLElement>;
+
+  /**
+   * Given the virtual offset value.
+   * It's the logic offset from start position.
+   */
+  onVirtualScroll?: (info: { x: number; y: number }) => void;
+
   /** Trigger when render list item changed */
   onVisibleChange?: (visibleList: T[], fullList: T[]) => void;
 
@@ -90,6 +98,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
     scrollWidth,
     component: Component = 'div',
     onScroll,
+    onVirtualScroll,
     onVisibleChange,
     innerProps,
     extraRender,
@@ -278,11 +287,33 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   const originScroll = useOriginScroll(isScrollAtTop, isScrollAtBottom);
 
   // ================================ Scroll ================================
+  const lastVirtualScrollInfoRef = useRef<[number, number]>([0, 0]);
+
+  const triggerScroll = useEvent(() => {
+    if (onVirtualScroll) {
+      const x = isRTL ? -offsetLeft : offsetLeft;
+      const y = offsetTop;
+
+      // Trigger when offset changed
+      if (lastVirtualScrollInfoRef.current[0] !== x || lastVirtualScrollInfoRef.current[1] !== y) {
+        onVirtualScroll({
+          x,
+          y,
+        });
+
+        lastVirtualScrollInfoRef.current = [x, y];
+      }
+    }
+  });
+
   function onScrollBar(newScrollOffset: number, horizontal?: boolean) {
     const newOffset = newScrollOffset;
 
     if (horizontal) {
-      setOffsetLeft(newOffset);
+      flushSync(() => {
+        setOffsetLeft(newOffset);
+      });
+      triggerScroll();
     } else {
       syncScrollTop(newOffset);
     }
@@ -297,20 +328,26 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
     // Trigger origin onScroll
     onScroll?.(e);
+    triggerScroll();
   }
 
-  const onWheelDelta = useEvent((offsetXY, fromHorizontal) => {
+  const onWheelDelta: Parameters<typeof useFrameWheel>[4] = useEvent((offsetXY, fromHorizontal) => {
     if (fromHorizontal) {
       // Horizontal scroll no need sync virtual position
-      setOffsetLeft((left) => {
-        let newLeft = left + offsetXY;
 
-        const max = scrollWidth - size.width;
-        newLeft = Math.max(newLeft, 0);
-        newLeft = Math.min(newLeft, max);
+      flushSync(() => {
+        setOffsetLeft((left) => {
+          let newLeft = left + (isRTL ? -offsetXY : offsetXY);
+
+          const max = scrollWidth - size.width;
+          newLeft = Math.max(newLeft, 0);
+          newLeft = Math.min(newLeft, max);
 
-        return newLeft;
+          return newLeft;
+        });
       });
+
+      triggerScroll();
     } else {
       syncScrollTop((top) => {
         const newTop = top + offsetXY;

diff --git a/tests/scrollWidth.test.tsx b/tests/scrollWidth.test.tsx
@@ -69,44 +69,79 @@ describe('List.scrollWidth', () => {
     expect(container.querySelector('.rc-virtual-list-scrollbar-horizontal')).toBeTruthy();
   });
 
-  it('trigger offset', async () => {
-    const { container } = genList({
-      itemHeight: 20,
-      height: 100,
-      data: genData(100),
-      scrollWidth: 1000,
-    });
+  describe('trigger offset', () => {
+    it('drag scrollbar', async () => {
+      const onVirtualScroll = jest.fn();
 
-    await act(async () => {
-      onLibResize([
-        {
-          target: container.querySelector('.rc-virtual-list-holder')!,
-        } as ResizeObserverEntry,
-      ]);
+      const { container } = genList({
+        itemHeight: 20,
+        height: 100,
+        data: genData(100),
+        scrollWidth: 1000,
+        onVirtualScroll,
+      });
 
-      await Promise.resolve();
-    });
+      await act(async () => {
+        onLibResize([
+          {
+            target: container.querySelector('.rc-virtual-list-holder')!,
+          } as ResizeObserverEntry,
+        ]);
+
+        await Promise.resolve();
+      });
+
+      // Drag
+      const thumb = container.querySelector(
+        '.rc-virtual-list-scrollbar-horizontal .rc-virtual-list-scrollbar-thumb',
+      )!;
 
-    // Drag
-    const thumb = container.querySelector(
-      '.rc-virtual-list-scrollbar-horizontal .rc-virtual-list-scrollbar-thumb',
-    )!;
+      pageX = 10;
+      fireEvent.mouseDown(thumb);
 
-    pageX = 10;
-    fireEvent.mouseDown(thumb);
+      pageX = 100000;
+      fireEvent.mouseMove(window);
 
-    pageX = 100000;
-    fireEvent.mouseMove(window);
+      act(() => {
+        jest.runAllTimers();
+      });
 
-    act(() => {
-      jest.runAllTimers();
+      fireEvent.mouseUp(window);
+
+      expect(thumb).toHaveStyle({
+        left: '80px',
+        width: '20px',
+      });
+
+      expect(onVirtualScroll).toHaveBeenCalledWith({ x: 900, y: 0 });
     });
 
-    fireEvent.mouseUp(window);
+    it('wheel', async () => {
+      const onVirtualScroll = jest.fn();
 
-    expect(thumb).toHaveStyle({
-      left: '80px',
-      width: '20px',
+      const { container } = genList({
+        itemHeight: 20,
+        height: 100,
+        data: genData(100),
+        scrollWidth: 1000,
+        onVirtualScroll,
+      });
+
+      await act(async () => {
+        onLibResize([
+          {
+            target: container.querySelector('.rc-virtual-list-holder')!,
+          } as ResizeObserverEntry,
+        ]);
+
+        await Promise.resolve();
+      });
+
+      // Wheel
+      fireEvent.wheel(container.querySelector('.rc-virtual-list-holder')!, {
+        deltaX: 123,
+      });
+      expect(onVirtualScroll).toHaveBeenCalledWith({ x: 123, y: 0 });
     });
   });