@jobber/components-native 0.49.2 → 0.51.0

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jobber/components-native",
-    "version": "0.49.2",
+    "version": "0.51.0",
     "license": "MIT",
     "description": "React Native implementation of Atlantis",
     "repository": {
@@ -37,7 +37,7 @@
     },
     "dependencies": {
         "@jobber/design": "^0.51.0",
-        "@jobber/hooks": "^2.7.3",
+        "@jobber/hooks": "^2.8.0",
         "@react-native-clipboard/clipboard": "^1.11.2",
         "@react-native-picker/picker": "^2.4.10",
         "autolinker": "^4.0.0",
@@ -84,5 +84,5 @@
         "react-native-reanimated": "^2.17.0",
         "react-native-safe-area-context": "^4.5.2"
     },
-    "gitHead": "5bf46b3890aeddd4a75751f82ad9c48bf4774f96"
+    "gitHead": "7096004da05ede6fff2bfaaed572b3e91a9ee1d9"
 }

package/dist/src/InputFieldWrapper/index.js

@@ -1,3 +1,2 @@
 export { commonInputStyles } from "./CommonInputStyles.style";
 export { InputFieldWrapper } from "./InputFieldWrapper";
-export { useShowClear } from "./hooks/useShowClear";

package/dist/src/InputPressable/InputPressable.js

@@ -1,7 +1,8 @@
 import React, { forwardRef, useEffect, useState } from "react";
 import { Text as NativeText, Pressable } from "react-native";
+import { useShowClear } from "@jobber/hooks";
 import { styles } from "./InputPressable.style";
-import { InputFieldWrapper, commonInputStyles, useShowClear, } from "../InputFieldWrapper";
+import { InputFieldWrapper, commonInputStyles } from "../InputFieldWrapper";
 export const InputPressable = forwardRef(InputPressableInternal);
 export function InputPressableInternal({ value, placeholder, disabled, invalid, error, onPress, accessibilityLabel, accessibilityHint, prefix, suffix, clearable = "never", onClear, }, ref) {
     const hasValue = !!value;

package/dist/src/InputText/InputText.js

@@ -1,10 +1,11 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { Platform, TextInput, } from "react-native";
 import identity from "lodash/identity";
+import { useShowClear } from "@jobber/hooks";
 import { styles } from "./InputText.style";
 import { useInputAccessoriesContext } from "./context";
 import { useFormController } from "../hooks";
-import { InputFieldWrapper, useShowClear, } from "../InputFieldWrapper";
+import { InputFieldWrapper } from "../InputFieldWrapper";
 import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
 export const InputText = forwardRef(InputTextInternal);
 // eslint-disable-next-line max-statements

package/dist/src/ProgressBar/ProgressBar.js

@@ -2,17 +2,18 @@ import React from "react";
 import { View } from "react-native";
 import { styles } from "./ProgressBar.style";
 import { ProgressBarInner, calculateWidth } from "./ProgressBarInner";
+import { ProgressBarStepped } from "./ProgressBarStepped";
 import { tokens } from "../utils/design";
 import { useAtlantisI18n } from "../hooks/useAtlantisI18n";
-export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, }) {
+export function ProgressBar({ loading, total, current, inProgress = 0, reverseTheme = false, header, variation = "progress", }) {
     const { t } = useAtlantisI18n();
     return (React.createElement(View, { accessible: true, accessibilityRole: "progressbar", accessibilityLabel: getA11yLabel() },
         header,
-        React.createElement(View, { style: styles.progressBarContainer },
+        variation === "stepped" ? (React.createElement(ProgressBarStepped, { total: total, current: current, color: reverseTheme ? undefined : tokens["color-surface--background"], loading: loading, inProgress: inProgress })) : (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 }))))));
+                React.createElement(ProgressBarInner, { width: calculateWidth(total, current), color: tokens["color-interactive"], animationDuration: 600 })))))));
     function getA11yLabel() {
         const a11yLabelValues = {
             current: String(current),

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

@@ -21,4 +21,17 @@ export const styles = StyleSheet.create({
         height: "100%",
         borderRadius: 100,
     },
+    step: {
+        flex: 1,
+        marginRight: tokens["space-small"],
+        height: "100%",
+        borderRadius: 100,
+        borderColor: "rgba(255,255,255,0.3)",
+    },
+    completedStep: {
+        backgroundColor: tokens["color-interactive"],
+    },
+    inProgressStep: {
+        backgroundColor: tokens["color-informative"],
+    },
 });

package/dist/src/ProgressBar/ProgressBarStepped.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { View } from "react-native";
+import { styles } from "./ProgressBar.style";
+export function ProgressBarStepped({ total, current, color, loading, inProgress, }) {
+    return (React.createElement(View, { style: [styles.progressBarContainer, { height: 10 }] }, Array.from({ length: total }).map((_, index) => {
+        const step = index + 1;
+        const isCompleted = step <= current;
+        const lastStep = step === total;
+        const inProgressSteps = current + (inProgress || 0);
+        return (React.createElement(View, { key: step, style: [
+                styles.step,
+                Object.assign({}, (color && { backgroundColor: color })),
+                !loading && isCompleted && styles.completedStep,
+                !loading &&
+                    !isCompleted &&
+                    step <= inProgressSteps &&
+                    styles.inProgressStep,
+                lastStep && { marginRight: 0 },
+            ], testID: "progress-step" }));
+    })));
+}