UNPKG

@grafana/ui

Version:
1 lines 6.61 kB
{"version":3,"file":"HoverWidget.mjs","sources":["../../../../src/components/PanelChrome/HoverWidget.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { ReactElement, useCallback, useRef } from 'react';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { selectors as e2eSelectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes';\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 onOpenMenu?: () => void;\n}\n\nexport function HoverWidget({ menu, title, dragClass, children, offset = -32, onOpenMenu }: 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((e: React.PointerEvent<HTMLDivElement>) => {\n draggableRef.current?.setPointerCapture(e.pointerId);\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 className={cx(styles.container, 'show-on-hover')} style={{ top: offset }} data-testid={selectors.container}>\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: 0,\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 borderRadius: theme.shape.radius.default,\n height: theme.spacing(4),\n boxShadow: theme.shadows.z1,\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 '&:hover': {\n background: theme.colors.secondary.main,\n },\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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"}