Merge pull request #132 from shuding/improve-slider

Prevent system navigation on swipe

components/product/ProductSlider/ProductSlider.tsx

@@ -1,5 +1,5 @@
 import { useKeenSlider } from 'keen-slider/react'
-import React, { Children, FC, isValidElement, useState } from 'react'
+import React, { Children, FC, isValidElement, useState, useRef, useEffect } from 'react'
 import cn from 'classnames'
 
 import s from './ProductSlider.module.css'
@@ -7,6 +7,7 @@ import s from './ProductSlider.module.css'
 const ProductSlider: FC = ({ children }) => {
   const [currentSlide, setCurrentSlide] = useState(0)
   const [isMounted, setIsMounted] = useState(false)
+  const sliderContainerRef = useRef<HTMLDivElement>(null)
 
   const [ref, slider] = useKeenSlider<HTMLDivElement>({
     loop: true,
@@ -17,8 +18,35 @@ const ProductSlider: FC = ({ children }) => {
     },
   })
 
+  // Stop the history navigation gesture on touch devices
+  useEffect(() => {
+    const preventNavigation = (event: TouchEvent) => {
+      // Center point of the touch area
+      const touchXPosition = event.touches[0].pageX
+      // Size of the touch area
+      const touchXRadius = event.touches[0].radiusX || 0
+      
+      // We set a threshold (10px) on both sizes of the screen,
+      // if the touch area overlaps with the screen edges
+      // it's likely to trigger the navigation. We prevent the
+      // touchstart event in that case.
+      if (
+        touchXPosition - touchXRadius < 10 ||
+        touchXPosition + touchXRadius > window.innerWidth - 10
+      ) event.preventDefault()
+    }
+
+    sliderContainerRef.current!
+      .addEventListener('touchstart', preventNavigation)
+
+    return () => {
+      sliderContainerRef.current!
+      .removeEventListener('touchstart', preventNavigation)
+    }
+  }, [])
+
   return (
-    <div className={s.root}>
+    <div className={s.root} ref={sliderContainerRef}>
       <button
         className={cn(s.leftControl, s.control)}
         onClick={slider?.prev}