From 989f1481c13e45f02a1bf8c6e7fdcfea1da192ca Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Mon, 2 Nov 2020 15:02:11 -0500 Subject: [PATCH 1/3] Added styling to ItemTable to display what row is currently selected --- src/components/ItemTable/ItemTable.js | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 2519a04..a45d8ed 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,10 +1,7 @@ -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/" @@ -22,11 +19,17 @@ 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], }, }, + columnBorders: { borderLeftWidth: "1px", borderLeftStyle: "solid", @@ -68,10 +71,13 @@ export default function ItemTable({ data }) { }, useFilters, useFlexLayout, useSortBy, ); + const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; + const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null }); + return ( - + {headerGroups.map(headerGroup => ( @@ -121,10 +127,15 @@ export default function ItemTable({ data }) { {rows.map((row, i) => { prepareRow(row); + let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number return ( 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={selectedRow.queue === row.original.queue && selectedRow.number === row.original.number} {...row.getRowProps()} > {row.cells.map(cell => ( From b7726e0740bce457c19c5b2ef7e076c49577b2e9 Mon Sep 17 00:00:00 2001 From: "Campbell, Justin" Date: Mon, 2 Nov 2020 20:52:08 -0500 Subject: [PATCH 2/3] Move selectedRow state variable to top of function definition --- src/components/ItemTable/ItemTable.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index a45d8ed..825b975 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -8,7 +8,8 @@ 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 @@ -29,7 +30,6 @@ export default function ItemTable({ data }) { backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700], }, }, - columnBorders: { borderLeftWidth: "1px", borderLeftStyle: "solid", @@ -71,11 +71,8 @@ export default function ItemTable({ data }) { }, useFilters, useFlexLayout, useSortBy, ); - const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance; - const [selectedRow, setSelecetedRow] = useState({ queue: null, number: null }); - return (
@@ -158,4 +155,4 @@ ItemTable.propTypes = { ItemTable.defaultProps = { "items": [] -}; \ No newline at end of file +}; From e7d1df517d55bf7f37c95a67fc38828ee8d2fb38 Mon Sep 17 00:00:00 2001 From: "Campbell, Justin" Date: Mon, 2 Nov 2020 20:53:17 -0500 Subject: [PATCH 3/3] Consolidate isSelected logic --- src/components/ItemTable/ItemTable.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 825b975..505617f 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -129,10 +129,10 @@ export default function ItemTable({ data }) { { history.push(`/${row.original.queue}/${row.original.number}`); - setSelecetedRow({ queue: row.original.queue, number: row.original.number }) + setSelecetedRow({ queue: row.original.queue, number: row.original.number }); }} classes={{ root: isSelected ? classes.rowSelected : classes.bandedRows }} - selected={selectedRow.queue === row.original.queue && selectedRow.number === row.original.number} + selected={isSelected} {...row.getRowProps()} > {row.cells.map(cell => (