Removed custom row component; now rows are rendered in the original p…

…lace.
ECN · Apr 9, 2021 · b499f8d · b499f8d
1 parent dd297ac
commit b499f8d
Showing 1 changed file with 52 additions and 53 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -90,57 +90,6 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
     );
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
-    const RenderRow = memo(({ index, style }) => {
-        const row = rows[index]
-        prepareRow(row)
-        let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
-        return (
-            <TableRow
-                style={style}
-                hover
-                onClick={() => {
-                    history.push(`/${row.original.queue}/${row.original.number}`);
-                    setSelectedRow({ queue: row.original.queue, number: row.original.number });
-                }}
-                // This functionality should be achieved by using the selected prop and
-                // overriding the selected class but this applied the secondary color at 0.08% opacity.
-                // Overridding the root class is a workaround.
-                classes={{
-                    root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
-                    hover: classes.hoverBackgroundColor
-                }}
-                {...row.getRowProps({ style, })}
-            >
-                {row.cells.map(cell => (
-                    cell.render(_ => {
-                        switch (cell.column.id) {
-                            case "dateReceived":
-                                return (
-                                    <ItemTableCell TableCellProps={cell.getCellProps()}>
-                                        <RelativeTime value={cell.value} />
-                                    </ItemTableCell>
-                                );
-                            case "lastUpdated":
-                                return (
-                                    <LastUpdatedCell
-                                        time={cell.value}
-                                        ItemTableCellProps={cell.getCellProps()}
-                                    />
-                                );
-                            default:
-                                return (
-                                    <ItemTableCell TableCellProps={cell.getCellProps()}>
-                                        {cell.value}
-                                    </ItemTableCell>
-                                );
-                        }
-                    })
-                ))}
-            </TableRow>
-        )
-    }, areEqual,
-        [prepareRow, rows]
-    )
     return (
         loading
             ? (
@@ -150,7 +99,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
             )
             : (
                 <TableContainer>
-                    <Table stickyHeader {...getTableProps()} className="table"  size="small">
+                    <Table stickyHeader {...getTableProps()} className="table" size="small">
                         <TableHead>
                             {headerGroups.map(headerGroup => (
                                 <TableRow {...headerGroup.getHeaderGroupProps()} className="tr">
@@ -202,7 +151,57 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
                                 itemSize={120}
                                 width="100%"
                             >
-                                {RenderRow}
+                                {memo(({ index, style }) => {
+                                    const row = rows[index]
+                                    prepareRow(row)
+                                    let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
+                                    return (
+                                        <TableRow
+                                            style={style}
+                                            hover
+                                            onClick={() => {
+                                                history.push(`/${row.original.queue}/${row.original.number}`);
+                                                setSelectedRow({ queue: row.original.queue, number: row.original.number });
+                                            }}
+                                            // This functionality should be achieved by using the selected prop and
+                                            // overriding the selected class but this applied the secondary color at 0.08% opacity.
+                                            // Overridding the root class is a workaround.
+                                            classes={{
+                                                root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
+                                                hover: classes.hoverBackgroundColor
+                                            }}
+                                            {...row.getRowProps({ style, })}
+                                        >
+                                            {row.cells.map(cell => (
+                                                cell.render(_ => {
+                                                    switch (cell.column.id) {
+                                                        case "dateReceived":
+                                                            return (
+                                                                <ItemTableCell TableCellProps={cell.getCellProps()}>
+                                                                    <RelativeTime value={cell.value} />
+                                                                </ItemTableCell>
+                                                            );
+                                                        case "lastUpdated":
+                                                            return (
+                                                                <LastUpdatedCell
+                                                                    time={cell.value}
+                                                                    ItemTableCellProps={cell.getCellProps()}
+                                                                />
+                                                            );
+                                                        default:
+                                                            return (
+                                                                <ItemTableCell TableCellProps={cell.getCellProps()}>
+                                                                    {cell.value}
+                                                                </ItemTableCell>
+                                                            );
+                                                    }
+                                                })
+                                            ))}
+                                        </TableRow>
+                                    );
+                                }, areEqual,
+                                    [prepareRow, rows]
+                                )}
                             </FixedSizeList>
                             {/* {rows.map((row) => {
                             prepareRow(row);