re-implemented horizontal scroll for the bins list with a new package

src/bin/BinsList.tsx

@@ -6,22 +6,24 @@ import {
   Typography 
 } from "@mui/material";
 import { Bin } from "models";
-import React, { useRef, useState } from "react";
+import React, { useContext, useRef, useState } from "react";
 // import ScrollMenu from "react-horizontal-scroll-menu";
 // import { useHistory } from "react-router";
-import { ArrowForward, ArrowBack } from "@mui/icons-material";
+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 { publicApiType, 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?: (newTranslation: number) => void;
-  startingTranslate: number;
+  loadMore?: () => void;
+  //startingTranslate: number;
   valDisplay?: "high" | "low" | "average";
 }
 
@@ -29,9 +31,9 @@ const useStyles = makeStyles((theme: Theme) => {
   return ({
     gridListTile: {
       position: "relative",
-      minHeight: "184px",
+      minHeight: "233px",
       height: "auto !important",
-      //width: "184px",
+      width: "184px",
       padding: 2
     },
     hidden: {
@@ -41,13 +43,13 @@ const useStyles = makeStyles((theme: Theme) => {
 });
 
 export default function BinsList(props: Props) {
-  const { bins, duplicateBin, title, gridView, loadMore, startingTranslate, valDisplay } = props;
+  const { bins, duplicateBin, title, gridView, loadMore, valDisplay } = props;
   const classes = useStyles();
   // const history = useHistory();
   const navigate = useNavigate()
   const isMobile = useMobile();
   const [duplicate, setDuplicate] = useState(false);
-  const scrollRef = useRef<any>(null);
+  //const scrollRef = useRef<any>(null);
 
   const goToBin = (i: number) => {
     let path = "/bins/" + bins[i].key();
@@ -101,6 +103,59 @@ export default function BinsList(props: Props) {
   //   );
   // };
 
+  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 
+        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">
@@ -146,7 +201,8 @@ export default function BinsList(props: Props) {
     <React.Fragment>
       {title && <Typography>{title}</Typography>}
       {/* {gridView ? grid() : scroll()} */}
-      {grid()}
+      {/* {grid()} */}
+      {scroll()}
     </React.Fragment>
   );
 }

src/pages/Bins.tsx

@@ -192,11 +192,11 @@ export default function Bins(props: Props) {
   // const history = useHistory();
   const navigate = useNavigate()
   const [cardValDisplay, setCardValDisplay] = useState<"high" | "low" | "average">("average");
-  const [scrollTranslations, setScrollTranslations] = useState({
-    bins: 0,
-    empty: 0,
-    fertilizer: 0
-  });
+  // const [scrollTranslations, setScrollTranslations] = useState({
+  //   bins: 0,
+  //   empty: 0,
+  //   fertilizer: 0
+  // });
 
   // const StyledToggleButtonGroup = withStyles(theme => ({
   //   grouped: {
@@ -621,11 +621,10 @@ export default function Bins(props: Props) {
                   bins={grainBins}
                   duplicateBin={duplicateBin}
                   title={"Grain Bins"}
-                  startingTranslate={scrollTranslations.bins}
-                  loadMore={newTranslation => {
+                  //startingTranslate={scrollTranslations.bins}
+                  loadMore={() => {
                     if (paginatedBins.bins.length < paginatedBins.binsTotal) {
                       loadMoreBins(contentFilter, paginatedBins.binsOffset);
-                      setScrollTranslations({ ...scrollTranslations, bins: newTranslation });
                     }
                   }}
                 />