Merge pull request #9 from faceless-ui/fix/drag-snap

Fix/drag snap

Author: jacobsfletch

demo/App.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import MarqueeSliderDemo from './MarqueeSliderDemo';
+// import MarqueeSliderDemo from './MarqueeSliderDemo';
 // import FreeScrollSliderDemo from './FreeScrollSliderDemo';
 // import ThumbnailSliderDemo from './ThumbnailSliderDemo';
-// import ScrollSnapSliderDemo from './ScrollSnapSliderDemo';
+import ScrollSnapSliderDemo from './ScrollSnapSliderDemo';
 
 const App: React.FC = () => (
   <div
@@ -15,18 +15,18 @@ const App: React.FC = () => (
       Free Scroll Slider:
     </h1> */}
     {/* <FreeScrollSliderDemo /> */}
-    {/* <h1>
+    <h1>
       Scroll Snap Slider:
-    </h1> */}
-    {/* <ScrollSnapSliderDemo /> */}
+    </h1>
+    <ScrollSnapSliderDemo />
     {/* <h1>
       Thumbnail Slider Demo:
     </h1>
     <ThumbnailSliderDemo /> */}
-    <h1>
+    {/* <h1>
       Marquee Slider Demo
     </h1>
-    <MarqueeSliderDemo />
+    <MarqueeSliderDemo /> */}
   </div>
 );
 

demo/ScrollSnapSliderDemo/index.tsx

