@jobber/components-native 0.39.0 → 0.40.1

package/dist/src/Form/context/index.js

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

package/dist/src/Form/context/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Form/hooks/useFormViewRefs.js

@@ -0,0 +1,14 @@
+import { useCallback, useRef } from "react";
+export function useFormViewRefs() {
+    const scrollViewRef = useRef(null);
+    const bottomViewRef = useRef(null);
+    const scrollToTop = useCallback(() => {
+        var _a;
+        (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToPosition(0, 0);
+    }, [scrollViewRef]);
+    return {
+        scrollViewRef: scrollViewRef,
+        bottomViewRef,
+        scrollToTop,
+    };
+}

package/dist/src/Form/hooks/useInternalForm.js

@@ -0,0 +1,37 @@
+import { useForm, } from "react-hook-form";
+import { useAtlantisContext } from "../../AtlantisContext";
+import { useAtlantisFormContext } from "../context/AtlantisFormContext";
+export function useInternalForm({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, }) {
+    const { useConfirmBeforeBack, useInternalFormLocalCache } = useAtlantisFormContext();
+    const { isOnline } = useAtlantisContext();
+    const formMethods = useForm({
+        mode,
+        reValidateMode,
+        defaultValues: initialValues,
+        shouldFocusError: false,
+    });
+    const clientSideSaveOn = localCacheKey && localCacheKey !== "INVALID";
+    const { setLocalCache, removeLocalCache } = useInternalFormLocalCache(formMethods, localCacheKey, {
+        id: localCacheId,
+    });
+    const { handleSubmit, formState: { isSubmitting, isDirty }, } = formMethods;
+    if (formRef) {
+        formRef.current = Object.assign(Object.assign({}, formMethods), { saveButtonHeight,
+            messageBannerHeight,
+            scrollViewRef });
+    }
+    const removeListenerRef = useConfirmBeforeBack({
+        alwaysPreventBack: isSubmitting,
+        shouldShowAlert: isDirty,
+        onAcceptEvent: isOnline ? removeLocalCache : undefined,
+        showLostProgressMessage: isOnline || !clientSideSaveOn ? true : false,
+    });
+    return {
+        setLocalCache,
+        formMethods,
+        handleSubmit,
+        isSubmitting,
+        isDirty,
+        removeListenerRef,
+    };
+}

package/dist/src/Form/hooks/useOfflineHandler.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { useIntl } from "react-intl";
+import { Alert } from "react-native";
+import { messages } from "../messages";
+export function useOfflineHandler() {
+    const { formatMessage } = useIntl();
+    const handleOfflineSubmit = useCallback((callback, dismiss) => {
+        return () => {
+            Alert.alert(formatMessage(messages.unavailableNetworkTitle), formatMessage(messages.unavailableNetworkMessage), [
+                {
+                    text: formatMessage(messages.dismissAlertButton),
+                    style: "cancel",
+                    onPress: dismiss,
+                },
+                {
+                    text: formatMessage(messages.retryAlertButton),
+                    style: "default",
+                    onPress: callback,
+                },
+            ]);
+        };
+    }, [formatMessage]);
+    return handleOfflineSubmit;
+}

package/dist/src/Form/hooks/useSaveButtonPosition.js

@@ -0,0 +1,25 @@
+import { Platform } from "react-native";
+import { useScreenInformation } from "./useScreenInformation";
+import { tokens } from "../../utils/design";
+export function useSaveButtonPosition({ formContentHeight, isBottomSheetOpen, showStickySaveButton, keyboardHeight, keyboardScreenY, }) {
+    const { headerHeight } = useScreenInformation();
+    if (showStickySaveButton) {
+        return {
+            saveButtonPosition: "sticky",
+        };
+    }
+    if (Platform.OS === "android" || isBottomSheetOpen) {
+        return {
+            saveButtonPosition: "inline",
+        };
+    }
+    const isKeyboardOpen = Boolean(keyboardHeight);
+    // tokens["space-large"] acts like a safe space below the form to avoid
+    // rendering the sticky button above the form elements.
+    const calculatedFormContentHeight = formContentHeight + headerHeight + tokens["space-large"];
+    const isKeyboardOverForm = calculatedFormContentHeight > keyboardScreenY;
+    const showInlineSaveButton = isKeyboardOpen && isKeyboardOverForm;
+    return {
+        saveButtonPosition: showInlineSaveButton ? "inline" : "sticky",
+    };
+}

package/dist/src/Form/hooks/useScreenInformation.js

@@ -0,0 +1,15 @@
+import { useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { KEYBOARD_TOP_PADDING_AUTO_SCROLL } from "../constants";
+import { useAtlantisFormContext } from "../context";
+export function useScreenInformation() {
+    const { headerHeight } = useAtlantisFormContext();
+    const windowHeight = useWindowDimensions().height;
+    const headerHeightWithPadding = headerHeight + KEYBOARD_TOP_PADDING_AUTO_SCROLL;
+    const insets = useSafeAreaInsets();
+    return {
+        windowHeight,
+        headerHeight: headerHeightWithPadding,
+        insets,
+    };
+}

package/dist/src/Form/hooks/useScrollToError/index.js

@@ -0,0 +1 @@
+export * from "./useScrollToError";

package/dist/src/Form/hooks/useScrollToError/useScrollToError.js

@@ -0,0 +1,63 @@
+import { useCallback, useState } from "react";
+import { Keyboard, Platform, } from "react-native";
+import { useIsScreenReaderEnabled } from "../../../hooks/useIsScreenReaderEnabled";
+import { useErrorMessageContext } from "../../../ErrorMessageWrapper";
+export function useScrollToError({ formState: { errors, isValid, submitCount }, refNode, setFocus, scrollToPosition, }) {
+    const [submitCounter, setSubmitCounter] = useState(submitCount);
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const manuallyScrollToElement = useManuallyScrollToElement(handleScroll, refNode);
+    // Determine if the form has been submitted by checking if the submit count
+    // went up.
+    const hasBeenSubmitted = submitCounter < submitCount;
+    if (!hasBeenSubmitted)
+        return;
+    if (isScreenReaderEnabled) {
+        manuallyScrollToElement();
+        Keyboard.dismiss();
+    }
+    else {
+        defaultAutoScroll();
+    }
+    setSubmitCounter(submitCount);
+    function defaultAutoScroll() {
+        if (isValid)
+            return;
+        try {
+            focusInputWithRHF(errors, setFocus);
+        }
+        catch (_a) {
+            manuallyScrollToElement();
+        }
+    }
+    function handleScroll(...[x, y]) {
+        /**
+         * Disable scroll animation on android when screen reader is active since it
+         * can't accessibility-focus on an offscreen component.
+         */
+        const isAndroidWithScreenReader = isScreenReaderEnabled && Platform.OS === "android";
+        const shouldAnimateScroll = !isAndroidWithScreenReader;
+        scrollToPosition === null || scrollToPosition === void 0 ? void 0 : scrollToPosition(x, y, shouldAnimateScroll);
+    }
+}
+function focusInputWithRHF(errors, setFocus) {
+    const errorMessages = Object.keys(errors);
+    setFocus(errorMessages[0]);
+}
+/**
+ * Manually scroll to the element by checking which elements has an error from
+ * the Error Message Context
+ */
+function useManuallyScrollToElement(callback, refNode) {
+    const { elements } = useErrorMessageContext();
+    return useCallback(() => {
+        const elementWithError = Object.keys(elements).find(el => elements[el].hasErrorMessage);
+        if (elementWithError) {
+            const element = elements[elementWithError];
+            refNode && element.measure(refNode, callback, handleError);
+            element.accessibilityFocus();
+        }
+    }, [callback, elements, refNode]);
+}
+function handleError() {
+    return Error("Couldn't scroll to error");
+}

package/dist/src/Form/index.js

@@ -0,0 +1,4 @@
+export { Form } from "./Form";
+export { FormMessage } from "./components/FormMessage";
+export { FormSubmitErrorType, FormBannerMessageType } from "./types";
+export * from "./context";

package/dist/src/Form/messages.js

@@ -0,0 +1,28 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    loadingA11YLabel: {
+        id: "loadingA11yLabel",
+        defaultMessage: "Loading",
+        description: "Accessibility label for the loading indicator",
+    },
+    dismissAlertButton: {
+        id: "dismiss",
+        defaultMessage: "Dismiss",
+        description: "The label for the button to dismiss the alert ",
+    },
+    retryAlertButton: {
+        id: "retry",
+        defaultMessage: "Try Again",
+        description: "The label for the alert button to try action again",
+    },
+    unavailableNetworkTitle: {
+        id: "unavailableNetworkTitle",
+        defaultMessage: "Network unavailable",
+        description: "The title for alert about network unavailable",
+    },
+    unavailableNetworkMessage: {
+        id: "unavailableNetworkMessage",
+        defaultMessage: "Check your internet connection and try again later.",
+        description: "The message for alert about network unavailable",
+    },
+});

