@grafana/ui
Version:
Grafana Components Library
1 lines • 6.45 kB
Source Map (JSON)
{"version":3,"file":"DataLinksActionsTooltip.mjs","sources":["../../../../src/components/Table/DataLinksActionsTooltip.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { flip, shift, useDismiss, useFloating, useInteractions } from '@floating-ui/react';\nimport { ReactElement, useMemo } from 'react';\nimport * as React from 'react';\n\nimport { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\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?: string | ReactElement;\n coords: DataLinksActionsTooltipCoords;\n onTooltipClose?: () => void;\n}\n\n/**\n *\n * @internal\n */\nexport const DataLinksActionsTooltip = ({ links, actions, value, coords, onTooltipClose }: Props) => {\n const styles = useStyles2(getStyles);\n\n // the order of middleware is important!\n const middleware = [\n flip({\n fallbackAxisSideDirection: 'end',\n // see https://floating-ui.com/docs/flip#combining-with-shift\n crossAxis: false,\n boundary: document.body,\n }),\n shift(),\n ];\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: 'right-start',\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 tableNextGen is fully rolled out */}\n {value}\n <Portal>\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 = (\n link: LinkModel,\n children: string | React.JSX.Element,\n className?: string\n): React.JSX.Element => {\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 zIndex: theme.zIndex.portal,\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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"}