Fixed sort toggle buttons to allow sort by direction of the icon sele…

…cted
ECN · Oct 30, 2020 · 190c75f · 190c75f
1 parent a7720db
commit 190c75f
Showing 1 changed file with 41 additions and 24 deletions.
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
@@ -1,9 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import {makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel , Paper, Grid, useTheme, ButtonGroup} from "@material-ui/core";
+import { useTable, useFilters, useFlexLayout, useSortBy, useRowSelect } from "react-table";
+import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, useTheme, ButtonGroup, IconButton } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import ItemTableFilter from "../ItemTableFilter/"
+import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 
 export default function ItemTable({ data }) {
 
@@ -17,6 +18,11 @@ export default function ItemTable({ data }) {
         inactiveSortIcon: {
             opacity: 0.2,
         },
+        selectedItem: {
+            '.Mui-selected': {
+                backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[50] : theme.palette.primary[700],
+            }
+        },
         bandedRows: {
             '&:nth-of-type(even)': {
                 backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700],
@@ -35,7 +41,7 @@ export default function ItemTable({ data }) {
             { Header: 'Subject', accessor: 'subject' },
             { Header: 'Status', accessor: 'status', },
             { Header: 'Priority', accessor: 'priority' },
-            { Header: 'Last Updated', accessor: 'lastUpdated' },
+            { Header: 'Last Updated', accessor: 'lastUpdated',},
             { Header: 'Department', accessor: 'department' },
             { Header: 'Building', accessor: 'building' },
             { Header: 'Date Received', accessor: 'dateReceived' },
@@ -54,11 +60,11 @@ export default function ItemTable({ data }) {
                         />
                     );
                 }
-            }
+            },
         },
-        useFilters, useFlexLayout, useSortBy
+        useFilters, useFlexLayout, useSortBy, useRowSelect
     );
-    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;
+    const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
         <TableContainer component={Paper}>
@@ -75,22 +81,32 @@ export default function ItemTable({ data }) {
                                             </Grid>
                                             <Grid item sm={2} alignItems='center' justify='center'>
                                                 <ButtonGroup orientation="vertical" size="small">
-                                                    <TableSortLabel {...column.getSortByToggleProps()}
-                                                        active={column.isSorted && column.isSortedDesc === false ? true : false}
-                                                        disableRipple={false}
-                                                        focusRipple
-                                                        classes={{ icon: (column.isSorted && column.isSortedDesc === false  ? classes.activeSortIcon : classes.inactiveSortIcon) }}
-                                                        direction='asc'
-                                                    />
-                                                    <TableSortLabel {...column.getSortByToggleProps()}
-                                                        active={column.isSortedDesc ? true : false}
-                                                        to
-                                                        disableRipple={false}
-                                                        focusRipple
-                                                        classes={{ icon: (column.isSortedDesc ? classes.activeSortIcon : classes.inactiveSortIcon) }}
-                                                        direction='desc'
-                                                    />
-
+                                                    <IconButton
+                                                        size="small"
+                                                        onClick={(_ => {
+                                                            const isSortedAsc = column.isSorted && !column.isSortedDesc;
+
+                                                            isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
+                                                        })}
+                                                    >
+                                                        <ArrowUpward {...column.getSortByToggleProps()}
+                                                            fontSize="inherit"
+                                                            color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
+                                                        />
+                                                    </IconButton>
+                                                    <IconButton
+                                                        size="small"
+                                                        onClick={(_ => {
+                                                            const isSortedDesc = column.isSorted && column.isSortedDesc;
+
+                                                            isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
+                                                        })}
+                                                    >
+                                                        <ArrowDownward {...column.getSortByToggleProps(column.isSortedDesc)}
+                                                            fontSize="inherit"
+                                                            color={column.isSorted && column.isSortedDesc ? "default" : "disabled"}
+                                                        />
+                                                    </IconButton>
                                                 </ButtonGroup>
 
                                             </Grid>
@@ -106,8 +122,9 @@ export default function ItemTable({ data }) {
                         prepareRow(row);
                         return (
                             <TableRow
-                                onClick={() => history.push(`/${row.original.queue}/${row.original.number}`)}
-                                className={classes.bandedRows} {...row.getRowProps()}>
+                                onClick={() => {history.push(`/${row.original.queue}/${row.original.number}`);}}
+                                className={classes.bandedRows}
+                                {...row.getRowProps()} >
                                 {row.cells.map(cell => (
                                     <TableCell {...cell.getCellProps()}>
                                         {cell.render("Cell")}