diff --git a/package-lock.json b/package-lock.json index b9a8f26..7c6a44a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,7 @@ "react-color": "^2.19.3", "react-dom": "^18.3.1", "react-error-boundary": "^5.0.0", + "react-horizontal-scrolling-menu": "^7.1.1", "react-image": "^4.1.0", "react-infinite-scroller": "^1.2.6", "react-phone-input-2": "^2.15.1", @@ -4499,6 +4500,12 @@ "node": ">=4.0.0" } }, + "node_modules/compute-scroll-into-view": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz", + "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==", + "license": "MIT" + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -7428,6 +7435,27 @@ "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", "license": "MIT" }, + "node_modules/react-horizontal-scrolling-menu": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/react-horizontal-scrolling-menu/-/react-horizontal-scrolling-menu-7.1.1.tgz", + "integrity": "sha512-g93/9RM4io8CHoyiZO+KBlBg5k/zlmzYe+d1Wln2XcTG7TKq60gwqR9toyBFnYW8x6Xk2tmvEXi5Y8dE40YkEw==", + "license": "MIT", + "dependencies": { + "smooth-scroll-into-view-if-needed": "^2.0.2" + }, + "engines": { + "node": ">=18", + "npm": ">=9.5.0" + }, + "funding": { + "type": "patreon", + "url": "https://patreon.com/asmyshlyaev177" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-image": { "version": "4.1.0", "integrity": "sha512-qwPNlelQe9Zy14K2pGWSwoL+vHsAwmJKS6gkotekDgRpcnRuzXNap00GfibD3eEPYu3WCPlyIUUNzcyHOrLHjw==", @@ -7916,6 +7944,15 @@ "loose-envify": "^1.1.0" } }, + "node_modules/scroll-into-view-if-needed": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz", + "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==", + "license": "MIT", + "dependencies": { + "compute-scroll-into-view": "^3.0.2" + } + }, "node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -8094,6 +8131,15 @@ "dev": true, "license": "MIT" }, + "node_modules/smooth-scroll-into-view-if-needed": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/smooth-scroll-into-view-if-needed/-/smooth-scroll-into-view-if-needed-2.0.2.tgz", + "integrity": "sha512-z54WzUSlM+xHHvJu3lMIsh+1d1kA4vaakcAtQvqzeGJ5Ffau7EKjpRrMHh1/OBo5zyU2h30ZYEt77vWmPHqg7Q==", + "license": "MIT", + "dependencies": { + "scroll-into-view-if-needed": "^3.1.0" + } + }, "node_modules/source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", diff --git a/package.json b/package.json index b82915d..5c7e8a4 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,7 @@ "react-color": "^2.19.3", "react-dom": "^18.3.1", "react-error-boundary": "^5.0.0", + "react-horizontal-scrolling-menu": "^7.1.1", "react-image": "^4.1.0", "react-infinite-scroller": "^1.2.6", "react-phone-input-2": "^2.15.1", diff --git a/src/bin/BinsList.tsx b/src/bin/BinsList.tsx index 678a393..e1bd77e 100644 --- a/src/bin/BinsList.tsx +++ b/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(null); + //const scrollRef = useRef(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 ( + + ) + } + + const rightArrow = () => { + const visibility = useContext(VisibilityContext); + const isLastVisible = visibility.useIsVisible('last', false) + return ( + + ) + } + + const scroll = () => { + //const visibility = useContext(VisibilityContext); + return ( + + {bins.map((b, i) => ( + { + //!duplicate && goToBin(i) + }}> + + + ))} + + ) + } + const grid = () => { return ( @@ -146,7 +201,8 @@ export default function BinsList(props: Props) { {title && {title}} {/* {gridView ? grid() : scroll()} */} - {grid()} + {/* {grid()} */} + {scroll()} ); } diff --git a/src/pages/Bins.tsx b/src/pages/Bins.tsx index 092acae..79f95e5 100644 --- a/src/pages/Bins.tsx +++ b/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 }); } }} />