@jobber/components-native 0.12.0 → 0.14.0

package/dist/src/Chip/Chip.js

@@ -0,0 +1,43 @@
+import React, { useMemo } from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./Chip.style";
+import { Icon } from "../Icon";
+import { Typography } from "../Typography";
+import { tokens } from "../utils/design";
+const defaultAccentColor = tokens["color-surface--reverse"];
+export function Chip({ icon, label, onPress, isDismissible, isActive, inactiveBackgroundColor = "background", accessibilityLabel, accessibilityRole = "radio", accent, }) {
+    const { chipStyle, iconCustomColor, dismissColor } = useMemo(() => {
+        const accentColor = accent ? tokens[`color-${accent}`] : defaultAccentColor;
+        const iconColor = isActive ? tokens["color-surface"] : accentColor;
+        const chip = [
+            styles.container,
+            {
+                backgroundColor: inactiveBackgroundColor === "surface"
+                    ? tokens["color-surface"]
+                    : tokens["color-surface--background"],
+            },
+            isActive && { backgroundColor: accentColor },
+        ];
+        const dismiss = (isActive || inactiveBackgroundColor === "surface") &&
+            styles.activeDismissIcon;
+        return {
+            chipStyle: chip,
+            iconCustomColor: iconColor,
+            dismissColor: dismiss,
+        };
+    }, [accent, isActive, inactiveBackgroundColor]);
+    const accessibilityState = useMemo(() => {
+        const checkableRoles = ["radio", "switch", "togglebutton", "checkbox"];
+        if (checkableRoles.includes(accessibilityRole)) {
+            return { checked: isActive };
+        }
+        return {};
+    }, [accessibilityRole, isActive]);
+    return (React.createElement(Pressable, { testID: "chipTest", hitSlop: { top: 8, bottom: 8, left: 4, right: 4 }, onPress: onPress, disabled: typeof onPress !== "function", style: chipStyle, accessibilityLabel: accessibilityLabel || label, accessibilityRole: accessibilityRole, accessibilityState: accessibilityState },
+        icon && (React.createElement(View, { style: styles.iconLeft },
+            React.createElement(Icon, { name: icon, size: "base", customColor: iconCustomColor }))),
+        label && (React.createElement(View, { style: styles.chipText },
+            React.createElement(Typography, { color: "base", fontWeight: "medium", maxFontScaleSize: tokens["typography--fontSize-large"], maxLines: "single", reverseTheme: isActive }, label))),
+        isDismissible && (React.createElement(View, { style: [styles.dismissIcon, dismissColor] },
+            React.createElement(Icon, { name: "remove", size: "small" })))));
+}

package/dist/src/Chip/Chip.style.js

@@ -0,0 +1,32 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const chipHeight = tokens["space-larger"] + tokens["space-small"];
+export const styles = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        borderRadius: tokens["radius-circle"],
+        flexDirection: "row",
+        height: chipHeight,
+        justifyContent: "center",
+        marginHorizontal: tokens["space-smaller"],
+        marginTop: tokens["space-small"],
+        paddingHorizontal: tokens["space-small"],
+    },
+    iconLeft: {
+        marginHorizontal: tokens["space-smallest"],
+    },
+    chipText: {
+        flexGrow: 1,
+        flexShrink: 1,
+        marginHorizontal: tokens["space-smallest"],
+    },
+    dismissIcon: {
+        backgroundColor: tokens["color-surface"],
+        borderRadius: tokens["radius-circle"],
+        marginLeft: tokens["space-smaller"],
+        padding: tokens["space-smaller"],
+    },
+    activeDismissIcon: {
+        backgroundColor: tokens["color-surface--background"],
+    },
+});

package/dist/src/Chip/index.js

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

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