@grafana/ui/dist/cjs/components/Table/TableNG/Cells/PillCell.cjs.map

Grafana Components Library

{"version":3,"file":"PillCell.cjs","sources":["../../../../../../src/components/Table/TableNG/Cells/PillCell.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport memoize from 'micro-memoize';\nimport { useMemo } from 'react';\n\nimport {\n  type GrafanaTheme2,\n  classicColors,\n  type Field,\n  getColorByStringHash,\n  FALLBACK_COLOR,\n  fieldColorModeRegistry,\n  formattedValueToString,\n} from '@grafana/data';\nimport { FieldColorModeId } from '@grafana/schema';\n\nimport { getActiveCellSelector, isTableCellStylesKeyEqual } from '../styles';\nimport { type PillCellProps, type TableCellStyles, type TableCellValue } from '../types';\n\nexport function PillCell({ rowIdx, field, theme, getTextColorForBackground }: PillCellProps) {\n  const value = field.values[rowIdx];\n  const pills: Pill[] = useMemo(() => {\n    const pillValues = inferPills(value);\n    return pillValues.length > 0\n      ? pillValues.map((pill, index) => {\n          const renderedValue = formattedValueToString(field.display!(pill));\n          const bgColor = getPillColor(renderedValue, field, theme);\n          const textColor = getTextColorForBackground(bgColor);\n          return {\n            value: renderedValue,\n            key: `${pill}-${index}`,\n            bgColor,\n            color: textColor,\n          };\n        })\n      : [];\n  }, [value, field, theme, getTextColorForBackground]);\n\n  if (pills.length === 0) {\n    return null;\n  }\n\n  return pills.map((pill) => (\n    <span\n      key={pill.key}\n      style={{\n        backgroundColor: pill.bgColor,\n        color: pill.color,\n        border: pill.bgColor === TRANSPARENT ? `1px solid ${theme.colors.border.strong}` : undefined,\n      }}\n    >\n      {pill.value}\n    </span>\n  ));\n}\n\ninterface Pill {\n  value: string;\n  key: string;\n  bgColor: string;\n  color: string;\n}\n\nconst SPLIT_RE = /\\s*,\\s*/;\nconst TRANSPARENT = 'rgba(0,0,0,0)';\n\nexport function inferPills(rawValue: TableCellValue): unknown[] {\n  if (rawValue === '' || rawValue == null) {\n    return [];\n  }\n\n  if (Array.isArray(rawValue)) {\n    return rawValue.filter((v) => v != null).map((v) => String(v).trim());\n  }\n\n  const value = String(rawValue);\n\n  if (value[0] === '[') {\n    try {\n      return JSON.parse(value);\n    } catch {\n      return value.trim().split(SPLIT_RE);\n    }\n  }\n\n  return value.trim().split(SPLIT_RE);\n}\n\n// FIXME: this does not yet support \"shades of a color\"\nfunction getPillColor(value: unknown, field: Field, theme: GrafanaTheme2): string {\n  const cfg = field.config;\n\n  if (cfg.mappings?.length ?? 0 > 0) {\n    return field.display!(value).color ?? FALLBACK_COLOR;\n  }\n\n  if (cfg.color?.mode === FieldColorModeId.Fixed) {\n    return theme.visualization.getColorByName(cfg.color?.fixedColor ?? FALLBACK_COLOR);\n  }\n\n  let colors = classicColors;\n  const configuredColor = cfg.color;\n  if (configuredColor) {\n    const mode = fieldColorModeRegistry.get(configuredColor.mode);\n    if (typeof mode?.getColors === 'function') {\n      colors = mode.getColors(theme);\n    }\n  }\n\n  return getColorByStringHash(colors, String(value));\n}\n\nexport const getStyles: TableCellStyles = memoize(\n  (theme, { textWrap, shouldOverflow, maxHeight }) =>\n    css({\n      display: 'inline-flex',\n      gap: theme.spacing(0.5),\n      flexWrap: textWrap ? 'wrap' : 'nowrap',\n\n      ...(shouldOverflow && {\n        [getActiveCellSelector(Boolean(maxHeight))]: {\n          flexWrap: 'wrap',\n        },\n      }),\n\n      '> span': {\n        display: 'flex',\n        padding: theme.spacing(0.25, 0.75),\n        borderRadius: theme.shape.radius.default,\n        fontSize: theme.typography.bodySmall.fontSize,\n        lineHeight: theme.typography.bodySmall.lineHeight,\n        whiteSpace: 'nowrap',\n      },\n    }),\n  { isMatchingKey: isTableCellStylesKeyEqual }\n);\n"],"names":["useMemo","formattedValueToString","jsx","FALLBACK_COLOR","FieldColorModeId","classicColors","fieldColorModeRegistry","getColorByStringHash","memoize","css","getActiveCellSelector","isTableCellStylesKeyEqual"],"mappings":"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"}