@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 _clsx = _interopRequireDefault(require("clsx"));
var _useId = _interopRequireDefault(require("../../../shared/helpers/useId.js"));
var _useTableAnimationHandler = _interopRequireDefault(require("./useTableAnimationHandler.js"));
var _TableContext = require("../TableContext.js");
var _TableAccordionContext = require("./TableAccordionContext.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 contentRef = _react.default.useRef(null);
  const id = (0, _useId.default)();
  const trRef = _react.default.useRef(null);
  const {
    ariaLive,
    isInDOM,
    isAnimating,
    isVisibleParallax,
    firstPaintStyle
  } = (0, _useTableAnimationHandler.default)({
    contentRef,
    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 (0, _jsxRuntime.jsxs)("tr", {
    "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, _clsx.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,
    children: [variant === 'row' && (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
      children: [(tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionChevronPlacement) !== 'right' && (0, _jsxRuntime.jsx)(ChevronTd, {
        ...chevronTdProps
      }), shouldRenderContent && children, (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionChevronPlacement) === 'right' && (0, _jsxRuntime.jsx)(ChevronTd, {
        ...chevronTdProps
      })]
    }), variant === 'single' && (0, _jsxRuntime.jsx)(ChevronTd, {
      ...chevronTdProps,
      colSpan: colSpan,
      children: shouldRenderContent && (0, _jsxRuntime.jsx)("div", {
        className: "dnb-table__tr__accordion-content__inner",
        ref: contentRef,
        children: (0, _jsxRuntime.jsx)("div", {
          className: "dnb-table__tr__accordion-content__inner__spacing",
          children: children
        })
      })
    })]
  });
}
const ChevronTd = ({
  children = undefined,
  colSpan = undefined,
  ariaLive,
  isInDOM,
  accordionMoreContentSR
}) => (0, _jsxRuntime.jsxs)("td", {
  role: isInDOM ? 'cell' : undefined,
  className: "dnb-table__td",
  colSpan: colSpan,
  children: [children, (0, _jsxRuntime.jsx)("span", {
    className: "dnb-sr-only",
    children: (0, _jsxRuntime.jsx)("span", {
      "aria-live": "assertive",
      children: isInDOM && ariaLive ? accordionMoreContentSR : null
    })
  })]
});
function TableAccordionContentRow(props) {
  const tableContext = _react.default.useContext(_TableContext.TableContext);
  tableContext.hasAccordionRows = true;
  return (0, _jsxRuntime.jsx)(TableAccordionContent, {
    variant: "row",
    ...props
  });
}
function TableAccordionContentSingle({
  colSpan = 100,
  ...props
}) {
  const tableAccordionContext = _react.default.useContext(_TableAccordionContext.TableAccordionContext);
  return (0, _jsxRuntime.jsx)(TableAccordionContent, {
    variant: "single",
    colSpan: (tableAccordionContext === null || tableAccordionContext === void 0 ? void 0 : tableAccordionContext.countTds) || colSpan,
    ...props
  });
}
//# sourceMappingURL=TableAccordionContent.js.map