chore: Add scroll lock to make it smooth

Author: zombieJ

src/Table.tsx

@@ -55,7 +55,7 @@ import TableContext from './context/TableContext';
 import BodyContext from './context/BodyContext';
 import Body from './Body';
 import useColumns from './hooks/useColumns';
-import { useFrameState } from './hooks/useFrame';
+import { useFrameState, useTimeoutLock } from './hooks/useFrame';
 import { getPathValue, mergeObject, validateValue, newArr } from './utils/valueUtil';
 import ResizeContext from './context/ResizeContext';
 import useStickyOffsets from './hooks/useStickyOffsets';
@@ -344,6 +344,8 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
     });
   }
 
+  const [setScrollTarget, getScrollTarget] = useTimeoutLock(null);
+
   function forceScroll(scrollLeft: number, target: HTMLDivElement) {
     /* eslint-disable no-param-reassign */
     if (target && target.scrollLeft !== scrollLeft) {
@@ -354,8 +356,13 @@ function Table<RecordType extends DefaultRecordType>(props: TableProps<RecordTyp
 
   const onScroll: React.UIEventHandler<HTMLDivElement> = ({ currentTarget }) => {
     const { scrollLeft, scrollWidth, clientWidth } = currentTarget;
-    forceScroll(scrollLeft, scrollHeaderRef.current);
-    forceScroll(scrollLeft, scrollBodyRef.current);
+
+    if (!getScrollTarget() || getScrollTarget() === currentTarget) {
+      setScrollTarget(currentTarget);
+
+      forceScroll(scrollLeft, scrollHeaderRef.current);
+      forceScroll(scrollLeft, scrollBodyRef.current);
+    }
 
     setPingedLeft(scrollLeft > 0);
     setPingedRight(scrollLeft < scrollWidth - clientWidth);

src/hooks/useFrame.ts

@@ -29,3 +29,31 @@ export function useFrameState<State>(
 
   return [state, setFrameState];
 }
+
+/** Lock frame, when frame pass reset the lock. */
+export function useTimeoutLock<State>(defaultState?: State): [(state: State) => void, () => State] {
+  const frameRef = useRef<State | null>(defaultState);
+  const timeoutRef = useRef<number>(null);
+
+  function cleanUp() {
+    window.clearTimeout(timeoutRef.current);
+  }
+
+  function setState(newState: State) {
+    frameRef.current = newState;
+    cleanUp();
+
+    timeoutRef.current = window.setTimeout(() => {
+      frameRef.current = null;
+      timeoutRef.current = null;
+    }, 100);
+  }
+
+  function getState() {
+    return frameRef.current;
+  }
+
+  useEffect(() => cleanUp, []);
+
+  return [setState, getState];
+}

tests/Scroll.spec.js

@@ -28,6 +28,7 @@ describe('Table.Scroll', () => {
   });
 
   it('fire scroll event', () => {
+    jest.useFakeTimers();
     let scrollLeft = 0;
     let scrollTop = 0;
 
@@ -76,6 +77,7 @@ describe('Table.Scroll', () => {
       />,
     );
 
+    jest.runAllTimers();
     // Use `onScroll` directly since simulate not support `currentTarget`
     act(() => {
       wrapper
@@ -89,6 +91,7 @@ describe('Table.Scroll', () => {
           },
         });
     });
+    jest.runAllTimers();
     expect(setScrollLeft).toHaveBeenCalledWith(undefined, 10);
     setScrollLeft.mockReset();
 
@@ -108,5 +111,6 @@ describe('Table.Scroll', () => {
     setScrollLeft.mockReset();
 
     domSpy.mockRestore();
+    jest.useRealTimers();
   });
 });