Finished horizontal scroller

src/components/Scroller/HorizontalScroller.js

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import PropTypes from "prop-types";
 import {
   HorizontalScrollerContainer,
@@ -9,20 +9,64 @@ import {
 
 const HorizontalScroller = (props) => {
   const scrollRef = useRef(null);
+  const [isDisabledLeftButton, setIsDisabledLeftButton] = useState(true);
+  const [isDisabledRightButton, setIsDisabledRightButton] = useState(false);
+
+  const handleScroll = (event) => {
+    if (!event.external) {
+      if (scrollRef.current.scrollLeft === 0) {
+        if (isDisabledLeftButton !== true) setIsDisabledLeftButton(true);
+      } else {
+        if (isDisabledLeftButton !== false) setIsDisabledLeftButton(false);
+      }
+      if (
+        scrollRef.current.scrollWidth - scrollRef.current.scrollLeft ===
+        scrollRef.current.clientWidth
+      ) {
+        if (isDisabledRightButton !== true) setIsDisabledRightButton(true);
+      } else {
+        if (isDisabledRightButton !== false) setIsDisabledRightButton(false);
+      }
+    }
+  };
 
   const handleRight = () => {
+    if (scrollRef.current.scrollLeft + 50 !== 0) {
+      if (isDisabledLeftButton !== false) setIsDisabledLeftButton(false);
+    }
+    if (
+      scrollRef.current.scrollWidth - scrollRef.current.scrollLeft - 50 <=
+      scrollRef.current.clientWidth
+    ) {
+      if (isDisabledRightButton !== true) setIsDisabledRightButton(true);
+    }
     scrollRef.current.scrollBy({ left: 50, behaviour: "smooth" });
   };
   const handleLeft = () => {
+    if (scrollRef.current.scrollLeft - 50 <= 0) {
+      if (isDisabledLeftButton !== true) setIsDisabledLeftButton(true);
+    }
+    if (
+      scrollRef.current.scrollWidth - scrollRef.current.scrollLeft + 50 !==
+      scrollRef.current.clientWidth
+    ) {
+      if (isDisabledRightButton !== false) setIsDisabledRightButton(false);
+    }
     scrollRef.current.scrollBy({ left: -50, behaviour: "smooth" });
   };
   return (
-    <HorizontalScrollerContainer>
-      <Arrow onClick={handleLeft}>
+    <HorizontalScrollerContainer style={props.containerStyle}>
+      <Arrow onClick={handleLeft} disabled={isDisabledLeftButton}>
         <ArrowIcon side={"left"} />
       </Arrow>
-      <ListContainer innerRef={scrollRef}>{props.children}</ListContainer>
-      <Arrow onClick={handleRight}>
+      <ListContainer
+        innerRef={scrollRef}
+        style={props.listStyle}
+        onScroll={handleScroll}
+      >
+        {props.children}
+      </ListContainer>
+      <Arrow onClick={handleRight} disabled={isDisabledRightButton}>
         <ArrowIcon side={"right"} />
       </Arrow>
     </HorizontalScrollerContainer>
@@ -32,6 +76,8 @@ const HorizontalScroller = (props) => {
 HorizontalScroller.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  containerStyle: PropTypes.any,
+  listStyle: PropTypes.any,
 };
 
 export default HorizontalScroller;

src/components/Scroller/HorizontalScroller.styled.js

@@ -11,8 +11,6 @@ export const HorizontalScrollerContainer = styled(Box)`
     flex-direction: row;
     flex-wrap: nowrap;
     overflow: hidden;
-    cursor: grab;
-    /* scroll-behavior: smooth; */
 `
 export const Arrow = styled(Button)`
     border: 1px solid ${selectedTheme.primaryPurple};
@@ -27,12 +25,21 @@ export const Arrow = styled(Button)`
     padding-top: 10px;
     margin-top: auto;
     margin-bottom: auto;
+    transition: 0.2s all ease;
     &:hover {
         background-color: ${selectedTheme.primaryPurple};
         & svg path {
             stroke: white;
         }
     }
+    ${props => props.disabled && `
+        border 1px solid ${selectedTheme.iconStrokeDisabledColor};
+        & svg path {
+            stroke: ${selectedTheme.iconStrokeDisabledColor};
+            transition: 0.2s all ease;
+            
+        }
+    `}
 `
 export const ListContainer = styled(ScrollContainer)`
     display: flex;
@@ -41,7 +48,7 @@ export const ListContainer = styled(ScrollContainer)`
     flex-wrap: nowrap;
     cursor: grab;
     scroll-behavior: smooth;
-    margin: 0 20px;
+    margin: 0 18px;
     user-select: none;
 `
 export const ArrowIcon = styled(DownArrow)`