@grafana/ui
Version:
Grafana Components Library
199 lines (194 loc) • 6.83 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var e2eSelectors = require('@grafana/e2e-selectors');
var i18n = require('@grafana/i18n');
var ThemeContext = require('../../themes/ThemeContext.cjs');
var IconButton = require('../IconButton/IconButton.cjs');
var Portal = require('../Portal/Portal.cjs');
var SidebarButton = require('./SidebarButton.cjs');
var SidebarPaneHeader = require('./SidebarPaneHeader.cjs');
var SidebarResizer = require('./SidebarResizer.cjs');
var useSidebar = require('./useSidebar.cjs');
var useSidebarClickAway = require('./useSidebarClickAway.cjs');
"use strict";
function SidebarComp({ children, contextValue }) {
const styles = ThemeContext.useStyles2(getStyles);
const theme = ThemeContext.useTheme2();
const { isDocked, position, tabsMode, hasOpenPane, edgeMargin, bottomMargin, onToggleIsHidden } = contextValue;
const className = css.cx({
[styles.container]: true,
[styles.undockedPaneOpen]: hasOpenPane && !isDocked,
[styles.containerLeft]: position === "left",
[styles.containerTabsMode]: tabsMode,
[styles.containerHidden]: !!contextValue.isHidden
});
const style = { [position]: theme.spacing(edgeMargin), bottom: theme.spacing(bottomMargin) };
const ref = useSidebarClickAway.useCustomClickAway((evt) => {
var _a;
const portalContainer = Portal.getPortalContainer();
if (evt.target instanceof Node && portalContainer && portalContainer.contains(evt.target)) {
return;
}
if (!isDocked && hasOpenPane) {
(_a = contextValue.onClosePane) == null ? void 0 : _a.call(contextValue);
}
});
if (contextValue.isHidden) {
return /* @__PURE__ */ jsxRuntime.jsx(useSidebar.SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
IconButton.IconButton,
{
className: css.cx(styles.showButton, position === "left" ? styles.showButtonLeft : styles.showButtonRight),
variant: "secondary",
name: "arrow-to-right",
tooltip: i18n.t("grafana-ui.sidebar.show", "Show"),
tooltipPlacement: position === "left" ? "right" : "left",
onClick: onToggleIsHidden,
"data-testid": e2eSelectors.selectors.components.Sidebar.showHideToggle
}
) });
}
return /* @__PURE__ */ jsxRuntime.jsx(useSidebar.SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
"div",
{
ref,
className,
style,
id: "sidebar-container",
"data-testid": e2eSelectors.selectors.components.Sidebar.container,
"aria-hidden": contextValue.isHidden,
children: [
!tabsMode && /* @__PURE__ */ jsxRuntime.jsx(SidebarResizer.SidebarResizer, {}),
children
]
}
) });
}
function SiderbarToolbar({ children }) {
const styles = ThemeContext.useStyles2(getStyles);
const sidebarContext = useSidebar.useSidebarContext();
if (!sidebarContext) {
throw new Error("Sidebar.Toolbar must be used within a Sidebar component");
}
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx(styles.toolbar, sidebarContext.compact && styles.toolbarIconsOnly), children: [
children,
/* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.flexGrow })
] });
}
function SidebarDivider() {
const styles = ThemeContext.useStyles2(getStyles);
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.divider });
}
function SidebarOpenPane({ children }) {
const styles = ThemeContext.useStyles2(getStyles);
const sidebarContext = useSidebar.useSidebarContext();
if (!sidebarContext) {
throw new Error("Sidebar.OpenPane must be used within a Sidebar component");
}
const className = css.cx(
styles.openPane,
sidebarContext.position === "right" ? styles.openPaneRight : styles.openPaneLeft
);
return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { width: sidebarContext.paneWidth }, children });
}
const getStyles = (theme) => {
return {
container: css.css({
display: "flex",
position: "absolute",
flexDirection: "row",
flex: "1 1 0",
border: `1px solid ${theme.colors.border.weak}`,
background: theme.colors.background.primary,
borderRadius: theme.shape.radius.lg,
zIndex: theme.zIndex.navbarFixed,
bottom: 0,
top: 0,
right: 0,
width: "calc-size(auto, size)",
[theme.transitions.handleMotion("no-preference")]: {
transition: theme.transitions.create("width", {
duration: theme.transitions.duration.standard
})
}
}),
containerHidden: css.css({
width: 0,
border: 0,
overflow: "hidden"
}),
containerTabsMode: css.css({
position: "relative"
}),
containerLeft: css.css({
right: "unset",
flexDirection: "row-reverse",
left: 0,
borderRadius: theme.shape.radius.default
}),
undockedPaneOpen: css.css({
boxShadow: theme.shadows.z3
}),
toolbar: css.css({
display: "flex",
flexDirection: "column",
alignItems: "center",
paddingBottom: theme.spacing(1),
flexGrow: 0,
gap: theme.spacing(2),
overflowX: "hidden",
overflowY: "auto",
width: theme.spacing(useSidebar.SIDE_BAR_WIDTH_WITH_TEXT)
}),
toolbarIconsOnly: css.css({
width: theme.spacing(useSidebar.SIDE_BAR_WIDTH_ICON_ONLY)
}),
divider: css.css({
height: "1px",
background: theme.colors.border.weak,
width: "70%"
}),
flexGrow: css.css({
flexGrow: 1
}),
openPane: css.css({
width: "280px",
flexGrow: 1,
paddingBottom: theme.spacing(2),
overflowY: "auto"
}),
openPaneRight: css.css({
borderRight: `1px solid ${theme.colors.border.weak}`
}),
openPaneLeft: css.css({
borderLeft: `1px solid ${theme.colors.border.weak}`
}),
showButton: css.css({
position: "fixed",
bottom: theme.spacing(2),
zIndex: theme.zIndex.navbarFixed,
padding: theme.spacing(1),
backgroundColor: theme.colors.background.secondary,
border: `1px solid ${theme.colors.border.strong}`
}),
showButtonRight: css.css({
right: theme.spacing(0.5),
transform: "scaleX(-1)"
}),
showButtonLeft: css.css({
left: theme.spacing(0.5)
})
};
};
const Sidebar = Object.assign(SidebarComp, {
Toolbar: SiderbarToolbar,
Button: SidebarButton.SidebarButton,
OpenPane: SidebarOpenPane,
Divider: SidebarDivider,
PaneHeader: SidebarPaneHeader.SidebarPaneHeader
});
exports.useSidebar = useSidebar.useSidebar;
exports.useSidebarContext = useSidebar.useSidebarContext;
exports.Sidebar = Sidebar;
//# sourceMappingURL=Sidebar.cjs.map