@faakhir/headlamp-plugin
Version:
The needed infrastructure for building Headlamp plugins.
36 lines (35 loc) • 2.17 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import MuiTab from '@mui/material/Tab';
import MuiTabs from '@mui/material/Tabs';
import Typography from '@mui/material/Typography';
import React from 'react';
import { useId } from '../../lib/util';
export default function Tabs(props) {
const { tabs, tabProps = {}, defaultIndex = 0, onTabChanged = null, ariaLabel } = props;
const [tabIndex, setTabIndex] = React.useState(defaultIndex && Math.min(defaultIndex, 0));
function handleTabChange(event, newValue) {
setTabIndex(newValue);
if (onTabChanged !== null) {
onTabChanged(newValue);
}
}
React.useEffect(() => {
if (defaultIndex === null) {
setTabIndex(false);
return;
}
setTabIndex(defaultIndex);
},
// eslint-disable-next-line
[defaultIndex]);
const uniqueIdSuffix = useId('tabs-');
return (_jsxs(React.Fragment, { children: [_jsx(MuiTabs, { value: tabIndex, onChange: handleTabChange, indicatorColor: "primary", textColor: "primary", "aria-label": ariaLabel, variant: "scrollable", centered: false, scrollButtons: "auto", sx: props.sx, ...tabProps, children: tabs.map(({ label }, i) => (_jsx(MuiTab, { label: label, sx: tabs?.length > 7
? {
minWidth: 150, // allows 8 tabs to show like on pods
}
: {}, id: `full-width-tab-${i}-${ariaLabel.replace(' ', '')}-${uniqueIdSuffix}`, "aria-controls": `full-width-tabpanel-${i}-${ariaLabel.replace(' ', '')}-${uniqueIdSuffix}` }, i))) }), tabs.map(({ component }, i) => (_jsx(TabPanel, { tabIndex: Number(tabIndex), index: i, id: `full-width-tabpanel-${i}-${ariaLabel.replace(' ', '')}-${uniqueIdSuffix}`, labeledBy: `full-width-tab-${i}-${ariaLabel.replace(' ', '')}-${uniqueIdSuffix}`, children: component }, i)))] }));
}
export function TabPanel(props) {
const { children, tabIndex, index, id, labeledBy } = props;
return (_jsx(Typography, { component: "div", role: "tabpanel", hidden: tabIndex !== index, id: id, "aria-labelledby": labeledBy, children: children }));
}