Added logic that removes selected row styling after ItemView is closed.

ECN · Nov 6, 2020 · 937dbc0 · 937dbc0
1 parent 44865c2
commit 937dbc0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/App.js b/src/App.js
@@ -73,7 +73,7 @@ function App() {
 
 				<Box className={classes.leftCol}>
 					<ItemTableAppBar title="webqueue2" setDarkMode={setDarkMode} />
-					<ItemTable data={items} onRowClick={ _ => console.log("Clicked!") }/>
+					<ItemTable data={items} rowCanBeSelected={sidebarOpen} />
 				</Box>
 
 				<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>

diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -7,9 +7,9 @@ import RelativeTime from "react-relative-time";
 import ItemTableFilter from "../ItemTableFilter/"
 import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
-export default function ItemTable({ data }) {
+export default function ItemTable({ data, rowCanBeSelected }) {
 
-    const theme = useTheme();
+    const theme = useTheme(); 
     const useStyles = makeStyles({
         // Fully visible for active icons
         activeSortIcon: {
@@ -27,12 +27,11 @@ export default function ItemTable({ data }) {
                 backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
             },
         },
-
         columnBorders: {
             borderLeftWidth: "1px",
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
-        }
+        },
     });
     const classes = useStyles();
 
@@ -135,10 +134,13 @@ export default function ItemTable({ data }) {
                                 // 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 ? classes.rowSelected : classes.bandedRows }}
+                                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>
                                 ))}
@@ -153,9 +155,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
 };