@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
92 lines • 4.69 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["variant", "expanded", "noAnimation", "className", "children", "colSpan", "style"],
_excluded2 = ["colSpan"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import classnames from 'classnames';
import useTableAnimationHandler from './useTableAnimationHandler';
import { TableContext } from '../TableContext';
import { TableAccordionContext } from './TableAccordionContext';
function TableAccordionContent(componentProps) {
var _React$useContext;
const {
variant,
expanded = null,
noAnimation = null,
className,
children,
colSpan,
style
} = componentProps,
props = _objectWithoutProperties(componentProps, _excluded);
const tableContextAllProps = (_React$useContext = React.useContext(TableContext)) === null || _React$useContext === void 0 ? void 0 : _React$useContext.allProps;
const innerRef = React.useRef(null);
const trRef = React.useRef(null);
const {
ariaLive,
isInDOM,
isAnimating,
isVisibleParallax,
firstPaintStyle
} = useTableAnimationHandler({
innerRef,
trRef,
expanded,
noAnimation
});
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: _objectSpread(_objectSpread({}, firstPaintStyle), style),
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), isInDOM && children, (tableContextAllProps === null || tableContextAllProps === void 0 ? void 0 : tableContextAllProps.accordionChevronPlacement) === 'end' && React.createElement(ChevronTd, chevronTdProps)), variant === 'single' && React.createElement(ChevronTd, _extends({}, chevronTdProps, {
colSpan: colSpan
}), isInDOM && 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) {
return React.createElement(TableAccordionContent, _extends({
variant: "row"
}, props));
}
export function TableAccordionContentSingle(_ref) {
let {
colSpan = 100
} = _ref,
props = _objectWithoutProperties(_ref, _excluded2);
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