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

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var memoize = require('micro-memoize');
var React = require('react');
var data = require('@grafana/data');
var schema = require('@grafana/schema');
var styles = require('../styles.cjs');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var memoize__default = /*#__PURE__*/_interopDefaultCompat(memoize);

"use strict";
function PillCell({ rowIdx, field, theme, getTextColorForBackground }) {
  const value = field.values[rowIdx];
  const pills = React.useMemo(() => {
    const pillValues = inferPills(value);
    return pillValues.length > 0 ? pillValues.map((pill, index) => {
      const renderedValue = data.formattedValueToString(field.display(pill));
      const bgColor = getPillColor(renderedValue, field, theme);
      const textColor = getTextColorForBackground(bgColor);
      return {
        value: renderedValue,
        key: `${pill}-${index}`,
        bgColor,
        color: textColor
      };
    }) : [];
  }, [value, field, theme, getTextColorForBackground]);
  if (pills.length === 0) {
    return null;
  }
  return pills.map((pill) => /* @__PURE__ */ jsxRuntime.jsx(
    "span",
    {
      style: {
        backgroundColor: pill.bgColor,
        color: pill.color,
        border: pill.bgColor === TRANSPARENT ? `1px solid ${theme.colors.border.strong}` : void 0
      },
      children: pill.value
    },
    pill.key
  ));
}
const SPLIT_RE = /\s*,\s*/;
const TRANSPARENT = "rgba(0,0,0,0)";
function inferPills(rawValue) {
  if (rawValue === "" || rawValue == null) {
    return [];
  }
  if (Array.isArray(rawValue)) {
    return rawValue.filter((v) => v != null).map((v) => String(v).trim());
  }
  const value = String(rawValue);
  if (value[0] === "[") {
    try {
      return JSON.parse(value);
    } catch (e) {
      return value.trim().split(SPLIT_RE);
    }
  }
  return value.trim().split(SPLIT_RE);
}
function getPillColor(value, field, theme) {
  var _a, _b, _c, _d, _e, _f;
  const cfg = field.config;
  if ((_b = (_a = cfg.mappings) == null ? void 0 : _a.length) != null ? _b : 0 > 0) {
    return (_c = field.display(value).color) != null ? _c : data.FALLBACK_COLOR;
  }
  if (((_d = cfg.color) == null ? void 0 : _d.mode) === schema.FieldColorModeId.Fixed) {
    return theme.visualization.getColorByName((_f = (_e = cfg.color) == null ? void 0 : _e.fixedColor) != null ? _f : data.FALLBACK_COLOR);
  }
  let colors = data.classicColors;
  const configuredColor = cfg.color;
  if (configuredColor) {
    const mode = data.fieldColorModeRegistry.get(configuredColor.mode);
    if (typeof (mode == null ? void 0 : mode.getColors) === "function") {
      colors = mode.getColors(theme);
    }
  }
  return data.getColorByStringHash(colors, String(value));
}
const getStyles = memoize__default.default(
  (theme, { textWrap, shouldOverflow, maxHeight }) => css.css({
    display: "inline-flex",
    gap: theme.spacing(0.5),
    flexWrap: textWrap ? "wrap" : "nowrap",
    ...shouldOverflow && {
      [styles.getActiveCellSelector(Boolean(maxHeight))]: {
        flexWrap: "wrap"
      }
    },
    "> span": {
      display: "flex",
      padding: theme.spacing(0.25, 0.75),
      borderRadius: theme.shape.radius.default,
      fontSize: theme.typography.bodySmall.fontSize,
      lineHeight: theme.typography.bodySmall.lineHeight,
      whiteSpace: "nowrap"
    }
  }),
  { isMatchingKey: styles.isTableCellStylesKeyEqual }
);

exports.PillCell = PillCell;
exports.getStyles = getStyles;
exports.inferPills = inferPills;
//# sourceMappingURL=PillCell.cjs.map