fix: use Observer to check sticky bar (#1099)

* fix: use Observer to check sticky bar * add raf
react-component · Apr 2, 2024 · 80c86bf · 80c86bf
1 parent 3fc8cbd
commit 80c86bf
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 33 deletions.
diff --git a/src/Table.tsx b/src/Table.tsx
@@ -363,7 +363,10 @@ function Table<RecordType extends DefaultRecordType>(
   const fixColumn = horizonScroll && flattenColumns.some(({ fixed }) => fixed);
 
   // Sticky
-  const stickyRef = React.useRef<{ setScrollLeft: (left: number) => void }>();
+  const stickyRef = React.useRef<{
+    setScrollLeft: (left: number) => void;
+    checkScrollBarVisible: () => void;
+  }>();
   const { isSticky, offsetHeader, offsetSummary, offsetScroll, stickyClassName, container } =
     useSticky(sticky, prefixCls);
 
@@ -486,6 +489,7 @@ function Table<RecordType extends DefaultRecordType>(
   };
 
   const onFullTableResize = ({ width }) => {
+    stickyRef.current?.checkScrollBarVisible();
     let mergedWidth = fullTableRef.current ? fullTableRef.current.offsetWidth : width;
     if (useInternalHooks && getContainerWidth && fullTableRef.current) {
       mergedWidth = getContainerWidth(fullTableRef.current, mergedWidth) || mergedWidth;
@@ -716,7 +720,6 @@ function Table<RecordType extends DefaultRecordType>(
             scrollBodyRef={scrollBodyRef}
             onScroll={onInternalScroll}
             container={container}
-            data={data}
           />
         )}
       </>

diff --git a/src/stickyScrollBar.tsx b/src/stickyScrollBar.tsx
@@ -6,17 +6,17 @@ import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
 import * as React from 'react';
 import TableContext from './context/TableContext';
 import { useLayoutState } from './hooks/useFrame';
+import raf from 'rc-util/lib/raf';
 
 interface StickyScrollBarProps {
   scrollBodyRef: React.RefObject<HTMLDivElement>;
   onScroll: (params: { scrollLeft?: number }) => void;
   offsetScroll: number;
   container: HTMLElement | Window;
-  data?: readonly any[];
 }
 
 const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarProps> = (
-  { scrollBodyRef, onScroll, offsetScroll, container, data },
+  { scrollBodyRef, onScroll, offsetScroll, container },
   ref,
 ) => {
   const prefixCls = useContext(TableContext, 'prefixCls');
@@ -40,6 +40,14 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
     x: 0,
   });
   const [isActive, setActive] = React.useState(false);
+  const rafRef = React.useRef<number | null>(null);
+
+  React.useEffect(
+    () => () => {
+      raf.cancel(rafRef.current);
+    },
+    [],
+  );
 
   const onMouseUp: React.MouseEventHandler<HTMLDivElement> = () => {
     setActive(false);
@@ -82,30 +90,32 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
   };
 
   const checkScrollBarVisible = () => {
-    if (!scrollBodyRef.current) {
-      return;
-    }
-    const tableOffsetTop = getOffset(scrollBodyRef.current).top;
-    const tableBottomOffset = tableOffsetTop + scrollBodyRef.current.offsetHeight;
-    const currentClientOffset =
-      container === window
-        ? document.documentElement.scrollTop + window.innerHeight
-        : getOffset(container).top + (container as HTMLElement).clientHeight;
-
-    if (
-      tableBottomOffset - getScrollBarSize() <= currentClientOffset ||
-      tableOffsetTop >= currentClientOffset - offsetScroll
-    ) {
-      setScrollState(state => ({
-        ...state,
-        isHiddenScrollBar: true,
-      }));
-    } else {
-      setScrollState(state => ({
-        ...state,
-        isHiddenScrollBar: false,
-      }));
-    }
+    rafRef.current = raf(() => {
+      if (!scrollBodyRef.current) {
+        return;
+      }
+      const tableOffsetTop = getOffset(scrollBodyRef.current).top;
+      const tableBottomOffset = tableOffsetTop + scrollBodyRef.current.offsetHeight;
+      const currentClientOffset =
+        container === window
+          ? document.documentElement.scrollTop + window.innerHeight
+          : getOffset(container).top + (container as HTMLElement).clientHeight;
+
+      if (
+        tableBottomOffset - getScrollBarSize() <= currentClientOffset ||
+        tableOffsetTop >= currentClientOffset - offsetScroll
+      ) {
+        setScrollState(state => ({
+          ...state,
+          isHiddenScrollBar: true,
+        }));
+      } else {
+        setScrollState(state => ({
+          ...state,
+          isHiddenScrollBar: false,
+        }));
+      }
+    });
   };
 
   const setScrollLeft = (left: number) => {
@@ -119,6 +129,7 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
 
   React.useImperativeHandle(ref, () => ({
     setScrollLeft,
+    checkScrollBarVisible,
   }));
 
   React.useEffect(() => {
@@ -156,11 +167,6 @@ const StickyScrollBar: React.ForwardRefRenderFunction<unknown, StickyScrollBarPr
     }
   }, [scrollState.isHiddenScrollBar]);
 
-  // The best way is to use ResizeObserver to detect the body height, but this way is enough
-  React.useEffect(() => {
-    checkScrollBarVisible();
-  }, [data]);
-
   if (bodyScrollWidth <= bodyWidth || !scrollBarWidth || scrollState.isHiddenScrollBar) {
     return null;
   }