@jobber/components-native 0.17.0 → 0.18.0

package/dist/src/Flex/Flex.js

@@ -0,0 +1,31 @@
+import React, { Children } from "react";
+import { View } from "react-native";
+import chunk from "lodash.chunk";
+import { columnStyles, gapStyles, styles } from "./Flex.styles";
+import { Content } from "../Content";
+export function Flex({ template = [], align = "center", gap = "base", children, }) {
+    if (template.length === 1) {
+        console.warn("Please use <Content /> component for a stacked layout");
+    }
+    const childrenArray = Children.toArray(children);
+    const chunkedChildren = chunk(childrenArray, template.length || childrenArray.length);
+    return (React.createElement(Content, { spacing: "none", childSpacing: gap }, chunkedChildren.map((childArray, rowIndex) => (React.createElement(Row, { key: rowIndex, template: template, align: align, gap: gap }, injectChild(childArray))))));
+    function injectChild(value) {
+        const hasMoreRows = chunkedChildren.length > 1;
+        const childrenCount = value.length;
+        const templateCount = template.length;
+        if (hasMoreRows && childrenCount < templateCount) {
+            const missingChildCount = templateCount - childrenCount;
+            for (let index = 0; index < missingChildCount; index++) {
+                value.push(React.createElement(React.Fragment, { key: index }));
+            }
+        }
+        return value;
+    }
+}
+function Row({ template = [], align = "center", gap = "base", children, }) {
+    return (React.createElement(View, { testID: "ATL-Flex-Row", style: [styles.row, { alignItems: align }] }, Children.map(children, (child, index) => (React.createElement(View, { style: [
+            columnStyles[template[index]] || columnStyles.grow,
+            index > 0 && gap && gapStyles[gap],
+        ] }, child)))));
+}

package/dist/src/Flex/Flex.styles.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+import { spacing } from "./types";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    row: { flexDirection: "row" },
+});
+export const columnStyles = StyleSheet.create({
+    shrink: {
+        flexGrow: 0,
+        flexShrink: 1,
+    },
+    grow: {
+        flexGrow: 1,
+        flexShrink: 0,
+        flexBasis: 0,
+    },
+});
+export const gapStyles = StyleSheet.create(spacing.reduce((gapObj, space) => {
+    let paddingLeft = 0;
+    if (space !== "none")
+        paddingLeft = tokens[`space-${space}`];
+    gapObj[space] = { paddingLeft };
+    return gapObj;
+}, {}));

package/dist/src/Flex/index.js

@@ -0,0 +1 @@
+export * from "./Flex";

package/dist/src/Flex/types.js

@@ -0,0 +1,8 @@
+export const spacing = [
+    "none",
+    "smallest",
+    "smaller",
+    "small",
+    "base",
+    "large",
+];

package/dist/src/index.js

@@ -8,6 +8,7 @@ export * from "./Chip";
 export * from "./Content";
 export * from "./Divider";
 export * from "./ErrorMessageWrapper";
+export * from "./Flex";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";