@zohodesk/dot/es/Onboarding/hooks/useOnboardingSlider.js

In this Library, we Provide Some Basic Components to Build Your Application

import { useState, useEffect, useCallback, useRef } from 'react';
const autoplayDelay = 50; // 5000ms divided by 100 for smoother animation

const useOnboardingSlider = _ref => {
  let {
    isAutoPlayAnimation,
    sliderData,
    animationClass
  } = _ref;
  const [currentSlide, setCurrentSlide] = useState(0);
  const [autoplay, setAutoplay] = useState(true);
  const progressRef = useRef(0);
  const mainContainerEleRef = useRef(null);
  const totalSlidesArrayLen = sliderData.length;
  const handleSliderIndexChange = useCallback(index => {
    progressRef.current = 0;
    setCurrentSlide(index);
  }, []);
  const handleSliderNext = useCallback(() => {
    progressRef.current = 0;
    setCurrentSlide(prev => prev + 1);
    setAutoplay(false);
  }, []);
  const handleMouseEnter = useCallback(() => {
    setAutoplay(false);
  }, []);
  const handleMouseLeave = useCallback(() => {
    setAutoplay(true);
  }, []);
  const handleAnimationEnd = useCallback(() => {
    mainContainerEleRef.current && mainContainerEleRef.current.classList.remove(animationClass);
  }, [animationClass]);
  useEffect(() => {
    let progressInterval;

    if (autoplay && isAutoPlayAnimation && totalSlidesArrayLen > 1) {
      progressInterval = setInterval(() => {
        progressRef.current = progressRef.current < 100 ? progressRef.current + 1 : 0;

        if (progressRef.current === 0) {
          setCurrentSlide((currentSlide + 1) % totalSlidesArrayLen);
        }
      }, autoplayDelay);
    }

    return () => clearInterval(progressInterval);
  }, [autoplay, currentSlide, isAutoPlayAnimation]);
  const translateMovementVal = -currentSlide * 100;
  return {
    sliderIndex: currentSlide,
    isAnimationPaused: !autoplay,
    translateMovementVal,
    mainContainerEleRef,
    handleMouseEnter,
    handleMouseLeave,
    handleSliderIndexChange,
    handleSliderNext,
    handleAnimationEnd
  };
};

export default useOnboardingSlider;