JNG-6007 fix horizontal menu scroll (#487)

BlackBeltTechnology · Nov 11, 2024 · 7389c8b · 7389c8b
1 parent 31c56d3
commit 7389c8b
Showing 1 changed file with 38 additions and 48 deletions.
diff --git a/...rc/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/ScrollableMenu.tsx.hbs b/...rc/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/ScrollableMenu.tsx.hbs
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
 import { MdiIcon } from '~/components';
@@ -13,67 +13,57 @@ export const ScrollableMenu: FC<ScrollableMenuProps> = ({ children }) => {
   const [showLeftButton, setShowLeftButton] = useState(false);
   const [showRightButton, setShowRightButton] = useState(false);
 
-  useEffect(() => {
-    if (menuRef.current) {
-      const container = menuRef.current;
-      setShowLeftButton(container.scrollLeft > 0);
-      setShowRightButton(container.scrollWidth > container.clientWidth + container.scrollLeft);
-    }
-  }, [showLeftButton, showRightButton]);
-
-  const handleScroll = () => {
-    if (menuRef.current) {
-      const container = menuRef.current;
-      setShowLeftButton(container.scrollLeft > 0);
-      setShowRightButton(container.scrollWidth > container.clientWidth + container.scrollLeft);
-    }
-  };
+  const updateScrollButtons = useCallback(() => {
+    const content: any = menuRef.current;
+    setShowLeftButton(content.scrollLeft > 0);
+    setShowRightButton(content.scrollLeft < content.scrollWidth - content.clientWidth);
+  }, []);
 
-  const handleScrollLeft = () => {
-    if (menuRef.current) {
-      menuRef.current.scrollBy({
-        left: -200,
-        behavior: 'smooth',
-      });
-    }
-  };
+  const scrollContent = useCallback((direction: number) => {
+    const content: any = menuRef.current;
+    const scrollAmount = 300;
+    content.scrollLeft += direction * scrollAmount;
+    window.setTimeout(() => {
+      updateScrollButtons();
+    }, 300);
+  }, []);
 
-  const handleScrollRight = () => {
-    if (menuRef.current) {
-      menuRef.current.scrollBy({
-        left: 200,
-        behavior: 'smooth',
-      });
-    }
-  };
+  useEffect(() => {
+    updateScrollButtons();
+  }, []);
 
   return (
     <div
       style={ {
-        position: 'relative',
-        overflowX: 'hidden',
         display: 'flex',
         alignItems: 'center',
+        width: '100%'
       } }
     >
-      <IconButton sx={ { visibility: !showLeftButton ? 'hidden' : 'visible' } } onClick={handleScrollLeft}>
-        <MdiIcon path="chevron-left" />
-      </IconButton>
-      <Box
-        sx={ {
+      <div style={ { flex: '0 0 auto', padding: '10px', marginRight: '5px' } }>
+        <IconButton sx={ {visibility: !showLeftButton ? 'hidden' : 'visible'} } onClick={() => scrollContent(-1)}>
+          <MdiIcon path="chevron-left" />
+        </IconButton>
+      </div>
+      <div
+        ref={menuRef}
+        style={ {
           display: 'flex',
-          overflowX: 'hidden',
-          WebkitOverflowScrolling: 'touch',
+          overflow: 'hidden',
+          flex: '1 1 auto',
+          whiteSpace: 'nowrap',
           scrollBehavior: 'smooth',
         } }
-        ref={menuRef}
-        onScroll={handleScroll}
       >
-        <Box sx={ { display: 'flex', flexDirection: 'row' } }>{children}</Box>
-      </Box>
-      <IconButton sx={ { visibility: !showRightButton ? 'hidden' : 'visible' } } onClick={handleScrollRight}>
-        <MdiIcon path="chevron-right" />
-      </IconButton>
+        <Box sx={ { display: 'flex', flexDirection: 'row', alignItems: 'center' } }>
+          {children}
+        </Box>
+      </div>
+      <div style={ { flex: '0 0 auto', padding: '10px', marginLeft: '5px' } }>
+        <IconButton sx={ { visibility: !showRightButton ? 'hidden' : 'visible' } } onClick={() => scrollContent(1)}>
+          <MdiIcon path="chevron-right" />
+        </IconButton>
+      </div>
     </div>
   );
 };