@coreui/react/dist/cjs/components/carousel/CCarousel.js

UI Components Library for React.js

'use strict';

var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var PropTypes = require('prop-types');
var index = require('../../_virtual/index.js');
var isInViewport = require('../../utils/isInViewport.js');
var useForkedRef = require('../../hooks/useForkedRef.js');
require('@popperjs/core');
var CCarouselContext = require('./CCarouselContext.js');

var CCarousel = React.forwardRef(function (_a, ref) {
    var children = _a.children, _b = _a.activeIndex, activeIndex = _b === void 0 ? 0 : _b, className = _a.className, controls = _a.controls, dark = _a.dark, indicators = _a.indicators, _c = _a.interval, interval = _c === void 0 ? 5000 : _c, onSlid = _a.onSlid, onSlide = _a.onSlide, _d = _a.pause, pause = _d === void 0 ? 'hover' : _d, _e = _a.touch, touch = _e === void 0 ? true : _e, transition = _a.transition, _f = _a.wrap, wrap = _f === void 0 ? true : _f, rest = tslib_es6.__rest(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
    var carouselRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, carouselRef);
    var data = React.useRef({}).current;
    var _g = React.useState(activeIndex), active = _g[0], setActive = _g[1];
    var _h = React.useState(false), animating = _h[0], setAnimating = _h[1];
    var _j = React.useState(), customInterval = _j[0], setCustomInterval = _j[1];
    var _k = React.useState('next'), direction = _k[0], setDirection = _k[1];
    var _l = React.useState(0), itemsNumber = _l[0], setItemsNumber = _l[1];
    var _m = React.useState(null), touchPosition = _m[0], setTouchPosition = _m[1];
    var _o = React.useState(), visible = _o[0], setVisible = _o[1];
    React.useEffect(function () {
        setItemsNumber(React.Children.toArray(children).length);
    });
    React.useEffect(function () {
        visible && cycle();
    }, [visible]);
    React.useEffect(function () {
        !animating && cycle();
        !animating && onSlid && onSlid(active, direction);
        animating && onSlide && onSlide(active, direction);
    }, [animating]);
    React.useEffect(function () {
        window.addEventListener('scroll', handleScroll);
        return function () {
            window.removeEventListener('scroll', handleScroll);
        };
    });
    var cycle = function () {
        _pause();
        if (!wrap && active === itemsNumber - 1) {
            return;
        }
        if (typeof interval === 'number') {
            data.timeout = setTimeout(function () { return nextItemWhenVisible(); }, typeof customInterval === 'number' ? customInterval : interval);
        }
    };
    var _pause = function () { return pause && data.timeout && clearTimeout(data.timeout); };
    var nextItemWhenVisible = function () {
        // Don't call next when the page isn't visible
        // or the carousel or its parent isn't visible
        if (!document.hidden && carouselRef.current && isInViewport.default(carouselRef.current)) {
            if (animating) {
                return;
            }
            handleControlClick('next');
        }
    };
    var handleControlClick = function (direction) {
        if (animating) {
            return;
        }
        setDirection(direction);
        if (direction === 'next') {
            active === itemsNumber - 1 ? setActive(0) : setActive(active + 1);
        }
        else {
            active === 0 ? setActive(itemsNumber - 1) : setActive(active - 1);
        }
    };
    var handleIndicatorClick = function (index) {
        if (active === index) {
            return;
        }
        if (active < index) {
            setDirection('next');
            setActive(index);
            return;
        }
        if (active > index) {
            setDirection('prev');
            setActive(index);
        }
    };
    var handleScroll = function () {
        if (!document.hidden && carouselRef.current && isInViewport.default(carouselRef.current)) {
            setVisible(true);
        }
        else {
            setVisible(false);
        }
    };
    var handleTouchMove = function (e) {
        var touchDown = touchPosition;
        if (touchDown === null) {
            return;
        }
        var currentTouch = e.touches[0].clientX;
        var diff = touchDown - currentTouch;
        if (diff > 5) {
            handleControlClick('next');
        }
        if (diff < -5) {
            handleControlClick('prev');
        }
        setTouchPosition(null);
    };
    var handleTouchStart = function (e) {
        var touchDown = e.touches[0].clientX;
        setTouchPosition(touchDown);
    };
    return (React.createElement("div", tslib_es6.__assign({ className: index.default('carousel slide', {
            'carousel-fade': transition === 'crossfade',
        }, className) }, (dark && { 'data-coreui-theme': 'dark' }), { onMouseEnter: _pause, onMouseLeave: cycle }, (touch && { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove }), rest, { ref: forkedRef }),
        React.createElement(CCarouselContext.CCarouselContext.Provider, { value: {
                setAnimating: setAnimating,
                setCustomInterval: setCustomInterval,
            } },
            indicators && (React.createElement("div", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index$1) {
                return (React.createElement("button", tslib_es6.__assign({ key: "indicator".concat(index$1), onClick: function () {
                        !animating && handleIndicatorClick(index$1);
                    }, className: index.default({
                        active: active === index$1,
                    }), "data-coreui-target": "" }, (active === index$1 && { 'aria-current': true }), { "aria-label": "Slide ".concat(index$1 + 1) })));
            }))),
            React.createElement("div", { className: "carousel-inner" }, React.Children.map(children, function (child, index) {
                if (React.isValidElement(child)) {
                    return React.cloneElement(child, {
                        active: active === index ? true : false,
                        direction: direction,
                        key: index,
                    });
                }
                return;
            })),
            controls && (React.createElement(React.Fragment, null,
                React.createElement("button", { className: "carousel-control-prev", onClick: function () { return handleControlClick('prev'); } },
                    React.createElement("span", { className: "carousel-control-prev-icon", "aria-label": "prev" })),
                React.createElement("button", { className: "carousel-control-next", onClick: function () { return handleControlClick('next'); } },
                    React.createElement("span", { className: "carousel-control-next-icon", "aria-label": "next" })))))));
});
CCarousel.propTypes = {
    activeIndex: PropTypes.number,
    children: PropTypes.node,
    className: PropTypes.string,
    controls: PropTypes.bool,
    dark: PropTypes.bool,
    indicators: PropTypes.bool,
    interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
    onSlid: PropTypes.func,
    onSlide: PropTypes.func,
    pause: PropTypes.oneOf([false, 'hover']),
    touch: PropTypes.bool,
    transition: PropTypes.oneOf(['slide', 'crossfade']),
    wrap: PropTypes.bool,
};
CCarousel.displayName = 'CCarousel';

exports.CCarousel = CCarousel;
//# sourceMappingURL=CCarousel.js.map