From 104615b2ebf49bccbf573567cc2a1701b6c97c44 Mon Sep 17 00:00:00 2001
From: Abhinav-grd <abhinavk.grd@gmail.com>
Date: Thu, 29 Apr 2021 05:03:21 +0530
Subject: [PATCH] updated navigation Buttons

---
 src/components/navigationButton.tsx | 39 +++++++++++++++++++----------
 1 file changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/components/navigationButton.tsx b/src/components/navigationButton.tsx
index ecac598a8..7ad37f2a7 100644
--- a/src/components/navigationButton.tsx
+++ b/src/components/navigationButton.tsx
@@ -26,22 +26,35 @@ const Wrapper = styled.div<{ direction: SCROLL_DIRECTION }>`
 
 const NavigationButton = (props: Props) => {
     const [scrollTimeOut, setScrollTimeOut] = useState<NodeJS.Timeout>(null);
+    if (!props.collectionRef?.current) {
+        return <div />;
+    }
+    let {
+        clientWidth,
+        clientHeight,
+        scrollWidth,
+        scrollHeight,
+    } = props.collectionRef.current;
+    if (scrollHeight <= clientHeight && scrollWidth <= clientWidth) {
+        return <div />;
+    }
+    const scrollStart = () =>
+        setScrollTimeOut(
+            setInterval(function () {
+                props.collectionRef.current.scrollLeft +=
+                    props.scrollDirection * SCROLL_SPEED;
+            }, 0)
+        );
+
+    const scrollEnd = () => clearTimeout(scrollTimeOut);
+
     return (
         <Wrapper
             direction={props.scrollDirection}
-            onMouseDown={() => {
-                setScrollTimeOut(
-                    setInterval(function () {
-                        props.collectionRef.current.scrollLeft +=
-                            props.scrollDirection * SCROLL_SPEED;
-                    }, 0)
-                );
-
-                return false;
-            }}
-            onMouseUp={() => {
-                clearTimeout(scrollTimeOut);
-            }}
+            onMouseDown={scrollStart}
+            onMouseUp={scrollEnd}
+            onTouchStart={scrollStart}
+            onTouchEnd={scrollEnd}
         >
             <svg
                 xmlns="http://www.w3.org/2000/svg"