@jobber/components-native 0.13.0 → 0.15.0

package/dist/src/ActionItem/ActionItem.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ActionItem.style";
+import { ActionItemContainer } from "./components/ActionItemContainer";
+import { Typography } from "../Typography";
+import { Icon } from "../Icon";
+export function ActionItem({ title, icon, iconColor, children, actionIcon = "edit", actionIconColour = "interactive", actionIconAlignment = "center", onPress, testID = "actionItem", }) {
+    const actionIconStyle = {
+        justifyContent: actionIconAlignment,
+    };
+    const addIconOffset = icon || onPress ? styles.offsetForIcons : undefined;
+    const titlePadding = children ? styles.titlePadding : undefined;
+    return (React.createElement(ActionItemContainer, { onPress: onPress, testID: testID, title: title },
+        icon && (React.createElement(View, { style: styles.icon },
+            React.createElement(Icon, { name: icon, color: iconColor }))),
+        React.createElement(View, { style: [styles.content, addIconOffset] },
+            title && (React.createElement(View, { style: titlePadding },
+                React.createElement(Typography, { color: "heading", fontFamily: "base", fontWeight: "bold", size: "default", lineHeight: "base", accessibilityRole: "header" }, title))),
+            children),
+        onPress && (React.createElement(View, { style: [actionIconStyle, styles.actionIcon] },
+            React.createElement(Icon, { name: getActionIcon(actionIcon), color: getActionIconColour(actionIconColour) })))));
+}
+function getActionIconColour(actionIconColour) {
+    if (actionIconColour === "subtle") {
+        return "interactiveSubtle";
+    }
+    return actionIconColour;
+}
+function getActionIcon(icon) {
+    if (icon === "edit") {
+        return "arrowRight";
+    }
+    else if (icon === "editpencil") {
+        return "edit";
+    }
+    return icon;
+}

package/dist/src/ActionItem/ActionItem.style.js

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    actionItemHorizontalOffset: {
+        paddingHorizontal: tokens["space-base"],
+    },
+    icon: {
+        justifyContent: "flex-start",
+        paddingRight: tokens["space-small"],
+    },
+    titlePadding: {
+        paddingBottom: tokens["space-smaller"],
+    },
+    content: {
+        flex: 1,
+    },
+    offsetForIcons: {
+        paddingTop: tokens["space-smallest"],
+    },
+    actionIcon: {
+        paddingLeft: tokens["space-small"],
+    },
+});

package/dist/src/ActionItem/ActionItemGroup.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ActionItem.style";
+import { Divider } from "../Divider";
+export function ActionItemGroup({ children, }) {
+    return React.createElement(View, null, renderChildren(children));
+}
+function renderChildren(children) {
+    const childArray = React.Children.toArray(children);
+    if (childArray.length === 1)
+        return children;
+    return childArray.map((child, index) => {
+        const isSubsequentChild = index !== 0;
+        return (React.createElement(View, { key: index },
+            isSubsequentChild && (React.createElement(View, { style: styles.actionItemHorizontalOffset },
+                React.createElement(Divider, null))),
+            child));
+    });
+}

package/dist/src/ActionItem/components/ActionItemContainer.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./ActionItemContainer.style";
+import { styles as actionItemStyles } from "../ActionItem.style";
+export function ActionItemContainer({ onPress, title, children, testID, }) {
+    if (onPress) {
+        return (React.createElement(Pressable, { onPress: onPress, style: ({ pressed }) => [
+                styles.container,
+                actionItemStyles.actionItemHorizontalOffset,
+                pressed && styles.pressed,
+            ], accessibilityRole: "button", accessibilityLabel: title, testID: testID }, children));
+    }
+    return (React.createElement(View, { style: [styles.container, actionItemStyles.actionItemHorizontalOffset], testID: testID }, children));
+}

package/dist/src/ActionItem/components/ActionItemContainer.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        flexDirection: "row",
+        paddingVertical: tokens["space-base"],
+    },
+    pressed: {
+        opacity: tokens["opacity-pressed"],
+    },
+});

package/dist/src/ActionItem/index.js

@@ -0,0 +1,2 @@
+export { ActionItem } from "./ActionItem";
+export { ActionItemGroup } from "./ActionItemGroup";

