put pack the styles minus the mobil hook
This commit is contained in:
csawatzky
parent
a48145b25e
commit
17c018c545
1 changed files with 64 additions and 64 deletions
|
|
@ -6,58 +6,58 @@ import React from "react";
|
|||
import { useMobile } from "hooks";
|
||||
import classNames from "classnames";
|
||||
|
||||
// const useStyles = makeStyles((theme: Theme) => {
|
||||
// const isMobile = useMobile()
|
||||
// return ({
|
||||
// gutter: {
|
||||
// backgroundColor: darken(theme.palette.background.paper, 0.05),
|
||||
// border: "none"
|
||||
// },
|
||||
// // tableContainer: {
|
||||
// // // margin: theme.spacing(1),
|
||||
// // // [theme.breakpoints.up("sm")]: {
|
||||
// // // margin: theme.spacing(2)
|
||||
// // // },
|
||||
// // // width: "auto"
|
||||
// // },
|
||||
// title: {
|
||||
// padding: theme.spacing(1),
|
||||
// },
|
||||
// subtitle: {
|
||||
// padding: theme.spacing(1),
|
||||
// marginTop: theme.spacing(-2),
|
||||
// },
|
||||
// titleComp: {
|
||||
// padding: theme.spacing(1),
|
||||
// marginLeft: theme.spacing(-1)
|
||||
// },
|
||||
// subtitleComp: {
|
||||
// padding: theme.spacing(1),
|
||||
// marginTop: theme.spacing(-2),
|
||||
// marginLeft: theme.spacing(-1),
|
||||
// },
|
||||
// titleContainer: {
|
||||
// border: "none",
|
||||
// },
|
||||
// searchContainer: {
|
||||
// border: "none",
|
||||
// textAlign: "right",
|
||||
// },
|
||||
// mobileTitleBox: {
|
||||
// margin: theme.spacing(1),
|
||||
// marginBottom: theme.spacing(1.5),
|
||||
// },
|
||||
// card: {
|
||||
// margin: theme.spacing(1),
|
||||
// },
|
||||
// rowHover: {
|
||||
// cursor: "pointer",
|
||||
// "&:hover": {
|
||||
// backgroundColor: !isMobile && "rgba(150, 150, 150, 0.15)",
|
||||
// }
|
||||
// }
|
||||
// })},
|
||||
// );
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
//const isMobile = useMobile()
|
||||
return ({
|
||||
gutter: {
|
||||
backgroundColor: darken(theme.palette.background.paper, 0.05),
|
||||
border: "none"
|
||||
},
|
||||
tableContainer: {
|
||||
// margin: theme.spacing(1),
|
||||
// [theme.breakpoints.up("sm")]: {
|
||||
// margin: theme.spacing(2)
|
||||
// },
|
||||
// width: "auto"
|
||||
},
|
||||
title: {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
subtitle: {
|
||||
padding: theme.spacing(1),
|
||||
marginTop: theme.spacing(-2),
|
||||
},
|
||||
titleComp: {
|
||||
padding: theme.spacing(1),
|
||||
marginLeft: theme.spacing(-1)
|
||||
},
|
||||
subtitleComp: {
|
||||
padding: theme.spacing(1),
|
||||
marginTop: theme.spacing(-2),
|
||||
marginLeft: theme.spacing(-1),
|
||||
},
|
||||
titleContainer: {
|
||||
border: "none",
|
||||
},
|
||||
searchContainer: {
|
||||
border: "none",
|
||||
textAlign: "right",
|
||||
},
|
||||
mobileTitleBox: {
|
||||
margin: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1.5),
|
||||
},
|
||||
card: {
|
||||
margin: theme.spacing(1),
|
||||
},
|
||||
rowHover: {
|
||||
cursor: "pointer",
|
||||
// "&:hover": {
|
||||
// backgroundColor: !isMobile && "rgba(150, 150, 150, 0.15)",
|
||||
// }
|
||||
}
|
||||
})},
|
||||
);
|
||||
|
||||
export interface Column<T> {
|
||||
title: string;
|
||||
|
|
@ -122,7 +122,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
mobileView,
|
||||
hidePagination
|
||||
} = props
|
||||
//const classes = useStyles();
|
||||
const classes = useStyles();
|
||||
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
|
||||
const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
|
||||
const title = typeof(props.title) === "function" ? props.title() : props.title
|
||||
|
|
@ -230,12 +230,12 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
const renderTitle = () => {
|
||||
if (typeof(title) === "string" ) return (
|
||||
<Typography variant="h5" /*className={classes.title}*/>
|
||||
<Typography variant="h5" className={classes.title}>
|
||||
{title}
|
||||
</Typography>
|
||||
)
|
||||
if (title) return (
|
||||
<Box /*className={classes.titleComp}*/>
|
||||
<Box className={classes.titleComp}>
|
||||
{title}
|
||||
</Box>
|
||||
)
|
||||
|
|
@ -244,12 +244,12 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
const renderSubtitle = () => {
|
||||
if (typeof(subtitle) === "string" ) return (
|
||||
<Typography variant="body2" color="textSecondary" /*className={classes.subtitle}*/>
|
||||
<Typography variant="body2" color="textSecondary" className={classes.subtitle}>
|
||||
{subtitle}
|
||||
</Typography>
|
||||
)
|
||||
if (subtitle) return (
|
||||
<Box /*className={classes.subtitleComp}*/>
|
||||
<Box className={classes.subtitleComp}>
|
||||
{subtitle}
|
||||
</Box>
|
||||
)
|
||||
|
|
@ -309,19 +309,19 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
if (isMobile || mobileView) return (
|
||||
<Box>
|
||||
<Box /*className={classes.mobileTitleBox}*/>
|
||||
<Box className={classes.mobileTitleBox}>
|
||||
{renderTitle()}
|
||||
{renderSubtitle()}
|
||||
{setSearchText && searchBar()}
|
||||
</Box>
|
||||
{rows.map((row, index) => {
|
||||
return (
|
||||
<Card /*className={classNames(classes.card, onRowClick&&classes.rowHover)}*/ key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
|
||||
<Card className={classNames(classes.card, onRowClick&&classes.rowHover)} key={"mobile-card-"+index} onClick={() => onRowClick&&onRowClick(row)}>
|
||||
{renderMobileRow(row)}
|
||||
{renderGutter &&
|
||||
<>
|
||||
<Divider/>
|
||||
<Collapse /*className={classes.gutter}*/ in={openGutters.includes(index)} >
|
||||
<Collapse className={classes.gutter} in={openGutters.includes(index)} >
|
||||
{renderGutter(row)}
|
||||
</Collapse>
|
||||
{openGutters.includes(index) && <Divider/>}
|
||||
|
|
@ -377,7 +377,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
|
||||
return (
|
||||
<TableContainer /*className={classes.tableContainer}*/ component={Paper}>
|
||||
<TableContainer className={classes.tableContainer} component={Paper}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
|
||||
|
|
@ -396,7 +396,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
{actions && actions}
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
{setSearchText &&<Box /*className={classes.searchContainer}*/>
|
||||
{setSearchText &&<Box className={classes.searchContainer}>
|
||||
{searchBar()}
|
||||
</Box>}
|
||||
</Grid2>
|
||||
|
|
@ -459,7 +459,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
// if (filterList.includes()) return null
|
||||
return (
|
||||
<React.Fragment key={"row-"+index}>
|
||||
<TableRow onClick={() => onRowClick&&onRowClick(row)} /*className={onRowClick ? classes.rowHover : undefined}*/>
|
||||
<TableRow onClick={() => onRowClick&&onRowClick(row)} className={onRowClick ? classes.rowHover : undefined}>
|
||||
{rowSelect &&
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
|
|
@ -508,7 +508,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
}
|
||||
</TableRow>
|
||||
{renderGutter &&
|
||||
<TableRow /*className={classes.gutter}*/>
|
||||
<TableRow className={classes.gutter}>
|
||||
<TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}>
|
||||
<Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit>
|
||||
{renderGutter(row)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue