@grafana/ui
Version:
Grafana Components Library
88 lines (85 loc) • 2.55 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import * as React from 'react';
import '@grafana/data';
import { useStyles2 } from '../../themes/ThemeContext.mjs';
import 'micro-memoize';
import '@emotion/react';
import 'tinycolor2';
import '../../utils/skeleton.mjs';
const Layout = ({
children,
orientation = 0 /* Horizontal */,
spacing = "sm",
justify = "flex-start",
align = "normal",
wrap = false,
width = "100%",
height = "100%",
...rest
}) => {
const styles = useStyles2(getStyles, orientation, spacing, justify, align, wrap);
return /* @__PURE__ */ jsx("div", { className: styles.layout, style: { width, height }, ...rest, children: React.Children.toArray(children).filter(Boolean).map((child, index) => {
return /* @__PURE__ */ jsx("div", { className: styles.childWrapper, children: child }, index);
}) });
};
const HorizontalGroup = ({
children,
spacing,
justify,
align = "center",
wrap,
width,
height
}) => /* @__PURE__ */ jsx(
Layout,
{
spacing,
justify,
orientation: 0 /* Horizontal */,
align,
width,
height,
wrap,
children
}
);
const getStyles = (theme, orientation, spacing, justify, align, wrap) => {
const finalSpacing = spacing !== "none" ? theme.spacing(spacingToNumber[spacing]) : 0;
const marginCompensation = orientation === 0 /* Horizontal */ && !wrap || orientation === 1 /* Vertical */ ? 0 : `-${finalSpacing}`;
const label = orientation === 1 /* Vertical */ ? "vertical-group" : "horizontal-group";
return {
layout: css({
label,
display: "flex",
flexDirection: orientation === 1 /* Vertical */ ? "column" : "row",
flexWrap: wrap ? "wrap" : "nowrap",
justifyContent: justify,
alignItems: align,
height: "100%",
maxWidth: "100%",
// compensate for last row margin when wrapped, horizontal layout
marginBottom: marginCompensation
}),
childWrapper: css({
label: "layoutChildrenWrapper",
marginBottom: orientation === 0 /* Horizontal */ && !wrap ? 0 : finalSpacing,
marginRight: orientation === 0 /* Horizontal */ ? finalSpacing : 0,
display: "flex",
alignItems: align,
"&:last-child": {
marginBottom: orientation === 1 /* Vertical */ ? 0 : void 0,
marginRight: orientation === 0 /* Horizontal */ ? 0 : void 0
}
})
};
};
const spacingToNumber = {
none: 0,
xs: 0.5,
sm: 1,
md: 2,
lg: 3
};
export { HorizontalGroup, Layout };
//# sourceMappingURL=Layout.mjs.map