robust-react-ui/build/components/Carousel/Carousel.js

A React component library, built with a focus on accessibility, extensibility and reusability.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var index = require('../../utils/getClassNames/index.js');
var index$1 = require('../Typography/index2.js');

// Generated with util/create-component.js
var Carousel = function (_a) {
    var ariaLabel = _a.ariaLabel, slides = _a.slides, _b = _a.intervalSeconds, intervalSeconds = _b === void 0 ? 5 : _b, _c = _a.autoplay, autoplay = _c === void 0 ? false : _c;
    var _d = React.useState(0), activeSlide = _d[0], setActive = _d[1];
    var ref = React.useRef();
    var navigateSlide = function (dir) {
        var max = slides.length - 1;
        if (dir === 'next') {
            setActive(function (a) {
                if (a === max) {
                    return 0;
                }
                return a + 1;
            });
        }
        if (dir === 'prev') {
            setActive(function (a) {
                if (a === 0) {
                    return max;
                }
                return a - 1;
            });
        }
    };
    var _f = React.useState(autoplay), playing = _f[0], setPlaying = _f[1];
    var toggle = function (_e) {
        return setPlaying(function (p) { return !p; });
    };
    var _g = React.useState(false), itemsFocused = _g[0], setItemsFocused = _g[1];
    React.useEffect(function () {
        if (playing) {
            var interval = setInterval(function () {
                navigateSlide('next');
            }, intervalSeconds * 1000);
            ref.current = interval;
        }
        else {
            clearInterval(ref.current);
        }
        return function () { return clearInterval(ref.current); };
    }, [playing]);
    var pause = function () { return setPlaying(false); };
    var handleAnchorKeyDown = function (event) {
        var keyCode = event.keyCode, shiftKey = event.shiftKey;
        if (keyCode === 9) {
            // event.preventDefault();
            if (shiftKey) {
                setItemsFocused(true);
            }
        }
    };
    var _h = React.useState(false), polite = _h[0], setPolite = _h[1];
    var ariaLive = polite ? 'polite' : 'off';
    return (React__default.createElement("section", { "data-testid": "Carousel", onMouseEnter: function () { return setPolite(true); }, onFocus: function () { return setPolite(true); }, onBlur: function () { return setPolite(false); }, onMouseLeave: function () { return setPolite(false); }, id: "myCarousel", className: "rrui-carousel", "aria-roledescription": "carousel", "aria-label": ariaLabel },
        React__default.createElement("div", { className: "rrui-carousel__inner" },
            React__default.createElement("div", { className: "rrui-carousel__controls" },
                React__default.createElement("button", { 
                    // onFocus={pause}
                    onClick: toggle, type: "button", className: "rrui-carousel__button rrui-carousel__button--play", "aria-label": "Start automatic slide show" },
                    React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", className: "rrui-carousel__icon" }, playing ? (React__default.createElement(React__default.Fragment, null,
                        React__default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
                        React__default.createElement("line", { x1: "10", y1: "15", x2: "10", y2: "9" }),
                        React__default.createElement("line", { x1: "14", y1: "15", x2: "14", y2: "9" }))) : (React__default.createElement(React__default.Fragment, null,
                        React__default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
                        React__default.createElement("polygon", { points: "10 8 16 12 10 16 10 8" }))))),
                React__default.createElement("div", null,
                    React__default.createElement("button", { onFocus: function () { return console.log('onfocus'); }, onFocusCapture: function () { return console.log('onFocusCapture'); }, onBeforeInputCapture: function () { return console.log('onBeforeInputCapture'); }, onClick: function () { return navigateSlide('prev'); }, type: "button", className: "rrui-carousel__button rrui-carousel__button--prev", "aria-controls": "myCarousel-items", "aria-label": "Previous Slide" },
                        React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", className: "rrui-carousel__icon" },
                            React__default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
                            React__default.createElement("polyline", { points: "12 8 8 12 12 16" }),
                            React__default.createElement("line", { x1: "16", y1: "12", x2: "8", y2: "12" }))),
                    React__default.createElement("button", { onFocus: function () {
                            pause();
                            setItemsFocused(false);
                        }, onBlur: function () { return setItemsFocused(true); }, onClick: function () { return navigateSlide('next'); }, type: "button", className: "rrui-carousel__button rrui-carousel__button--next", "aria-controls": "myCarousel-items", "aria-label": "Next Slide" },
                        React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", className: "rrui-carousel__icon" },
                            React__default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
                            React__default.createElement("polyline", { points: "12 16 16 12 12 8" }),
                            React__default.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12" }))))),
            React__default.createElement("div", { id: "myCarousel-items", className: index({
                    'rrui-carousel__items': true,
                    'rrui-carousel__items--focused': itemsFocused,
                }), "aria-live": ariaLive }, slides.map(function (s, i) { return (React__default.createElement("div", { key: i.toString(), className: index({
                    'rrui-carousel__item': true,
                    'rrui-carousel__item--active': activeSlide === i,
                }), role: "group", "aria-roledescription": "slide", "aria-label": (i + 1).toString() + " of " + slides.length },
                React__default.createElement("div", { className: "rrui-carousel__image" },
                    React__default.createElement("a", { href: s.href },
                        React__default.createElement("img", { src: s.imageSrc, alt: s.imageAlt }))),
                React__default.createElement("div", { className: "rrui-carousel__caption" },
                    React__default.createElement(index$1.Heading, { level: 3 },
                        React__default.createElement("a", { onKeyDown: handleAnchorKeyDown, onFocus: function () { return setItemsFocused(false); }, href: s.href, id: "carousel-label-" + i }, s.captionHeading)),
                    React__default.createElement(index$1.Paragraph, null, s.captionText)))); })))));
};

module.exports = Carousel;
//# sourceMappingURL=Carousel.js.map