UNPKG

@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
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