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

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TableClickableButtonTd = TableClickableButtonTd;
exports.TableClickableHead = TableClickableHead;
exports.TableIconSrTh = TableIconSrTh;
exports.isTableHead = void 0;
exports.onClickTr = onClickTr;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _keycode = _interopRequireDefault(require("../../shared/keycode.js"));
var _useId = _interopRequireDefault(require("../../shared/helpers/useId.js"));
var _helpers = require("../../shared/helpers.js");
var _Button = _interopRequireDefault(require("../button/Button.js"));
var _IconPrimary = _interopRequireDefault(require("../icon/IconPrimary.js"));
var _TableTh = _interopRequireDefault(require("./TableTh.js"));
var _TableTd = _interopRequireDefault(require("./TableTd.js"));
var _TableContext = require("./TableContext.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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.default.useContext(_TableContext.TableContext);
  const id = (0, _useId.default)();
  const trParams = !disabled && clickable ? {
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    onKeyDown: onKeydownHandler
  } : {};
  return _react.default.createElement("tr", _extends({
    tabIndex: clickable && !disabled ? 0 : undefined,
    className: (0, _classnames.default)(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 ((0, _keycode.default)(event.nativeEvent)) {
      case 'space':
      case 'enter':
        {
          const target = event.target;
          if (document.activeElement !== target || target.tagName === 'TR') {
            onKeyDown(event);
            event.preventDefault();
          }
        }
        break;
    }
  }
}
function onClickTr(event, allowInteractiveElement = false, onClick) {
  const target = event.target;
  if ((document.activeElement !== target && target.tagName !== 'INPUT' && target.tagName !== 'LABEL' || allowInteractiveElement) && !((0, _helpers.hasSelectedText)() && event.type === 'click')) {
    onClick === null || onClick === void 0 || onClick(event);
  }
}
function TableClickableButtonTd(props) {
  var _React$useContext;
  const {
    trIsOpen,
    ariaLabel,
    icon,
    onClick
  } = props;
  const tableContextAllProps = (_React$useContext = _react.default.useContext(_TableContext.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.default.createElement(_TableTd.default, {
    className: "dnb-table__td__button-icon",
    onClick: () => {
      (0, _helpers.emptySelectedText)();
    }
  }, _react.default.createElement("span", {
    className: "dnb-table__button"
  }, _react.default.createElement(_IconPrimary.default, {
    icon: icon,
    size: iconSize
  }), _react.default.createElement(_Button.default, _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)
  }))));
}
function TableIconSrTh(props) {
  const {
    text
  } = props;
  return _react.default.createElement(_TableTh.default, {
    "aria-hidden": true,
    className: "dnb-table__th__button-icon"
  }, _react.default.createElement("div", null, text));
}
const isTableHead = children => children.some(element => element.type === _TableTh.default);
exports.isTableHead = isTableHead;
//# sourceMappingURL=TableClickableHead.js.map