@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
75 lines (74 loc) • 3.28 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { forwardRef, useState } from "react";
import classNames from "classnames";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import Icon from "../Icon/Icon.js";
import TableCell from "./Table.Cell.js";
import accessibleOnClick from "../../utils/accessibleOnClick.js";
import SlideDown from "../SlideDown/SlideDown.js";
import useLocale from "../../hooks/useLocale.js";
/**
* Table.Row component (tr element)
* @visibleName Table.Row
*/ const TableRow = /*#__PURE__*/ forwardRef(({ className, onClick: onClickProp, content, eager = false, open: openProp, onOpenChange, children, limitExpandClick, ...props }, ref)=>{
const locale = useLocale();
const [openState, setOpenState] = useState(false);
// if open prop is undefined, use state
const open = openProp ?? openState;
const handleArrowClick = (event)=>{
event.stopPropagation();
setOpenState((o)=>!o);
if (typeof onOpenChange === "function") {
onOpenChange();
}
};
const onClick = content && !limitExpandClick ? handleArrowClick : onClickProp;
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
/*#__PURE__*/ _jsxs("tr", {
className: classNames(className, {
"bf-table-row-clickable": onClick,
"bf-table-expand-nolimit": !limitExpandClick,
"bf-table-expand-closed": content && !open
}),
ref: ref,
...props,
...accessibleOnClick(props, onClick),
children: [
content && /*#__PURE__*/ _jsx(TableCell, {
className: "bf-table-expand-icon-cell",
onClick: limitExpandClick ? handleArrowClick : undefined,
"aria-label": `${openState ? locale.collapse : locale.expand} ${locale.row}`,
children: /*#__PURE__*/ _jsx("div", {
className: "bf-table-expand-icon-wrapper",
children: /*#__PURE__*/ _jsx(Icon, {
className: classNames("bf-table-expand-icon", {
"bf-table-expand-icon-open": open
}),
icon: faAngleRight
})
})
}),
children
]
}),
content && /*#__PURE__*/ _jsx("tr", {
children: /*#__PURE__*/ _jsx("td", {
className: "bf-table-expandable-cell",
colSpan: 999,
children: /*#__PURE__*/ _jsx(SlideDown, {
open: open,
eager: eager,
children: /*#__PURE__*/ _jsx("div", {
className: "bf-table-expanded-content bfc-base-2-bg",
children: content
})
})
})
})
]
});
});
TableRow.displayName = "Table.Row";
export default TableRow;