@grafana/ui/dist/cjs/components/Table/Cells/ImageCell.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var table = require('../../../utils/table.cjs');
var DataLinksActionsTooltip = require('../DataLinksActionsTooltip.cjs');
var cellUtils = require('../cellUtils.cjs');
require('../types.cjs');
var schema = require('@grafana/schema');

"use strict";
const DATALINKS_HEIGHT_OFFSET = 10;
const ImageCell = (props) => {
  const { field, cell, tableStyles, row, cellProps } = props;
  const cellOptions = cellUtils.getCellOptions(field);
  const { title, alt } = cellOptions.type === schema.TableCellDisplayMode.Image ? cellOptions : { title: void 0, alt: void 0 };
  const displayValue = field.display(cell.value);
  const links = table.getCellLinks(field, row) || [];
  const [tooltipCoords, setTooltipCoords] = React.useState();
  const { shouldShowLink, hasMultipleLinksOrActions } = cellUtils.getDataLinksActionsTooltipUtils(links);
  const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== void 0;
  const img = /* @__PURE__ */ jsxRuntime.jsx(
    "img",
    {
      style: { height: tableStyles.cellHeight - DATALINKS_HEIGHT_OFFSET, width: "auto" },
      src: displayValue.text,
      className: tableStyles.imageCell,
      alt,
      title
    }
  );
  return (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        ...cellProps,
        className: tableStyles.cellContainer,
        style: { ...cellProps.style, cursor: hasMultipleLinksOrActions ? "context-menu" : "auto" },
        onClick: cellUtils.tooltipOnClickHandler(setTooltipCoords),
        children: shouldShowLink ? DataLinksActionsTooltip.renderSingleLink(links[0], img) : shouldShowTooltip ? /* @__PURE__ */ jsxRuntime.jsx(
          DataLinksActionsTooltip.DataLinksActionsTooltip,
          {
            links,
            value: img,
            coords: tooltipCoords,
            onTooltipClose: () => setTooltipCoords(void 0)
          }
        ) : img
      }
    )
  );
};

exports.ImageCell = ImageCell;
//# sourceMappingURL=ImageCell.cjs.map