@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
60 lines • 4.03 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { forwardRef } from "react";
import { ChevronDownIcon } from "@navikt/aksel-icons";
import { useRenameCSS } from "../theme/Theme.js";
import { composeEventHandlers } from "../util/composeEventHandlers.js";
import { useId } from "../util/hooks/index.js";
import { useControllableState } from "../util/hooks/useControllableState.js";
import { useI18n } from "../util/i18n/i18n.hooks.js";
import AnimateHeight from "./AnimateHeight.js";
import DataCell from "./DataCell.js";
import Row from "./Row.js";
import { isElementInteractiveTarget } from "./Table.utils.js";
export const ExpandableRow = forwardRef((_a, ref) => {
var { className, children, content, togglePlacement = "left", defaultOpen = false, open, onOpenChange, expansionDisabled = false, expandOnRowClick = false, colSpan = 999, contentGutter, onClick } = _a, rest = __rest(_a, ["className", "children", "content", "togglePlacement", "defaultOpen", "open", "onOpenChange", "expansionDisabled", "expandOnRowClick", "colSpan", "contentGutter", "onClick"]);
const { cn } = useRenameCSS();
const [_open, _setOpen] = useControllableState({
defaultValue: defaultOpen,
value: open,
onChange: onOpenChange,
});
const translate = useI18n("global");
const id = useId();
const expansionHandler = (event) => {
_setOpen((oldOpen) => !oldOpen);
event.stopPropagation();
};
const handleRowClick = (event) => {
expandOnRowClick &&
!expansionDisabled &&
!isElementInteractiveTarget(event.target) &&
expansionHandler(event);
};
return (React.createElement(React.Fragment, null,
React.createElement(Row, Object.assign({}, rest, { ref: ref, className: cn("navds-table__expandable-row", className, {
"navds-table__expandable-row--open": _open,
"navds-table__expandable-row--expansion-disabled": expansionDisabled,
"navds-table__expandable-row--clickable": expandOnRowClick,
}), onClick: composeEventHandlers(onClick, handleRowClick) }),
togglePlacement === "right" && children,
React.createElement(DataCell, { className: cn("navds-table__toggle-expand-cell", {
"navds-table__toggle-expand-cell--open": _open,
}), onClick: !expansionDisabled ? expansionHandler : () => null }, !expansionDisabled && (React.createElement("button", { className: cn("navds-table__toggle-expand-button"), type: "button", "aria-controls": id, "aria-expanded": _open, onClick: expansionHandler },
React.createElement(ChevronDownIcon, { className: cn("navds-table__expandable-icon"), title: _open ? translate("showLess") : translate("showMore") })))),
togglePlacement === "left" && children),
React.createElement("tr", { "data-state": _open ? "open" : "closed", className: cn("navds-table__expanded-row"), "aria-hidden": !_open, id: id },
React.createElement("td", { colSpan: colSpan, className: cn("navds-table__expanded-row-cell") },
React.createElement(AnimateHeight, { className: cn("navds-table__expanded-row-collapse"), innerClassName: cn(`navds-table__expanded-row-content navds-table__expanded-row-content--gutter-${contentGutter !== null && contentGutter !== void 0 ? contentGutter : togglePlacement}`), height: _open ? "auto" : 0, duration: 150, easing: "cubic-bezier(0.39,0.57,0.56,1)" }, content)))));
});
export default ExpandableRow;
//# sourceMappingURL=ExpandableRow.js.map