@jobber/components-native 0.13.0 → 0.14.0

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,6 @@ export * from "./StatusLabel";
 export * from "./AtlantisContext";
 export * from "./Button";
 export * from "./InputFieldWrapper";
+export * from "./ProgressBar";
 export * from "./Heading";
 export * from "./Chip";