@airplane/views
Version:
A React library for building Airplane views. Views components are optimized in style and functionality to produce internal apps that are easy to build and maintain.
70 lines (69 loc) • 1.68 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { createStyles, Box } from "@mantine/core";
import { ComponentErrorBoundary } from "../errorBoundary/ComponentErrorBoundary.js";
import { useCommonLayoutStyle } from "../layout/useCommonLayoutStyle.js";
import { justifyToJustifyContent, alignToAlignItems } from "./flexHelpers.js";
const useStyles = createStyles((theme, {
direction,
justify,
align,
spacing,
wrap,
scroll
}) => {
const justifyContent = justifyToJustifyContent[justify];
const alignItems = alignToAlignItems[align];
return {
root: {
display: "flex",
flexDirection: direction,
justifyContent,
alignItems,
flexWrap: wrap ? "wrap" : "nowrap",
gap: typeof spacing === "number" ? spacing : theme.spacing[spacing],
overflow: scroll ? "auto" : void 0
}
};
});
const StackComponent = ({
children,
direction = "column",
justify = "start",
align = "stretch",
spacing = "md",
wrap = false,
scroll = false,
sx,
className,
style,
width,
height,
grow
}) => {
const {
classes,
cx
} = useStyles({
direction,
justify,
align,
spacing,
wrap,
scroll
});
const {
classes: layoutClasses
} = useCommonLayoutStyle({
width,
height,
grow
});
return /* @__PURE__ */ jsx(Box, { style, className: cx(classes.root, layoutClasses.style, className), sx, children });
};
const Stack = (props) => /* @__PURE__ */ jsx(ComponentErrorBoundary, { componentName: Stack.displayName, children: /* @__PURE__ */ jsx(StackComponent, { ...props }) });
Stack.displayName = "Stack";
export {
Stack,
StackComponent
};
//# sourceMappingURL=Stack.js.map