@coreui/react-pro/dist/esm/components/carousel/CCarouselItem.js

UI Components Library for React.js

import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useContext, useRef, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import '@popperjs/core';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { CCarouselContext } from './CCarouselContext.js';

const CCarouselItem = forwardRef((_a, ref) => {
    var { children, className, active, direction, interval = false } = _a, rest = __rest(_a, ["children", "className", "active", "direction", "interval"]);
    const { setAnimating, setCustomInterval } = useContext(CCarouselContext);
    const carouselItemRef = useRef(null);
    const forkedRef = useForkedRef(ref, carouselItemRef);
    const prevActive = useRef(undefined);
    const [directionClassName, setDirectionClassName] = useState();
    const [orderClassName, setOrderClassName] = useState();
    const [activeClassName, setActiveClassName] = useState(active && 'active');
    const [count, setCount] = useState(0);
    useEffect(() => {
        if (active) {
            setCustomInterval(interval);
            if (count !== 0)
                setOrderClassName(`carousel-item-${direction}`);
        }
        if (prevActive.current && !active) {
            setActiveClassName('active');
        }
        if (active || prevActive.current) {
            setTimeout(() => {
                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-${direction === 'next' ? 'start' : 'end'}`);
                }
            }, 0);
        }
        prevActive.current = active;
        if (count === 0)
            setCount(count + 1);
    }, [active]);
    useEffect(() => {
        const element = carouselItemRef.current;
        if (!element) {
            return;
        }
        const handleTransitionStart = () => {
            if (active) {
                setAnimating(true);
            }
        };
        const handleTransitionEnd = () => {
            if (active) {
                setAnimating(false);
            }
            setDirectionClassName('');
            setOrderClassName('');
            setActiveClassName(active ? 'active' : '');
        };
        element.addEventListener('transitionstart', handleTransitionStart);
        element.addEventListener('transitionend', handleTransitionEnd);
        return () => {
            element.removeEventListener('transitionstart', handleTransitionStart);
            element.removeEventListener('transitionend', handleTransitionEnd);
        };
    }, [active]);
    return (React.createElement("div", Object.assign({ className: classNames('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';

export { CCarouselItem };
//# sourceMappingURL=CCarouselItem.js.map