@jobber/components-native 0.22.0 → 0.24.0

package/dist/src/Switch/Switch.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import { BaseSwitch } from "./components/BaseSwitch";
+import { styles } from "./Switch.styles";
+import { Text } from "../Text";
+export function Switch(props) {
+    const switchProps = Object.assign(Object.assign({}, props), { accessibilityLabel: props.accessibilityLabel || props.label });
+    const [labelWidth, setLabelWidth] = useState();
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(View, { style: styles.row },
+            props.label && (React.createElement(View, { style: styles.label, onLayout: event => setLabelWidth(event.nativeEvent.layout.width), testID: "switch-label-view" },
+                React.createElement(Text, { variation: props.disabled ? "disabled" : "base" }, props.label))),
+            React.createElement(BaseSwitch, Object.assign({}, switchProps))),
+        props.description && (React.createElement(View, { style: [styles.description, { maxWidth: labelWidth }], testID: "switch-description-view" },
+            React.createElement(Text, { level: "textSupporting", variation: "subdued" }, props.description)))));
+}

package/dist/src/Switch/Switch.styles.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        marginTop: tokens["space-base"],
+        marginBottom: tokens["space-base"],
+    },
+    row: {
+        flexDirection: "row",
+        width: "100%",
+    },
+    label: {
+        flex: 1,
+        justifyContent: "center",
+        marginRight: tokens["space-small"],
+    },
+    description: {
+        marginTop: tokens["space-smaller"],
+    },
+});

package/dist/src/Switch/components/BaseSwitch/BaseSwitch.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { Platform } from "react-native";
+import { Switch } from "react-native-gesture-handler";
+import { useFormController } from "../../../hooks";
+import { tokens } from "../../../utils/design";
+export function BaseSwitch({ value, defaultValue, onValueChange, disabled = false, accessibilityLabel, name, }) {
+    const { field } = useFormController({
+        name,
+        value: value !== null && value !== void 0 ? value : defaultValue,
+    });
+    const internalValue = value !== null && value !== void 0 ? value : field.value;
+    function getThumbColor() {
+        if (Platform.OS === "android") {
+            if (disabled) {
+                return tokens["color-disabled"];
+            }
+            else if (internalValue) {
+                return tokens["color-interactive"];
+            }
+            else {
+                return tokens["color-surface--background"];
+            }
+        }
+        return undefined; //use default iOS
+    }
+    function getTrackColors() {
+        if (Platform.OS === "android") {
+            return {
+                true: disabled
+                    ? tokens["color-disabled--secondary"]
+                    : tokens["color-green--lighter"],
+                false: disabled
+                    ? tokens["color-disabled--secondary"]
+                    : tokens["color-disabled"],
+            };
+        }
+        else {
+            //iOS
+            return {
+                true: tokens["color-interactive"],
+                false: tokens["color-surface--background"],
+            };
+        }
+    }
+    return (React.createElement(Switch, { value: internalValue, onValueChange: (val) => {
+            if (!disabled) {
+                onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(val);
+                field.onChange(val);
+            }
+        }, disabled: disabled, thumbColor: getThumbColor(), trackColor: getTrackColors(), ios_backgroundColor: tokens["color-surface--background"], accessibilityLabel: accessibilityLabel, accessibilityRole: "switch", accessibilityState: {
+            disabled: disabled,
+            checked: internalValue,
+        } }));
+}

package/dist/src/Switch/components/BaseSwitch/index.js

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

package/dist/src/Switch/index.js

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

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

@@ -18,5 +18,7 @@ export * from "./InputPressable";
 export * from "./InputText";
 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";