fix: scroller not updating on after scroll

EightfoldAI · Feb 28, 2023 · ed86719 · ed86719
1 parent 1ed3296
commit ed86719
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/src/components/Table/Internal/Body/Scroller.tsx b/src/components/Table/Internal/Body/Scroller.tsx
@@ -27,14 +27,14 @@ export const Scroller = React.forwardRef(
       titleRef,
       scrollLeftAriaLabelText,
       scrollRightAriaLabelText,
-      hoveredRowBoundingRect,
     }: ScrollerProps<RecordType>,
     ref: ForwardedRef<ScrollerRef>
   ) => {
     const [visible, setVisible] = useState<boolean>(false);
     const [leftButtonVisible, setLeftButtonVisible] = useState<boolean>(false);
     const [rightButtonVisible, setRightButtonVisible] = useState<boolean>(true);
-
+    const [hoveredRowBoundingRect, setHoveredRowBoundingRect] =
+      useState<DOMRect>(null);
     // todo @yash: handle rtl
 
     const scrollOffsets: number[] = useMemo(
@@ -137,6 +137,7 @@ export const Scroller = React.forwardRef(
 
     useImperativeHandle(ref, () => ({
       onBodyScroll,
+      onRowHover: setHoveredRowBoundingRect,
     }));
 
     useEffect(() => {

diff --git a/src/components/Table/Internal/OcTable.tsx b/src/components/Table/Internal/OcTable.tsx
@@ -279,8 +279,6 @@ function OcTable<RecordType extends DefaultRecordType>(
   const [colsWidths, updateColsWidths] = useLayoutState(
     new Map<React.Key, number>()
   );
-  const [hoveredRowBoundingRect, setHoveredRowBoundingRect] =
-    useState<DOMRect>(null);
 
   // Convert map to number width
   const colsKeys = getColumnsKey(flattenColumns);
@@ -498,7 +496,15 @@ function OcTable<RecordType extends DefaultRecordType>(
     return emptyText;
   }, [hasData, emptyText]);
 
-  // Body
+  const _onRowHoverEnter = useCallback(
+    (index: number, key: Key, event: React.MouseEvent<HTMLElement>) => {
+      const hoveredCell = event.target as HTMLElement;
+      scrollerRef.current?.onRowHover?.(hoveredCell.getBoundingClientRect());
+      onRowHoverEnter?.(index, key, event);
+    },
+    []
+  );
+
   const bodyTable = (
     <Body
       data={mergedData}
@@ -509,11 +515,7 @@ function OcTable<RecordType extends DefaultRecordType>(
       onRow={onRow}
       emptyNode={emptyNode}
       childrenColumnName={mergedChildrenColumnName}
-      onRowHoverEnter={(index, key, event) => {
-        const hoveredCell = event.target as HTMLElement;
-        setHoveredRowBoundingRect(hoveredCell.getBoundingClientRect());
-        onRowHoverEnter?.(index, key, event);
-      }}
+      onRowHoverEnter={_onRowHoverEnter}
       onRowHoverLeave={onRowHoverLeave}
     />
   );
@@ -571,7 +573,6 @@ function OcTable<RecordType extends DefaultRecordType>(
               titleRef={titleRef}
               scrollLeftAriaLabelText={scrollLeftAriaLabelText}
               scrollRightAriaLabelText={scrollRightAriaLabelText}
-              hoveredRowBoundingRect={hoveredRowBoundingRect}
             />
           )}
           <TableComponent
@@ -679,7 +680,6 @@ function OcTable<RecordType extends DefaultRecordType>(
             stickyOffsets={stickyOffsets}
             scrollLeftAriaLabelText={scrollLeftAriaLabelText}
             scrollRightAriaLabelText={scrollRightAriaLabelText}
-            hoveredRowBoundingRect={hoveredRowBoundingRect}
           />
         )}
         <TableComponent

diff --git a/src/components/Table/Internal/OcTable.types.ts b/src/components/Table/Internal/OcTable.types.ts
@@ -431,17 +431,17 @@ export interface ScrollerProps<RecordType> {
    * @default 'Scroll left'
    */
   scrollLeftAriaLabelText?: string;
-  /**
-   * DOMRect of the hovered row
-   */
-  hoveredRowBoundingRect?: DOMRect;
 }
 
 export type ScrollerRef = {
   /**
    * Helper method to handle body scroll changes
    */
   onBodyScroll: () => void;
+  /**
+   * Helper method triggered on hover of a row
+   */
+  onRowHover: (boundingRect: DOMRect) => void;
 };
 
 export interface OcTableProps<RecordType = unknown> {