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

Opinionated design system for Drivy's projects.

import { nanoid } from 'nanoid';
import React, { Children, cloneElement, isValidElement } from 'react';
import cx from 'classnames';

const LayoutStackItem = ({ children, isTable, className, isTableHeader: _isTableHeader, ...props }) => {
    const Comp = isTable ? "tr" : "div";
    return (React.createElement(Comp, { className: cx("cobalt-layout-stack__item", className), ...props }, children));
};
const LayoutStackLinkItem = ({ children, className, ...hyperlinkProps }) => {
    return (React.createElement("a", { className: cx("cobalt-layout-stack__item", className), ...hyperlinkProps }, 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 (React.createElement("table", { className: classNames, ...props },
            !!headerElements.length && React.createElement("thead", null, headerElements),
            React.createElement("tbody", null, bodyElements)));
    }
    else {
        return (React.createElement("div", { className: classNames, ...props }, children));
    }
};
LayoutStack.Item = LayoutStackItem;
LayoutStack.LinkItem = LayoutStackLinkItem;

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