package/dist/src/Form/types.js

@@ -0,0 +1,10 @@
+export var FormSubmitErrorType;
+(function (FormSubmitErrorType) {
+    FormSubmitErrorType["NetworkError"] = "NetworkError";
+    FormSubmitErrorType["UserError"] = "UserErrors";
+})(FormSubmitErrorType || (FormSubmitErrorType = {}));
+export var FormBannerMessageType;
+(function (FormBannerMessageType) {
+    FormBannerMessageType["WarningMessage"] = "WarningMessage";
+    FormBannerMessageType["NoticeMessage"] = "NoticeMessage";
+})(FormBannerMessageType || (FormBannerMessageType = {}));

package/dist/src/InputText/InputText.js

@@ -11,6 +11,7 @@ export const InputText = forwardRef(InputTextInternal);
 function InputTextInternal({ invalid, disabled, name, placeholder, assistiveText, keyboard, value: controlledValue, defaultValue, autoFocus, autoComplete = "off", spellCheck, textContentType = "none", validations, onChangeText, onSubmitEditing, onFocus, accessibilityLabel, accessibilityHint, autoCorrect, autoCapitalize, onBlur, multiline = false, prefix, suffix, transform = {}, clearable = multiline ? "never" : "while-editing", testID, secureTextEntry, styleOverride, }, ref) {
     var _a;
     const isAndroid = Platform.OS === "android";
+    const isIOS = Platform.OS === "ios";
     const { input: inputTransform = identity, output: outputTransform = identity, } = transform;
     const { error, field } = useFormController({
         name,
@@ -97,7 +98,13 @@ function InputTextInternal({ invalid, disabled, name, placeholder, assistiveText
                 field.ref(instance);
             } }))));
     function handleChangeText(value) {
-        const newValue = outputTransform(value);
+        /**
+         * Replacing the U+FFFC character because it's duplicating text
+         * when dictating on iOS 16.
+         * https://github.com/facebook/react-native/issues/36521#issuecomment-1555421134
+         */
+        const removedIOSCharValue = isIOS ? value.replace(/\uFFFC/g, "") : value;
+        const newValue = outputTransform(removedIOSCharValue);
         setHasMiniLabel(Boolean(newValue));
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newValue);
         field.onChange(newValue);

package/dist/src/index.js

@@ -16,6 +16,7 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./Form";
 export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";