@grafana/ui
Version:
Grafana Components Library
105 lines (102 loc) • 3.19 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx, css } from '@emotion/css';
import * as React from 'react';
import { useRef, useCallback } from 'react';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import { Icon } from '../Icon/Icon.mjs';
import { PanelMenu } from './PanelMenu.mjs';
"use strict";
function HoverWidget({ menu, title, dragClass, children, offset = -32, onOpenMenu }) {
const styles = useStyles2(getStyles);
const draggableRef = useRef(null);
const selectors$1 = selectors.components.Panels.Panel.HoverWidget;
const onPointerDown = useCallback((e) => {
var _a;
(_a = draggableRef.current) == null ? void 0 : _a.setPointerCapture(e.pointerId);
}, []);
const onPointerUp = useCallback((e) => {
var _a;
(_a = draggableRef.current) == null ? void 0 : _a.releasePointerCapture(e.pointerId);
}, []);
if (children === void 0 || React.Children.count(children) === 0) {
return null;
}
return /* @__PURE__ */ jsxs("div", { className: cx(styles.container, "show-on-hover"), style: { top: offset }, "data-testid": selectors$1.container, children: [
dragClass && /* @__PURE__ */ jsx(
"div",
{
className: cx(styles.square, styles.draggable, dragClass),
onPointerDown,
onPointerUp,
ref: draggableRef,
"data-testid": selectors$1.dragIcon,
children: /* @__PURE__ */ jsx(Icon, { name: "expand-arrows", className: styles.draggableIcon })
}
),
children,
menu && /* @__PURE__ */ jsx(
PanelMenu,
{
menu,
title,
placement: "bottom",
menuButtonClass: styles.menuButton,
onOpenMenu
}
)
] });
}
function getStyles(theme) {
return {
container: css({
label: "hover-container-widget",
[theme.transitions.handleMotion("no-preference", "reduce")]: {
transition: `all .1s linear`
},
display: "flex",
position: "absolute",
zIndex: 1,
right: 0,
boxSizing: "content-box",
alignItems: "center",
background: theme.colors.background.secondary,
color: theme.colors.text.primary,
border: `1px solid ${theme.colors.border.weak}`,
borderRadius: theme.shape.radius.default,
height: theme.spacing(4),
boxShadow: theme.shadows.z1
}),
square: css({
display: "flex",
justifyContent: "center",
alignItems: "center",
width: theme.spacing(4),
height: "100%"
}),
draggable: css({
cursor: "move",
// mobile do not support draggable panels
[theme.breakpoints.down("md")]: {
display: "none"
}
}),
menuButton: css({
// Background and border are overriden when topnav toggle is disabled
background: "inherit",
border: "none",
"&:hover": {
background: theme.colors.secondary.main
}
}),
draggableIcon: css({
transform: "rotate(45deg)",
color: theme.colors.text.secondary,
"&:hover": {
color: theme.colors.text.primary
}
})
};
}
export { HoverWidget };
//# sourceMappingURL=HoverWidget.mjs.map