@selfcommunity/react-ui/lib/esm/components/SuggestedEventsWidget/Arrow.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { jsx as _jsx } from "react/jsx-runtime";
import { Button, Icon } from '@mui/material';
import { useCallback, useEffect, useState } from 'react';
import { useSwiper } from 'swiper/react';
export default function Arrow(props) {
    const { type, currentItem, setCurrentItem, className } = props;
    // STATE
    const [itemsLength, setItemsLength] = useState(0);
    // HOOKS
    const swiper = useSwiper();
    useEffect(() => {
        setItemsLength(swiper.slides.length);
    }, [currentItem]);
    const handleChange = useCallback((type) => {
        if (type === 'prev') {
            swiper.slidePrev();
        }
        else {
            swiper.slideNext();
        }
        setCurrentItem(swiper.snapIndex);
    }, [type]);
    if (type === 'prev') {
        return (currentItem > 0 && (_jsx(Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('prev') }, { children: _jsx(Icon, { children: "chevron_left" }) }))));
    }
    return (itemsLength > 2 &&
        currentItem < itemsLength - 1 && (_jsx(Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('next') }, { children: _jsx(Icon, { children: "chevron_right" }) }))));
}