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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = Td;
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _IconPrimary = _interopRequireDefault(require("../icon/IconPrimary.js"));
var _TableAccordionContent = require("./table-accordion/TableAccordionContent.js");
var _TableTrContext = require("./TableTrContext.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function Td(componentProps) {
  const {
    className,
    children,
    noSpacing,
    spacing,
    verticalAlign,
    highlight: highlightProp,
    selected: selectedProp,
    onClick,
    icon = true,
    ...props
  } = componentProps;
  const trContext = (0, _react.useContext)(_TableTrContext.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] = (0, _react.useState)(selectedProp !== null && selectedProp !== void 0 ? selectedProp : false);
  const isSelected = isSelectable ? selectedState : false;
  (0, _react.useEffect)(() => {
    if (selectedProp !== undefined) {
      setSelectedState(selectedProp);
    }
  }, [selectedProp]);
  const setSelected = (0, _react.useCallback)(value => {
    if (isSelectable) {
      setSelectedState(value);
    }
    return value;
  }, [isSelectable]);
  const resolvedIcon = icon === true ? 'chevron_right' : icon;
  return (0, _jsxRuntime.jsx)("td", {
    role: "cell",
    className: (0, _clsx.default)('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 ? (0, _jsxRuntime.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: [(0, _jsxRuntime.jsx)("span", {
        className: "dnb-table__td__button__content",
        children: children
      }), resolvedIcon && (0, _jsxRuntime.jsx)(_IconPrimary.default, {
        className: "dnb-table__td__button__icon",
        icon: resolvedIcon,
        size: "basis"
      })]
    }) : children
  });
}
Td.AccordionContent = _TableAccordionContent.TableAccordionContentSingle;
//# sourceMappingURL=TableTd.js.map