@grafana/ui
Version:
Grafana Components Library
1 lines • 6.24 kB
Source Map (JSON)
{"version":3,"file":"DataLinksActionsTooltip.mjs","sources":["../../../../src/components/Table/DataLinksActionsTooltip.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useDismiss, useFloating, useInteractions } from '@floating-ui/react';\nimport { useMemo, ReactNode } from 'react';\n\nimport { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2, useTheme2 } from '../../themes/ThemeContext';\nimport { getPositioningMiddleware } from '../../utils/floating';\nimport { Portal } from '../Portal/Portal';\nimport { VizTooltipFooter } from '../VizTooltip/VizTooltipFooter';\nimport { VizTooltipWrapper } from '../VizTooltip/VizTooltipWrapper';\n\nimport { DataLinksActionsTooltipCoords } from './utils';\n\ninterface Props {\n links: LinkModel[];\n actions?: ActionModel[];\n value?: ReactNode;\n coords: DataLinksActionsTooltipCoords;\n onTooltipClose?: () => void;\n}\n\n/**\n *\n * @internal\n */\nexport const DataLinksActionsTooltip = ({ links, actions, value, coords, onTooltipClose }: Props) => {\n const theme = useTheme2();\n const styles = useStyles2(getStyles);\n const placement = 'right-start';\n\n // the order of middleware is important!\n const middleware = getPositioningMiddleware(placement);\n\n const virtual = useMemo(() => {\n const { clientX, clientY } = coords;\n\n // https://floating-ui.com/docs/virtual-elements\n return {\n getBoundingClientRect() {\n return {\n width: 0,\n height: 0,\n x: clientX,\n y: clientY,\n top: clientY,\n left: clientX,\n right: clientX,\n bottom: clientY,\n };\n },\n };\n }, [coords]);\n\n const refCallback = (el: HTMLDivElement) => {\n refs.setFloating(el);\n refs.setReference(virtual);\n };\n\n const { context, refs, floatingStyles } = useFloating({\n open: true,\n placement,\n onOpenChange: onTooltipClose,\n middleware,\n // whileElementsMounted: autoUpdate,\n });\n\n const dismiss = useDismiss(context);\n\n const { getFloatingProps, getReferenceProps } = useInteractions([dismiss]);\n\n if (links.length === 0 && !Boolean(actions?.length)) {\n return null;\n }\n\n return (\n <>\n {/* TODO: we can remove `value` from this component when TableRT is fully deprecated */}\n {value}\n <Portal zIndex={theme.zIndex.tooltip}>\n <div\n ref={refCallback}\n {...getReferenceProps()}\n {...getFloatingProps()}\n style={floatingStyles}\n className={styles.tooltipWrapper}\n data-testid={selectors.components.DataLinksActionsTooltip.tooltipWrapper}\n >\n <VizTooltipWrapper>\n <VizTooltipFooter dataLinks={links} actions={actions} />\n </VizTooltipWrapper>\n </div>\n </Portal>\n </>\n );\n};\n\nexport const renderSingleLink = (link: LinkModel, children: ReactNode, className?: string): ReactNode => {\n return (\n <a\n href={link.href}\n onClick={link.onClick}\n target={link.target}\n title={link.title}\n data-testid={selectors.components.DataLinksContextMenu.singleLink}\n className={className}\n >\n {children}\n </a>\n );\n};\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n tooltipWrapper: css({\n whiteSpace: 'pre',\n borderRadius: theme.shape.radius.default,\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.weak}`,\n boxShadow: theme.shadows.z3,\n userSelect: 'text',\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n };\n};\n"],"names":[],"mappings":"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"}