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

Grafana Components Library

{"version":3,"file":"ImageCell.mjs","sources":["../../../../../../src/components/Table/TableNG/Cells/ImageCell.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { Property } from 'csstype';\nimport * as React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { TableCellDisplayMode } from '@grafana/schema';\n\nimport { useStyles2 } from '../../../../themes';\nimport { DataLinksContextMenu } from '../../../DataLinks/DataLinksContextMenu';\nimport { ImageCellProps } from '../types';\nimport { getCellLinks } from '../utils';\n\nconst DATALINKS_HEIGHT_OFFSET = 10;\n\nexport const ImageCell = ({ cellOptions, field, height, justifyContent, value, rowIdx }: ImageCellProps) => {\n  const calculatedHeight = height - DATALINKS_HEIGHT_OFFSET;\n  const styles = useStyles2(getStyles, calculatedHeight, justifyContent);\n  const hasLinks = Boolean(getCellLinks(field, rowIdx)?.length);\n\n  const { text } = field.display!(value);\n  const { alt, title } =\n    cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { alt: undefined, title: undefined };\n\n  const img = <img alt={alt} src={text} className={styles.image} title={title} />;\n\n  // TODO: Implement actions\n  return (\n    <div className={styles.imageContainer}>\n      {hasLinks ? (\n        <DataLinksContextMenu links={() => getCellLinks(field, rowIdx) || []}>\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\nconst getStyles = (theme: GrafanaTheme2, height: number, justifyContent: Property.JustifyContent) => ({\n  image: css({\n    height,\n    width: 'auto',\n  }),\n  imageContainer: css({\n    display: 'flex',\n    justifyContent,\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAYA,MAAM,uBAA0B,GAAA,EAAA;AAEnB,MAAA,SAAA,GAAY,CAAC,EAAE,WAAA,EAAa,OAAO,MAAQ,EAAA,cAAA,EAAgB,KAAO,EAAA,MAAA,EAA6B,KAAA;AAd5G,EAAA,IAAA,EAAA;AAeE,EAAA,MAAM,mBAAmB,MAAS,GAAA,uBAAA;AAClC,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,SAAW,EAAA,gBAAA,EAAkB,cAAc,CAAA;AACrE,EAAA,MAAM,WAAW,OAAQ,CAAA,CAAA,EAAA,GAAA,YAAA,CAAa,OAAO,MAAM,CAAA,KAA1B,mBAA6B,MAAM,CAAA;AAE5D,EAAA,MAAM,EAAE,IAAA,EAAS,GAAA,KAAA,CAAM,QAAS,KAAK,CAAA;AACrC,EAAA,MAAM,EAAE,GAAA,EAAK,KAAM,EAAA,GACjB,WAAY,CAAA,IAAA,KAAS,oBAAqB,CAAA,KAAA,GAAQ,WAAc,GAAA,EAAE,GAAK,EAAA,KAAA,CAAA,EAAW,OAAO,KAAU,CAAA,EAAA;AAErG,EAAM,MAAA,GAAA,uBAAO,KAAI,EAAA,EAAA,GAAA,EAAU,KAAK,IAAM,EAAA,SAAA,EAAW,MAAO,CAAA,KAAA,EAAO,KAAc,EAAA,CAAA;AAG7E,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,cAAA,EACpB,qCACE,GAAA,CAAA,oBAAA,EAAA,EAAqB,KAAO,EAAA,MAAM,aAAa,KAAO,EAAA,MAAM,KAAK,EAAC,EAChE,WAAC,GAAQ,KAAA;AACR,IAAA,IAAI,IAAI,QAAU,EAAA;AAChB,MACE,uBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAS,GAAI,CAAA,QAAA;AAAA,UACb,IAAK,EAAA,QAAA;AAAA,UACL,QAAU,EAAA,CAAA;AAAA,UACV,SAAA,EAAW,CAAC,CAA2B,KAAA;AACrC,YAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,CAAI,QAAU,EAAA;AAErC,cAAA,GAAA,CAAI,SAAS,CAAQ,CAAA;AAAA;AACvB,WACF;AAAA,UAEC,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,KAEG,MAAA;AACL,MAAO,OAAA,GAAA;AAAA;AACT,GACF,EACF,IAEA,GAEJ,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAY,GAAA,CAAC,KAAsB,EAAA,MAAA,EAAgB,cAA6C,MAAA;AAAA,EACpG,OAAO,GAAI,CAAA;AAAA,IACT,MAAA;AAAA,IACA,KAAO,EAAA;AAAA,GACR,CAAA;AAAA,EACD,gBAAgB,GAAI,CAAA;AAAA,IAClB,OAAS,EAAA,MAAA;AAAA,IACT;AAAA,GACD;AACH,CAAA,CAAA;;;;"}