@grafana/ui
Version:
Grafana Components Library
65 lines (60 loc) • 2.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var IconButton = require('../IconButton/IconButton.cjs');
var Tab = require('../Tabs/Tab.cjs');
var TabContent = require('../Tabs/TabContent.cjs');
var TabsBar = require('../Tabs/TabsBar.cjs');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var Box = require('../Layout/Box/Box.cjs');
var ScrollContainer = require('../ScrollContainer/ScrollContainer.cjs');
"use strict";
function TabbedContainer({ tabs, defaultTab, closeIconTooltip, onClose, testId }) {
var _a;
const [activeTab, setActiveTab] = React.useState(tabs.some((tab) => tab.value === defaultTab) ? defaultTab : tabs[0].value);
const styles = ThemeContext.useStyles2(getStyles);
const onSelectTab = (item) => {
setActiveTab(item.value);
};
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, "data-testid": testId, children: [
/* @__PURE__ */ jsxRuntime.jsxs(TabsBar.TabsBar, { className: styles.tabs, children: [
tabs.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
Tab.Tab,
{
label: t.label,
active: t.value === activeTab,
onChangeTab: () => onSelectTab(t),
icon: t.icon
},
t.value
)),
/* @__PURE__ */ jsxRuntime.jsx(Box.Box, { grow: 1, display: "flex", justifyContent: "flex-end", paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { size: "lg", onClick: onClose, name: "times", tooltip: closeIconTooltip != null ? closeIconTooltip : "Close" }) })
] }),
/* @__PURE__ */ jsxRuntime.jsx(ScrollContainer.ScrollContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(TabContent.TabContent, { className: styles.tabContent, children: (_a = tabs.find((t) => t.value === activeTab)) == null ? void 0 : _a.content }) })
] });
}
const getStyles = (theme) => ({
container: css.css({
height: "100%",
display: "flex",
flexDirection: "column",
flex: "1 1 0",
minHeight: 0
}),
tabContent: css.css({
padding: theme.spacing(2),
backgroundColor: theme.colors.background.primary,
flex: 1
}),
tabs: css.css({
paddingTop: theme.spacing(0.5),
borderColor: theme.colors.border.weak,
ul: {
marginLeft: theme.spacing(2)
}
})
});
exports.TabbedContainer = TabbedContainer;
//# sourceMappingURL=TabbedContainer.cjs.map