@coreui/react-pro/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');
require('@popperjs/core');
var useForkedRef = require('../../hooks/useForkedRef.js');
var CCarouselContext = require('./CCarouselContext.js');

const CCarousel = React.forwardRef((_a, ref) => {
    var { children, activeIndex = 0, className, controls, dark, indicators, interval = 5000, onSlid, onSlide, pause = 'hover', touch = true, transition, wrap = true } = _a, rest = tslib_es6.__rest(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
    const carouselRef = React.useRef(null);
    const forkedRef = useForkedRef.useForkedRef(ref, carouselRef);
    const data = React.useRef({}).current;
    const [active, setActive] = React.useState(activeIndex);
    const [animating, setAnimating] = React.useState(false);
    const [customInterval, setCustomInterval] = React.useState();
    const [direction, setDirection] = React.useState('next');
    const [itemsNumber, setItemsNumber] = React.useState(0);
    const [touchPosition, setTouchPosition] = React.useState(null);
    const [visible, setVisible] = React.useState();
    React.useEffect(() => {
        setItemsNumber(React.Children.toArray(children).length);
    });
    React.useEffect(() => {
        visible && cycle();
    }, [visible]);
    React.useEffect(() => {
        !animating && cycle();
        !animating && onSlid && onSlid(active, direction);
        animating && onSlide && onSlide(active, direction);
    }, [animating]);
    React.useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => {
            window.removeEventListener('scroll', handleScroll);
        };
    });
    const cycle = () => {
        _pause();
        if (!wrap && active === itemsNumber - 1) {
            return;
        }
        if (typeof interval === 'number') {
            data.timeout = setTimeout(() => nextItemWhenVisible(), typeof customInterval === 'number' ? customInterval : interval);
        }
    };
    const _pause = () => pause && data.timeout && clearTimeout(data.timeout);
    const nextItemWhenVisible = () => {
        // 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');
        }
    };
    const handleControlClick = (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);
        }
    };
    const handleIndicatorClick = (index) => {
        if (active === index) {
            return;
        }
        if (active < index) {
            setDirection('next');
            setActive(index);
            return;
        }
        if (active > index) {
            setDirection('prev');
            setActive(index);
        }
    };
    const handleScroll = () => {
        if (!document.hidden && carouselRef.current && isInViewport.default(carouselRef.current)) {
            setVisible(true);
        }
        else {
            setVisible(false);
        }
    };
    const handleTouchMove = (e) => {
        const touchDown = touchPosition;
        if (touchDown === null) {
            return;
        }
        const currentTouch = e.touches[0].clientX;
        const diff = touchDown - currentTouch;
        if (diff > 5) {
            handleControlClick('next');
        }
        if (diff < -5) {
            handleControlClick('prev');
        }
        setTouchPosition(null);
    };
    const handleTouchStart = (e) => {
        const touchDown = e.touches[0].clientX;
        setTouchPosition(touchDown);
    };
    return (React.createElement("div", Object.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,
                setCustomInterval,
            } },
            indicators && (React.createElement("div", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, (_, i) => i).map((index$1) => {
                return (React.createElement("button", Object.assign({ key: `indicator${index$1}`, onClick: () => {
                        !animating && handleIndicatorClick(index$1);
                    }, className: index.default({
                        active: active === index$1,
                    }), "data-coreui-target": "" }, (active === index$1 && { 'aria-current': true }), { "aria-label": `Slide ${index$1 + 1}` })));
            }))),
            React.createElement("div", { className: "carousel-inner" }, React.Children.map(children, (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: () => handleControlClick('prev') },
                    React.createElement("span", { className: `carousel-control-prev-icon`, "aria-label": "prev" })),
                React.createElement("button", { className: "carousel-control-next", onClick: () => 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