diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 505617f..701aabc 100644 --- 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 => ( - + {cell.render("Cell")} ))} @@ -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 };