@drivy/cobalt/components/Layout/Components/LayoutStack.js

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import cx 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 (jsx(Comp, { className: cx("cobalt-layout-stack__item", className), ...props, children: children }));
};
const LayoutStackLinkItem = ({ children, className, ...hyperlinkProps }) => {
    return (jsx("a", { className: cx("cobalt-layout-stack__item", className), ...hyperlinkProps, children: children }));
};
const isStackItem = (child) => {
    return (isValidElement(child) &&
        (child.type === LayoutStackItem || child.type === LayoutStackLinkItem));
};
const LayoutStack = ({ children, isTable, isPageHeader, className, ...props }) => {
    const classNames = cx("cobalt-layout-stack", {
        "cobalt-layout--isPageHeader": isPageHeader,
    }, className);
    if (isTable) {
        const headerElements = [];
        const bodyElements = [];
        Children.map(children, (child) => {
            if (isStackItem(child)) {
                const newChild = cloneElement(child, { isTable: true, key: nanoid() });
                if (newChild.props.isTableHeader) {
                    headerElements.push(newChild);
                }
                else {
                    bodyElements.push(newChild);
                }
            }
            return child;
        });
        return (jsxs("table", { className: classNames, ...props, children: [!!headerElements.length && jsx("thead", { children: headerElements }), jsx("tbody", { children: bodyElements })] }));
    }
    else {
        return (jsx("div", { className: classNames, ...props, children: children }));
    }
};
LayoutStack.Item = LayoutStackItem;
LayoutStack.LinkItem = LayoutStackLinkItem;

export { LayoutStack as default };
//# sourceMappingURL=LayoutStack.js.map