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

DNB Eufemia Design System UI Library

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React from 'react';
import classnames from 'classnames';
import keycode from "../../shared/keycode.js";
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";
export function TableClickableHead(allProps) {
  const {
    children,
    className,
    disabled,
    onClick,
    onOpened,
    onClosed,
    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 React.createElement("tr", _extends({
    tabIndex: clickable && !disabled ? 0 : undefined,
    className: classnames(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);
  function onKeydownHandler(event) {
    switch (keycode(event.nativeEvent)) {
      case 'space':
      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 React.createElement(Td, {
    className: "dnb-table__td__button-icon",
    onClick: () => {
      emptySelectedText();
    }
  }, React.createElement("span", {
    className: "dnb-table__button"
  }, React.createElement(IconPrimary, {
    icon: icon,
    size: iconSize
  }), React.createElement(Button, _extends({
    className: "dnb-sr-only",
    tabIndex: -1,
    "aria-label": ariaLabel,
    "aria-expanded": Boolean(trIsOpen)
  }, trIsOpen != null ? {
    'aria-expanded': Boolean(trIsOpen)
  } : {}, {
    on_click: event => onClick(event, true)
  }))));
}
export function TableIconSrTh(props) {
  const {
    text
  } = props;
  return React.createElement(Th, {
    "aria-hidden": true,
    className: "dnb-table__th__button-icon"
  }, React.createElement("div", null, text));
}
export const isTableHead = children => children.some(element => element.type === Th);
//# sourceMappingURL=TableClickableHead.js.map