Merge pull request #107 from ECN/enhancement-selected-row-styling

Added styling to ItemTable to display what row is currently selected
ECN · Nov 3, 2020 · 52cd04e · 52cd04e
2 parents d93ed18 + e7d1df5
commit 52cd04e
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,17 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import {
-    Table, TableBody, TableCell, TableHead, TableRow, TableContainer,
-    Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme
-} from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
 import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
 export default function ItemTable({ data }) {
-
+    const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null });
+
     const theme = useTheme();
     const useStyles = makeStyles({
         // Fully visible for active icons
@@ -22,6 +20,11 @@ export default function ItemTable({ data }) {
         inactiveSortIcon: {
             opacity: 0.2,
         },
+        rowSelected: {
+            "&$selected, &$selected:hover": {
+                backgroundColor: theme.palette.primary,
+            },
+        },
         bandedRows: {
             '&:nth-of-type(even)': {
                 backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
@@ -71,7 +74,7 @@ export default function ItemTable({ data }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        <TableContainer component={Paper}>
+        <TableContainer component={Paper} >
             <Table {...getTableProps} aria-label="Table of Queue Items" >
                 <TableHead>
                     {headerGroups.map(headerGroup => (
@@ -121,10 +124,15 @@ export default function ItemTable({ data }) {
                 <TableBody {...getTableBodyProps()}>
                     {rows.map((row, i) => {
                         prepareRow(row);
+                        let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
                         return (
                             <TableRow
-                                onClick={() => history.push(`/${row.original.queue}/${row.original.number}`)}
-                                className={classes.bandedRows}
+                                onClick={() => {
+                                    history.push(`/${row.original.queue}/${row.original.number}`);
+                                    setSelecetedRow({ queue: row.original.queue, number: row.original.number });
+                                }}
+                                classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }}
+                                selected={isSelected}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>
@@ -147,4 +155,4 @@ ItemTable.propTypes = {
 
 ItemTable.defaultProps = {
     "items": []
-};
+};