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

DNB Eufemia Design System UI Library

import React from 'react';
import clsx from 'clsx';
import useId from "../../../shared/helpers/useId.js";
import useTableAnimationHandler from "./useTableAnimationHandler.js";
import { TableContext } from "../TableContext.js";
import { TableAccordionContext } from "./TableAccordionContext.js";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function TableAccordionContent(componentProps) {
  const {
    variant,
    expanded = null,
    noAnimation = null,
    className,
    children,
    colSpan,
    style,
    ...props
  } = componentProps;
  const tableContext = React.useContext(TableContext);
  const tableContextAllProps = tableContext?.allProps;
  const contentRef = React.useRef(null);
  const id = useId();
  const trRef = React.useRef(null);
  const {
    ariaLive,
    isInDOM,
    isAnimating,
    isVisibleParallax,
    firstPaintStyle
  } = useTableAnimationHandler({
    contentRef,
    trRef,
    expanded,
    noAnimation
  });
  const keepInDOM = Boolean(React.useContext(TableAccordionContext)?.keepInDOM);
  const shouldRenderContent = isInDOM || keepInDOM;
  const chevronTdProps = {
    ariaLive,
    isInDOM,
    accordionMoreContentSR: tableContextAllProps?.accordionMoreContentSR
  };
  return _jsxs("tr", {
    "aria-hidden": !isInDOM,
    hidden: isInDOM ? undefined : true,
    role: isInDOM ? 'row' : undefined,
    style: {
      ...firstPaintStyle,
      ...style,
      viewTransitionName: tableContext?.hasAccordionRows ? `accordion-content-${id}` : undefined
    },
    className: clsx(`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,
    children: [variant === 'row' && _jsxs(_Fragment, {
      children: [tableContextAllProps?.accordionChevronPlacement !== 'right' && _jsx(ChevronTd, {
        ...chevronTdProps
      }), shouldRenderContent && children, tableContextAllProps?.accordionChevronPlacement === 'right' && _jsx(ChevronTd, {
        ...chevronTdProps
      })]
    }), variant === 'single' && _jsx(ChevronTd, {
      ...chevronTdProps,
      colSpan: colSpan,
      children: shouldRenderContent && _jsx("div", {
        className: "dnb-table__tr__accordion-content__inner",
        ref: contentRef,
        children: _jsx("div", {
          className: "dnb-table__tr__accordion-content__inner__spacing",
          children: children
        })
      })
    })]
  });
}
const ChevronTd = ({
  children = undefined,
  colSpan = undefined,
  ariaLive,
  isInDOM,
  accordionMoreContentSR
}) => _jsxs("td", {
  role: isInDOM ? 'cell' : undefined,
  className: "dnb-table__td",
  colSpan: colSpan,
  children: [children, _jsx("span", {
    className: "dnb-sr-only",
    children: _jsx("span", {
      "aria-live": "assertive",
      children: isInDOM && ariaLive ? accordionMoreContentSR : null
    })
  })]
});
export function TableAccordionContentRow(props) {
  const tableContext = React.useContext(TableContext);
  tableContext.hasAccordionRows = true;
  return _jsx(TableAccordionContent, {
    variant: "row",
    ...props
  });
}
export function TableAccordionContentSingle({
  colSpan = 100,
  ...props
}) {
  const tableAccordionContext = React.useContext(TableAccordionContext);
  return _jsx(TableAccordionContent, {
    variant: "single",
    colSpan: tableAccordionContext?.countTds || colSpan,
    ...props
  });
}
//# sourceMappingURL=TableAccordionContent.js.map