react-auto-image-slider/build/ImageSlider.js

The React Auto Image Slider Component

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React, { useState, useEffect, useRef, useCallback } from "react";
import styled from "styled-components";
import ButtonBox from "./components/ButtonBox";
import Indicator from "./components/Indicator";
import NoChildError from "./components/NoChildError";
import { styles as styleHelper } from "./utils/helper";
var ImageSlider = function (_a) {
    var children = _a.children, _b = _a.effectDelay, effectDelay = _b === void 0 ? 800 : _b, _c = _a.autoPlayDelay, autoPlayDelay = _c === void 0 ? 2500 : _c;
    var totalSlide = React.Children.count(children);
    var _d = useState(0), currentIndex = _d[0], setCurrentIndex = _d[1];
    var _e = useState(true), autoPlay = _e[0], setAutoPlay = _e[1];
    var slideRef = useRef(null);
    var timeoutRef = useRef(null);
    var slideTimeoutRef = useRef(null);
    var handleMoveToBackSlide = function () {
        currentIndex < 0 && setCurrentIndex(0);
        if (currentIndex === 0 && slideRef.current) {
            styleHelper.setEndTransitionEffect(slideRef.current, effectDelay);
            slideTimeoutRef.current = window.setTimeout(function () {
                slideRef.current && styleHelper.resetOpacityAndPosition(slideRef.current, "-".concat(totalSlide - 1, "00%"));
                setCurrentIndex(totalSlide - 1);
            }, effectDelay);
            return;
        }
        setCurrentIndex(function (prev) { return prev - 1; });
        slideRef.current && styleHelper.setTranslateEffect(slideRef.current, "-".concat(currentIndex - 1, "00%"), effectDelay);
    };
    var handleMoveToForwardSlide = useCallback(function () {
        currentIndex > totalSlide && setCurrentIndex(0);
        if (currentIndex === totalSlide - 1 && slideRef.current) {
            styleHelper.setEndTransitionEffect(slideRef.current, effectDelay);
            slideTimeoutRef.current = window.setTimeout(function () {
                slideRef.current && styleHelper.resetOpacityAndPosition(slideRef.current, "0%");
                setCurrentIndex(0);
            }, effectDelay);
            return;
        }
        setCurrentIndex(function (prev) { return prev + 1; });
        if (slideRef.current !== null) {
            styleHelper.setTranslateEffect(slideRef.current, "-".concat(currentIndex + 1, "00%"), effectDelay);
        }
    }, [totalSlide, currentIndex, effectDelay]);
    var resetslideTimeoutRef = useCallback(function () {
        if (slideTimeoutRef.current) {
            clearTimeout(slideTimeoutRef.current);
        }
    }, []);
    var resetTimeout = useCallback(function () {
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
    }, []);
    useEffect(function () {
        resetTimeout();
        if (autoPlay) {
            timeoutRef.current = window.setTimeout(function () {
                handleMoveToForwardSlide();
            }, autoPlayDelay);
        }
        return function () { return resetTimeout(); };
    }, [currentIndex, autoPlay, autoPlayDelay, handleMoveToForwardSlide, resetTimeout]);
    useEffect(function () {
        var _a, _b;
        (_a = slideRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("mouseover", function () { return setAutoPlay(false); });
        (_b = slideRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener("mouseout", function () { return setAutoPlay(true); });
        return function () {
            setCurrentIndex(0);
            resetslideTimeoutRef();
        };
    }, []);
    return (_jsx(_Fragment, { children: totalSlide < 1 ? (_jsx(NoChildError, {})) : (_jsxs(Container, { children: [_jsx(SlideWrapper, __assign({ ref: slideRef }, { children: children })), _jsx(ButtonBox, { onBackButtonClick: handleMoveToBackSlide, onForwardButtonClick: handleMoveToForwardSlide }), _jsx(Indicator, { total: totalSlide, currentIndex: currentIndex })] })) }));
};
export default ImageSlider;
var Container = styled.article(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100vw;\n  height: 100vh;\n  overflow: hidden;\n"], ["\n  width: 100vw;\n  height: 100vh;\n  overflow: hidden;\n"])));
var SlideWrapper = styled.section(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-wrap: nowrap;\n  width: 100%;\n  height: 100%;\n"])));
var templateObject_1, templateObject_2;