@coreui/react-pro
Version:
UI Components Library for React.js
172 lines (169 loc) • 7.18 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 isRTL from '../../utils/isRTL.js';
import isInViewport from '../../utils/isInViewport.js';
import Swipe from '../../utils/swipe.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 handleControlClickRef = useRef(() => undefined);
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 [visible, setVisible] = useState();
useEffect(() => {
setItemsNumber(Children.toArray(children).length);
}, [children]);
useEffect(() => {
if (visible) {
cycle();
}
}, [visible]);
useEffect(() => {
if (animating) {
onSlide === null || onSlide === void 0 ? void 0 : onSlide(active, direction);
}
else {
cycle();
onSlid === null || onSlid === void 0 ? void 0 : onSlid(active, direction);
}
}, [animating]);
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
useEffect(() => {
if (!touch || !carouselRef.current) {
return;
}
const swipe = new Swipe(carouselRef.current, {
onLeft: () => handleControlClickRef.current(isRTL(carouselRef.current) ? 'prev' : 'next'),
onRight: () => handleControlClickRef.current(isRTL(carouselRef.current) ? 'next' : 'prev'),
});
return () => swipe.dispose();
}, [touch]);
useEffect(() => {
return () => clearCycleTimeout();
}, []);
const clearCycleTimeout = () => {
if (data.timeout) {
clearTimeout(data.timeout);
data.timeout = null;
}
};
const cycle = () => {
clearCycleTimeout();
if (!wrap && active === itemsNumber - 1) {
return;
}
if (typeof interval === 'number') {
data.timeout = setTimeout(() => nextItemWhenVisible(), typeof customInterval === 'number' ? customInterval : interval);
}
};
const _pause = () => pause && clearCycleTimeout();
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') {
setActive(active === itemsNumber - 1 ? 0 : active + 1);
}
else {
setActive(active === 0 ? itemsNumber - 1 : active - 1);
}
};
handleControlClickRef.current = handleControlClick;
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);
}
};
return (React.createElement("div", Object.assign({ className: classNames('carousel slide', {
'carousel-fade': transition === 'crossfade',
}, className) }, (dark && { 'data-coreui-theme': 'dark' }), { onMouseEnter: _pause, onMouseLeave: cycle }, 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: () => {
if (!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,
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