@kubit-ui-web/react-components/dist/cjs/components/carousel/carouselUnControlled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Carousel = exports.CarouselUnControlled = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const keyboard_utility_1 = require("../../utils/keyboard/keyboard.utility");
const carouselControlled_1 = require("./carouselControlled");
const useAutomateControl_1 = require("./hooks/useAutomateControl");
const useCarousel_1 = require("./hooks/useCarousel");
const CarouselUnControlledComponent = ({ defaultPage = 0, circular = true, centerMode = false, displayArrowsOnCarousel = true, centerExtremesWhenExtraPadding = false, numElementsPerPage, numElementsToSlide, onTransition, onePageAlign, disableSwipe = false, allowModifySliceWidth = false, onPageChange, ...props }, ref) => {
    const [currentPage, setCurrentPage] = react_1.default.useState(defaultPage);
    const carouselContainerRef = react_1.default.useRef(null);
    const carouselContentRef = react_1.default.useRef(null);
    const handleClickLeftArrow = e => {
        if (!allowShift.current || numPages <= 1) {
            return;
        }
        props.leftArrow?.onClick?.(e);
        const newPage = currentPage === 0 ? numPages - 1 : currentPage - 1;
        setCurrentPage(newPage);
        handlePageChange(-1);
        onPageChange?.(newPage);
        onTransition?.(true);
    };
    const onLeftSwipe = () => {
        if (allowShift.current && (circular || innerCurrentPage.current !== 0)) {
            const newPage = innerCurrentPage.current === 0 ? numPages - 1 : innerCurrentPage.current - 1;
            handlePageChange(-1);
            onPageChange?.(newPage);
            // onTransition is called internally when drag starts
            setCurrentPage(newPage);
        }
    };
    const handleClickRightArrow = e => {
        if (!allowShift.current || numPages <= 1) {
            return;
        }
        props.rightArrow?.onClick?.(e);
        const newPage = (currentPage + 1) % numPages;
        setCurrentPage(newPage);
        handlePageChange(1);
        onPageChange?.(newPage);
        onTransition?.(true);
    };
    const onRightSwipe = () => {
        if (allowShift.current && (circular || innerCurrentPage.current !== numPages - 1)) {
            const newPage = (innerCurrentPage.current + 1) % numPages;
            handlePageChange(1);
            onPageChange?.(newPage);
            setCurrentPage(newPage);
            // onTransition is called internally when drag starts
        }
    };
    const onKeyDown = event => {
        const leftArrowDisabled = !circular && currentPage === 0;
        const rightArrowDisabled = !circular && currentPage === numPages - 1;
        if (numPages <= 1) {
            return;
        }
        if ((0, keyboard_utility_1.isArrowLeftPressed)(event.key) && !props.pageControlAutomateConfig && !leftArrowDisabled) {
            handleClickLeftArrow(event);
        }
        else if ((0, keyboard_utility_1.isArrowRightPressed)(event.key) &&
            !props.pageControlAutomateConfig &&
            !rightArrowDisabled) {
            handleClickRightArrow(event);
        }
    };
    const handleChangeIndicator = (indexIndicator) => {
        if (!allowShift.current || indexIndicator === currentPage) {
            return;
        }
        const newPage = indexIndicator < 0 ? numPages - 1 : indexIndicator % numPages;
        setCurrentPage(prevPage => {
            handlePageChange(indexIndicator - prevPage);
            onPageChange?.(newPage);
            props.pageControlAutomateConfig?.mediaProgressBar.onBarChange?.(newPage);
            onTransition?.(true);
            return newPage;
        });
    };
    const { handlePageChange, allowShift, numPages, innerCurrentPage } = (0, useCarousel_1.useCarousel)({
        carouselContainerRef,
        carouselContentRef,
        circular,
        centerMode,
        extraPadding: props.extraPadding,
        elements: props.elements,
        numElementsPerPage,
        numElementsToSlide,
        defaultPage,
        onePageAlign,
        disableSwipe,
        allowModifySliceWidth: allowModifySliceWidth && !!numElementsPerPage,
        centerExtremesWhenExtraPadding,
        onRightSwipe,
        onLeftSwipe,
        onTransition,
    });
    const { handleClickMediaButton, handleMouseOver, handleMouseOut, isPlaying } = (0, useAutomateControl_1.useAutomateControl)({
        isPlayingInitially: props.pageControlAutomateConfig !== undefined
            ? props.pageControlAutomateConfig.playingInitially
            : false,
        onClickMediaButton: props.pageControlAutomateConfig?.playStop.onClick,
    });
    react_1.default.useEffect(() => {
        setCurrentPage(innerCurrentPage.current);
    }, [numPages]);
    return ((0, jsx_runtime_1.jsx)(carouselControlled_1.CarouselControlled, { ...props, ref: ref, allowModifySliceWidth: allowModifySliceWidth && !!numElementsPerPage, carouselContainerRef: carouselContainerRef, carouselContentRef: carouselContentRef, centerMode: centerMode, circular: circular, currentPage: currentPage, disableSwipe: disableSwipe, displayArrowsOnCarousel: displayArrowsOnCarousel, numPages: numPages, playing: isPlaying, onIndicatorChange: handleChangeIndicator, onKeyDown: onKeyDown, onLeftArrowClick: handleClickLeftArrow, onMediaButtonClick: handleClickMediaButton, onMouseOut: handleMouseOut, onMouseOver: handleMouseOver, onRightArrowClick: handleClickRightArrow }));
};
const CarouselUnControlled = react_1.default.forwardRef(CarouselUnControlledComponent);
exports.CarouselUnControlled = CarouselUnControlled;
exports.Carousel = CarouselUnControlled;
//# sourceMappingURL=carouselUnControlled.js.map