@grafana/ui/dist/esm/components/Table/Cells/ImageCell.mjs.map

Grafana Components Library

{"version":3,"file":"ImageCell.mjs","sources":["../../../../../src/components/Table/Cells/ImageCell.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { getCellLinks } from '../../../utils/table';\nimport { DataLinksActionsTooltip, renderSingleLink } from '../DataLinksActionsTooltip';\nimport { TableCellDisplayMode, TableCellProps } from '../types';\nimport {\n  tooltipOnClickHandler,\n  DataLinksActionsTooltipCoords,\n  getCellOptions,\n  getDataLinksActionsTooltipUtils,\n} from '../utils';\n\nconst DATALINKS_HEIGHT_OFFSET = 10;\n\nexport const ImageCell = (props: TableCellProps) => {\n  const { field, cell, tableStyles, row, cellProps } = props;\n  const cellOptions = getCellOptions(field);\n  const { title, alt } =\n    cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { title: undefined, alt: undefined };\n  const displayValue = field.display!(cell.value);\n\n  const links = getCellLinks(field, row) || [];\n\n  const [tooltipCoords, setTooltipCoords] = useState<DataLinksActionsTooltipCoords>();\n  const { shouldShowLink, hasMultipleLinksOrActions } = getDataLinksActionsTooltipUtils(links);\n  const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== undefined;\n\n  // The image element\n  const img = (\n    <img\n      style={{ height: tableStyles.cellHeight - DATALINKS_HEIGHT_OFFSET, width: 'auto' }}\n      src={displayValue.text}\n      className={tableStyles.imageCell}\n      alt={alt}\n      title={title}\n    />\n  );\n\n  return (\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n    <div\n      {...cellProps}\n      className={tableStyles.cellContainer}\n      style={{ ...cellProps.style, cursor: hasMultipleLinksOrActions ? 'context-menu' : 'auto' }}\n      onClick={tooltipOnClickHandler(setTooltipCoords)}\n    >\n      {/* If there are data links/actions, we render them with image */}\n      {/* Otherwise we simply render the image */}\n      {shouldShowLink ? (\n        renderSingleLink(links[0], img)\n      ) : shouldShowTooltip ? (\n        <DataLinksActionsTooltip\n          links={links}\n          value={img}\n          coords={tooltipCoords}\n          onTooltipClose={() => setTooltipCoords(undefined)}\n        />\n      ) : (\n        img\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAYA,MAAM,uBAA0B,GAAA,EAAA;AAEnB,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AAClD,EAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,WAAa,EAAA,GAAA,EAAK,WAAc,GAAA,KAAA;AACrD,EAAM,MAAA,WAAA,GAAc,eAAe,KAAK,CAAA;AACxC,EAAA,MAAM,EAAE,KAAA,EAAO,GAAI,EAAA,GACjB,WAAY,CAAA,IAAA,KAAS,oBAAqB,CAAA,KAAA,GAAQ,WAAc,GAAA,EAAE,KAAO,EAAA,KAAA,CAAA,EAAW,KAAK,KAAU,CAAA,EAAA;AACrG,EAAA,MAAM,YAAe,GAAA,KAAA,CAAM,OAAS,CAAA,IAAA,CAAK,KAAK,CAAA;AAE9C,EAAA,MAAM,KAAQ,GAAA,YAAA,CAAa,KAAO,EAAA,GAAG,KAAK,EAAC;AAE3C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAwC,EAAA;AAClF,EAAA,MAAM,EAAE,cAAA,EAAgB,yBAA0B,EAAA,GAAI,gCAAgC,KAAK,CAAA;AAC3F,EAAM,MAAA,iBAAA,GAAoB,6BAA6B,aAAkB,KAAA,KAAA,CAAA;AAGzE,EAAA,MAAM,GACJ,mBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,MAAA,EAAQ,YAAY,UAAa,GAAA,uBAAA,EAAyB,OAAO,MAAO,EAAA;AAAA,MACjF,KAAK,YAAa,CAAA,IAAA;AAAA,MAClB,WAAW,WAAY,CAAA,SAAA;AAAA,MACvB,GAAA;AAAA,MACA;AAAA;AAAA,GACF;AAGF,EAAA;AAAA;AAAA,oBAEE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,WAAW,WAAY,CAAA,aAAA;AAAA,QACvB,KAAA,EAAO,EAAE,GAAG,SAAA,CAAU,OAAO,MAAQ,EAAA,yBAAA,GAA4B,iBAAiB,MAAO,EAAA;AAAA,QACzF,OAAA,EAAS,sBAAsB,gBAAgB,CAAA;AAAA,QAI9C,2BACC,gBAAiB,CAAA,KAAA,CAAM,CAAC,CAAG,EAAA,GAAG,IAC5B,iBACF,mBAAA,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,KAAO,EAAA,GAAA;AAAA,YACP,MAAQ,EAAA,aAAA;AAAA,YACR,cAAA,EAAgB,MAAM,gBAAA,CAAiB,KAAS,CAAA;AAAA;AAAA,SAGlD,GAAA;AAAA;AAAA;AAEJ;AAEJ;;;;"}