@dnb/eufemia/components/table/TableTd.js

DNB Eufemia Design System UI Library

"use client";

import { useCallback, useContext, useEffect, useState } from 'react';
import clsx from 'clsx';
import IconPrimary from "../icon/IconPrimary.js";
import { TableAccordionContentSingle } from "./table-accordion/TableAccordionContent.js";
import { TableTrContext } from "./TableTrContext.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function Td(componentProps) {
  const {
    className,
    children,
    noSpacing,
    spacing,
    verticalAlign,
    highlight: highlightProp,
    selected: selectedProp,
    onClick,
    icon = true,
    ...props
  } = componentProps;
  const trContext = useContext(TableTrContext);
  const highlight = highlightProp || (trContext === null || trContext === void 0 ? void 0 : trContext.highlight);
  const hasOnClick = typeof onClick === 'function';
  const isSelectable = selectedProp !== undefined;
  const [selectedState, setSelectedState] = useState(selectedProp !== null && selectedProp !== void 0 ? selectedProp : false);
  const isSelected = isSelectable ? selectedState : false;
  useEffect(() => {
    if (selectedProp !== undefined) {
      setSelectedState(selectedProp);
    }
  }, [selectedProp]);
  const setSelected = useCallback(value => {
    if (isSelectable) {
      setSelectedState(value);
    }
    return value;
  }, [isSelectable]);
  const resolvedIcon = icon === true ? 'chevron_right' : icon;
  return _jsx("td", {
    role: "cell",
    className: clsx('dnb-table__td', className, noSpacing && 'dnb-table__td--no-spacing', spacing && `dnb-table__td--spacing-${spacing}`, verticalAlign && `dnb-table__td--vertical-align-${verticalAlign}`, hasOnClick && 'dnb-table__td--clickable', isSelected && 'dnb-table__td--selected', highlight && 'dnb-table__td--highlight'),
    ...props,
    children: hasOnClick ? _jsxs("button", {
      type: "button",
      className: "dnb-table__td__button",
      "aria-pressed": isSelectable ? isSelected : undefined,
      onClick: event => {
        const tdElement = event.currentTarget.parentElement;
        const trElement = (tdElement === null || tdElement === void 0 ? void 0 : tdElement.parentElement) || null;
        const columnIndex = tdElement ? Array.from((trElement === null || trElement === void 0 ? void 0 : trElement.children) || []).indexOf(tdElement) : -1;
        const table = trElement === null || trElement === void 0 ? void 0 : trElement.closest('table');
        const thElement = table === null || table === void 0 ? void 0 : table.querySelector(`thead tr th:nth-child(${columnIndex + 1})`);
        onClick(event, {
          trElement,
          tdElement,
          thElement,
          isSelected,
          setSelected
        });
      },
      children: [_jsx("span", {
        className: "dnb-table__td__button__content",
        children: children
      }), resolvedIcon && _jsx(IconPrimary, {
        className: "dnb-table__td__button__icon",
        icon: resolvedIcon,
        size: "basis"
      })]
    }) : children
  });
}
Td.AccordionContent = TableAccordionContentSingle;
//# sourceMappingURL=TableTd.js.map