Made expandable content a separate component (#2240)

iTwin · Sep 13, 2024 · 8e850cc · 8e850cc
1 parent 90861e6
commit 8e850cc
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 38 deletions.
diff --git a/packages/itwinui-react/src/core/Table/Table.test.tsx b/packages/itwinui-react/src/core/Table/Table.test.tsx
@@ -2040,7 +2040,7 @@ it('should render sub-rows and handle expansions', async () => {
   expect(onExpand).toHaveBeenNthCalledWith(1, [data[0]], expect.any(Object));
   expect(onExpand).toHaveBeenNthCalledWith(
     2,
-    [data[0], data[1]],
+    [data[0], data[0].subRows[1]],
     expect.any(Object),
   );
   expect(onExpand).toHaveBeenNthCalledWith(

diff --git a/packages/itwinui-react/src/core/Table/Table.tsx b/packages/itwinui-react/src/core/Table/Table.tsx
@@ -38,6 +38,7 @@ import {
   useMergedRefs,
   useLatestRef,
   useVirtualScroll,
+  WithCSSTransition,
 } from '../../utils/index.js';
 import type { CommonProps } from '../../utils/index.js';
 import { TableColumnsContext } from './utils.js';
@@ -66,6 +67,7 @@ import {
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { Virtualizer, type VirtualItem } from '@tanstack/react-virtual';
 import { ColumnHeader } from './ColumnHeader.js';
+import { TableExpandableContentMemoized } from './TableExpandableContentMemoized.js';
 
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
@@ -835,27 +837,40 @@ export const Table = <
       const row = page[index];
       prepareRow(row);
       return (
-        <TableRowMemoized
-          row={row}
-          rowProps={rowProps}
-          isLast={index === page.length - 1}
-          onRowInViewport={onRowInViewportRef}
-          onBottomReached={onBottomReachedRef}
-          intersectionMargin={intersectionMargin}
-          state={state}
-          key={row.getRowProps().key}
-          onClick={onRowClickHandler}
-          subComponent={subComponent}
-          isDisabled={!!isRowDisabled?.(row.original)}
-          tableHasSubRows={hasAnySubRows}
-          tableInstance={instance}
-          expanderCell={expanderCell}
-          scrollContainerRef={tableRef.current}
-          tableRowRef={enableVirtualization ? undefined : tableRowRef(row)}
-          density={density}
-          virtualItem={virtualItem}
-          virtualizer={virtualizer}
-        />
+        <>
+          <TableRowMemoized
+            row={row}
+            rowProps={rowProps}
+            isLast={index === page.length - 1}
+            onRowInViewport={onRowInViewportRef}
+            onBottomReached={onBottomReachedRef}
+            intersectionMargin={intersectionMargin}
+            state={state}
+            key={row.getRowProps().key}
+            onClick={onRowClickHandler}
+            subComponent={subComponent}
+            isDisabled={!!isRowDisabled?.(row.original)}
+            tableHasSubRows={hasAnySubRows}
+            tableInstance={instance}
+            expanderCell={expanderCell}
+            scrollContainerRef={tableRef.current}
+            tableRowRef={enableVirtualization ? undefined : tableRowRef(row)}
+            density={density}
+            virtualItem={virtualItem}
+            virtualizer={virtualizer}
+          />
+          {subComponent && (
+            <WithCSSTransition in={row.isExpanded}>
+              <TableExpandableContentMemoized
+                key={row.getRowProps().key}
+                ref={tableRowRef(row)}
+                isDisabled={!!isRowDisabled?.(row.original)}
+              >
+                {subComponent(row)}
+              </TableExpandableContentMemoized>
+            </WithCSSTransition>
+          )}
+        </>
       );
     },
     [

diff --git a/packages/itwinui-react/src/core/Table/TableExpandableContentMemoized.tsx b/packages/itwinui-react/src/core/Table/TableExpandableContentMemoized.tsx
@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import * as React from 'react';
+import { Box } from '../../utils/index.js';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+
+type TableExpandableContentProps = {
+  children: React.ReactNode;
+  isDisabled?: boolean;
+};
+
+const TableExpandableContent = React.forwardRef((props, ref) => {
+  const { children, className, style, isDisabled, ...rest } = props;
+  return (
+    <Box
+      className={cx('iui-table-row', 'iui-table-expanded-content', className)}
+      style={{
+        flex: '0 0 auto',
+        minWidth: '100%',
+        ...style,
+      }}
+      aria-disabled={isDisabled}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+}) as PolymorphicForwardRefComponent<'div', TableExpandableContentProps>;
+
+export const TableExpandableContentMemoized = React.memo(
+  TableExpandableContent,
+);
diff --git a/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx b/packages/itwinui-react/src/core/Table/TableRowMemoized.tsx
@@ -10,12 +10,7 @@ import type {
   TableInstance,
   TableState,
 } from '../../react-table/react-table.js';
-import {
-  Box,
-  useIntersection,
-  useMergedRefs,
-  WithCSSTransition,
-} from '../../utils/index.js';
+import { Box, useIntersection, useMergedRefs } from '../../utils/index.js';
 import { TableCell } from './TableCell.js';
 import type { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 
@@ -153,16 +148,6 @@ export const TableRow = <T extends Record<string, unknown>>(props: {
           );
         })}
       </Box>
-      {subComponent && (
-        <WithCSSTransition in={row.isExpanded}>
-          <Box
-            className={cx('iui-table-row', 'iui-table-expanded-content')}
-            aria-disabled={isDisabled}
-          >
-            {subComponent(row)}
-          </Box>
-        </WithCSSTransition>
-      )}
     </>
   );
 };