From c9cda61350786327b2998a7fcf8e471a4a7e23d6 Mon Sep 17 00:00:00 2001 From: Tyler Jordan Wright Date: Wed, 21 Oct 2020 17:26:55 -0400 Subject: [PATCH] Added onClick functionality, updated theme colors, removed uneeded dependencies --- package.json | 1 - src/App.js | 4 +- src/components/ItemTable/ItemTable.js | 44 ++++++++----- .../ItemTableFilter/ItemTableFilter.js | 65 +++++++++++++------ src/theme.js | 15 ++++- 5 files changed, 87 insertions(+), 42 deletions(-) diff --git a/package.json b/package.json index d2c0f1d..1737a2d 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "clsx": "^1.1.1", "history": "^5.0.0", "material-table": "^1.63.1", - "mui-datatables": "^3.4.1", "react": "^16.13.1", "react-dom": "^16.13.1", "react-scripts": "3.4.1", diff --git a/src/App.js b/src/App.js index e4968de..0587175 100644 --- a/src/App.js +++ b/src/App.js @@ -55,11 +55,11 @@ function App(){ - + - + diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js index 4a458b2..f8bfd78 100644 --- a/src/components/ItemTable/ItemTable.js +++ b/src/components/ItemTable/ItemTable.js @@ -1,11 +1,13 @@ import React, { useState, useEffect } from "react"; import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table"; -import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel, Paper, Grid } from "@material-ui/core"; +import { makeStyles, Table, TableBody, TableCell, TableHead, TableRow, TableContainer, TableSortLabel, Paper, Grid, IconButton, useTheme, } from "@material-ui/core"; import ItemTableFilter from "../ItemTableFilter/" +import { ArrowDownward } from "@material-ui/icons"; -export default function ItemTable() { +export default function ItemTable({ onRowClick, setActiveItem, setSideBarOpen }) { + const theme = useTheme(); - const useStyles = makeStyles({ + const useStyles = makeStyles(theme => ({ // Fully visible for active icons activeSortIcon: { opacity: 1, @@ -14,7 +16,12 @@ export default function ItemTable() { inactiveSortIcon: { opacity: 0.2, }, - }); + bandedRows: { + '&:nth-of-type(even)': { + backgroundColor: theme.palette.type === 'light' ? theme.palette.grey[50] : theme.palette.grey[700], + }, + }, + })); const classes = useStyles(); @@ -41,12 +48,7 @@ export default function ItemTable() { { Header: 'Date Received', accessor: 'dateReceived' }, ], []); - const { getTableProps, - getTableBodyProps, - headerGroups, - rows, - prepareRow - } = useTable( + const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable( { columns, data, @@ -61,14 +63,12 @@ export default function ItemTable() { } } }, - useFilters, - useFlexLayout, - useSortBy + useFilters, useFlexLayout, useSortBy ); return ( - +
{headerGroups.map(headerGroup => ( @@ -76,12 +76,15 @@ export default function ItemTable() { - + {column.render("Filter")} - - + + @@ -98,7 +101,12 @@ export default function ItemTable() { {rows.map((row, i) => { prepareRow(row); return ( - + { + setActiveItem(row.original); + setSideBarOpen(true); + console.log('original:', row.original); + }} + className={classes.bandedRows} {...row.getRowProps()}> {row.cells.map(cell => ( {cell.render("Cell")} diff --git a/src/components/ItemTableFilter/ItemTableFilter.js b/src/components/ItemTableFilter/ItemTableFilter.js index 5d786a5..cf03ea7 100644 --- a/src/components/ItemTableFilter/ItemTableFilter.js +++ b/src/components/ItemTableFilter/ItemTableFilter.js @@ -1,30 +1,57 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { TextField } from "@material-ui/core"; +import { TextField, useTheme, makeStyles } from "@material-ui/core"; +import { yellow } from '@material-ui/core/colors'; export default function ItemTableFilter({ label, onChange }) { - return ( - <> - - - ); + const theme = useTheme(); + const useStyles = makeStyles({ + root: { + '& label.Mui-focused': { + color: theme.palette.type === "light" ? "black" : "white", + }, + '& .MuiOutlinedInput-root': { + '& fieldset': { + borderColor: theme.palette.type === "light" ? theme.palette.action.disabled : "white", + }, + '&:hover fieldset': { + borderColor: theme.palette.type === "light" ? "black" : "white", + }, + '&.Mui-focused fieldset': { + borderColor: theme.palette.type === "light" ? "black" : "white", + }, + '&.Mui-focused label': { + borderColor: theme.palette.type === "light" ? "black" : "white", + }, + }, + }, + }); + + const classes = useStyles(); + + return ( + <> + + + ); + }; ItemTableFilter.propTypes = { - /** The label that appears inside the search box. */ - "label": PropTypes.string, - /** The callback function that sets a column's filter value. */ - "onChange": PropTypes.func.isRequired + /** The label that appears inside the search box. */ + "label": PropTypes.string, + /** The callback function that sets a column's filter value. */ + "onChange": PropTypes.func.isRequired }; ItemTableFilter.defaultProps = { - "label": "" + "label": "" } \ No newline at end of file diff --git a/src/theme.js b/src/theme.js index 37236ff..459372e 100644 --- a/src/theme.js +++ b/src/theme.js @@ -1,3 +1,4 @@ +import { cyan, deepOrange, deepPurple, lightGreen, lightBlue, teal, purple } from '@material-ui/core/colors'; import { createMuiTheme } from '@material-ui/core/styles' /** @@ -8,12 +9,22 @@ import { createMuiTheme } from '@material-ui/core/styles' * @param {boolean} [darkMode=false] Whether theme should be dark or not. * @returns {Theme} MUI Theme. */ -export default function theme(darkMode=false){ +export default function theme(darkMode = false) { return ( createMuiTheme({ "palette": { + primary: deepPurple, + + secondary: { + main: teal[200], + }, + "type": darkMode ? "dark" : "light", - } + + "edit": { + main: "#ffe56433", + } + }, }) ); } \ No newline at end of file