Skip to content

Commit

Permalink
Refactored code to reduce number of props for ItemTableSortButtons co…
Browse files Browse the repository at this point in the history 
…mponent; added prop types to ItemTableSortButtons; renamed folder to use same naming convention
  • Loading branch information
@wrigh393
wrigh393 committed Feb 3, 2021
1 parent 9aa5321 commit 2595643
Show file tree
Hide file tree
Showing 6 changed files with 104 additions and 61 deletions.
76 changes: 46 additions & 30 deletions src/components/ItemTable/ItemTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
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, Grid, makeStyles, useTheme } from "@material-ui/core";
import { makeStyles, useTheme, TableContainer, Table, TableHead, TableRow, TableCell, Grid, TableBody, } from "@material-ui/core";
import { useHistory } from "react-router-dom";
import RelativeTime from "react-relative-time";
import ItemTableFilter from "../ItemTableFilter/";
import ItemtTableSortButtons from "../ItemTableSortButtons.js";
import ItemtTableSortButtons from "../ItemTableSortButtons/"

export default function ItemTable({ data, rowCanBeSelected }) {
const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
Expand Down Expand Up @@ -71,37 +71,53 @@ export default function ItemTable({ data, rowCanBeSelected }) {

return (
<TableContainer>
<Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>
<Table {...getTableProps} aria-label="Table of Queue Items" size="small" classes={{ root: classes.tableMargin }}>
<TableHead>
{headerGroups.map(headerGroup => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<Grid container spacing={0}>
<TableCell {...column.getHeaderProps()} classes={{ root: classes.tableHeaderPadding }}>
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
</Grid>
<Grid item sm={2} alignItems='center' justify='center'>
<ItemtTableSortButtons
onClickAsc={_ => {
const isSortedAsc = column.isSorted && !column.isSortedDesc;
isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false);
}}
onClickDesc={_ => {
const isSortedDesc = column.isSorted && column.isSortedDesc;
isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
}}
colorAsc={column.isSorted && column.isSortedDesc === false ? "secondary" : "default"}
colorDesc={column.isSorted && column.isSortedDesc ? "secondary" : "default"}
columnSortAscProps={column.getSortByToggleProps()}
columnSortDescProps={column.getSortByToggleProps(column.isSortedDesc)}
/>
{headerGroup.headers.map(column => {
// Determine sort directions
const isSortedAsc = column.isSorted && !column.isSortedDesc;
const isSortedDesc = column.isSorted && column.isSortedDesc;

return (
<Grid container spacing={0}>
<TableCell
{...column.getHeaderProps()}
classes={{ root: classes.tableHeaderPadding }}
>
<Grid container spacing={0}>
<Grid item sm={10} >
{column.render("Filter")}
</Grid>
<Grid item sm={2} alignItems='center' justify='center'>
<ItemtTableSortButtons
sortAscArrowProps={{
...column.getSortByToggleProps(),
onClick: _ => (isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false))
}}
sortDescArrowProps={{
...column.getSortByToggleProps(),
onClick: _ => (isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true))
}}
sortDirection={(_ => {
if (isSortedAsc) {
return 'asc';
}
else if (isSortedDesc) {
return 'desc';
}
else {
return undefined;
}
})()}
/>
</Grid>
</Grid>
</Grid>
</TableCell>
</Grid>
))}
</TableCell>
</Grid>
);
})}
</TableRow>
))}
</TableHead>
Expand All @@ -123,7 +139,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
{...row.getRowProps()} >
{row.cells.map(cell => (
<TableCell
classes={{ root: classes.columnBorders,}}
classes={{ root: classes.columnBorders, }}
{...cell.getCellProps()}
>
{cell.render("Cell")}
Expand Down
31 changes: 0 additions & 31 deletions src/components/ItemTableSortButtons.js/ItemTableSortButtons.js
View file

This file was deleted.

Empty file removed src/components/ItemTableSortButtons.js/ItemTableSortButtons.md
View file
Empty file.
43 changes: 43 additions & 0 deletions src/components/ItemTableSortButtons/ItemTableSortButtons.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import PropTypes from "prop-types";
import { ButtonGroup, IconButton } from "@material-ui/core";
import { ArrowDownward, ArrowUpward } from "@material-ui/icons";

export default function ItemTableSortButtons({ sortDirection, sortAscArrowProps, sortDescArrowProps }) {
return (
<ButtonGroup orientation="vertical" size="small">
<IconButton edge="start">
<ArrowUpward
{...sortAscArrowProps}
// Inherit fontsize from containing element to avoid overflow.
fontSize="inherit"
color={sortDirection === 'asc' ? "secondary" : "default"}
/>
</IconButton>
<IconButton edge="start">
<ArrowDownward
{...sortDescArrowProps}
// Inherit fontsize from containing element to avoid overflow.
fontSize="inherit"
color={sortDirection === 'desc' ? "secondary" : "default"}
/>
</IconButton>
</ButtonGroup>
)
}

ItemTableSortButtons.propTypes = {
/** String representing sort direction. */
"sortDirection": PropTypes.oneOf(['asc', 'desc', undefined ]),
/** Props passed to ArrowUpward component. */
"sortAscArrowProps": PropTypes.object,
/** Props passed to ArrowDownward component. */
"sortDescArrowProps": PropTypes.object
};

ItemTableSortButtons.defaultProps = {
"sortDirection": undefined,
"sortAscArrowProps": { onClick: _ => alert("No onClick function set. This does nothing.") },
"sortDescArrowProps": { onClick: _ => alert("No onClick function set. This does nothing.") }
};

15 changes: 15 additions & 0 deletions src/components/ItemTableSortButtons/ItemTableSortButtons.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
The ItemTableSortButtons are used to sort in ascending or descending order based on which button is selected. It is to be used with the [ItemTable](/#/Components/ItemTable).

```jsx
import React, { useState, useEffect } from "react";





<ItemTableSortButtons/>
```

```jsx static
<ItemTableSortButtons sortDirection="directionOfSort" sortAscArrowProps={someProps} sortDescArrowProps={someProps}/>
```
0 ...mponents/ItemTableSortButtons.js/index.js → src/components/ItemTableSortButtons/index.js
View file
File renamed without changes.

0 comments on commit 2595643

Please sign in to comment.