brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

put pack the styles minus the mobil hook

Browse source
This commit is contained in:
csawatzky 2025-04-10 14:17:55 -06:00
parent a48145b25e
commit 17c018c545
1 changed files with 64 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/common/ResponsiveTable.tsx
View file

@ -6,58 +6,58 @@ import React from "react";
import { useMobile } from "hooks"; import { useMobile } from "hooks";
import classNames from "classnames"; import classNames from "classnames";
// const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
// const isMobile = useMobile() //const isMobile = useMobile()
// return ({ return ({
// gutter: { gutter: {
// backgroundColor: darken(theme.palette.background.paper, 0.05), backgroundColor: darken(theme.palette.background.paper, 0.05),
// border: "none" border: "none"
// }, },
// // tableContainer: { tableContainer: {
// // // margin: theme.spacing(1), // margin: theme.spacing(1),
// // // [theme.breakpoints.up("sm")]: { // [theme.breakpoints.up("sm")]: {
// // // margin: theme.spacing(2) // margin: theme.spacing(2)
// // // }, // },
// // // width: "auto" // width: "auto"
// // }, },
// title: { title: {
// padding: theme.spacing(1), padding: theme.spacing(1),
// }, },
// subtitle: { subtitle: {
// padding: theme.spacing(1), padding: theme.spacing(1),
// marginTop: theme.spacing(-2), marginTop: theme.spacing(-2),
// }, },
// titleComp: { titleComp: {
// padding: theme.spacing(1), padding: theme.spacing(1),
// marginLeft: theme.spacing(-1) marginLeft: theme.spacing(-1)
// }, },
// subtitleComp: { subtitleComp: {
// padding: theme.spacing(1), padding: theme.spacing(1),
// marginTop: theme.spacing(-2), marginTop: theme.spacing(-2),
// marginLeft: theme.spacing(-1), marginLeft: theme.spacing(-1),
// }, },
// titleContainer: { titleContainer: {
// border: "none", border: "none",
// }, },
// searchContainer: { searchContainer: {
// border: "none", border: "none",
// textAlign: "right", textAlign: "right",
// }, },
// mobileTitleBox: { mobileTitleBox: {
// margin: theme.spacing(1), margin: theme.spacing(1),
// marginBottom: theme.spacing(1.5), marginBottom: theme.spacing(1.5),
// }, },
// card: { card: {
// margin: theme.spacing(1), margin: theme.spacing(1),
// }, },
// rowHover: { rowHover: {
// cursor: "pointer", cursor: "pointer",
// "&:hover": { // "&:hover": {
// backgroundColor: !isMobile && "rgba(150, 150, 150, 0.15)", // backgroundColor: !isMobile && "rgba(150, 150, 150, 0.15)",
// } // }
// } }
// })}, })},
// ); );
export interface Column<T> { export interface Column<T> {
title: string; title: string;
@ -122,7 +122,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
mobileView, mobileView,
hidePagination hidePagination
} = props } = props
//const classes = useStyles(); const classes = useStyles();
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
const title = typeof(props.title) === "function" ? props.title() : props.title 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 = () => { const renderTitle = () => {
if (typeof(title) === "string" ) return ( if (typeof(title) === "string" ) return (
<Typography variant="h5" /*className={classes.title}*/> <Typography variant="h5" className={classes.title}>
{title} {title}
</Typography> </Typography>
) )
if (title) return ( if (title) return (
<Box /*className={classes.titleComp}*/> <Box className={classes.titleComp}>
{title} {title}
</Box> </Box>
) )
@ -244,12 +244,12 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const renderSubtitle = () => { const renderSubtitle = () => {
if (typeof(subtitle) === "string" ) return ( if (typeof(subtitle) === "string" ) return (
<Typography variant="body2" color="textSecondary" /*className={classes.subtitle}*/> <Typography variant="body2" color="textSecondary" className={classes.subtitle}>
{subtitle} {subtitle}
</Typography> </Typography>
) )
if (subtitle) return ( if (subtitle) return (
<Box /*className={classes.subtitleComp}*/> <Box className={classes.subtitleComp}>
{subtitle} {subtitle}
</Box> </Box>
) )
@ -309,19 +309,19 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
if (isMobile || mobileView) return ( if (isMobile || mobileView) return (
<Box> <Box>
<Box /*className={classes.mobileTitleBox}*/> <Box className={classes.mobileTitleBox}>
{renderTitle()} {renderTitle()}
{renderSubtitle()} {renderSubtitle()}
{setSearchText && searchBar()} {setSearchText && searchBar()}
</Box> </Box>
{rows.map((row, index) => { {rows.map((row, index) => {
return ( 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)} {renderMobileRow(row)}
{renderGutter && {renderGutter &&
<> <>
<Divider/> <Divider/>
<Collapse /*className={classes.gutter}*/ in={openGutters.includes(index)} > <Collapse className={classes.gutter} in={openGutters.includes(index)} >
{renderGutter(row)} {renderGutter(row)}
</Collapse> </Collapse>
{openGutters.includes(index) && <Divider/>} {openGutters.includes(index) && <Divider/>}
@ -377,7 +377,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
return ( return (
<TableContainer /*className={classes.tableContainer}*/ component={Paper}> <TableContainer className={classes.tableContainer} component={Paper}>
<Table> <Table>
<TableHead> <TableHead>
@ -396,7 +396,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
{actions && actions} {actions && actions}
</Grid2> </Grid2>
<Grid2> <Grid2>
{setSearchText &&<Box /*className={classes.searchContainer}*/> {setSearchText &&<Box className={classes.searchContainer}>
{searchBar()} {searchBar()}
</Box>} </Box>}
</Grid2> </Grid2>
@ -459,7 +459,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
// if (filterList.includes()) return null // if (filterList.includes()) return null
return ( return (
<React.Fragment key={"row-"+index}> <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 && {rowSelect &&
<TableCell> <TableCell>
<Checkbox <Checkbox
@ -508,7 +508,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
} }
</TableRow> </TableRow>
{renderGutter && {renderGutter &&
<TableRow /*className={classes.gutter}*/> <TableRow className={classes.gutter}>
<TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}> <TableCell colSpan={6} sx={{padding:0, margin: 0, border: "none"}}>
<Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit> <Collapse in={openGutters.includes(index)} timeout="auto" unmountOnExit>
{renderGutter(row)} {renderGutter(row)}