@vimeo/iris/components/Tabs/Tabs.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_Tabs_Tabs_style = require('./Tabs.style.js');
var components_Tabs_Tabs_minors = require('./Tabs.minors.js');
var components_Tabs_NavItem = require('./NavItem.js');
var utils_HOCs_withIris = require('../../utils/HOCs/withIris.js');
require('styled-components');
require('polished');
require('../../color/colors.js');
require('../Button/Button.js');
require('../Button/Button.style.js');
require('../Button/Button.config.js');
require('../Button/FeaturedIcon.js');
require('../../themes/index.js');
require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.js');
require('../../tokens/util/clamp.js');
require('../../tokens/color/format/format.js');
require('../../tokens/color/format/primary.js');
require('../../tokens/color/format/secondary.js');
require('../../tokens/color/format/tertiary.js');
require('../../tokens/color/rainbow/rainbow.js');
require('../../tokens/color/rainbow/conic/index.js');
require('../../tokens/color/rainbow/conic/sm.js');
require('../../tokens/color/rainbow/conic/xl.js');
require('../../tokens/color/rainbow/linear/index.js');
require('../../tokens/color/rainbow/linear/sm.js');
require('../../tokens/color/rainbow/linear/xl.js');
require('../../tokens/color/livestream/livestream.js');
require('../../tokens/color/status/status.js');
require('../../tokens/color/status/caution.js');
require('../../tokens/color/status/negative.js');
require('../../tokens/color/status/positive.js');
require('../../tokens/color/stroke/stroke.js');
require('../../tokens/color/surface/surface.js');
require('../../tokens/color/text/text.js');
require('../../tokens/util/round.js');
require('../../tokens/color/upsell/upsell.js');
require('../../tokens/color/upsell/sm.js');
require('../../tokens/color/upsell/xl.js');
require('../../tokens/color/upsell/new.js');
require('../../tokens/edge/edge.js');
require('../../tokens/space/space.js');
require('../../tokens/typography/index.js');
require('../../tokens/typography/size/size.js');
require('../LoaderCircular/LoaderCircular.js');
require('../LoaderCircular/LoaderCircular.style.js');
require('../../utils/hooks/useDeprecate.js');
require('../../utils/general/mergeReactRefs.js');
require('../../utils/css.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var Tabs = utils_HOCs_withIris.withIris(TabsComponent);
Tabs.Panel = components_Tabs_Tabs_minors.Panel;
function TabsComponent(_a) {
    var children = _a.children, forwardRef = _a.forwardRef, _b = _a.format, format = _b === void 0 ? 'soft' : _b, _c = _a.variant, variant = _c === void 0 ? 'minimalTransparent' : _c, _d = _a.pill, pill = _d === void 0 ? false : _d, props = tslib_es6.__rest(_a, ["children", "forwardRef", "format", "variant", "pill"]);
    var _e = tslib_es6.__read(React.useState(-1), 2), activeTab = _e[0], activeTabSet = _e[1];
    React.useLayoutEffect(function () {
        var active = children
            .map(function (_a, i) {
            var active = _a.props.active;
            return active && i;
        })
            .filter(function (i) { return typeof i === 'number' && i >= 0; });
        if (active.length === 0)
            return activeTabSet(0);
        if (active.length === 1)
            return activeTabSet(active[0]);
        var lastActive = active[active.length - 1];
        errorMessage(active, lastActive);
        activeTabSet(lastActive);
    }, [children]);
    function onKeyUp(_a) {
        var key = _a.key;
        var length = children.length;
        var next = activeTab === length - 1 ? 0 : activeTab + 1;
        var prev = activeTab === 0 ? length - 1 : activeTab - 1;
        if (key === 'ArrowRight')
            activeTabSet(next);
        if (key === 'ArrowLeft')
            activeTabSet(prev);
    }
    var childrenNavItems = children.map(function (_a, i) {
        var props = _a.props;
        return (React__default["default"].createElement("li", { key: i, onClick: function () { return activeTabSet(i); }, "data-id": props.dataId, style: { flex: '1 0 0' } },
            React__default["default"].createElement(components_Tabs_NavItem.NavItem, { onKeyUp: onKeyUp, format: format, index: i, label: props.label, selected: activeTab === i, variant: variant, pill: pill })));
    });
    var childrenPanels = children.map(function (child, i) {
        return activeTab === i &&
            React.cloneElement(child, { id: "#tab-".concat(i), key: i });
    });
    return (React__default["default"].createElement("div", tslib_es6.__assign({ ref: forwardRef }, props),
        React__default["default"].createElement(components_Tabs_Tabs_style.Nav, { variant: variant, pill: pill }, childrenNavItems),
        variant !== 'inlay' && (React__default["default"].createElement(components_Tabs_Tabs_style.Indicator, { width: children.length, position: activeTab })),
        childrenPanels));
}
var irisError = function (message) {
    return console.error("@vimeo/iris:", message, "\n\n");
};
var errorMessage = function (active, lastActive) {
    return irisError("Multiple tabs were specified as the intial active tab! Tabs: [".concat(active.toString(), "]. Using last 'active' tab: ").concat(lastActive, "."));
};

exports.Tabs = Tabs;