package/dist/src/Button/Button.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { TouchableHighlight, View } from "react-native";
 import { styles } from "./Button.style";
-// eslint-disable-next-line import/no-internal-modules
 import { InternalButtonLoading } from "./components/InternalButtonLoading";
 import { ActionLabel } from "../ActionLabel";
 import { Icon } from "../Icon";

package/dist/src/Card/Card.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Pressable, View, } from "react-native";
 import { styles } from "./Card.style";
-// eslint-disable-next-line import/no-internal-modules
 import { InternalCardHeader } from "./components/InternalCardHeader";
 import { ErrorMessageWrapper } from "../ErrorMessageWrapper";
 import { ActionLabel } from "../ActionLabel";

package/dist/src/ProgressBar/ProgressBar.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { View } from "react-native";
+import { useIntl } from "react-intl";
+import { styles } from "./ProgressBar.style";
+import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
+import { messages } from "./messages";
+import { tokens } from "../utils/design";
+export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, }) {
+    const { formatMessage } = useIntl();
+    const accessibilityLabel = [];
+    accessibilityLabel.push(formatMessage(messages.complete, { current, total }));
+    inProgress &&
+        accessibilityLabel.push(formatMessage(messages.inProgress, { inProgress }));
+    return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: accessibilityLabel.join(", ") },
+        header,
+        React.createElement(View, { style: styles.progressBarContainer },
+            React.createElement(ProgressBarInner, { width: 100, animationDuration: 0, color: reverseTheme ? undefined : tokens["color-surface--background"] }),
+            !loading && (React.createElement(React.Fragment, null,
+                inProgress && inProgress > 0 ? (React.createElement(ProgressBarInner, { width: calculateWidth(total, current + inProgress), color: tokens["color-informative"], animationDuration: 800 })) : (React.createElement(React.Fragment, null)),
+                React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 }))))));
+}

package/dist/src/ProgressBar/ProgressBar.style.js

@@ -0,0 +1,24 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    progressBarContainer: {
+        marginTop: tokens["space-small"],
+        marginBottom: tokens["space-small"],
+        height: 20,
+        position: "relative",
+        flexDirection: "row",
+    },
+    progressBarInner: {
+        backgroundColor: "rgba(255,255,255,0.3)",
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        left: 0,
+        top: 0,
+        borderRadius: 100,
+    },
+    progressInner: {
+        height: "100%",
+        borderRadius: 100,
+    },
+});

package/dist/src/ProgressBar/ProgressBarInner.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { View } from "react-native";
+// import Reanimated from "react-native-reanimated";
+// import { useTiming } from "utils/reanimated";
+import { styles } from "./ProgressBar.style";
+export function ProgressBarInner({ width, 
+// animationDuration = 0,
+color, }) {
+    // Animation breaking on Android
+    // const [animatedOpacity] = useTiming({
+    //   duration: animationDuration,
+    //   fromValue: 0,
+    //   toValue: 1,
+    // });
+    return (React.createElement(View, { style: [
+            styles.progressBarInner,
+            Object.assign({ width: `${width}%` }, (color && { backgroundColor: color })),
+        ] }));
+}
+export function calculateWidth(total, current) {
+    if (total <= 0)
+        return 0;
+    if (current >= total)
+        return 100;
+    const curr = Math.max(0, current);
+    if (curr >= total)
+        return 100;
+    return (curr / total) * 100;
+}

package/dist/src/ProgressBar/index.js

@@ -0,0 +1 @@
+export { ProgressBar } from "./ProgressBar";

package/dist/src/ProgressBar/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    complete: {
+        id: "complete",
+        defaultMessage: "{current} of {total} complete",
+        description: "Progress bar accessibilityLabel for current/total",
+    },
+    inProgress: {
+        id: "inProgress",
+        defaultMessage: "{inProgress} in progress",
+        description: "Progress bar accessibilityLabel for inProgress/total",
+    },
+});

package/dist/src/ProgressBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/index.js

@@ -11,5 +11,7 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./ProgressBar";
 export * from "./Heading";
 export * from "./Chip";
+export * from "./ActionItem";