@selfcommunity/react-ui
Version:
React UI Components to integrate a Community created with SelfCommunity Platform.
32 lines (31 loc) • 1.5 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const material_1 = require("@mui/material");
const react_1 = require("react");
const react_2 = require("swiper/react");
function Arrow(props) {
const { type, currentItem, setCurrentItem, className } = props;
// STATE
const [itemsLength, setItemsLength] = (0, react_1.useState)(0);
// HOOKS
const swiper = (0, react_2.useSwiper)();
(0, react_1.useEffect)(() => {
setItemsLength(swiper.slides.length);
}, [currentItem]);
const handleChange = (0, react_1.useCallback)((type) => {
if (type === 'prev') {
swiper.slidePrev();
}
else {
swiper.slideNext();
}
setCurrentItem(swiper.snapIndex);
}, [type]);
if (type === 'prev') {
return (currentItem > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('prev') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_left" }) }))));
}
return (itemsLength > 2 &&
currentItem < itemsLength - 1 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('next') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))));
}
exports.default = Arrow;