@dnb/eufemia/components/table/table-accordion/TableAccordionContent.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 useId from "../../../shared/helpers/useId.js";
import useTableAnimationHandler from "./useTableAnimationHandler.js";
import { TableContext } from "../TableContext.js";
import { TableAccordionContext } from "./TableAccordionContext.js";
function TableAccordionContent(componentProps) {
  var _React$useContext;
  const {
    variant,
    expanded = null,
    noAnimation = null,
    className,
    children,
    colSpan,
    style,
    ...props
  } = componentProps;
  const tableContext = React.useContext(TableContext);
  const tableContextAllProps = tableContext === null || tableContext === void 0 ? void 0 : tableContext.allProps;
  const innerRef = React.useRef(null);
  const id = useId();
  const trRef = React.useRef(null);
  const {
    ariaLive,
    isInDOM,
    isAnimating,
    isVisibleParallax,
    firstPaintStyle
  } = useTableAnimationHandler({
    innerRef,
    trRef,
    expanded,
    noAnimation
  });
  const keepInDOM = Boolean((_React$useContext = React.useContext(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.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: classnames(`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.createElement(React.Fragment, null, (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionChevronPlacement) !== 'end' && React.createElement(ChevronTd, chevronTdProps), shouldRenderContent && children, (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionChevronPlacement) === 'end' && React.createElement(ChevronTd, chevronTdProps)), variant === 'single' && React.createElement(ChevronTd, _extends({}, chevronTdProps, {
    colSpan: colSpan
  }), shouldRenderContent && React.createElement("div", {
    className: "dnb-table__tr__accordion-content__inner",
    ref: innerRef
  }, React.createElement("div", {
    className: "dnb-table__tr__accordion-content__inner__spacing"
  }, children))));
}
const ChevronTd = ({
  children = undefined,
  colSpan = undefined,
  ariaLive,
  isInDOM,
  accordionMoreContentSR
}) => React.createElement("td", {
  role: isInDOM ? 'cell' : undefined,
  className: "dnb-table__td",
  colSpan: colSpan
}, children, React.createElement("span", {
  className: "dnb-sr-only"
}, React.createElement("span", {
  "aria-live": "assertive"
}, isInDOM && ariaLive ? accordionMoreContentSR : null)));
export function TableAccordionContentRow(props) {
  const tableContext = React.useContext(TableContext);
  tableContext.hasAccordionRows = true;
  return React.createElement(TableAccordionContent, _extends({
    variant: "row"
  }, props));
}
export function TableAccordionContentSingle({
  colSpan = 100,
  ...props
}) {
  const tableAccordionContext = React.useContext(TableAccordionContext);
  return React.createElement(TableAccordionContent, _extends({
    variant: "single",
    colSpan: (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.countTds) || colSpan
  }, props));
}
//# sourceMappingURL=TableAccordionContent.js.map