155 lines
4 KiB
TypeScript
155 lines
4 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Grid2 as Grid,
|
|
Typography
|
|
} from "@mui/material";
|
|
import { Bin } from "models";
|
|
import React, { useContext, useState } from "react";
|
|
import { ArrowForward, ArrowBack, Replay } from "@mui/icons-material";
|
|
import { useMobile } from "hooks";
|
|
import BinCardV2 from "./BinCardV2";
|
|
import { makeStyles } from "@mui/styles";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
|
|
import 'react-horizontal-scrolling-menu/dist/styles.css';
|
|
|
|
interface Props {
|
|
bins: Bin[];
|
|
duplicateBin: (bin: Bin) => void;
|
|
title?: string;
|
|
gridView?: boolean;
|
|
loadMore?: () => void;
|
|
//startingTranslate: number;
|
|
valDisplay?: "high" | "low" | "average";
|
|
insert?: boolean
|
|
}
|
|
|
|
const useStyles = makeStyles((_theme) => {
|
|
return ({
|
|
gridListTile: {
|
|
position: "relative",
|
|
minHeight: "233px",
|
|
height: "auto !important",
|
|
padding: 2
|
|
},
|
|
hidden: {
|
|
visibility: "hidden"
|
|
}
|
|
})
|
|
});
|
|
|
|
export default function BinsList(props: Props) {
|
|
const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert } = props;
|
|
const classes = useStyles();
|
|
// const history = useHistory();
|
|
const navigate = useNavigate()
|
|
const isMobile = useMobile();
|
|
const [duplicate, setDuplicate] = useState(false);
|
|
//const scrollRef = useRef<any>(null);
|
|
|
|
const goToBin = (i: number) => {
|
|
let path = bins[i].key();
|
|
navigate(path, { state: {bin: bins[i]} });
|
|
};
|
|
|
|
const leftArrow = () => {
|
|
const visibility = useContext(VisibilityContext);
|
|
//const isFirstVisible = visibility.useIsVisible('first', false)
|
|
return (
|
|
<Button onClick={() => visibility.scrollPrev()} style={{ height: 233, display: isMobile ? "none" : "block" }}>
|
|
<ArrowBack />
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const rightArrow = () => {
|
|
const visibility = useContext(VisibilityContext);
|
|
const isLastVisible = visibility.useIsVisible('last', false)
|
|
return (
|
|
<Button
|
|
style={{ height: 233, display: isMobile ? "none" : "block" }}
|
|
onClick={() => {
|
|
if (isLastVisible) {
|
|
loadMore && loadMore()
|
|
}else {
|
|
visibility.scrollNext()
|
|
}
|
|
}}>
|
|
{isLastVisible ? <Replay /> : <ArrowForward />}
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
const scroll = () => {
|
|
//const visibility = useContext(VisibilityContext);
|
|
return (
|
|
<ScrollMenu
|
|
onUpdate={(visibility) => {
|
|
console.log(visibility.useIsVisible('last', false))
|
|
}}
|
|
LeftArrow={leftArrow}
|
|
RightArrow={rightArrow}>
|
|
{bins.map((b, i) => (
|
|
<Box
|
|
key={i}
|
|
className={classes.gridListTile}
|
|
onClick={() => {
|
|
!duplicate && goToBin(i)
|
|
}}>
|
|
<BinCardV2
|
|
bin={b}
|
|
duplicateBin={duplicateBin}
|
|
dupHovered={setDuplicate}
|
|
valDisplay={valDisplay}
|
|
/>
|
|
</Box>
|
|
))}
|
|
</ScrollMenu>
|
|
)
|
|
}
|
|
|
|
const grid = () => {
|
|
return (
|
|
<Grid container direction="row">
|
|
{bins.map((b, i) =>
|
|
(
|
|
<Grid
|
|
size={insert ? {
|
|
xs: 6,
|
|
sm: 6,
|
|
md: 4,
|
|
lg: 3,
|
|
} : {
|
|
xs: 6,
|
|
sm: 4,
|
|
md: 3,
|
|
lg: 1.5,
|
|
}}
|
|
key={i}
|
|
className={classes.gridListTile}
|
|
onClick={() => {
|
|
!duplicate && goToBin(i)
|
|
}}>
|
|
<BinCardV2
|
|
bin={b}
|
|
duplicateBin={duplicateBin}
|
|
dupHovered={setDuplicate}
|
|
valDisplay={valDisplay}
|
|
/>
|
|
</Grid>
|
|
)
|
|
)}
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<React.Fragment>
|
|
{title && <Typography>{title}</Typography>}
|
|
{gridView ? grid() : scroll()}
|
|
{/* {grid()} */}
|
|
{/* {scroll()} */}
|
|
</React.Fragment>
|
|
);
|
|
}
|