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

Changed color of selected row to a color that is easier to see
ECN · Nov 16, 2020 · 01a3653 · 01a3653
2 parents 7e84b6e + 2e6f87d
commit 01a3653
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -7,10 +7,10 @@ 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();
+
+export default function ItemTable({ data, rowCanBeSelected }) {
+
+    const theme = useTheme(); 
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -21,9 +21,7 @@ export default function ItemTable({ data }) {
             opacity: 0.2,
         },
         rowSelected: {
-            "&$selected, &$selected:hover": {
-                backgroundColor: theme.palette.primary,
-            },
+            backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },
         bandedRows: {
             '&:nth-of-type(even)': {
@@ -34,7 +32,7 @@ export default function ItemTable({ data }) {
             borderLeftWidth: "1px",
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
-        }
+        },
     });
     const classes = useStyles();
 
@@ -131,11 +129,16 @@ export default function ItemTable({ data }) {
                                     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}
+                                // 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 }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell classes={{ root: classes.columnBorders }} {...cell.getCellProps()}>
+                                    <TableCell 
+                                        classes={{ root: classes.columnBorders }}
+                                        {...cell.getCellProps()}
+                                    >
                                         {cell.render("Cell")}
                                     </TableCell>
                                 ))}
@@ -150,9 +153,12 @@ export default function ItemTable({ data }) {
 
 ItemTable.propTypes = {
     /** Array of items from all active queues to display in table. */
-    "items": PropTypes.array
+    "items": PropTypes.array,
+    /** State variable indicating if rows can be selected. When false, all rows are deselected. */
+    "rowCanBeSelected": PropTypes.bool
 };
 
 ItemTable.defaultProps = {
-    "items": []
+    "items": [],
+    "rowCanBeSelected": true
 };