Wrap render table function in useCallback

openshift · May 4, 2021 · 3cd3ef5 · 3cd3ef5
1 parent 0255bc2
commit 3cd3ef5
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 55 deletions.
diff --git a/frontend/public/components/factory/Table/VirtualizedTable.tsx b/frontend/public/components/factory/Table/VirtualizedTable.tsx
@@ -8,11 +8,12 @@ import {
   SortByDirection,
   ICell,
 } from '@patternfly/react-table';
+import { getParentScrollableElement } from '@console/shared/src/hooks/useScrollContainer';
 import { AutoSizer, WindowScroller } from '@patternfly/react-virtualized-extension';
 import { useNamespace } from '@console/shared/src/hooks/useNamespace';
 
 import VirtualizedTableBody from './VirtualizedTableBody';
-import { history, StatusBox, WithScrollContainer } from '../../utils';
+import { history, StatusBox } from '../../utils';
 
 const BREAKPOINT_SM = 576;
 const BREAKPOINT_MD = 768;
@@ -143,6 +144,12 @@ const VirtualizedTable: React.FC<VirtualizedTableProps> = ({
   columnManagementID,
   showNamespaceOverride,
 }) => {
+  const [scrollContainer, setScrollContainer] = React.useState<HTMLElement>();
+  const ref = React.useCallback((node) => {
+    if (node) {
+      setScrollContainer(getParentScrollableElement(node));
+    }
+  }, []);
   const columnShift = onSelect ? 1 : 0; //shift indexes by 1 if select provided
   const [sortBy, setSortBy] = React.useState<{
     index: number;
@@ -222,27 +229,26 @@ const VirtualizedTable: React.FC<VirtualizedTableProps> = ({
     [applySort],
   );
 
-  const renderVirtualizedTable = (scrollContainer) => (
-    <WindowScroller scrollElement={scrollContainer}>
-      {({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
-        <AutoSizer disableHeight>
-          {({ width }) => (
-            <div ref={registerChild}>
-              <VirtualizedTableBody
-                Row={Row}
-                height={height}
-                isScrolling={isScrolling}
-                onChildScroll={onChildScroll}
-                data={data}
-                columns={columns}
-                scrollTop={scrollTop}
-                width={width}
-              />
-            </div>
-          )}
-        </AutoSizer>
-      )}
-    </WindowScroller>
+  const renderTable = React.useCallback(
+    ({ height, isScrolling, registerChild, onChildScroll, scrollTop }) => (
+      <AutoSizer disableHeight>
+        {({ width }) => (
+          <div ref={registerChild}>
+            <VirtualizedTableBody
+              Row={Row}
+              height={height}
+              isScrolling={isScrolling}
+              onChildScroll={onChildScroll}
+              data={data}
+              columns={columns}
+              scrollTop={scrollTop}
+              width={width}
+            />
+          </div>
+        )}
+      </AutoSizer>
+    ),
+    [Row, columns, data],
   );
 
   return (
@@ -270,10 +276,12 @@ const VirtualizedTable: React.FC<VirtualizedTableProps> = ({
           >
             <TableHeader />
           </PfTable>
-          {scrollNode ? (
-            renderVirtualizedTable(scrollNode)
+          {scrollNode || scrollContainer ? (
+            <WindowScroller scrollElement={scrollNode?.() || scrollContainer}>
+              {renderTable}
+            </WindowScroller>
           ) : (
-            <WithScrollContainer>{renderVirtualizedTable}</WithScrollContainer>
+            <span ref={ref} />
           )}
         </div>
       </StatusBox>

diff --git a/frontend/public/components/factory/Table/VirtualizedTableBody.tsx b/frontend/public/components/factory/Table/VirtualizedTableBody.tsx
@@ -25,37 +25,41 @@ const VirtualizedTableBody: React.FC<VirtualizedTableBodyProps> = ({
   scrollTop,
   width,
 }) => {
-  const cellMeasurementCache = new CellMeasurerCache({
-    fixedWidth: true,
-    minHeight: 44,
-    keyMapper: (rowIndex) => data?.[rowIndex]?.metadata?.uid || rowIndex, // TODO custom keyMapper ?
-  });
+  const [cellMeasurementCache, rowRenderer] = React.useMemo(
+    () => [
+      new CellMeasurerCache({
+        fixedWidth: true,
+        minHeight: 44,
+        keyMapper: (rowIndex) => data[rowIndex]?.metadata?.uid || rowIndex, // TODO custom keyMapper ?
+      }),
+      ({ index, isScrolling: scrolling, isVisible, key, style, parent }) => {
+        const rowArgs: RowProps<any> = {
+          obj: data[index],
+          index,
+          columns,
+          isScrolling: scrolling,
+          style,
+        };
 
-  const rowRenderer = ({ index, isScrolling: scrolling, isVisible, key, style, parent }) => {
-    const rowArgs: RowProps<any> = {
-      obj: data[index],
-      index,
-      columns,
-      isScrolling: scrolling,
-      style,
-    };
-
-    // do not render non visible elements (this excludes overscan)
-    if (!isVisible) {
-      return null;
-    }
-    return (
-      <CellMeasurer
-        cache={cellMeasurementCache}
-        columnIndex={0}
-        key={key}
-        parent={parent}
-        rowIndex={index}
-      >
-        <Row key={key} {...rowArgs} />
-      </CellMeasurer>
-    );
-  };
+        // do not render non visible elements (this excludes overscan)
+        if (!isVisible) {
+          return null;
+        }
+        return (
+          <CellMeasurer
+            cache={cellMeasurementCache}
+            columnIndex={0}
+            key={key}
+            parent={parent}
+            rowIndex={index}
+          >
+            <Row key={key} {...rowArgs} />
+          </CellMeasurer>
+        );
+      },
+    ],
+    [columns, data],
+  );
 
   return (
     <VirtualTableBody
@@ -73,6 +77,7 @@ const VirtualizedTableBody: React.FC<VirtualizedTableBodyProps> = ({
       rowRenderer={rowRenderer}
       scrollTop={scrollTop}
       width={width}
+      isScrollingOptOut
     />
   );
 };