@arranjae/react-simple-carousel/es6/SimpleCarousel.js

Simple Carousel - React and TypeScript

import classnames from "classnames";
import React, { useState } from "react";
import { SimpleCarouselItem } from "./";
import { CustomButton } from "./Common";
var SimpleCarousel = function (props) {
    var _a, _b;
    var _c = useState(0), actualScroll = _c[0], setActualScroll = _c[1];
    var _d = useState(0), actualItem = _d[0], setActualItem = _d[1];
    var _e = useState(), wrapperRef = _e[0], setWrapperRef = _e[1];
    var itemsRefs = {};
    var onNext = function () {
        if (!wrapperRef)
            return;
        var halfWidth = wrapperRef.offsetWidth / 2;
        var scroll = actualScroll + halfWidth;
        if (scroll > wrapperRef.scrollWidth)
            return;
        wrapperRef.scrollLeft = scroll;
        setActualScroll(scroll);
    };
    var onPrev = function () {
        if (!wrapperRef)
            return;
        var halfWidth = wrapperRef.offsetWidth / 2;
        var scroll = actualScroll - halfWidth;
        if (scroll < 0) {
            wrapperRef.scrollLeft = 0;
            return setActualScroll(0);
        }
        wrapperRef.scrollLeft = scroll;
        setActualScroll(scroll);
    };
    var moveToItem = function (i) {
        itemsRefs["ref-item-" + i].current.scrollIntoView({ behavior: 'smooth', inline: 'center' });
        setActualScroll(wrapperRef.scrollLeft);
        setActualItem(i);
    };
    return (React.createElement("div", { className: "simple-carousel" },
        React.createElement("div", { ref: function (inst) { return setWrapperRef(inst); }, className: classnames('simple-carousel-wrapper', props.wrapperClasses) }, props.list.map(function (item, i) {
            return (React.createElement(SimpleCarouselItem, { key: i, id: "simple-carousel-item-" + i, refer: function (inst) {
                    itemsRefs["ref-item-" + i] = inst;
                }, item: item, setScroll: function () {
                    setActualScroll(wrapperRef.scrollLeft);
                    setActualItem(i);
                } }));
        })),
        props.showBullets && (React.createElement("div", { className: "simple-carousel-bullets" }, props.list.map(function (_item, i) {
            return (React.createElement("span", { className: "simple-carousel-bullets-item " + (i === actualItem ? 'active' : ''), key: "bullet-" + i, onClick: function () {
                    moveToItem(i);
                } }, i));
        }))),
        React.createElement(CustomButton, { Elem: (_a = props.customButtons) === null || _a === void 0 ? void 0 : _a.prev, className: classnames('btn-scroll prev', {
                hidden: props.list && props.list.length < 2,
            }), handleClick: onPrev }, "Prev"),
        React.createElement(CustomButton, { Elem: (_b = props.customButtons) === null || _b === void 0 ? void 0 : _b.next, className: classnames('btn-scroll next', {
                hidden: props.list && props.list.length < 2,
            }), handleClick: onNext }, "Next")));
};
export default SimpleCarousel;
//# sourceMappingURL=SimpleCarousel.js.map