norma-library/dist/esm/components/Tabs.js

Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.

import { __assign, __rest } from "tslib";
import { Box, Tabs as MuiTabs, Tab } from '@mui/material';
import { styled, useTheme } from '@mui/material/styles';
import React from 'react';
var TabsStyled = styled(MuiTabs)(function (_a) {
    var theme = _a.theme;
    return ({
        borderBottom: '1px solid #e8e8e8',
        '& .Mui-selected': {
            color: theme.palette.primary.main,
        },
        '& .MuiTabs-indicator': {
            backgroundColor: theme.palette.primary.main,
        },
        '& .MuiButtonBase-root': {
            textTransform: 'none',
        },
    });
});
var TabStyled = styled(function (props) { return React.createElement(Tab, __assign({ disableRipple: true }, props)); })(function (_a) {
    var theme = _a.theme;
    return ({
        textTransform: 'none',
        fontWeight: theme.typography.fontWeightRegular,
        fontSize: theme.typography.pxToRem(15),
        marginRight: theme.spacing(1),
        color: theme.palette.text.secondary,
        padding: '5px 15px',
        top: '5px',
        minWidth: '60px',
        '&.Mui-selected': {
            color: theme.palette.primary.main,
        },
        '&.Mui-focusVisible': {
            backgroundColor: 'rgba(100, 95, 228, 0.32)',
        },
    });
});
function CustomTabPanel(props) {
    var children = props.children, value = props.value, index = props.index, other = __rest(props, ["children", "value", "index"]);
    return (React.createElement("div", __assign({ role: "tabpanel", hidden: value !== index, id: "simple-tabpanel-".concat(index), "aria-labelledby": "simple-tab-".concat(index) }, other), value === index && (React.createElement(Box, { sx: { p: 3 } }, children))));
}
function a11yProps(index) {
    return {
        id: "simple-tab-".concat(index),
        'aria-controls': "simple-tabpanel-".concat(index),
    };
}
export var Tabs = function (_a) {
    var _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, onChange = _a.onChange, props = __rest(_a, ["data", "color", "onChange"]);
    var muiTheme = useTheme();
    var _d = React.useState(0), value = _d[0], setValue = _d[1];
    var handleChange = function (event, newValue) {
        setValue(newValue);
        if (!!onChange)
            onChange(event, newValue);
    };
    return (React.createElement(Box, { sx: { width: '100%' } },
        React.createElement(Box, null,
            React.createElement(TabsStyled, __assign({ value: value, onChange: handleChange, "aria-label": "basic tabs example" }, props, { theme: muiTheme }), data && data.map(function (item, key) { return React.createElement(TabStyled, __assign({ label: item.label }, a11yProps(key))); }))),
        data &&
            data.map(function (item, key) { return (React.createElement(CustomTabPanel, { value: value, index: key, key: key }, item.children)); })));
};
//# sourceMappingURL=Tabs.js.map