@grafana/ui/dist/cjs/components/Table/Cells/DefaultCell.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var data = require('@grafana/data');
var schema = require('@grafana/schema');
var table = require('../../../utils/table.cjs');
var CellActions = require('../CellActions.cjs');
var DataLinksActionsTooltip = require('../DataLinksActionsTooltip.cjs');
var TableCellInspector = require('../TableCellInspector.cjs');
var cellUtils = require('../cellUtils.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const DefaultCell = (props) => {
  var _a, _b;
  const { field, cell, tableStyles, row, cellProps, frame, rowStyled, rowExpanded, textWrapped, height } = props;
  const inspectEnabled = Boolean((_a = field.config.custom) == null ? void 0 : _a.inspect);
  const displayValue = field.display(cell.value);
  const showFilters = props.onCellFilterAdded && field.config.filterable;
  const showActions = showFilters && cell.value !== void 0 || inspectEnabled;
  const cellOptions = cellUtils.getCellOptions(field);
  let value;
  const OG_TWEET_LENGTH = 140;
  if (cellOptions.type === schema.TableCellDisplayMode.Custom) {
    const CustomCellComponent = cellOptions.cellComponent;
    value = /* @__PURE__ */ jsxRuntime.jsx(CustomCellComponent, { field, value: cell.value, rowIndex: row.index, frame });
  } else {
    if (React__namespace.isValidElement(cell.value)) {
      value = cell.value;
    } else {
      value = data.formattedValueToString(displayValue);
    }
  }
  const isStringValue = typeof value === "string";
  const textShouldWrap = displayValue.text.length <= OG_TWEET_LENGTH && /\s/.test(displayValue.text);
  const cellStyle = getCellStyle(
    tableStyles,
    cellOptions,
    displayValue,
    inspectEnabled,
    isStringValue,
    textShouldWrap,
    textWrapped,
    rowStyled,
    rowExpanded
  );
  if (isStringValue) {
    let justifyContent = (_b = cellProps.style) == null ? void 0 : _b.justifyContent;
    if (justifyContent === "flex-end") {
      cellProps.style = { ...cellProps.style, textAlign: "right" };
    } else if (justifyContent === "center") {
      cellProps.style = { ...cellProps.style, textAlign: "center" };
    }
  }
  if (height) {
    cellProps.style = { ...cellProps.style, height };
  }
  if (textWrapped) {
    cellProps.style = { ...cellProps.style, textWrap: "wrap" };
  }
  const { key, ...rest } = cellProps;
  const links = table.getCellLinks(field, row) || [];
  const [tooltipCoords, setTooltipCoords] = React.useState();
  const { shouldShowLink, hasMultipleLinksOrActions } = cellUtils.getDataLinksActionsTooltipUtils(links);
  const shouldShowTooltip = hasMultipleLinksOrActions && tooltipCoords !== void 0;
  return (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
    /* @__PURE__ */ jsxRuntime.jsxs(
      "div",
      {
        ...rest,
        className: cellStyle,
        style: { ...cellProps.style, cursor: hasMultipleLinksOrActions ? "context-menu" : "auto" },
        onClick: cellUtils.tooltipOnClickHandler(setTooltipCoords),
        children: [
          shouldShowLink ? DataLinksActionsTooltip.renderSingleLink(links[0], value, getLinkStyle(tableStyles, cellOptions)) : shouldShowTooltip ? /* @__PURE__ */ jsxRuntime.jsx(
            DataLinksActionsTooltip.DataLinksActionsTooltip,
            {
              links,
              value,
              coords: tooltipCoords,
              onTooltipClose: () => setTooltipCoords(void 0)
            }
          ) : isStringValue ? `${value}` : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tableStyles.cellText, children: value }),
          showActions && /* @__PURE__ */ jsxRuntime.jsx(CellActions.CellActions, { ...props, previewMode: TableCellInspector.TableCellInspectorMode.text, showFilters })
        ]
      },
      key
    )
  );
};
const getLinkStyle = (tableStyles, cellOptions) => {
  if (cellOptions.type === schema.TableCellDisplayMode.Auto) {
    return tableStyles.cellLink;
  }
  return tableStyles.cellLinkForColoredCell;
};
function getCellStyle(tableStyles, cellOptions, displayValue, disableOverflowOnHover = false, isStringValue = false, shouldWrapText = false, textWrapped = false, rowStyled = false, rowExpanded = false) {
  let textColor = void 0;
  let bgColor = void 0;
  let bgHoverColor = void 0;
  const colors = cellUtils.getCellColors(tableStyles.theme, cellOptions, displayValue);
  textColor = colors.textColor;
  bgColor = colors.bgColor;
  bgHoverColor = colors.bgHoverColor;
  return tableStyles.buildCellContainerStyle(
    textColor,
    bgColor,
    bgHoverColor,
    !disableOverflowOnHover,
    isStringValue,
    shouldWrapText,
    textWrapped,
    rowStyled,
    rowExpanded
  );
}

exports.DefaultCell = DefaultCell;
//# sourceMappingURL=DefaultCell.cjs.map