103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Grid,
|
|
Theme,
|
|
Typography
|
|
} from "@mui/material";
|
|
import React from "react";
|
|
// import ScrollMenu from "react-horizontal-scroll-menu";
|
|
// import { useHistory } from "react-router";
|
|
import { ArrowForward, ArrowBack } from "@mui/icons-material";
|
|
import { useMobile } from "hooks";
|
|
import { GrainBag } from "models/GrainBag";
|
|
import GrainBagCard from "./grainBagCard";
|
|
import { makeStyles } from "@mui/styles";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
interface Props {
|
|
grainBags: GrainBag[];
|
|
title?: string;
|
|
gridView?: boolean;
|
|
}
|
|
|
|
const useStyles = makeStyles((theme: Theme) => {
|
|
return ({
|
|
gridListTile: {
|
|
minHeight: "184px",
|
|
height: "auto !important",
|
|
width: "184px",
|
|
padding: 2
|
|
},
|
|
hidden: {
|
|
visibility: "hidden"
|
|
}
|
|
})
|
|
});
|
|
|
|
export default function GrainBagList(props: Props) {
|
|
const { grainBags, title, gridView } = props;
|
|
const classes = useStyles();
|
|
// const history = useHistory();
|
|
const navigate = useNavigate()
|
|
const isMobile = useMobile();
|
|
|
|
const goToBag = (i: number) => {
|
|
let path = "/grainbags/" + grainBags[i].key();
|
|
// history.replace(path);
|
|
navigate(path, { replace: true })
|
|
};
|
|
|
|
const scroll = () => {
|
|
return (
|
|
<React.Fragment>
|
|
{/* <ScrollMenu
|
|
wheel={false}
|
|
alignCenter={false}
|
|
inertiaScrolling
|
|
hideArrows
|
|
hideSingleArrow
|
|
arrowDisabledClass={classes.hidden}
|
|
onSelect={e => {
|
|
goToBag(e as number);
|
|
}}
|
|
arrowLeft={
|
|
<Button style={{ height: 184, display: isMobile ? "none" : "block" }}>
|
|
<ArrowBack />
|
|
</Button>
|
|
}
|
|
arrowRight={
|
|
<Button style={{ height: 184, display: isMobile ? "none" : "block" }}>
|
|
<ArrowForward />
|
|
</Button>
|
|
}
|
|
data={grainBags.map((b, i) => (
|
|
<Box key={i} className={classes.gridListTile}>
|
|
<GrainBagCard grainBag={b} />
|
|
</Box>
|
|
))}
|
|
/> */}
|
|
</React.Fragment>
|
|
);
|
|
};
|
|
|
|
const grid = () => {
|
|
return (
|
|
<Grid container direction="row">
|
|
{grainBags.map((b, i) => (
|
|
<Box key={i} className={classes.gridListTile} onClick={() => goToBag(i)}>
|
|
<GrainBagCard grainBag={b} />
|
|
</Box>
|
|
))}
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{title && <Typography>{title}</Typography>}
|
|
{/* {gridView ? grid() : scroll()} */}
|
|
{grid()}
|
|
</React.Fragment>
|
|
);
|
|
}
|