commented out everything
This commit is contained in:
csawatzky
parent
d9f57f8057
commit
cad5ac3d7b
1 changed files with 195 additions and 193 deletions
|
|
@ -13,13 +13,13 @@ const useStyles = makeStyles((theme: Theme) => {
|
|||
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"
|
||||
},
|
||||
// tableContainer: {
|
||||
// // margin: theme.spacing(1),
|
||||
// // [theme.breakpoints.up("sm")]: {
|
||||
// // margin: theme.spacing(2)
|
||||
// // },
|
||||
// // width: "auto"
|
||||
// },
|
||||
title: {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
|
|
@ -96,31 +96,31 @@ interface Props<T> {
|
|||
|
||||
export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
||||
const {
|
||||
rows,
|
||||
total,
|
||||
page,
|
||||
pageSize,
|
||||
setPage,
|
||||
handleRowsPerPageChange,
|
||||
// title,
|
||||
// subtitle,
|
||||
renderGutter,
|
||||
gutterPadding,
|
||||
setSearchText,
|
||||
isLoading,
|
||||
multiGutter,
|
||||
// columns,
|
||||
rowsPerPageOptions,
|
||||
noDataMessage,
|
||||
renderMobile,
|
||||
hideKeys,
|
||||
onRowClick,
|
||||
actions,
|
||||
rowSelect,
|
||||
selectedRows,
|
||||
customElement,
|
||||
mobileView,
|
||||
hidePagination
|
||||
// rows,
|
||||
// total,
|
||||
// page,
|
||||
// pageSize,
|
||||
// setPage,
|
||||
// handleRowsPerPageChange,
|
||||
// // title,
|
||||
// // subtitle,
|
||||
// renderGutter,
|
||||
// gutterPadding,
|
||||
// setSearchText,
|
||||
// isLoading,
|
||||
// multiGutter,
|
||||
// // columns,
|
||||
// rowsPerPageOptions,
|
||||
// noDataMessage,
|
||||
// renderMobile,
|
||||
// hideKeys,
|
||||
// onRowClick,
|
||||
// actions,
|
||||
// rowSelect,
|
||||
// selectedRows,
|
||||
// customElement,
|
||||
// mobileView,
|
||||
// hidePagination
|
||||
} = props
|
||||
const classes = useStyles();
|
||||
const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
|
||||
|
|
@ -136,173 +136,175 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
|
||||
const filterKey = window.location.pathname.split('/').pop() + "-table-filter-list";
|
||||
|
||||
const [filterList, setFilterList] = useState<string[]>(() => {
|
||||
const saved = localStorage.getItem(filterKey);
|
||||
return saved ? JSON.parse(saved) : [];
|
||||
});
|
||||
console.log("Commented out nearly everything")
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(filterKey, JSON.stringify(filterList));
|
||||
}, [filterList])
|
||||
// const [filterList, setFilterList] = useState<string[]>(() => {
|
||||
// const saved = localStorage.getItem(filterKey);
|
||||
// return saved ? JSON.parse(saved) : [];
|
||||
// });
|
||||
|
||||
const openColumnMenu = (event: any) => {
|
||||
setColumnAnchor(event.currentTarget);
|
||||
// setUserMenuIsOpen(true);
|
||||
};
|
||||
// useEffect(() => {
|
||||
// localStorage.setItem(filterKey, JSON.stringify(filterList));
|
||||
// }, [filterList])
|
||||
|
||||
const closeColumnMenu = () => {
|
||||
setColumnAnchor(null);
|
||||
// setUserMenuIsOpen(true);
|
||||
};
|
||||
// const openColumnMenu = (event: any) => {
|
||||
// setColumnAnchor(event.currentTarget);
|
||||
// // setUserMenuIsOpen(true);
|
||||
// };
|
||||
|
||||
useEffect(() => {
|
||||
if (!setSearchText) return;
|
||||
if (inputSearchText === undefined) return;
|
||||
setHandler(setTimeout(() => {
|
||||
setSearchText(inputSearchText);
|
||||
}, 750)); // Delay of 750ms
|
||||
// const closeColumnMenu = () => {
|
||||
// setColumnAnchor(null);
|
||||
// // setUserMenuIsOpen(true);
|
||||
// };
|
||||
|
||||
return () => clearTimeout(handler); // Cleanup on change
|
||||
}, [inputSearchText]);
|
||||
// useEffect(() => {
|
||||
// if (!setSearchText) return;
|
||||
// if (inputSearchText === undefined) return;
|
||||
// setHandler(setTimeout(() => {
|
||||
// setSearchText(inputSearchText);
|
||||
// }, 750)); // Delay of 750ms
|
||||
|
||||
const handleCollapse = (index: number, event: React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>) => {
|
||||
event.stopPropagation();
|
||||
if (multiGutter) {
|
||||
if (openGutters.includes(index)) {
|
||||
setOpenGutters(openGutters => openGutters.filter(num => num !== index));
|
||||
} else {
|
||||
setOpenGutters(openGutters => [...openGutters, index]);
|
||||
}
|
||||
} else {
|
||||
if (openGutters.includes(index)) {
|
||||
setOpenGutters([])
|
||||
} else {
|
||||
setOpenGutters([index])
|
||||
}
|
||||
}
|
||||
}
|
||||
// return () => clearTimeout(handler); // Cleanup on change
|
||||
// }, [inputSearchText]);
|
||||
|
||||
const handleKeyDown = (e: any) => {
|
||||
if (e.key === 'Enter') {
|
||||
if (setSearchText) setSearchText(inputSearchText);
|
||||
clearTimeout(handler)
|
||||
}
|
||||
};
|
||||
// const handleCollapse = (index: number, event: React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>) => {
|
||||
// event.stopPropagation();
|
||||
// if (multiGutter) {
|
||||
// if (openGutters.includes(index)) {
|
||||
// setOpenGutters(openGutters => openGutters.filter(num => num !== index));
|
||||
// } else {
|
||||
// setOpenGutters(openGutters => [...openGutters, index]);
|
||||
// }
|
||||
// } else {
|
||||
// if (openGutters.includes(index)) {
|
||||
// setOpenGutters([])
|
||||
// } else {
|
||||
// setOpenGutters([index])
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setOpenGutters([])
|
||||
setPage(page)
|
||||
}
|
||||
// const handleKeyDown = (e: any) => {
|
||||
// if (e.key === 'Enter') {
|
||||
// if (setSearchText) setSearchText(inputSearchText);
|
||||
// clearTimeout(handler)
|
||||
// }
|
||||
// };
|
||||
|
||||
const clearSearch = () => {
|
||||
setInputSearchText("")
|
||||
}
|
||||
// const handlePageChange = (page: number) => {
|
||||
// setOpenGutters([])
|
||||
// setPage(page)
|
||||
// }
|
||||
|
||||
const searchBar = () => {
|
||||
return (
|
||||
<TextField
|
||||
fullWidth
|
||||
variant="standard"
|
||||
placeholder="Search..."
|
||||
className={classes.title}
|
||||
value={inputSearchText}
|
||||
onKeyDown={handleKeyDown}
|
||||
onChange={e => setInputSearchText(e.currentTarget.value)}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
</InputAdornment>
|
||||
),
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton onClick={clearSearch}>
|
||||
<Close />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
// const clearSearch = () => {
|
||||
// setInputSearchText("")
|
||||
// }
|
||||
|
||||
const renderTitle = () => {
|
||||
if (typeof(title) === "string" ) return (
|
||||
<Typography variant="h5" className={classes.title}>
|
||||
{title}
|
||||
</Typography>
|
||||
)
|
||||
if (title) return (
|
||||
<Box className={classes.titleComp}>
|
||||
{title}
|
||||
</Box>
|
||||
)
|
||||
return null
|
||||
}
|
||||
// const searchBar = () => {
|
||||
// return (
|
||||
// <TextField
|
||||
// fullWidth
|
||||
// variant="standard"
|
||||
// placeholder="Search..."
|
||||
// className={classes.title}
|
||||
// value={inputSearchText}
|
||||
// onKeyDown={handleKeyDown}
|
||||
// onChange={e => setInputSearchText(e.currentTarget.value)}
|
||||
// InputProps={{
|
||||
// startAdornment: (
|
||||
// <InputAdornment position="start">
|
||||
// <Search />
|
||||
// </InputAdornment>
|
||||
// ),
|
||||
// endAdornment: (
|
||||
// <InputAdornment position="end">
|
||||
// <IconButton onClick={clearSearch}>
|
||||
// <Close />
|
||||
// </IconButton>
|
||||
// </InputAdornment>
|
||||
// ),
|
||||
// }}
|
||||
// />
|
||||
// )
|
||||
// }
|
||||
|
||||
const renderSubtitle = () => {
|
||||
if (typeof(subtitle) === "string" ) return (
|
||||
<Typography variant="body2" color="textSecondary" className={classes.subtitle}>
|
||||
{subtitle}
|
||||
</Typography>
|
||||
)
|
||||
if (subtitle) return (
|
||||
<Box className={classes.subtitleComp}>
|
||||
{subtitle}
|
||||
</Box>
|
||||
)
|
||||
return null
|
||||
}
|
||||
// const renderTitle = () => {
|
||||
// if (typeof(title) === "string" ) return (
|
||||
// <Typography variant="h5" className={classes.title}>
|
||||
// {title}
|
||||
// </Typography>
|
||||
// )
|
||||
// if (title) return (
|
||||
// <Box className={classes.titleComp}>
|
||||
// {title}
|
||||
// </Box>
|
||||
// )
|
||||
// return null
|
||||
// }
|
||||
|
||||
function capitalize(val: any) {
|
||||
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
}
|
||||
// const renderSubtitle = () => {
|
||||
// if (typeof(subtitle) === "string" ) return (
|
||||
// <Typography variant="body2" color="textSecondary" className={classes.subtitle}>
|
||||
// {subtitle}
|
||||
// </Typography>
|
||||
// )
|
||||
// if (subtitle) return (
|
||||
// <Box className={classes.subtitleComp}>
|
||||
// {subtitle}
|
||||
// </Box>
|
||||
// )
|
||||
// return null
|
||||
// }
|
||||
|
||||
const renderMobileRow = (row: T) => {
|
||||
if (renderMobile) return (
|
||||
renderMobile(row)
|
||||
)
|
||||
if (columns) {
|
||||
return (
|
||||
<Grid2 container direction={"row"} spacing={1} >
|
||||
{columns.map((column, index) => {
|
||||
return (
|
||||
<React.Fragment key={"mobile-row-column-"+index}>
|
||||
{ !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}>
|
||||
<Typography fontWeight={"bold"} >
|
||||
{column.title+": "}
|
||||
</Typography>
|
||||
</Grid2>}
|
||||
<Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} >
|
||||
{column.render(row)}
|
||||
</Grid2>
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
</Grid2>
|
||||
)
|
||||
}
|
||||
return (
|
||||
Object.keys(row).map((key, index) => {
|
||||
let value = row[key as keyof typeof row]
|
||||
// function capitalize(val: any) {
|
||||
// return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
||||
// }
|
||||
|
||||
// const renderMobileRow = (row: T) => {
|
||||
// if (renderMobile) return (
|
||||
// renderMobile(row)
|
||||
// )
|
||||
// if (columns) {
|
||||
// return (
|
||||
// <Grid2 container direction={"row"} spacing={1} >
|
||||
// {columns.map((column, index) => {
|
||||
// return (
|
||||
// <React.Fragment key={"mobile-row-column-"+index}>
|
||||
// { !hideKeys && <Grid2 size={{ xs: 3 }} alignContent={"center"}>
|
||||
// <Typography fontWeight={"bold"} >
|
||||
// {column.title+": "}
|
||||
// </Typography>
|
||||
// </Grid2>}
|
||||
// <Grid2 size={{ xs: hideKeys ? 12 : 9 }} alignContent={"center"} >
|
||||
// {column.render(row)}
|
||||
// </Grid2>
|
||||
// </React.Fragment>
|
||||
// )
|
||||
// })}
|
||||
// </Grid2>
|
||||
// )
|
||||
// }
|
||||
// return (
|
||||
// Object.keys(row).map((key, index) => {
|
||||
// let value = row[key as keyof typeof row]
|
||||
|
||||
return (
|
||||
<Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
|
||||
<Grid2 size={{ xs: 4 }} alignContent={"center"} >
|
||||
<Typography fontWeight={"bold"} >
|
||||
{capitalize(key)+": "}
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2 size={{ xs: 8 }}>
|
||||
<Typography>
|
||||
{value+""}
|
||||
</Typography>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
)
|
||||
})
|
||||
)
|
||||
}
|
||||
// return (
|
||||
// <Grid2 container direction={"row"} key={"mobile-list-"+index} spacing={1} padding={1}>
|
||||
// <Grid2 size={{ xs: 4 }} alignContent={"center"} >
|
||||
// <Typography fontWeight={"bold"} >
|
||||
// {capitalize(key)+": "}
|
||||
// </Typography>
|
||||
// </Grid2>
|
||||
// <Grid2 size={{ xs: 8 }}>
|
||||
// <Typography>
|
||||
// {value+""}
|
||||
// </Typography>
|
||||
// </Grid2>
|
||||
// </Grid2>
|
||||
// )
|
||||
// })
|
||||
// )
|
||||
// }
|
||||
|
||||
|
||||
// if (isMobile || mobileView) return (
|
||||
|
|
@ -363,15 +365,15 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
|
|||
// </Box>
|
||||
// )
|
||||
|
||||
const filter = (colName: string) => {
|
||||
let newFilterList = [...filterList]
|
||||
if (filterList.includes(colName)) {
|
||||
newFilterList = newFilterList.filter(name => name !== colName)
|
||||
} else {
|
||||
newFilterList.push(colName)
|
||||
}
|
||||
setFilterList(newFilterList)
|
||||
}
|
||||
// const filter = (colName: string) => {
|
||||
// let newFilterList = [...filterList]
|
||||
// if (filterList.includes(colName)) {
|
||||
// newFilterList = newFilterList.filter(name => name !== colName)
|
||||
// } else {
|
||||
// newFilterList.push(colName)
|
||||
// }
|
||||
// setFilterList(newFilterList)
|
||||
// }
|
||||
|
||||
|
||||
return (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue