@grafana/ui
Version:
Grafana Components Library
1 lines • 7.07 kB
Source Map (JSON)
{"version":3,"file":"HoverWidget.mjs","sources":["../../../../src/components/PanelChrome/HoverWidget.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { type ReactElement, useCallback, useRef } from 'react';\nimport * as React from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { selectors as e2eSelectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\nimport { Icon } from '../Icon/Icon';\n\nimport { PanelMenu } from './PanelMenu';\n\ninterface Props {\n children?: React.ReactNode;\n menu?: ReactElement | (() => ReactElement);\n title?: string;\n offset?: number;\n dragClass?: string;\n onDragStart?: (event: React.PointerEvent<HTMLDivElement>) => void;\n onOpenMenu?: () => void;\n}\n\nexport function HoverWidget({ menu, title, dragClass, children, offset = -32, onOpenMenu, onDragStart }: Props) {\n const styles = useStyles2(getStyles);\n const draggableRef = useRef<HTMLDivElement>(null);\n const selectors = e2eSelectors.components.Panels.Panel.HoverWidget;\n // Capture the pointer to keep the widget visible while dragging\n const onPointerDown = useCallback(\n (e: React.PointerEvent<HTMLDivElement>) => {\n draggableRef.current?.setPointerCapture(e.pointerId);\n onDragStart?.(e);\n },\n [onDragStart]\n );\n\n const onPointerUp = useCallback((e: React.PointerEvent<HTMLDivElement>) => {\n draggableRef.current?.releasePointerCapture(e.pointerId);\n }, []);\n\n if (children === undefined || React.Children.count(children) === 0) {\n return null;\n }\n\n return (\n <div\n className={cx(styles.container, 'show-on-hover')}\n style={{ top: offset === 0 ? -1 : offset }}\n data-testid={selectors.container}\n >\n {dragClass && (\n <div\n className={cx(styles.square, styles.draggable, dragClass)}\n onPointerDown={onPointerDown}\n onPointerUp={onPointerUp}\n ref={draggableRef}\n data-testid={selectors.dragIcon}\n >\n <Icon name=\"expand-arrows\" className={styles.draggableIcon} />\n </div>\n )}\n {children}\n {menu && (\n <PanelMenu\n menu={menu}\n title={title}\n placement=\"bottom\"\n menuButtonClass={styles.menuButton}\n onOpenMenu={onOpenMenu}\n />\n )}\n </div>\n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n container: css({\n label: 'hover-container-widget',\n [theme.transitions.handleMotion('no-preference', 'reduce')]: {\n transition: `all .1s linear`,\n },\n display: 'flex',\n position: 'absolute',\n zIndex: 1,\n right: -1,\n top: -1,\n boxSizing: 'content-box',\n alignItems: 'center',\n background: theme.colors.background.secondary,\n color: theme.colors.text.primary,\n border: `1px solid ${theme.colors.border.weak}`,\n borderBottomLeftRadius: theme.shape.radius.default,\n height: theme.spacing(4),\n boxShadow: theme.shadows.z1,\n gap: theme.spacing(1),\n padding: theme.spacing(0, 1),\n }),\n square: css({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n width: theme.spacing(4),\n height: '100%',\n }),\n draggable: css({\n cursor: 'move',\n // mobile do not support draggable panels\n [theme.breakpoints.down('md')]: {\n display: 'none',\n },\n }),\n menuButton: css({\n // Background and border are overriden when topnav toggle is disabled\n background: 'inherit',\n border: 'none',\n }),\n draggableIcon: css({\n transform: 'rotate(45deg)',\n color: theme.colors.text.secondary,\n '&:hover': {\n color: theme.colors.text.primary,\n },\n }),\n };\n}\n"],"names":["selectors","e2eSelectors"],"mappings":"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"}