@coreui/react-pro
Version:
UI Components Library for React.js
161 lines (158 loc) • 6.87 kB
JavaScript
import { __rest } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useRef, useState, useEffect, Children } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import isInViewport from '../../utils/isInViewport.js';
import '@popperjs/core';
import { useForkedRef } from '../../hooks/useForkedRef.js';
import { CCarouselContext } from './CCarouselContext.js';
const CCarousel = forwardRef((_a, ref) => {
var { children, activeIndex = 0, className, controls, dark, indicators, interval = 5000, onSlid, onSlide, pause = 'hover', touch = true, transition, wrap = true } = _a, rest = __rest(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
const carouselRef = useRef(null);
const forkedRef = useForkedRef(ref, carouselRef);
const data = useRef({}).current;
const [active, setActive] = useState(activeIndex);
const [animating, setAnimating] = useState(false);
const [customInterval, setCustomInterval] = useState();
const [direction, setDirection] = useState('next');
const [itemsNumber, setItemsNumber] = useState(0);
const [touchPosition, setTouchPosition] = useState(null);
const [visible, setVisible] = useState();
useEffect(() => {
setItemsNumber(Children.toArray(children).length);
});
useEffect(() => {
visible && cycle();
}, [visible]);
useEffect(() => {
!animating && cycle();
!animating && onSlid && onSlid(active, direction);
animating && onSlide && onSlide(active, direction);
}, [animating]);
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(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(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: classNames('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.Provider, { value: {
setAnimating,
setCustomInterval,
} },
indicators && (React.createElement("div", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, (_, i) => i).map((index) => {
return (React.createElement("button", Object.assign({ key: `indicator${index}`, onClick: () => {
!animating && handleIndicatorClick(index);
}, className: classNames({
active: active === index,
}), "data-coreui-target": "" }, (active === index && { 'aria-current': true }), { "aria-label": `Slide ${index + 1}` })));
}))),
React.createElement("div", { className: "carousel-inner" }, 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';
export { CCarousel };
//# sourceMappingURL=CCarousel.js.map