@@ -28,8 +28,8 @@ const ScrollSnapSliderDemo: React.FC = () => {
       </button>
       <SliderProvider
         slidesToShow={1}
-        autoPlay={autoPlay}
-        dragScroll
+        autoPlay
+        scrollSnap
       >
         <div
           style={{

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faceless-ui/slider",
-  "version": "1.1.12",
+  "version": "1.1.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage:": "https://facelessui.com/docs/slider",

src/Slide/index.tsx

@@ -26,12 +26,12 @@ const Slide: React.FC<SlideProps> = (props) => {
     index,
     htmlElement = 'div',
     children,
-    style: styleFromProps,
+    style,
     onClick: onClickFromProps,
     ...rest
   } = props;
 
-  const [style, setStyle] = useState<React.CSSProperties | undefined>();
+  const [snapStyles, setSnapStyles] = useState<React.CSSProperties | undefined>();
   const slider = useSlider();
   const slideRef = useRef<HTMLElement | null>(null);
 
@@ -70,14 +70,15 @@ const Slide: React.FC<SlideProps> = (props) => {
     index,
   ]);
 
+  // here
   useEffect(() => {
     if (scrollSnap) {
-      setStyle({
+      setSnapStyles({
         scrollSnapStop: 'always',
         scrollSnapAlign: 'start',
       })
     } else {
-      setStyle(undefined);
+      setSnapStyles(undefined);
     }
   }, [scrollSnap]);
 
@@ -101,7 +102,7 @@ const Slide: React.FC<SlideProps> = (props) => {
     flexShrink: 0,
     width: slideWidth,
     ...style || {},
-    ...styleFromProps || {},
+    ...snapStyles || {},
   }
 
   return (

src/SliderProvider/context.tsx

@@ -19,6 +19,7 @@ export interface ISliderContext extends Omit<SliderProviderProps, 'children'> {
   slideWidth?: string
   isPaused?: boolean
   setIsPaused: (is: boolean) => void // eslint-disable-line no-unused-vars
+  isDragging: boolean
 }
 
 export const SliderContext = createContext<ISliderContext>({} as ISliderContext);

src/SliderProvider/index.tsx

@@ -79,6 +79,7 @@ const SliderProvider: React.FC<SliderProviderProps> = (props) => {
   const [isPaused, setIsPaused] = useState(false);
   const [isFullyScrolled, setIsFullyScrolled] = useState(false);
   const sliderTrackRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
 
   const [sliderState, dispatchSliderState] = useReducer(reducer, {
     currentSlideIndex: slideIndexFromProps,
@@ -89,7 +90,9 @@ const SliderProvider: React.FC<SliderProviderProps> = (props) => {
   useDragScroll({
     ref: sliderTrackRef,
     scrollYAxis: false,
-    enable: dragScroll || (scrollable && dragScroll !== false)
+    enable: dragScroll || (scrollable && dragScroll !== false),
+    onDrag: () => { setIsDragging(true) },
+    onDragEnd: () => { setIsDragging(false) },
   });
 
   useMarquee({
@@ -206,7 +209,8 @@ const SliderProvider: React.FC<SliderProviderProps> = (props) => {
     setIsPaused,
     isPaused,
     pauseOnHover,
-    alignLastSlide
+    alignLastSlide,
+    isDragging
   };
 
   return (

src/SliderProvider/useDragScroll.ts

@@ -5,6 +5,8 @@ type Args = {
   scrollYAxis?: boolean
   enable?: boolean
   ref: React.MutableRefObject<HTMLDivElement | null>
+  onDrag: () => void
+  onDragEnd: () => void
 }
 
 export type UseDraggable = (args?: Args) => null // eslint-disable-line no-unused-vars
@@ -14,7 +16,9 @@ export const useDraggable: UseDraggable = (args) => {
     buttons = [1, 4, 5], // See https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons
     scrollYAxis,
     enable,
-    ref
+    ref,
+    onDrag,
+    onDragEnd
   } = args || {};
 
   // Position of the mouse on the page on mousedown
@@ -37,6 +41,9 @@ export const useDraggable: UseDraggable = (args) => {
         setStartY(e.pageY - ref.current.offsetTop);
         setStartScrollLeft(ref.current.scrollLeft);
         setStartScrollTop(ref.current.scrollTop);
+        if (typeof onDrag === 'function') {
+          onDrag();
+        }
       }
     };
 
@@ -57,15 +64,16 @@ export const useDraggable: UseDraggable = (args) => {
         }
 
         e.preventDefault();
+
         // Position of mouse on the page
         const mouseX = e.pageX - ref.current.offsetLeft;
         const mouseY = e.pageY - ref.current.offsetTop;
         // Distance of the mouse from the origin of the last mousedown event
-        const walkX = mouseX - startX;
-        const walkY = mouseY - startY;
-        // Set element scroll
-        ref.current.scrollLeft = startScrollLeft - walkX;
-        const newScrollTop = startScrollTop - walkY;
+        const xDisplacement = mouseX - startX;
+        const yDisplacement = mouseY - startY;
+        // Finally, set the element's scroll
+        ref.current.scrollLeft = startScrollLeft - xDisplacement;
+        const newScrollTop = startScrollTop - yDisplacement;
         if (scrollYAxis !== false) {
           ref.current.scrollTop = newScrollTop;
         }
@@ -80,6 +88,9 @@ export const useDraggable: UseDraggable = (args) => {
           const childAsElement = child as HTMLElement;
           childAsElement.style.removeProperty('pointer-events');
         });
+        if (typeof onDragEnd === 'function') {
+          onDragEnd();
+        }
       }
     };
 
@@ -101,7 +112,9 @@ export const useDraggable: UseDraggable = (args) => {
     startY,
     scrollYAxis,
     enable,
-    ref
+    ref,
+    onDragEnd,
+    onDrag
   ]);
 
   return null;

src/SliderTrack/index.tsx

@@ -25,7 +25,8 @@ const SliderTrack: React.FC<SliderTrackProps> = (props) => {
     scrollSnap,
     setIsPaused,
     pauseOnHover,
-    alignLastSlide
+    alignLastSlide,
+    isDragging
   } = sliderContext;
 
   const hasAddedScrollListener = useRef(false);
@@ -85,6 +86,7 @@ const SliderTrack: React.FC<SliderTrackProps> = (props) => {
         track.addEventListener('wheel', (e) => { e.preventDefault() })
       }
     }
+
     return () => {
       if (track) {
         track.removeEventListener('scroll', onScroll);
@@ -98,6 +100,11 @@ const SliderTrack: React.FC<SliderTrackProps> = (props) => {
 
   const ghostSlideWidth = getGhostSlideWidth(sliderContext);
 
+  let scrollSnapType;
+  if (scrollSnap && slideWidth) {
+    scrollSnapType = !isDragging ? 'x mandatory' : 'none';
+  }
+
   return (
     <Tag
       {...{
@@ -107,7 +114,8 @@ const SliderTrack: React.FC<SliderTrackProps> = (props) => {
           display: 'flex',
           overflowX: 'scroll', // NOTE: 'WebkitOverflowScrolling: touch' does not work when 'auto'
           WebkitOverflowScrolling: 'touch',
-          scrollSnapType: (scrollSnap && slideWidth) ? 'x mandatory' : undefined, // NOTE: only apply after slide width has populated
+          // NOTE: only apply after slide width has populated and while NOT dragging
+          scrollSnapType,
           ...style,
         },
         ref: sliderTrackRef,