From 14f21d8465e42b9b77f1be5137d40799bd0c7a73 Mon Sep 17 00:00:00 2001
From: Hasan Genc <hasan.genc@trendyol.com>
Date: Fri, 1 May 2020 16:40:57 +0300
Subject: [PATCH] Fix click event bug on scroll

---
 src/components/scrolling-carousel/index.tsx | 3 ++-
 src/styles/slider/styles.module.css         | 4 ++++
 src/styles/slider/styles.module.css.d.ts    | 2 ++
 website/docs/scrollingCarousel.md           | 4 +++-
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/scrolling-carousel/index.tsx b/src/components/scrolling-carousel/index.tsx
index 3eb819f..e586f3e 100644
--- a/src/components/scrolling-carousel/index.tsx
+++ b/src/components/scrolling-carousel/index.tsx
@@ -58,12 +58,13 @@ export const ScrollingCarousel: FunctionComponent<SliderProps> = ({
 	const mouseUp = (_: MouseEvent) => {
 		setIsDown(false);
 		setShowArrow(showArrows());
+		slider.current!.classList.remove(styles.sliding);
 	};
 
 	const mouseMove = (e: MouseEvent) => {
 		if (!isDown) return;
 		e.preventDefault();
-
+		slider.current!.classList.add(styles.sliding);
 		const eventPosition = e.pageX - slider.current!.offsetLeft;
 		const slide = eventPosition - position.startX;
 
diff --git a/src/styles/slider/styles.module.css b/src/styles/slider/styles.module.css
index ffd21e5..00b655a 100644
--- a/src/styles/slider/styles.module.css
+++ b/src/styles/slider/styles.module.css
@@ -18,3 +18,7 @@
 .slider > * {
 	flex: 0 0 auto;
 }
+
+.sliding > * {
+	pointer-events: none;
+}
diff --git a/src/styles/slider/styles.module.css.d.ts b/src/styles/slider/styles.module.css.d.ts
index beb1d0c..2966e8b 100644
--- a/src/styles/slider/styles.module.css.d.ts
+++ b/src/styles/slider/styles.module.css.d.ts
@@ -1,8 +1,10 @@
 export const sliderBase: string;
 export const slider: string;
+export const sliding: string;
 interface Namespace {
 	sliderBase: string;
 	slider: string;
+	sliding: string;
 }
 declare const stylesModule: Namespace;
 export default stylesModule;
diff --git a/website/docs/scrollingCarousel.md b/website/docs/scrollingCarousel.md
index e740f88..2e73986 100644
--- a/website/docs/scrollingCarousel.md
+++ b/website/docs/scrollingCarousel.md
@@ -12,7 +12,9 @@ const slideData = [{"text":"skyline","img":"data:image/jpeg;base64,/9j/4AAQSkZJR
 <ScrollingCarousel className="scrolling-carousel-example1">
 {
   slideData.map((d, i) => 
-    <div key={i} style={{
+    <div key={i}
+      onClick={() => console.log('CLICK')}
+      style={{
       cursor: "pointer",
       display: "flex",
       border: "1px solid #DFE1E5",