@lumx/react 3.9.4-alpha.3 → 3.9.4

package/src/{components/slideshow → hooks}/useSlideshowControls.ts

@@ -1,10 +1,9 @@
-import { SetStateAction, useCallback, useEffect, useState } from 'react';
-import { clamp } from '@lumx/react';
+import { useState, useCallback, useEffect } from 'react';
+
 import { useInterval } from '@lumx/react/hooks/useInterval';
+import { AUTOPLAY_DEFAULT_INTERVAL } from '@lumx/react/components/slideshow/constants';
 import { useId } from '@lumx/react/hooks/useId';
 
-import { AUTOPLAY_DEFAULT_INTERVAL, NEXT_SLIDE_EVENT, PREV_SLIDE_EVENT } from './constants';
-
 export interface UseSlideshowControlsOptions {
     /** default active index to be displayed */
     defaultActiveIndex?: number;
@@ -44,9 +43,9 @@ export interface UseSlideshowControls {
     /** id to be used for the wrapper that contains the slides */
     slideshowSlidesId: string;
     /** callback that triggers the previous slide while using the slideshow controls  */
-    onPreviousClick: (loopBack: boolean) => void;
+    onPreviousClick: (loopback: boolean) => void;
     /** callback that triggers the next slide while using the slideshow controls */
-    onNextClick: (loopBack: boolean) => void;
+    onNextClick: (loopback: boolean) => void;
     /** callback that triggers a specific page while using the slideshow controls */
     onPaginationClick: (index: number) => void;
     /** whether the slideshow is autoplaying or not */
@@ -55,18 +54,16 @@ export interface UseSlideshowControls {
     isForcePaused: boolean;
     /** callback to change whether the slideshow is autoplaying or not */
     toggleAutoPlay: () => void;
-    /** callback to change whether the slideshow should be force paused or not */
+    /** calback to change whether the slideshow should be force paused or not */
     toggleForcePause: () => void;
     /** current active slide index  */
     activeIndex: number;
     /** set the current index as the active one */
     setActiveIndex: (index: number) => void;
-    /** callback that stops the autoplay */
+    /** callback that stops the auto play */
     stopAutoPlay: () => void;
-    /** callback that starts the autoplay */
+    /** callback that starts the auto play */
     startAutoPlay: () => void;
-    /** True if the last slide change is user activated */
-    isUserActivated?: boolean;
 }
 
 export const DEFAULT_OPTIONS: Partial<UseSlideshowControlsOptions> = {
@@ -93,34 +90,40 @@ export const useSlideshowControls = ({
     // Number of slides when using groupBy prop.
     const slidesCount = Math.ceil(itemsCount / Math.min(groupBy as number, itemsCount));
 
-    // Set current active index (& if is user activated)
-    const setActiveIndex = useCallback(
-        (setStateAction: SetStateAction<number>, isUser?: boolean) => {
-            // Store on element a boolean value when the slide change was not from a user action.
-            const elementDataset = element?.dataset as any;
-            if (elementDataset) {
-                if (isUser) elementDataset.lumxUserActivated = true;
-                else delete elementDataset.lumxUserActivated;
-            }
-
-            setCurrentIndex(setStateAction);
+    // Change current index to display next slide.
+    const goToNextSlide = useCallback(
+        (loopback = true) => {
+            setCurrentIndex((index) => {
+                if (loopback && index === slidesCount - 1) {
+                    // Loopback to the start.
+                    return 0;
+                }
+                if (index < slidesCount - 1) {
+                    // Next slide.
+                    return index + 1;
+                }
+                return index;
+            });
         },
-        [element],
+        [slidesCount, setCurrentIndex],
     );
 
-    // Change slide given delta (-1/+1) with or without loop back.
-    const goTo = useCallback(
-        (delta: -1 | 1 = 1, loopBack = true, isUser?: boolean) => {
-            setActiveIndex((index) => {
-                if (loopBack) {
-                    const newIndex = (index + delta) % slidesCount;
-                    if (newIndex < 0) return slidesCount + newIndex;
-                    return newIndex;
+    // Change current index to display previous slide.
+    const goToPreviousSlide = useCallback(
+        (loopback = true) => {
+            setCurrentIndex((index) => {
+                if (loopback && index === 0) {
+                    // Loopback to the end.
+                    return slidesCount - 1;
+                }
+                if (index > 0) {
+                    // Previous slide.
+                    return index - 1;
                 }
-                return clamp(index + delta, 0, slidesCount - 1);
-            }, isUser);
+                return index;
+            });
         },
-        [slidesCount, setActiveIndex],
+        [slidesCount, setCurrentIndex],
     );
 
     // Auto play
@@ -129,22 +132,22 @@ export const useSlideshowControls = ({
 
     const isSlideshowAutoPlaying = isForcePaused ? false : isAutoPlaying;
     // Start
-    useInterval(goTo, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);
+    useInterval(goToNextSlide, isSlideshowAutoPlaying && slidesCount > 1 ? (interval as number) : null);
 
-    // Reset current index if it becomes invalid.
+    // Reset current index if it become invalid.
     useEffect(() => {
         if (currentIndex > slidesCount - 1) {
-            setActiveIndex(defaultActiveIndex as number);
+            setCurrentIndex(defaultActiveIndex as number);
         }
-    }, [currentIndex, slidesCount, defaultActiveIndex, setActiveIndex]);
+    }, [currentIndex, slidesCount, defaultActiveIndex]);
 
-    const startAutoPlay = useCallback(() => {
+    const startAutoPlay = () => {
         setIsAutoPlaying(Boolean(autoPlay));
-    }, [autoPlay]);
+    };
 
-    const stopAutoPlay = useCallback(() => {
+    const stopAutoPlay = () => {
         setIsAutoPlaying(false);
-    }, []);
+    };
 
     // Handle click on a bullet to go to a specific slide.
     const onPaginationClick = useCallback(
@@ -153,48 +156,36 @@ export const useSlideshowControls = ({
             setIsForcePaused(true);
 
             if (index >= 0 && index < slidesCount) {
-                setActiveIndex(index, true);
+                setCurrentIndex(index);
             }
         },
-        [stopAutoPlay, slidesCount, setActiveIndex],
+        [slidesCount, setCurrentIndex],
     );
 
     // Handle click or keyboard event to go to next slide.
     const onNextClick = useCallback(
-        (loopBack = true) => {
+        (loopback = true) => {
             stopAutoPlay();
             setIsForcePaused(true);
-            goTo(1, loopBack, true);
+            goToNextSlide(loopback);
         },
-        [goTo, stopAutoPlay],
+        [goToNextSlide],
     );
 
     // Handle click or keyboard event to go to previous slide.
     const onPreviousClick = useCallback(
-        (loopBack = true) => {
+        (loopback = true) => {
             stopAutoPlay();
             setIsForcePaused(true);
-            goTo(-1, loopBack, true);
+            goToPreviousSlide(loopback);
         },
-        [goTo, stopAutoPlay],
+        [goToPreviousSlide],
     );
 
-    // Listen to custom next/prev slide events
-    useEffect(() => {
-        if (!element) return undefined;
-
-        element.addEventListener(NEXT_SLIDE_EVENT, onNextClick);
-        element.addEventListener(PREV_SLIDE_EVENT, onPreviousClick);
-        return () => {
-            element.removeEventListener(NEXT_SLIDE_EVENT, onNextClick);
-            element.removeEventListener(PREV_SLIDE_EVENT, onPreviousClick);
-        };
-    }, [element, onNextClick, onPreviousClick]);
-
     // If the activeIndex props changes, update the current slide
     useEffect(() => {
-        setActiveIndex(activeIndex as number);
-    }, [activeIndex, setActiveIndex]);
+        setCurrentIndex(activeIndex as number);
+    }, [activeIndex]);
 
     // If the slide changes, with autoplay for example, trigger "onChange"
     useEffect(() => {
@@ -208,15 +199,15 @@ export const useSlideshowControls = ({
     const generatedSlidesId = useId();
     const slideshowSlidesId = slidesId || generatedSlidesId;
 
-    const toggleAutoPlay = useCallback(() => {
+    const toggleAutoPlay = () => {
         if (isSlideshowAutoPlaying) {
             stopAutoPlay();
         } else {
             startAutoPlay();
         }
-    }, [isSlideshowAutoPlaying, startAutoPlay, stopAutoPlay]);
+    };
 
-    const toggleForcePause = useCallback(() => {
+    const toggleForcePause = () => {
         const shouldBePaused = !isForcePaused;
 
         setIsForcePaused(shouldBePaused);
@@ -226,7 +217,7 @@ export const useSlideshowControls = ({
         } else {
             stopAutoPlay();
         }
-    }, [isForcePaused, startAutoPlay, stopAutoPlay]);
+    };
 
     // Start index and end index of visible slides.
     const startIndexVisible = currentIndex * (groupBy as number);
@@ -246,7 +237,7 @@ export const useSlideshowControls = ({
         toggleAutoPlay,
         activeIndex: currentIndex,
         slidesCount,
-        setActiveIndex,
+        setActiveIndex: setCurrentIndex,
         startAutoPlay,
         stopAutoPlay,
         isForcePaused,

package/src/stories/generated/Mosaic/Demos.stories.tsx

@@ -3,6 +3,7 @@
  */
 export default { title: 'LumX components/mosaic/Mosaic Demos' };
 
+export { App as Clickable } from './clickable';
 export { App as FourImages } from './four-images';
 export { App as MoreImages } from './more-images';
 export { App as ThreeImages } from './three-images';