synapse-react-client/dist/containers/Carousel.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Carousel = void 0;
var tslib_1 = require("tslib");
var react_carousel_1 = (0, tslib_1.__importDefault)(require("@brainhubeu/react-carousel"));
var react_1 = (0, tslib_1.__importStar)(require("react"));
var Arrow_1 = (0, tslib_1.__importDefault)(require("../assets/icons/Arrow"));
var useShowDesktop_1 = (0, tslib_1.__importDefault)(require("../utils/hooks/useShowDesktop"));
var react_sizeme_1 = require("react-sizeme");
require("@brainhubeu/react-carousel/lib/style.css");
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Remainder
function mod(a, b) {
    return ((a % b) + b) % b;
}
var DesktopProps = {
    clickToChange: true,
    infinite: true,
    slidesPerScroll: 1,
    slidesPerPage: 3,
    centered: true,
    arrowLeft: react_1.default.createElement(Arrow_1.default, { className: "SRC-Carousel__Arrow", arrowDirection: "left" }),
    arrowRight: react_1.default.createElement(Arrow_1.default, { className: "SRC-Carousel__Arrow", arrowDirection: "right" }),
    addArrowClickHandler: true,
    breakpoints: {
        1100: {
            slidesPerPage: 1,
        },
    },
};
var MobileProps = {
    dots: true,
    infinite: true,
    slidesPerScroll: 1,
    slidesPerPage: 1,
};
/**
 * Responsive carousel. The component will display a loading spinner if no children are passed via props.
 * Note that the child components must accept a className prop, or its class will be overriden
 */
var Carousel = function (_a) {
    var children = _a.children, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b;
    var showDesktop = (0, useShowDesktop_1.default)();
    var _c = (0, react_1.useState)(0), currentIndex = _c[0], setCurrentIndex = _c[1];
    var styledChildren = react_1.default.Children.map(children, function (child, index) {
        var _a;
        // react-carousel renders a flexbox that translates the visible portion to achieve the carousel effect.
        // To create the 'infinite' effect, duplicates are rendered, and the translation sometimes 'jumps' to the previous identical part of the flex container
        // Styling just the 'active' card (and not duplicates) causes CSS transitions to appear to run twice when the translation jumps
        // Calculating the mod index lets us style all duplicates, preventing the user from seeing multiple transitions.
        var childClass = (_a = child.props.className) !== null && _a !== void 0 ? _a : '';
        if (index === mod(currentIndex, children.length)) {
            childClass += ' SRC-Carousel__SelectedCard';
        }
        else {
            childClass += ' SRC-Carousel__UnselectedCard';
        }
        return react_1.default.cloneElement(child, { className: childClass });
    });
    return isLoading ? (react_1.default.createElement("div", { className: "spinner", style: { display: 'block' } })) : (react_1.default.createElement("div", { className: "SRC-Carousel" },
        react_1.default.createElement(react_sizeme_1.SizeMe, { refreshMode: "debounce", noPlaceholder: true }, function (_a) {
            var size = _a.size;
            return (react_1.default.createElement(react_carousel_1.default, (0, tslib_1.__assign)({}, (showDesktop ? DesktopProps : MobileProps), { key: size.width, value: currentIndex, onChange: function (value) { return setCurrentIndex(value); } }), styledChildren));
        })));
};
exports.Carousel = Carousel;
exports.default = exports.Carousel;
//# sourceMappingURL=Carousel.js.map