@retailmenot/anchor/ts/Tabs/Tabs.component.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// VENDOR
import * as React from 'react';
import classNames from 'classnames';
import styled, { css } from '@xstyled/styled-components';
import { th, space as spaceStyles } from '@xstyled/system';
// ANCHOR
import { cloneWithProps } from '../utils/cloneWithProps/cloneWithProps';
import { variantStyles } from './utils';
import { Tab } from './Tab';
import { Pane } from './Pane';
const TabHeaderWrapper = styled('div') `
    ${({ position }) => css({
    borderBottom: position === 'top' ? 'light' : undefined,
    borderTop: position === 'bottom' ? 'light' : undefined,
    borderLeft: position === 'right' ? 'light' : undefined,
    borderRight: position === 'left' ? 'light' : undefined,
})}
`;
const TabHeader = styled('div') `
    display: flex;
    white-space: nowrap;

    ${({ position }) => ({
    left: css({
        flexDirection: 'column',
    }),
    top: css({
        flexDirection: 'row',
        overflowX: 'auto',
    }),
    bottom: css({
        flexDirection: 'row',
        overflowX: 'auto',
    }),
    right: css({
        flexDirection: 'column',
    }),
}[position || 'top'])}

    ${props => variantStyles(props).header}
`;
const StyledTabs = styled('div') `
    display: flex;
    ${spaceStyles}
    ${({ position }) => ({
    left: css({ flexDirection: 'row' }),
    top: css({ flexDirection: 'column' }),
    bottom: css({ flexDirection: 'column-reverse' }),
    right: css({ flexDirection: 'row-reverse' }),
}[position || 'top'])}

    ${props => variantStyles(props).base}

    ${({ background }) => css({
    background: th.color(background),
})}
`;
export const Tabs = (_a) => {
    var { className, children, position = 'top', variant = 'regular', activeKey, defaultActiveKey, spacing, onChange } = _a, props = __rest(_a, ["className", "children", "position", "variant", "activeKey", "defaultActiveKey", "spacing", "onChange"]);
    let tabInfo = [];
    React.Children.forEach(children, (child, index) => {
        if (!child || !React.isValidElement(child)) {
            return;
        }
        const { title, disabled } = child.props;
        tabInfo.push({ title, key: child.key || index, disabled });
    });
    const initialTab = defaultActiveKey || defaultActiveKey === 0
        ? defaultActiveKey
        : tabInfo[0] && tabInfo[0].key;
    const [stateCurrent, setCurrent] = React.useState(initialTab);
    const current = activeKey || activeKey === 0 ? activeKey : stateCurrent;
    tabInfo = tabInfo.map(info => (Object.assign(Object.assign({}, info), { active: info.key === current })));
    return (React.createElement(StyledTabs, Object.assign({ className: classNames('anchor-tabs', className), position: position, variant: variant }, props),
        React.createElement(TabHeaderWrapper, { variant: variant, position: position },
            React.createElement(TabHeader, { className: "anchor-tabs-header", position: position, variant: variant }, tabInfo.map(({ title, key, disabled, active }) => (React.createElement(Tab, { key: key, position: position, disabled: disabled, active: active, variant: variant, onClick: () => {
                    setCurrent(key);
                    if (onChange) {
                        onChange(key);
                    }
                }, spacing: spacing }, title))))),
        React.Children.map(children, (child, index) => cloneWithProps(child, {
            active: tabInfo[index].active,
            className: [
                'anchor-tabs-panel',
                tabInfo[index].active && 'active',
            ],
        }))));
};
Tabs.Pane = Pane;
//# sourceMappingURL=Tabs.component.js.map