nice-ui/lib/5-block/HorizontalFlex/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HorizontalFlex = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
    d: 'flex',
});
/** Display elements horizontally. */
const HorizontalFlex = ({ middle, spacing, className, style, children }) => {
    const styles = {
        alignItems: middle ? 'center' : undefined,
        ...(style || {}),
        ...style,
    };
    const props = { className: (className || '') + ' ' + blockClass, style: styles };
    if (spacing) {
        const childArray = React.Children.toArray(children);
        const childrenWithSpacers = [];
        if (childArray.length > 0)
            childrenWithSpacers.push(childArray[0]);
        for (let i = 1; i < childArray.length; i++)
            childrenWithSpacers.push(React.createElement("div", { style: { width: spacing } }), childArray[i]);
        return React.createElement('div', props, ...childrenWithSpacers);
    }
    return React.createElement('div', props, children);
};
exports.HorizontalFlex = HorizontalFlex;