@jobber/components-native 0.5.0 → 0.6.0

package/dist/src/ErrorMessageWrapper/ErrorMessageWrapper.js

@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from "react";
+import { View } from "react-native";
+import { v4 } from "react-native-uuid";
+import { useErrorMessageContext } from "./context";
+import { styles } from "./ErrorMessageWrapper.style";
+import { Icon } from "../Icon";
+import { Text } from "../Text";
+const wrapForStyle = {
+    card: styles.wrapForCard,
+    default: undefined,
+};
+/**
+ * Adds an error message below the children but ensure the message gets read
+ * out first.
+ *
+ * This component is internal to Atlantis and shouldn't be used outside of it.
+ */
+export function ErrorMessageWrapper({ message, wrapFor = "default", children, }) {
+    const errorMessageContext = useErrorMessageContext();
+    const register = errorMessageContext === null || errorMessageContext === void 0 ? void 0 : errorMessageContext.register;
+    const unregister = errorMessageContext === null || errorMessageContext === void 0 ? void 0 : errorMessageContext.unregister;
+    const a11yMessageRef = useRef(null);
+    const { current: uuid } = useRef(v4());
+    const hasErrorMessage = Boolean(message);
+    useEffect(() => {
+        if (register) {
+            register({ id: uuid, ref: a11yMessageRef, hasErrorMessage });
+        }
+        if (unregister) {
+            return () => unregister(uuid);
+        }
+    }, [uuid, hasErrorMessage, register, unregister]);
+    return (React.createElement(View, { style: [styles.wrapper] },
+        hasErrorMessage && (React.createElement(View, { ref: a11yMessageRef, accessible: true, accessibilityRole: "text", accessibilityLabel: message, pointerEvents: "none", style: styles.screenReaderMessage })),
+        children,
+        hasErrorMessage && (React.createElement(View, { style: [styles.messageWrapper, wrapForStyle[wrapFor]] },
+            React.createElement(View, { style: styles.messageWrapperIcon },
+                React.createElement(Icon, { name: "alert", size: "small", color: "critical" })),
+            React.createElement(View, { style: styles.messageWrapperContent },
+                React.createElement(Text, { variation: "error", level: "textSupporting", hideFromScreenReader: true }, message))))));
+}

package/dist/src/ErrorMessageWrapper/ErrorMessageWrapper.style.js

@@ -0,0 +1,31 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+export const styles = StyleSheet.create({
+    wrapper: {
+        position: "relative",
+        width: "100%",
+    },
+    wrapForCard: {
+        paddingHorizontal: tokens["space-base"],
+        paddingVertical: tokens["space-small"],
+    },
+    messageWrapper: {
+        flexDirection: "row",
+    },
+    messageWrapperIcon: {
+        flex: 0,
+        flexBasis: "auto",
+        paddingTop: tokens["space-minuscule"],
+        paddingRight: tokens["space-smaller"],
+    },
+    messageWrapperContent: {
+        flex: 1,
+    },
+    screenReaderMessage: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+    },
+});

package/dist/src/ErrorMessageWrapper/context/ErrorMessageContext.js

@@ -0,0 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { createContext, useContext } from "react";
+const defaultValues = {
+    elements: {},
+    register: _ => undefined,
+    unregister: _ => undefined,
+};
+export const ErrorMessageContext = createContext(defaultValues);
+export function useErrorMessageContext() {
+    return useContext(ErrorMessageContext);
+}

package/dist/src/ErrorMessageWrapper/context/ErrorMessageProvider.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { AccessibilityInfo, findNodeHandle, } from "react-native";
+import { ErrorMessageContext } from "./ErrorMessageContext";
+export function ErrorMessageProvider({ children, }) {
+    const [elements, setElements] = useState({});
+    return (React.createElement(ErrorMessageContext.Provider, { value: {
+            elements,
+            register: handleRegister,
+            unregister: handleUnregister,
+        } }, children));
+    function handleRegister({ id, ref, hasErrorMessage, }) {
+        elements[id] = {
+            measure: getMeasure(ref),
+            accessibilityFocus: getAccessibilityFocus(ref),
+            hasErrorMessage,
+        };
+        setElements(elements);
+    }
+    function handleUnregister(id) {
+        delete elements[id];
+        setElements(elements);
+    }
+}
+function getMeasure(ref) {
+    return function measure(...args) {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.measureLayout(...args);
+    };
+}
+function getAccessibilityFocus(ref) {
+    return function accessibilityFocus() {
+        const reactTag = findNodeHandle(ref.current);
+        reactTag &&
+            setTimeout(() => {
+                AccessibilityInfo.setAccessibilityFocus(reactTag);
+            }, 0);
+    };
+}

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

@@ -0,0 +1,2 @@
+export * from "./ErrorMessageContext";
+export * from "./ErrorMessageProvider";

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

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

package/dist/src/ErrorMessageWrapper/index.js

@@ -0,0 +1,2 @@
+export { ErrorMessageWrapper } from "./ErrorMessageWrapper";
+export { useErrorMessageContext, ErrorMessageContext, ErrorMessageProvider, } from "./context";

package/dist/src/index.js

@@ -2,6 +2,7 @@ export * from "./Icon";
 export * from "./Divider";
 export * from "./Typography";
 export * from "./Text";
+export * from "./ErrorMessageWrapper";
 export * from "./ActionLabel";
 export * from "./Content";
 export * from "./ActivityIndicator";