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

var CCarouselItem = React.forwardRef(function (_a, ref) {
    var children = _a.children, className = _a.className, active = _a.active, direction = _a.direction, _b = _a.interval, interval = _b === void 0 ? false : _b, rest = tslib_es6.__rest(_a, ["children", "className", "active", "direction", "interval"]);
    var _c = React.useContext(CCarouselContext.CCarouselContext), setAnimating = _c.setAnimating, setCustomInterval = _c.setCustomInterval;
    var carouselItemRef = React.useRef(null);
    var forkedRef = useForkedRef.useForkedRef(ref, carouselItemRef);
    var prevActive = React.useRef(undefined);
    var _d = React.useState(), directionClassName = _d[0], setDirectionClassName = _d[1];
    var _e = React.useState(), orderClassName = _e[0], setOrderClassName = _e[1];
    var _f = React.useState(active && 'active'), activeClassName = _f[0], setActiveClassName = _f[1];
    var _g = React.useState(0), count = _g[0], setCount = _g[1];
    React.useEffect(function () {
        if (active) {
            setCustomInterval(interval);
            if (count !== 0)
                setOrderClassName("carousel-item-".concat(direction));
        }
        if (prevActive.current && !active) {
            setActiveClassName('active');
        }
        if (active || prevActive.current) {
            setTimeout(function () {
                var _a;
                if (count !== 0) {
                    // @ts-expect-error reflow is necessary to proper transition
                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
                    (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
                    setDirectionClassName("carousel-item-".concat(direction === 'next' ? 'start' : 'end'));
                }
            }, 0);
        }
        prevActive.current = active;
        if (count === 0)
            setCount(count + 1);
    }, [active]);
    React.useEffect(function () {
        var _a, _b;
        (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('transitionstart', function () {
            active && setAnimating(true);
        });
        (_b = carouselItemRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('transitionend', function () {
            active && setAnimating(false);
            setDirectionClassName('');
            setOrderClassName('');
            if (active) {
                setActiveClassName('active');
            }
            if (!active) {
                setActiveClassName('');
            }
        });
        return function () {
            var _a, _b;
            (_a = carouselItemRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('transitionstart', function () {
                active && setAnimating(true);
            });
            (_b = carouselItemRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('transitionend', function () {
                active && setAnimating(false);
                setDirectionClassName('');
                setOrderClassName('');
                if (active) {
                    setActiveClassName('active');
                }
                if (!active) {
                    setActiveClassName('');
                }
            });
        };
    });
    return (React.createElement("div", tslib_es6.__assign({ className: index.default('carousel-item', activeClassName, directionClassName, orderClassName, className), ref: forkedRef }, rest), children));
});
CCarouselItem.propTypes = {
    active: PropTypes.bool,
    children: PropTypes.node,
    className: PropTypes.string,
    direction: PropTypes.string,
    interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
};
CCarouselItem.displayName = 'CCarouselItem';

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