@grafana/ui
Version:
Grafana Components Library
194 lines (191 loc) • 6.39 kB
JavaScript
import { jsx, jsxs } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '@grafana/i18n';
import { useStyles2, useTheme2 } from '../../themes/ThemeContext.mjs';
import { IconButton } from '../IconButton/IconButton.mjs';
import { getPortalContainer } from '../Portal/Portal.mjs';
import { SidebarButton } from './SidebarButton.mjs';
import { SidebarPaneHeader } from './SidebarPaneHeader.mjs';
import { SidebarResizer } from './SidebarResizer.mjs';
import { SidebarContext, useSidebarContext, SIDE_BAR_WIDTH_ICON_ONLY, SIDE_BAR_WIDTH_WITH_TEXT } from './useSidebar.mjs';
export { useSidebar } from './useSidebar.mjs';
import { useCustomClickAway } from './useSidebarClickAway.mjs';
"use strict";
function SidebarComp({ children, contextValue }) {
const styles = useStyles2(getStyles);
const theme = useTheme2();
const { isDocked, position, tabsMode, hasOpenPane, edgeMargin, bottomMargin, onToggleIsHidden } = contextValue;
const className = 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 = useCustomClickAway((evt) => {
var _a;
const portalContainer = 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__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
IconButton,
{
className: cx(styles.showButton, position === "left" ? styles.showButtonLeft : styles.showButtonRight),
variant: "secondary",
name: "arrow-to-right",
tooltip: t("grafana-ui.sidebar.show", "Show"),
tooltipPlacement: position === "left" ? "right" : "left",
onClick: onToggleIsHidden,
"data-testid": selectors.components.Sidebar.showHideToggle
}
) });
}
return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className,
style,
id: "sidebar-container",
"data-testid": selectors.components.Sidebar.container,
"aria-hidden": contextValue.isHidden,
children: [
!tabsMode && /* @__PURE__ */ jsx(SidebarResizer, {}),
children
]
}
) });
}
function SiderbarToolbar({ children }) {
const styles = useStyles2(getStyles);
const sidebarContext = useSidebarContext();
if (!sidebarContext) {
throw new Error("Sidebar.Toolbar must be used within a Sidebar component");
}
return /* @__PURE__ */ jsxs("div", { className: cx(styles.toolbar, sidebarContext.compact && styles.toolbarIconsOnly), children: [
children,
/* @__PURE__ */ jsx("div", { className: styles.flexGrow })
] });
}
function SidebarDivider() {
const styles = useStyles2(getStyles);
return /* @__PURE__ */ jsx("div", { className: styles.divider });
}
function SidebarOpenPane({ children }) {
const styles = useStyles2(getStyles);
const sidebarContext = useSidebarContext();
if (!sidebarContext) {
throw new Error("Sidebar.OpenPane must be used within a Sidebar component");
}
const className = cx(
styles.openPane,
sidebarContext.position === "right" ? styles.openPaneRight : styles.openPaneLeft
);
return /* @__PURE__ */ jsx("div", { className, style: { width: sidebarContext.paneWidth }, children });
}
const getStyles = (theme) => {
return {
container: 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({
width: 0,
border: 0,
overflow: "hidden"
}),
containerTabsMode: css({
position: "relative"
}),
containerLeft: css({
right: "unset",
flexDirection: "row-reverse",
left: 0,
borderRadius: theme.shape.radius.default
}),
undockedPaneOpen: css({
boxShadow: theme.shadows.z3
}),
toolbar: css({
display: "flex",
flexDirection: "column",
alignItems: "center",
paddingBottom: theme.spacing(1),
flexGrow: 0,
gap: theme.spacing(2),
overflowX: "hidden",
overflowY: "auto",
width: theme.spacing(SIDE_BAR_WIDTH_WITH_TEXT)
}),
toolbarIconsOnly: css({
width: theme.spacing(SIDE_BAR_WIDTH_ICON_ONLY)
}),
divider: css({
height: "1px",
background: theme.colors.border.weak,
width: "70%"
}),
flexGrow: css({
flexGrow: 1
}),
openPane: css({
width: "280px",
flexGrow: 1,
paddingBottom: theme.spacing(2),
overflowY: "auto"
}),
openPaneRight: css({
borderRight: `1px solid ${theme.colors.border.weak}`
}),
openPaneLeft: css({
borderLeft: `1px solid ${theme.colors.border.weak}`
}),
showButton: 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({
right: theme.spacing(0.5),
transform: "scaleX(-1)"
}),
showButtonLeft: css({
left: theme.spacing(0.5)
})
};
};
const Sidebar = Object.assign(SidebarComp, {
Toolbar: SiderbarToolbar,
Button: SidebarButton,
OpenPane: SidebarOpenPane,
Divider: SidebarDivider,
PaneHeader: SidebarPaneHeader
});
export { Sidebar, useSidebarContext };
//# sourceMappingURL=Sidebar.mjs.map