@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,uBAAA,GAA0B,EAAA;AAEzB,MAAM,SAAA,GAAY,CAAC,KAAA,KAA0B;AAClD,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,WAAA,EAAa,GAAA,EAAK,WAAU,GAAI,KAAA;AACrD,EAAA,MAAM,WAAA,GAAc,eAAe,KAAK,CAAA;AACxC,EAAA,MAAM,EAAE,KAAA,EAAO,GAAA,EAAI,GACjB,WAAA,CAAY,IAAA,KAAS,oBAAA,CAAqB,KAAA,GAAQ,WAAA,GAAc,EAAE,KAAA,EAAO,KAAA,CAAA,EAAW,KAAK,KAAA,CAAA,EAAU;AACrG,EAAA,MAAM,YAAA,GAAe,KAAA,CAAM,OAAA,CAAS,IAAA,CAAK,KAAK,CAAA;AAE9C,EAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,KAAA,EAAO,GAAG,KAAK,EAAC;AAE3C,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,QAAA,EAAwC;AAClF,EAAA,MAAM,EAAE,cAAA,EAAgB,yBAAA,EAA0B,GAAI,gCAAgC,KAAK,CAAA;AAC3F,EAAA,MAAM,iBAAA,GAAoB,6BAA6B,aAAA,KAAkB,KAAA,CAAA;AAGzE,EAAA,MAAM,GAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,MAAA,EAAQ,YAAY,UAAA,GAAa,uBAAA,EAAyB,OAAO,MAAA,EAAO;AAAA,MACjF,KAAK,YAAA,CAAa,IAAA;AAAA,MAClB,WAAW,WAAA,CAAY,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,WAAA,CAAY,aAAA;AAAA,QACvB,KAAA,EAAO,EAAE,GAAG,SAAA,CAAU,OAAO,MAAA,EAAQ,yBAAA,GAA4B,iBAAiB,MAAA,EAAO;AAAA,QACzF,OAAA,EAAS,sBAAsB,gBAAgB,CAAA;AAAA,QAI9C,2BACC,gBAAA,CAAiB,KAAA,CAAM,CAAC,CAAA,EAAG,GAAG,IAC5B,iBAAA,mBACF,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,KAAA,EAAO,GAAA;AAAA,YACP,MAAA,EAAQ,aAAA;AAAA,YACR,cAAA,EAAgB,MAAM,gBAAA,CAAiB,KAAA,CAAS;AAAA;AAAA,SAClD,GAEA;AAAA;AAAA;AAEJ;AAEJ;;;;"}