@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 * as React from 'react';\n\nimport { getCellLinks } from '../../../utils';\nimport { DataLinksContextMenu } from '../../DataLinks/DataLinksContextMenu';\nimport { TableCellDisplayMode, TableCellProps } from '../types';\nimport { getCellOptions } 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  const hasLinks = Boolean(getCellLinks(field, row)?.length);\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    <div {...cellProps} className={tableStyles.cellContainer}>\n      {/* If there are data links/actions, we render them with image */}\n      {/* Otherwise we simply render the image */}\n      {hasLinks ? (\n        <DataLinksContextMenu\n          style={{ height: tableStyles.cellHeight - DATALINKS_HEIGHT_OFFSET, width: 'auto' }}\n          links={() => getCellLinks(field, row) || []}\n        >\n          {(api) => {\n            if (api.openMenu) {\n              return (\n                <div\n                  onClick={api.openMenu}\n                  role=\"button\"\n                  tabIndex={0}\n                  onKeyDown={(e: React.KeyboardEvent) => {\n                    if (e.key === 'Enter' && api.openMenu) {\n                      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions\n                      api.openMenu(e as any);\n                    }\n                  }}\n                >\n                  {img}\n                </div>\n              );\n            } else {\n              return img;\n            }\n          }}\n        </DataLinksContextMenu>\n      ) : (\n        img\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAOA,MAAM,uBAA0B,GAAA,EAAA;AAEnB,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AATpD,EAAA,IAAA,EAAA;AAUE,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;AAC9C,EAAA,MAAM,WAAW,OAAQ,CAAA,CAAA,EAAA,GAAA,YAAA,CAAa,OAAO,GAAG,CAAA,KAAvB,mBAA0B,MAAM,CAAA;AAGzD,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,2BACG,KAAK,EAAA,EAAA,GAAG,WAAW,SAAW,EAAA,WAAA,CAAY,eAGxC,QACC,EAAA,QAAA,mBAAA,GAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,MAAA,EAAQ,YAAY,UAAa,GAAA,uBAAA,EAAyB,OAAO,MAAO,EAAA;AAAA,MACjF,OAAO,MAAM,YAAA,CAAa,KAAO,EAAA,GAAG,KAAK,EAAC;AAAA,MAEzC,WAAC,GAAQ,KAAA;AACR,QAAA,IAAI,IAAI,QAAU,EAAA;AAChB,UACE,uBAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAS,GAAI,CAAA,QAAA;AAAA,cACb,IAAK,EAAA,QAAA;AAAA,cACL,QAAU,EAAA,CAAA;AAAA,cACV,SAAA,EAAW,CAAC,CAA2B,KAAA;AACrC,gBAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,CAAI,QAAU,EAAA;AAErC,kBAAA,GAAA,CAAI,SAAS,CAAQ,CAAA;AAAA;AACvB,eACF;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,SAEG,MAAA;AACL,UAAO,OAAA,GAAA;AAAA;AACT;AACF;AAAA,MAGF,GAEJ,EAAA,CAAA;AAEJ;;;;"}