Refactor Indexer index to use react-window

(cherry picked from commit d022679b7dcbce3cec98e6a1fd0879e3c0d92523)

frontend/src/Indexer/Index/Table/IndexerIndexTableHeader.tsx

@@ -0,0 +1,110 @@
+import classNames from 'classnames';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import IconButton from 'Components/Link/IconButton';
+import Column from 'Components/Table/Column';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import VirtualTableHeader from 'Components/Table/VirtualTableHeader';
+import VirtualTableHeaderCell from 'Components/Table/VirtualTableHeaderCell';
+import VirtualTableSelectAllHeaderCell from 'Components/Table/VirtualTableSelectAllHeaderCell';
+import { icons } from 'Helpers/Props';
+import SortDirection from 'Helpers/Props/SortDirection';
+import {
+  setIndexerSort,
+  setIndexerTableOption,
+} from 'Store/Actions/indexerIndexActions';
+import IndexerIndexTableOptions from './IndexerIndexTableOptions';
+import styles from './IndexerIndexTableHeader.css';
+
+interface IndexerIndexTableHeaderProps {
+  showBanners: boolean;
+  columns: Column[];
+  sortKey?: string;
+  sortDirection?: SortDirection;
+  isSelectMode: boolean;
+}
+
+function IndexerIndexTableHeader(props: IndexerIndexTableHeaderProps) {
+  const { columns, sortKey, sortDirection, isSelectMode } = props;
+  const dispatch = useDispatch();
+  const [selectState, selectDispatch] = useSelect();
+
+  const onSortPress = useCallback(
+    (value) => {
+      dispatch(setIndexerSort({ sortKey: value }));
+    },
+    [dispatch]
+  );
+
+  const onTableOptionChange = useCallback(
+    (payload) => {
+      dispatch(setIndexerTableOption(payload));
+    },
+    [dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }) => {
+      selectDispatch({
+        type: value ? SelectActionType.SelectAll : SelectActionType.UnselectAll,
+      });
+    },
+    [selectDispatch]
+  );
+
+  return (
+    <VirtualTableHeader>
+      {isSelectMode ? (
+        <VirtualTableSelectAllHeaderCell
+          allSelected={selectState.allSelected}
+          allUnselected={selectState.allUnselected}
+          onSelectAllChange={onSelectAllChange}
+        />
+      ) : null}
+
+      {columns.map((column) => {
+        const { name, label, isSortable, isVisible } = column;
+
+        if (!isVisible) {
+          return null;
+        }
+
+        if (name === 'actions') {
+          return (
+            <VirtualTableHeaderCell
+              key={name}
+              className={styles[name]}
+              name={name}
+              isSortable={false}
+            >
+              <TableOptionsModalWrapper
+                columns={columns}
+                optionsComponent={IndexerIndexTableOptions}
+                onTableOptionChange={onTableOptionChange}
+              >
+                <IconButton name={icons.ADVANCED_SETTINGS} />
+              </TableOptionsModalWrapper>
+            </VirtualTableHeaderCell>
+          );
+        }
+
+        return (
+          <VirtualTableHeaderCell
+            key={name}
+            className={classNames(styles[name])}
+            name={name}
+            sortKey={sortKey}
+            sortDirection={sortDirection}
+            isSortable={isSortable}
+            onSortPress={onSortPress}
+          >
+            {label}
+          </VirtualTableHeaderCell>
+        );
+      })}
+    </VirtualTableHeader>
+  );
+}
+
+export default IndexerIndexTableHeader;