mt-flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
66 lines (65 loc) • 5.29 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Carousel = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const hi_1 = require("react-icons/hi");
const react_indiana_drag_scroll_1 = __importDefault(require("react-indiana-drag-scroll"));
const tailwind_merge_1 = require("tailwind-merge");
const __1 = require("../../");
const is_client_1 = require("../../helpers/is-client");
const merge_deep_1 = require("../../helpers/merge-deep");
const Carousel = ({ children, indicators = true, leftControl, rightControl, slide = true, slideInterval, className, theme: customTheme = {}, onSlideChange = null, ...props }) => {
const theme = (0, merge_deep_1.mergeDeep)((0, __1.useTheme)().theme.carousel, customTheme);
const isDeviceMobile = (0, is_client_1.isClient)() && navigator.userAgent.indexOf('IEMobile') !== -1;
const carouselContainer = (0, react_1.useRef)(null);
const [activeItem, setActiveItem] = (0, react_1.useState)(0);
const [isDragging, setIsDragging] = (0, react_1.useState)(false);
const didMountRef = (0, react_1.useRef)(false);
const items = (0, react_1.useMemo)(() => react_1.Children.map(children, (child) => (0, react_1.cloneElement)(child, {
className: (0, tailwind_merge_1.twMerge)(theme.item.base, child.props.className),
})), [children, theme.item.base]);
const navigateTo = (0, react_1.useCallback)((item) => () => {
if (!items)
return;
item = (item + items.length) % items.length;
if (carouselContainer.current) {
carouselContainer.current.scrollLeft = carouselContainer.current.clientWidth * item;
}
setActiveItem(item);
}, [items]);
(0, react_1.useEffect)(() => {
if (carouselContainer.current && !isDragging && carouselContainer.current.scrollLeft !== 0) {
setActiveItem(Math.round(carouselContainer.current.scrollLeft / carouselContainer.current.clientWidth));
}
}, [isDragging]);
(0, react_1.useEffect)(() => {
if (slide) {
const intervalId = setInterval(() => !isDragging && navigateTo(activeItem + 1)(), slideInterval ?? 3000);
return () => clearInterval(intervalId);
}
}, [activeItem, isDragging, navigateTo, slide, slideInterval]);
(0, react_1.useEffect)(() => {
if (didMountRef.current) {
onSlideChange && onSlideChange(activeItem);
}
else {
didMountRef.current = true;
}
}, [onSlideChange, activeItem]);
const handleDragging = (dragging) => () => setIsDragging(dragging);
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_merge_1.twMerge)(theme.root.base, className), "data-testid": "carousel", ...props, children: [(0, jsx_runtime_1.jsx)(react_indiana_drag_scroll_1.default, { className: (0, tailwind_merge_1.twMerge)(theme.scrollContainer.base, (isDeviceMobile || !isDragging) && theme.scrollContainer.snap), draggingClassName: "cursor-grab", innerRef: carouselContainer, onEndScroll: handleDragging(false), onStartScroll: handleDragging(true), vertical: false, children: items?.map((item, index) => ((0, jsx_runtime_1.jsx)("div", { className: theme.item.wrapper, "data-active": activeItem === index, "data-testid": "carousel-item", children: item }, index))) }), indicators && ((0, jsx_runtime_1.jsx)("div", { className: theme.indicators.wrapper, children: items?.map((_, index) => ((0, jsx_runtime_1.jsx)("button", { className: (0, tailwind_merge_1.twMerge)(theme.indicators.base, theme.indicators.active[index === activeItem ? 'on' : 'off']), onClick: navigateTo(index), "data-testid": "carousel-indicator", "aria-label": `Slide ${index + 1}` }, index))) })), items && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: theme.root.leftControl, children: (0, jsx_runtime_1.jsx)("button", { className: "group", "data-testid": "carousel-left-control", onClick: navigateTo(activeItem - 1), type: "button", "aria-label": "Previous slide", children: leftControl ? leftControl : (0, jsx_runtime_1.jsx)(DefaultLeftControl, {}) }) }), (0, jsx_runtime_1.jsx)("div", { className: theme.root.rightControl, children: (0, jsx_runtime_1.jsx)("button", { className: "group", "data-testid": "carousel-right-control", onClick: navigateTo(activeItem + 1), type: "button", "aria-label": "Next slide", children: rightControl ? rightControl : (0, jsx_runtime_1.jsx)(DefaultRightControl, {}) }) })] }))] }));
};
exports.Carousel = Carousel;
const DefaultLeftControl = () => {
const theme = (0, __1.useTheme)().theme.carousel;
return ((0, jsx_runtime_1.jsx)("span", { className: theme.control.base, children: (0, jsx_runtime_1.jsx)(hi_1.HiOutlineChevronLeft, { className: theme.control.icon }) }));
};
const DefaultRightControl = () => {
const theme = (0, __1.useTheme)().theme.carousel;
return ((0, jsx_runtime_1.jsx)("span", { className: theme.control.base, children: (0, jsx_runtime_1.jsx)(hi_1.HiOutlineChevronRight, { className: theme.control.icon }) }));
};
exports.Carousel.displayName = 'Carousel';