@hitachivantara/uikit-react-core/dist/esm/Table/renderers/renderers.js

Core React components for the NEXT Design System.

import { jsx, Fragment, jsxs } from "react/jsx-runtime";
import { ClassNames } from "@emotion/react";
import { HvIcon } from "../../icons.js";
import { setId } from "../../utils/setId.js";
import { HvDateColumnCell } from "./DateColumnCell.js";
import { HvDropdownColumnCell } from "./DropdownColumnCell.js";
import { HvProgressColumnCell } from "./ProgressColumnCell.js";
import { HvSwitchColumnCell } from "./SwitchColumnCell.js";
import { HvButton } from "../../Button/Button.js";
import { HvTag } from "../../Tag/Tag.js";
import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
import { HvTypography } from "../../Typography/Typography.js";
const EM_DASH = "—";
const hvStringFallback = (value) => {
  return typeof value === "string" && value !== "" ? value : EM_DASH;
};
const hvNumberFallback = (value) => {
  return typeof value === "number" ? value : EM_DASH;
};
const hvNodeFallback = (value) => {
  if (!value) return EM_DASH;
  return hvStringFallback(value?.toString()) === EM_DASH ? EM_DASH : value;
};
function hvTextColumn(col, overflowTooltipProps = {}) {
  return {
    Cell: ({ value }) => /* @__PURE__ */ jsx(
      HvOverflowTooltip,
      {
        data: hvStringFallback(value),
        ...overflowTooltipProps
      }
    ),
    sortType: "alphanumeric",
    ...col
  };
}
function hvNumberColumn(col) {
  return {
    Cell: ({ value }) => /* @__PURE__ */ jsx(Fragment, { children: hvNumberFallback(value) }),
    align: "right",
    sortType: "number",
    ...col
  };
}
function hvDateColumn(col, dateFormat) {
  return {
    Cell: ({ value }) => /* @__PURE__ */ jsx(HvDateColumnCell, { date: value, dateFormat }),
    sortType: "alphanumeric",
    sortDescFirst: true,
    ...col
  };
}
function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: true }), CollapsedIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs" })) {
  return {
    Cell: (cellProps) => {
      const { value, row } = cellProps;
      const expandedProps = row.getToggleRowExpandedProps?.();
      const hasContent = getCanRowExpand?.(row) ?? true;
      return /* @__PURE__ */ jsx(ClassNames, { children: ({ css }) => /* @__PURE__ */ jsxs(Fragment, { children: [
        hasContent && /* @__PURE__ */ jsx(
          HvButton,
          {
            icon: true,
            "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
            "aria-expanded": row.isExpanded,
            onClick: expandedProps?.onClick,
            classes: {
              root: css({
                position: "absolute",
                left: 0,
                top: "50%",
                transform: "translateY(-50%)"
              })
            },
            children: row.isExpanded ? ExpandedIcon : CollapsedIcon
          }
        ),
        /* @__PURE__ */ jsx(HvOverflowTooltip, { data: hvStringFallback(value) })
      ] }) });
    },
    sortType: "alphanumeric",
    cellStyle: {
      position: "relative"
    },
    ...col
  };
}
function hvTagColumn(col, valueDataKey, colorDataKey, textColorDataKey, fromRowData = false, tagProps) {
  return {
    Cell: (cellProps) => {
      const { value, row } = cellProps;
      if (!value) {
        return /* @__PURE__ */ jsx(Fragment, { children: "—" });
      }
      const {
        [valueDataKey]: name,
        [colorDataKey]: color,
        [textColorDataKey]: textColor
      } = fromRowData ? row.original : value;
      return /* @__PURE__ */ jsx(
        HvTag,
        {
          label: /* @__PURE__ */ jsx(HvTypography, { variant: "body", children: name }),
          type: "semantic",
          color,
          style: textColor != null ? { color: textColor } : {},
          tabIndex: -1,
          ...tagProps
        }
      );
    },
    cellStyle: {
      paddingTop: 0,
      paddingBottom: 0
    },
    ...col
  };
}
function hvSwitchColumn(col, switchLabel, falseLabel, trueLabel, switchProps) {
  return {
    Cell: (cellProps) => {
      const { value, row } = cellProps;
      return /* @__PURE__ */ jsx(
        HvSwitchColumnCell,
        {
          checked: value,
          value: row.id,
          switchLabel,
          falseLabel,
          trueLabel,
          switchProps
        }
      );
    },
    cellStyle: {
      paddingTop: 0,
      paddingBottom: 0
    },
    ...col
  };
}
function hvDropdownColumn(col, id, placeholder, disabledPlaceholder, onChange, dropdownProps) {
  return {
    Cell: (cellProps) => {
      const { value, row, column } = cellProps;
      const disabled = !Array.isArray(value) || Array.isArray(value) && value.length < 1;
      return /* @__PURE__ */ jsx(
        HvDropdownColumnCell,
        {
          values: value,
          placeholder: disabled ? disabledPlaceholder : placeholder,
          onChange: (val) => onChange?.(row.id, val),
          disabled,
          "aria-labelledby": setId(id, column.id) || column.id || id,
          ...dropdownProps
        }
      );
    },
    cellStyle: {
      paddingTop: 0,
      paddingBottom: 0
    },
    ...col
  };
}
function hvProgressColumn(col, getPartial, getTotal, color) {
  return {
    Cell: (cellProps) => {
      const { row, column } = cellProps;
      const partial = getPartial?.(row) || 0;
      const total = getTotal?.(row);
      if (total) {
        return /* @__PURE__ */ jsx(
          HvProgressColumnCell,
          {
            partial,
            total,
            color,
            "aria-labelledby": column.id
          }
        );
      }
      return /* @__PURE__ */ jsx(Fragment, { children: "—" });
    },
    cellStyle: {
      paddingTop: 0,
      paddingBottom: 0
    },
    ...col
  };
}
export {
  hvDateColumn,
  hvDropdownColumn,
  hvExpandColumn,
  hvNodeFallback,
  hvNumberColumn,
  hvNumberFallback,
  hvProgressColumn,
  hvStringFallback,
  hvSwitchColumn,
  hvTagColumn,
  hvTextColumn
};