@coreui/react
Version:
UI Components Library for React.js
161 lines (158 loc) • 7.46 kB
JavaScript
import { __rest, __assign } 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 { useForkedRef } from '../../hooks/useForkedRef.js';
import '@popperjs/core';
import { CCarouselContext } from './CCarouselContext.js';
var CCarousel = forwardRef(function (_a, ref) {
var children = _a.children, _b = _a.activeIndex, activeIndex = _b === void 0 ? 0 : _b, className = _a.className, controls = _a.controls, dark = _a.dark, indicators = _a.indicators, _c = _a.interval, interval = _c === void 0 ? 5000 : _c, onSlid = _a.onSlid, onSlide = _a.onSlide, _d = _a.pause, pause = _d === void 0 ? 'hover' : _d, _e = _a.touch, touch = _e === void 0 ? true : _e, transition = _a.transition, _f = _a.wrap, wrap = _f === void 0 ? true : _f, rest = __rest(_a, ["children", "activeIndex", "className", "controls", "dark", "indicators", "interval", "onSlid", "onSlide", "pause", "touch", "transition", "wrap"]);
var carouselRef = useRef(null);
var forkedRef = useForkedRef(ref, carouselRef);
var data = useRef({}).current;
var _g = useState(activeIndex), active = _g[0], setActive = _g[1];
var _h = useState(false), animating = _h[0], setAnimating = _h[1];
var _j = useState(), customInterval = _j[0], setCustomInterval = _j[1];
var _k = useState('next'), direction = _k[0], setDirection = _k[1];
var _l = useState(0), itemsNumber = _l[0], setItemsNumber = _l[1];
var _m = useState(null), touchPosition = _m[0], setTouchPosition = _m[1];
var _o = useState(), visible = _o[0], setVisible = _o[1];
useEffect(function () {
setItemsNumber(Children.toArray(children).length);
});
useEffect(function () {
visible && cycle();
}, [visible]);
useEffect(function () {
!animating && cycle();
!animating && onSlid && onSlid(active, direction);
animating && onSlide && onSlide(active, direction);
}, [animating]);
useEffect(function () {
window.addEventListener('scroll', handleScroll);
return function () {
window.removeEventListener('scroll', handleScroll);
};
});
var cycle = function () {
_pause();
if (!wrap && active === itemsNumber - 1) {
return;
}
if (typeof interval === 'number') {
data.timeout = setTimeout(function () { return nextItemWhenVisible(); }, typeof customInterval === 'number' ? customInterval : interval);
}
};
var _pause = function () { return pause && data.timeout && clearTimeout(data.timeout); };
var nextItemWhenVisible = function () {
// 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');
}
};
var handleControlClick = function (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);
}
};
var handleIndicatorClick = function (index) {
if (active === index) {
return;
}
if (active < index) {
setDirection('next');
setActive(index);
return;
}
if (active > index) {
setDirection('prev');
setActive(index);
}
};
var handleScroll = function () {
if (!document.hidden && carouselRef.current && isInViewport(carouselRef.current)) {
setVisible(true);
}
else {
setVisible(false);
}
};
var handleTouchMove = function (e) {
var touchDown = touchPosition;
if (touchDown === null) {
return;
}
var currentTouch = e.touches[0].clientX;
var diff = touchDown - currentTouch;
if (diff > 5) {
handleControlClick('next');
}
if (diff < -5) {
handleControlClick('prev');
}
setTouchPosition(null);
};
var handleTouchStart = function (e) {
var touchDown = e.touches[0].clientX;
setTouchPosition(touchDown);
};
return (React.createElement("div", __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: setAnimating,
setCustomInterval: setCustomInterval,
} },
indicators && (React.createElement("div", { className: "carousel-indicators" }, Array.from({ length: itemsNumber }, function (_, i) { return i; }).map(function (index) {
return (React.createElement("button", __assign({ key: "indicator".concat(index), onClick: function () {
!animating && handleIndicatorClick(index);
}, className: classNames({
active: active === index,
}), "data-coreui-target": "" }, (active === index && { 'aria-current': true }), { "aria-label": "Slide ".concat(index + 1) })));
}))),
React.createElement("div", { className: "carousel-inner" }, Children.map(children, function (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: function () { return handleControlClick('prev'); } },
React.createElement("span", { className: "carousel-control-prev-icon", "aria-label": "prev" })),
React.createElement("button", { className: "carousel-control-next", onClick: function () { return 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