@dnb/eufemia/cjs/components/table/table-accordion/TableAccordionContent.js

DNB Eufemia Design System UI Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TableAccordionContentRow = TableAccordionContentRow;
exports.TableAccordionContentSingle = TableAccordionContentSingle;
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _useId = _interopRequireDefault(require("../../../shared/helpers/useId.js"));
var _useTableAnimationHandler = _interopRequireDefault(require("./useTableAnimationHandler.js"));
var _TableContext = require("../TableContext.js");
var _TableAccordionContext = require("./TableAccordionContext.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 TableAccordionContent(componentProps) {
  var _React$useContext;
  const {
    variant,
    expanded = null,
    noAnimation = null,
    className,
    children,
    colSpan,
    style,
    ...props
  } = componentProps;
  const tableContext = _react.default.useContext(_TableContext.TableContext);
  const tableContextAllProps = tableContext === null || tableContext === void 0 ? void 0 : tableContext.allProps;
  const innerRef = _react.default.useRef(null);
  const id = (0, _useId.default)();
  const trRef = _react.default.useRef(null);
  const {
    ariaLive,
    isInDOM,
    isAnimating,
    isVisibleParallax,
    firstPaintStyle
  } = (0, _useTableAnimationHandler.default)({
    innerRef,
    trRef,
    expanded,
    noAnimation
  });
  const keepInDOM = Boolean((_React$useContext = _react.default.useContext(_TableAccordionContext.TableAccordionContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.keepInDOM);
  const shouldRenderContent = isInDOM || keepInDOM;
  const chevronTdProps = {
    ariaLive,
    isInDOM,
    accordionMoreContentSR: tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionMoreContentSR
  };
  return _react.default.createElement("tr", _extends({
    "aria-hidden": !isInDOM,
    hidden: isInDOM ? undefined : true,
    role: isInDOM ? 'row' : undefined,
    style: {
      ...firstPaintStyle,
      ...style,
      viewTransitionName: tableContext !== null && tableContext !== void 0 && tableContext.hasAccordionRows ? `accordion-content-${id}` : undefined
    },
    className: (0, _classnames.default)(`dnb-table__tr__accordion-content dnb-table__tr__accordion-content--${variant}`, className, isInDOM && "dnb-table__tr dnb-table__tr__accordion-content--expanded", isAnimating && 'dnb-table__tr__accordion-content--animating', isVisibleParallax && 'dnb-table__tr__accordion-content--parallax'),
    ref: trRef
  }, props), variant === 'row' && _react.default.createElement(_react.default.Fragment, null, (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionChevronPlacement) !== 'end' && _react.default.createElement(ChevronTd, chevronTdProps), shouldRenderContent && children, (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionChevronPlacement) === 'end' && _react.default.createElement(ChevronTd, chevronTdProps)), variant === 'single' && _react.default.createElement(ChevronTd, _extends({}, chevronTdProps, {
    colSpan: colSpan
  }), shouldRenderContent && _react.default.createElement("div", {
    className: "dnb-table__tr__accordion-content__inner",
    ref: innerRef
  }, _react.default.createElement("div", {
    className: "dnb-table__tr__accordion-content__inner__spacing"
  }, children))));
}
const ChevronTd = ({
  children = undefined,
  colSpan = undefined,
  ariaLive,
  isInDOM,
  accordionMoreContentSR
}) => _react.default.createElement("td", {
  role: isInDOM ? 'cell' : undefined,
  className: "dnb-table__td",
  colSpan: colSpan
}, children, _react.default.createElement("span", {
  className: "dnb-sr-only"
}, _react.default.createElement("span", {
  "aria-live": "assertive"
}, isInDOM && ariaLive ? accordionMoreContentSR : null)));
function TableAccordionContentRow(props) {
  const tableContext = _react.default.useContext(_TableContext.TableContext);
  tableContext.hasAccordionRows = true;
  return _react.default.createElement(TableAccordionContent, _extends({
    variant: "row"
  }, props));
}
function TableAccordionContentSingle({
  colSpan = 100,
  ...props
}) {
  const tableAccordionContext = _react.default.useContext(_TableAccordionContext.TableAccordionContext);
  return _react.default.createElement(TableAccordionContent, _extends({
    variant: "single",
    colSpan: (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.countTds) || colSpan
  }, props));
}
//# sourceMappingURL=TableAccordionContent.js.map