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

DNB Eufemia Design System UI Library

import React from 'react';
import clsx from 'clsx';
import useId from "../../shared/helpers/useId.js";
import { emptySelectedText, hasSelectedText } from "../../shared/helpers.js";
import Button from "../button/Button.js";
import IconPrimary from "../icon/IconPrimary.js";
import Th from "./TableTh.js";
import Td from "./TableTd.js";
import { TableContext } from "./TableContext.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export function TableClickableHead(allProps) {
  const {
    children,
    className,
    disabled,
    expanded,
    onClick,
    onOpen,
    onClose,
    trIsOpen,
    trIsHover,
    trHadClick,
    clickable,
    noAnimation,
    onMouseEnter,
    onMouseLeave,
    onKeyDown,
    ariaLabel,
    style,
    ...props
  } = allProps;
  const tableContext = React.useContext(TableContext);
  const id = useId();
  const trParams = !disabled && clickable ? {
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onKeyDown: onKeydownHandler
  } : {};
  return _jsx("tr", {
    tabIndex: clickable && !disabled ? 0 : undefined,
    className: clsx(className, clickable && 'dnb-table__tr--clickable', trIsOpen && 'dnb-table__tr--expanded', disabled && 'dnb-table__tr--disabled', noAnimation && 'dnb-table__tr--no-animation', trIsHover && trHadClick && 'dnb-table__tr--hover'),
    style: {
      ...style,
      viewTransitionName: tableContext.hasAccordionRows ? `row-${id}` : undefined
    },
    ...trParams,
    ...props,
    children: children
  });
  function onKeydownHandler(event) {
    switch (event.key) {
      case ' ':
      case 'Enter':
        {
          const target = event.target;
          if (document.activeElement !== target || target.tagName === 'TR') {
            onKeyDown(event);
            event.preventDefault();
          }
        }
        break;
    }
  }
}
export function onClickTr(event, allowInteractiveElement = false, onClick) {
  const target = event.target;
  if ((document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' || allowInteractiveElement) && !(hasSelectedText() && event.type === 'click')) {
    onClick === null || onClick === void 0 || onClick(event);
  }
}
export function TableClickableButtonTd(props) {
  var _React$useContext;
  const {
    trIsOpen,
    ariaLabel,
    icon,
    onClick
  } = props;
  const tableContextAllProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
  const iconSize = (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'medium' || (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.size) === 'small' ? 'basis' : 'medium';
  return _jsx(Td, {
    className: "dnb-table__td__button-icon",
    onClick: () => {
      emptySelectedText();
    },
    children: _jsxs("span", {
      className: "dnb-table__button",
      children: [_jsx(IconPrimary, {
        icon: icon,
        size: iconSize
      }), _jsx(Button, {
        className: "dnb-sr-only",
        tabIndex: -1,
        "aria-label": ariaLabel,
        "aria-expanded": Boolean(trIsOpen),
        ...(trIsOpen != null ? {
          'aria-expanded': Boolean(trIsOpen)
        } : {}),
        onClick: event => onClick(event, true)
      })]
    })
  });
}
export function TableIconSrTh(props) {
  const {
    text
  } = props;
  return _jsx(Th, {
    "aria-hidden": true,
    className: "dnb-table__th__button-icon",
    children: _jsx("div", {
      children: text
    })
  });
}
export const isTableHead = children => children.some(element => element.type === Th);
//# sourceMappingURL=TableClickableHead.js.map