robust-react-ui/build/components/TabList/TabList.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');

// Generated with util/create-component.js
var TabList = function (_a) {
    var _b;
    var ariaLabel = _a.ariaLabel, tabs = _a.tabs, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? 'primary' : _d;
    var _e = React.useState(null), activeTab = _e[0], setActiveTab = _e[1];
    var arrLength = tabs.length;
    var _f = React__default.useState([]), tabRefs = _f[0], setTabRefs = _f[1];
    var _g = React__default.useState([]), tabPanelRefs = _g[0], setTabPanelRefs = _g[1];
    React.useEffect(function () {
        if (tabs.length > 0)
            setActiveTab({
                tabIndex: 0,
                tabName: tabs[0].tabId,
            });
        setTabRefs(Array(arrLength)
            .fill(null)
            .map(function (_, i) { return tabRefs[i] || React.createRef(); }));
        setTabPanelRefs(Array(arrLength)
            .fill(null)
            .map(function (_, i) { return tabPanelRefs[i] || React.createRef(); }));
    }, [arrLength]);
    var selectFirstTab = function () {
        setActiveTab({
            tabIndex: 0,
            tabName: tabs[0].tabId,
        });
        tabRefs[0].current.focus();
    };
    var selectLastTab = function () {
        var lastIndex = tabs.length - 1;
        setActiveTab({
            tabIndex: lastIndex,
            tabName: tabs[lastIndex].tabId,
        });
        tabRefs[lastIndex].current.focus();
    };
    var selectNextTab = function () {
        if (activeTab.tabIndex === tabs.length - 1) {
            selectFirstTab();
        }
        else {
            var nextIndex = activeTab.tabIndex + 1;
            setActiveTab({
                tabIndex: nextIndex,
                tabName: tabs[nextIndex].tabId,
            });
            tabRefs[nextIndex].current.focus();
        }
    };
    var selectPreviousTab = function () {
        if (activeTab.tabIndex === 0) {
            selectLastTab();
        }
        else {
            var nextIndex = activeTab.tabIndex - 1;
            setActiveTab({
                tabIndex: nextIndex,
                tabName: tabs[nextIndex].tabId,
            });
            tabRefs[nextIndex].current.focus();
        }
    };
    var handleKeyDown = function (event) {
        var keyCode = event.keyCode;
        switch (keyCode) {
            case 39:
                event.preventDefault();
                selectNextTab();
                break;
            case 37:
                event.preventDefault();
                selectPreviousTab();
                break;
            case 36:
                event.preventDefault();
                selectFirstTab();
                break;
            case 35:
                event.preventDefault();
                selectLastTab();
                break;
            case 40:
            case 38:
                event.preventDefault();
                break;
        }
    };
    return (React__default.createElement("div", { "data-testid": "TabList", className: index((_b = {
                'rrui-tablist': true,
                'rrui-tablist--full-width': fullWidth
            },
            _b["rrui-tablist--" + variant] = true,
            _b)) },
        React__default.createElement("div", { role: "tablist", "aria-label": ariaLabel || null, className: index({ 'rrui-tablist__button-group': true }) }, tabs.map(function (t, index$1) { return (React__default.createElement("button", { type: "button", "data-testid": "TabListButton", tabIndex: (activeTab === null || activeTab === void 0 ? void 0 : activeTab.tabName) !== t.tabId ? -1 : null, ref: tabRefs[index$1], key: t.tabId, onKeyDown: function (event) {
                return handleKeyDown(event);
            }, onClick: function () {
                return setActiveTab({
                    tabIndex: index$1,
                    tabName: t.tabId,
                });
            }, className: index({
                'rrui-tablist__button': true,
                'rrui-tablist__button--active': (activeTab === null || activeTab === void 0 ? void 0 : activeTab.tabName) === t.tabId,
            }), role: "tab", "aria-selected": (activeTab === null || activeTab === void 0 ? void 0 : activeTab.tabName) === t.tabId ? 'true' : 'false', "aria-controls": t.tabId, id: t.buttonId }, t.buttonLabel)); })),
        tabs.map(function (x, i) { return (React__default.createElement("div", { "data-testid": "TabListPanel", ref: tabPanelRefs[i], key: x.tabId, className: index({
                'rrui-tablist__panel': true,
                'rrui-tablist__panel--hidden': x.tabId !== (activeTab === null || activeTab === void 0 ? void 0 : activeTab.tabName),
            }), tabIndex: 0, role: "tabpanel", id: x.tabId, "aria-labelledby": x.tabId }, x.tabContent)); })));
};

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