@jobber/components-native 0.23.0 → 0.24.0

package/dist/src/Toast/Toast.js

@@ -0,0 +1,64 @@
+import React from "react";
+import Toast from "react-native-toast-message";
+import { AccessibilityInfo, TouchableOpacity, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useIntl } from "react-intl";
+import { styles } from "./Toast.styles";
+import { messages } from "./messages";
+import { tokens } from "../utils/design";
+import { Text } from "../Text";
+import { IconButton } from "../IconButton";
+const MAX_TOAST_MESSAGE_LENGTH = 60;
+const ANNOUNCEMENT_DELAY = 100;
+function DefaultToast({ text1 }) {
+    const { bottom } = useSafeAreaInsets();
+    const { formatMessage } = useIntl();
+    const toastContainerStyles = [styles.container, { paddingBottom: bottom }];
+    return (React.createElement(View, { style: toastContainerStyles },
+        React.createElement(View, { style: styles.toast },
+            React.createElement(TouchableOpacity, { style: styles.toastMessage, accessibilityRole: "alert", accessibilityLabel: formatMessage(messages.toastNotificationLabel) },
+                React.createElement(Text, { reverseTheme: true }, text1)),
+            React.createElement(View, { style: styles.toastIcon },
+                React.createElement(IconButton, { onPress: Toast.hide, name: "remove", customColor: tokens["color-greyBlue--light"], accessibilityLabel: formatMessage(messages.dismissA11yLabel) })))));
+}
+const toastConfig = {
+    default: DefaultToast,
+};
+export function JobberToast({ bottomOffset }) {
+    return React.createElement(Toast, { bottomOffset: bottomOffset, config: toastConfig });
+}
+export function showToast({ message, bottomTabsVisible, position = "bottom", }) {
+    const bottomOffset = getBottomTabsOffset(bottomTabsVisible);
+    const maxDuration = 10000;
+    const minDuration = 5000;
+    let visibilityTime = message.length * 200;
+    if (visibilityTime > maxDuration) {
+        visibilityTime = maxDuration;
+    }
+    else if (visibilityTime < minDuration) {
+        visibilityTime = minDuration;
+    }
+    if (message.length > MAX_TOAST_MESSAGE_LENGTH) {
+        console.warn(`Jobber Design Warning: Message length limit exceeded, your current length is ${message.length}, the maximum allowed is ${MAX_TOAST_MESSAGE_LENGTH}. please talk with your designer`);
+    }
+    Toast.show({
+        type: "default",
+        text1: message,
+        visibilityTime,
+        bottomOffset,
+        position,
+        onShow: () => {
+            setTimeout(() => {
+                AccessibilityInfo.announceForAccessibility(message || "");
+            }, ANNOUNCEMENT_DELAY);
+        },
+    });
+}
+function getBottomTabsOffset(bottomTabsVisible) {
+    const navBarHeight = tokens["space-largest"] + tokens["space-small"];
+    const navBarBorderTopWidth = tokens["space-minuscule"];
+    if (bottomTabsVisible) {
+        return navBarHeight + navBarBorderTopWidth + tokens["space-base"];
+    }
+    return tokens["space-base"];
+}

package/dist/src/Toast/Toast.styles.js

@@ -0,0 +1,30 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        paddingHorizontal: tokens["space-base"],
+        paddingBottom: tokens["space-base"],
+    },
+    toast: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        width: "100%",
+        maxWidth: 540,
+        paddingVertical: tokens["space-small"],
+        backgroundColor: tokens["color-blue"],
+        borderRadius: 6,
+        shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0.1,
+        shadowRadius: 6,
+    },
+    toastMessage: {
+        justifyContent: "center",
+        paddingLeft: tokens["space-base"],
+        paddingVertical: tokens["space-small"],
+        flexShrink: 1,
+    },
+    toastIcon: {
+        justifyContent: "center",
+    },
+});

package/dist/src/Toast/index.js

@@ -0,0 +1 @@
+export { JobberToast as Toast, showToast } from "./Toast";

package/dist/src/Toast/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    toastNotificationLabel: {
+        id: "toastNotificationLabel",
+        defaultMessage: "Toast Notification",
+        description: "Accessibility label for the Toast",
+    },
+    dismissA11yLabel: {
+        id: "dismissA11yLabel",
+        defaultMessage: "Dismiss toast notification",
+        description: "Accessibility label to dismiss the toast when pressing X",
+    },
+});

package/dist/src/index.js

@@ -20,4 +20,5 @@ export * from "./ProgressBar";
 export * from "./StatusLabel";
 export * from "./Switch";
 export * from "./Text";
+export * from "./Toast";
 export * from "./Typography";

package/dist/src/utils/test/MockSafeAreaProvider.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { SafeAreaProvider, } from "react-native-safe-area-context";
+export function MockSafeAreaProvider({ frame, insets, children, }) {
+    const initialFrame = { x: 0, y: 0, width: 0, height: 0 };
+    const initialInsets = { bottom: 50, top: 50, left: 0, right: 0 };
+    return (React.createElement(SafeAreaProvider, { initialMetrics: {
+            frame: frame || initialFrame,
+            insets: insets || initialInsets,
+        } }, children));
+}

package/dist/src/utils/test/index.js

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