@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
61 lines (60 loc) • 2.31 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { nanoid } from "nanoid";
import { Children, cloneElement, isValidElement } from "react";
const LayoutStackItem = ({ children, isTable, className, isTableHeader: _isTableHeader, ...props })=>{
const Comp = isTable ? "tr" : "div";
return /*#__PURE__*/ jsx(Comp, {
className: classnames("cobalt-layout-stack__item", className),
...props,
children: children
});
};
const LayoutStackLinkItem = ({ children, className, ...hyperlinkProps })=>/*#__PURE__*/ jsx("a", {
className: classnames("cobalt-layout-stack__item", className),
...hyperlinkProps,
children: children
});
const isStackItem = (child)=>/*#__PURE__*/ isValidElement(child) && (child.type === LayoutStackItem || child.type === LayoutStackLinkItem);
const LayoutStack = ({ children, isTable, isPageHeader, className, ...props })=>{
const classNames = classnames("cobalt-layout-stack", {
"cobalt-layout--isPageHeader": isPageHeader
}, className);
if (!isTable) return /*#__PURE__*/ jsx("div", {
className: classNames,
...props,
children: children
});
{
const headerElements = [];
const bodyElements = [];
Children.map(children, (child)=>{
if (isStackItem(child)) {
const newChild = /*#__PURE__*/ cloneElement(child, {
isTable: true,
key: nanoid()
});
if (newChild.props.isTableHeader) headerElements.push(newChild);
else bodyElements.push(newChild);
}
return child;
});
return /*#__PURE__*/ jsxs("table", {
className: classNames,
...props,
children: [
!!headerElements.length && /*#__PURE__*/ jsx("thead", {
children: headerElements
}),
/*#__PURE__*/ jsx("tbody", {
children: bodyElements
})
]
});
}
};
LayoutStack.Item = LayoutStackItem;
LayoutStack.LinkItem = LayoutStackLinkItem;
const Components_LayoutStack = LayoutStack;
export default Components_LayoutStack;
//# sourceMappingURL=LayoutStack.js.map