Merge branch 'feature/table-auto-scroll-to-selected' into q/1.0

Author: bert-e

src/lib/components/tablev2/SingleSelectableContent.tsx

@@ -1,5 +1,5 @@
-import { memo, useEffect } from 'react';
-import { areEqual } from 'react-window';
+import { memo, useEffect, useRef } from 'react';
+import { areEqual, FixedSizeList } from 'react-window';
 import { Row } from 'react-table';
 import { useTableContext } from './Tablev2.component';
 import {
@@ -33,6 +33,7 @@ export type SingleSelectableContentProps<
   hasScrollbar?: boolean;
   isLoadingMoreItems?: boolean;
   children?: (rows: JSX.Element) => JSX.Element;
+  autoScrollToSelected?: boolean;
 };
 
 export function SingleSelectableContent<
@@ -47,19 +48,35 @@ export function SingleSelectableContent<
   onRowSelected,
   customItemKey,
   children,
+  autoScrollToSelected = false,
 }: SingleSelectableContentProps<DATA_ROW>) {
   if (selectedId && !onRowSelected) {
     console.error('Please specify the onRowSelected function.');
   }
 
   const { headerRef } = useSyncedScroll<DATA_ROW>();
+  const listRef = useRef<FixedSizeList<Row<DATA_ROW>[]>>(null);
   const { headerGroups, prepareRow, rows, setRowHeight } =
     useTableContext<DATA_ROW>();
 
   useEffect(() => {
     setRowHeight(rowHeight);
   }, [rowHeight, setRowHeight]);
 
+  useEffect(() => {
+    if (!autoScrollToSelected || !selectedId || !listRef.current) return;
+
+    const selectedIndex = rows.findIndex((row) => row.id === selectedId);
+    if (selectedIndex < 0) return;
+
+    const timer = setTimeout(() => {
+      if (!listRef.current) return;
+      listRef.current.scrollToItem(selectedIndex, 'center');
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [autoScrollToSelected, selectedId, rows]);
+
   const RenderRow = memo(({ index, style }: RenderRowType) => {
     const row = rows[index];
     prepareRow(row);
@@ -180,6 +197,7 @@ export function SingleSelectableContent<
           children={children}
           customItemKey={customItemKey}
           RenderRow={RenderRow}
+          listRef={listRef}
         />
       </TableBody>
       {isLoadingMoreItems && (

src/lib/components/tablev2/TableCommon.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, LegacyRef, useCallback, useState } from 'react';
+import { ComponentType, Ref, useCallback, useState, forwardRef } from 'react';
 import { Row } from 'react-table';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {
@@ -18,6 +18,14 @@ import useSyncedScroll from './useSyncedScroll';
 import { CSSProperties } from 'styled-components';
 import { UnsuccessfulResult } from '../UnsuccessfulResult.component';
 
+const SmoothScrollDiv = forwardRef<HTMLDivElement, any>((props, ref) => (
+  <div
+    ref={ref}
+    {...props}
+    style={{ ...props.style, scrollBehavior: 'smooth' }}
+  />
+));
+
 type VirtualizedRowsType<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
 > = {
@@ -31,7 +39,7 @@ type VirtualizedRowsType<
   itemKey?: ListItemKeySelector<Row<DATA_ROW>[]>;
   onBottom?: (rowLength: number) => void;
   onBottomOffset?: number;
-  listRef?: LegacyRef<FixedSizeList<Row<DATA_ROW>[]>>;
+  listRef?: Ref<FixedSizeList<Row<DATA_ROW>[]>>;
 };
 
 export const VirtualizedRows = <
@@ -57,6 +65,7 @@ export const VirtualizedRows = <
           itemKey={itemKey}
           itemData={rows}
           ref={listRef}
+          outerElementType={SmoothScrollDiv}
           onItemsRendered={({
             visibleStartIndex,
             visibleStopIndex,
@@ -122,14 +131,23 @@ type TableRowsProps<
   RenderRow: React.MemoExoticComponent<
     ({ index, style }: RenderRowType) => JSX.Element
   >;
+  listRef?: Ref<FixedSizeList<Row<DATA_ROW>[]>>;
 };
 export function TableRows<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
->({ locale, children, customItemKey, RenderRow }: TableRowsProps<DATA_ROW>) {
+>({
+  locale,
+  children,
+  customItemKey,
+  RenderRow,
+  listRef: externalListRef,
+}: TableRowsProps<DATA_ROW>) {
   const { setHasScrollbar } = useTableScrollbar();
   const { rows, status, entityName, rowHeight, onBottom, onBottomOffset } =
-    useTableContext();
-  const { bodyRef } = useSyncedScroll();
+    useTableContext<DATA_ROW>();
+  const { bodyRef } = useSyncedScroll<DATA_ROW>();
+  const listRef: Ref<FixedSizeList<Row<DATA_ROW>[]>> =
+    externalListRef || bodyRef;
 
   function itemKey(index, data) {
     if (typeof customItemKey === 'function') {
@@ -153,9 +171,9 @@ export function TableRows<
     if (typeof children === 'function') {
       if (rows.length) {
         return children(
-          <VirtualizedRows
+          <VirtualizedRows<DATA_ROW>
             rows={rows}
-            listRef={bodyRef}
+            listRef={listRef}
             itemKey={itemKey}
             rowHeight={rowHeight}
             setHasScrollbar={setHasScrollbar}
@@ -175,9 +193,9 @@ export function TableRows<
       }
     } else if (rows.length) {
       return (
-        <VirtualizedRows
+        <VirtualizedRows<DATA_ROW>
           rows={rows}
-          listRef={bodyRef}
+          listRef={listRef}
           setHasScrollbar={setHasScrollbar}
           onBottom={onBottom}
           onBottomOffset={onBottomOffset}

stories/tablev2.stories.tsx

@@ -676,3 +676,59 @@ export const TableWithSyncButton = {
     );
   },
 };
+
+export const AutoScrollToSelected = {
+  render: () => {
+    const largeData: Entry[] = Array.from({ length: 100 }, (_, index) => ({
+      id: index + 1,
+      firstName: `FirstName${index + 1}`,
+      lastName: `LastName${index + 1}`,
+      health: ['healthy', 'warning', 'critical'][index % 3],
+    }));
+
+    const [selectedId, setSelectedId] = useState<string>(
+      'LastName80 FirstName80',
+    );
+
+    const handleRowSelected = (row: Row<Entry>) => {
+      const rowId = `${row.original.lastName} ${row.original.firstName}`;
+      setSelectedId(rowId);
+    };
+
+    const handleSelectRandom = () => {
+      const randomIndex = Math.floor(Math.random() * largeData.length);
+      const randomRow = largeData[randomIndex];
+      setSelectedId(`${randomRow.lastName} ${randomRow.firstName}`);
+    };
+
+    return (
+      <>
+        <Title>Auto Scroll to Selected Row</Title>
+        <Box mb={2}>
+          <Button
+            variant="secondary"
+            label="Select Random Row"
+            onClick={handleSelectRandom}
+          />
+          <Box mt={1}>Currently selected: {selectedId || 'None'}</Box>
+        </Box>
+        <div style={{ height: '400px' }}>
+          <Table
+            columns={columns}
+            data={largeData}
+            defaultSortingKey="firstName"
+            getRowId={getRowId}
+          >
+            <Table.SingleSelectableContent
+              rowHeight="h40"
+              separationLineVariant="backgroundLevel3"
+              selectedId={selectedId}
+              onRowSelected={handleRowSelected}
+              autoScrollToSelected
+            />
+          </Table>
+        </div>
+      </>
+    );
+  },
+};