@grafana/ui
Version:
Grafana Components Library
104 lines (101 loc) • 3.47 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import memoize from 'micro-memoize';
import { useMemo } from 'react';
import { formattedValueToString, FALLBACK_COLOR, classicColors, fieldColorModeRegistry, getColorByStringHash } from '@grafana/data';
import { FieldColorModeId } from '@grafana/schema';
import { getActiveCellSelector, isTableCellStylesKeyEqual } from '../styles.mjs';
;
function PillCell({ rowIdx, field, theme, getTextColorForBackground }) {
const value = field.values[rowIdx];
const pills = useMemo(() => {
const pillValues = inferPills(value);
return pillValues.length > 0 ? pillValues.map((pill, index) => {
const renderedValue = 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__ */ 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 : FALLBACK_COLOR;
}
if (((_d = cfg.color) == null ? void 0 : _d.mode) === FieldColorModeId.Fixed) {
return theme.visualization.getColorByName((_f = (_e = cfg.color) == null ? void 0 : _e.fixedColor) != null ? _f : FALLBACK_COLOR);
}
let colors = classicColors;
const configuredColor = cfg.color;
if (configuredColor) {
const mode = fieldColorModeRegistry.get(configuredColor.mode);
if (typeof (mode == null ? void 0 : mode.getColors) === "function") {
colors = mode.getColors(theme);
}
}
return getColorByStringHash(colors, String(value));
}
const getStyles = memoize(
(theme, { textWrap, shouldOverflow, maxHeight }) => css({
display: "inline-flex",
gap: theme.spacing(0.5),
flexWrap: textWrap ? "wrap" : "nowrap",
...shouldOverflow && {
[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: isTableCellStylesKeyEqual }
);
export { PillCell, getStyles, inferPills };
//# sourceMappingURL=PillCell.mjs.map