@jobber/components-native 0.21.1 → 0.23.0

package/dist/src/InputText/InputText.js

@@ -0,0 +1,138 @@
+import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import { Platform, TextInput, } from "react-native";
+import identity from "lodash.identity";
+import { styles } from "./InputText.style";
+import { useInputAccessoriesContext } from "./context";
+import { useFormController } from "../hooks";
+import { InputFieldWrapper, useShowClear, } from "../InputFieldWrapper";
+import { commonInputStyles } from "../InputFieldWrapper/CommonInputStyles.style";
+export const InputText = forwardRef(InputTextInternal);
+// eslint-disable-next-line max-statements
+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 { input: inputTransform = identity, output: outputTransform = identity, } = transform;
+    const { error, field } = useFormController({
+        name,
+        value: controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue,
+        validations,
+    });
+    const internalValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : (_a = field.value) === null || _a === void 0 ? void 0 : _a.toString();
+    const hasValue = internalValue !== "" && internalValue !== undefined;
+    const [focused, setFocused] = useState(false);
+    const { hasMiniLabel, setHasMiniLabel } = useMiniLabel(internalValue);
+    const textInputRef = useTextInputRef({ ref, onClear: handleClear });
+    const showClear = useShowClear({
+        clearable,
+        multiline,
+        focused,
+        hasValue,
+        disabled,
+    });
+    // Android doesn't have an accessibility label like iOS does. By adding
+    // it as a placeholder it readds it like a label. However we don't want to
+    // add a placeholder on iOS.
+    const androidA11yProps = Object.assign({}, (isAndroid && {
+        placeholder: accessibilityLabel || placeholder,
+        placeholderTextColor: "transparent",
+    }));
+    const _name = name !== null && name !== void 0 ? name : field.name;
+    const { inputAccessoryID, register, unregister, setFocusedInput, canFocusNext, onFocusNext, } = useInputAccessoriesContext();
+    useEffect(() => {
+        _name &&
+            register(_name, () => {
+                var _a;
+                (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        return () => {
+            _name && unregister(_name);
+        };
+    }, [_name, register, textInputRef, unregister]);
+    const returnKeyType = useMemo(() => {
+        if (!multiline) {
+            if (inputAccessoryID && isAndroid) {
+                return "next";
+            }
+            else {
+                return "done";
+            }
+        }
+        else {
+            return undefined;
+        }
+    }, [multiline, inputAccessoryID, isAndroid]);
+    // If it's not inside an inputAcessoriesContext or cannot focus next,
+    // then hide the keyboard when the return key is pressed.
+    const shouldBlurOnSubmit = !multiline && (!inputAccessoryID || !canFocusNext || !isAndroid);
+    function handleOnFocusNext() {
+        if (multiline) {
+            return;
+        }
+        onFocusNext();
+    }
+    return (React.createElement(InputFieldWrapper, { prefix: prefix, suffix: suffix, hasValue: hasValue, hasMiniLabel: hasMiniLabel, assistiveText: assistiveText, focused: focused, error: error, invalid: invalid, placeholder: placeholder, disabled: disabled, onClear: handleClear, showClearAction: showClear, styleOverride: styleOverride },
+        React.createElement(TextInput, Object.assign({ inputAccessoryViewID: inputAccessoryID || undefined, testID: testID, autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, spellCheck: spellCheck, style: [
+                commonInputStyles.input,
+                styles.inputPaddingTop,
+                !hasMiniLabel && commonInputStyles.inputEmpty,
+                disabled && commonInputStyles.inputDisabled,
+                multiline && Platform.OS === "ios" && styles.multilineInputiOS,
+                multiline && styles.multiLineInput,
+                multiline && hasMiniLabel && styles.multiLineInputWithMini,
+                styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.inputText,
+            ], editable: !disabled, keyboardType: keyboard, value: inputTransform(internalValue), autoFocus: autoFocus, autoComplete: autoComplete, multiline: multiline, scrollEnabled: false, textContentType: textContentType, onChangeText: handleChangeText, onSubmitEditing: handleOnSubmitEditing, returnKeyType: returnKeyType, blurOnSubmit: shouldBlurOnSubmit, accessibilityLabel: accessibilityLabel || placeholder, accessibilityHint: accessibilityHint, secureTextEntry: secureTextEntry }, androidA11yProps, { onFocus: event => {
+                _name && setFocusedInput(_name);
+                setFocused(true);
+                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+            }, onBlur: () => {
+                _name && setFocusedInput("");
+                setFocused(false);
+                onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+                field.onBlur();
+                trimWhitespace(field, onChangeText);
+            }, ref: (instance) => {
+                // RHF wants us to do it this way
+                // https://react-hook-form.com/faqs#Howtosharerefusage
+                textInputRef.current = instance;
+                field.ref(instance);
+            } }))));
+    function handleChangeText(value) {
+        const newValue = outputTransform(value);
+        setHasMiniLabel(Boolean(newValue));
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(newValue);
+        field.onChange(newValue);
+    }
+    function handleClear() {
+        handleChangeText("");
+    }
+    function handleOnSubmitEditing() {
+        onSubmitEditing === null || onSubmitEditing === void 0 ? void 0 : onSubmitEditing();
+        if (isAndroid) {
+            handleOnFocusNext();
+        }
+    }
+}
+function trimWhitespace(field, onChangeText) {
+    if (!field.value || !field.value.trim) {
+        return;
+    }
+    const trimmedInput = field.value.trim();
+    onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(trimmedInput);
+    field.onChange(trimmedInput);
+}
+function useTextInputRef({ ref, onClear }) {
+    const textInputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        focus: () => { var _a; return (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },
+        blur: () => { var _a; return (_a = textInputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); },
+        clear: onClear,
+    }), [onClear]);
+    return textInputRef;
+}
+function useMiniLabel(internalValue) {
+    const [hasMiniLabel, setHasMiniLabel] = useState(Boolean(internalValue));
+    useEffect(() => {
+        setHasMiniLabel(Boolean(internalValue));
+    }, [internalValue]);
+    return { hasMiniLabel, setHasMiniLabel };
+}

package/dist/src/InputText/InputText.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+import { typographyStyles } from "../Typography";
+export const styles = StyleSheet.create({
+    inputPaddingTop: {
+        paddingTop: typographyStyles.smallSize.fontSize,
+    },
+    multiLineInput: {
+        paddingTop: tokens["space-base"] - tokens["space-smallest"],
+        paddingBottom: tokens["space-smaller"],
+        lineHeight: typographyStyles.defaultSize.lineHeight,
+    },
+    multiLineInputWithMini: {
+        paddingTop: tokens["space-large"],
+    },
+    multilineInputiOS: {
+        // for placeholder
+        paddingTop: (typographyStyles.smallSize.fontSize || 0) + tokens["space-smallest"],
+    },
+});

package/dist/src/InputText/context/InputAccessoriesContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+const defaultValues = {
+    elements: {},
+    focusedInput: "",
+    canFocusNext: false,
+    canFocusPrevious: false,
+    inputAccessoryID: undefined,
+    register: () => undefined,
+    unregister: () => undefined,
+    onFocusNext: () => undefined,
+    onFocusPrevious: () => undefined,
+    setFocusedInput: () => undefined,
+};
+export const InputAccessoriesContext = createContext(defaultValues);
+export function useInputAccessoriesContext() {
+    return useContext(InputAccessoriesContext);
+}

package/dist/src/InputText/context/InputAccessoriesProvider.js

@@ -0,0 +1,73 @@
+import React, { useEffect, useRef, useState } from "react";
+import { InputAccessoryView, Keyboard, Platform, 
+// eslint-disable-next-line no-restricted-imports
+Button as RNButton, View, useColorScheme, } from "react-native";
+import { v4 } from "react-native-uuid";
+import { InputAccessoriesContext } from "./InputAccessoriesContext";
+import { styles } from "./InputAccessoriesProvider.style";
+export function InputAccessoriesProvider({ children, }) {
+    const inputAccessoryID = useRef(v4()).current;
+    const { focusedInput, setFocusedInput, canFocusNext, canFocusPrevious, elements, setElements, previousKey, nextKey, } = useInputAccessoriesProviderState();
+    const colorScheme = useColorScheme();
+    return (React.createElement(InputAccessoriesContext.Provider, { value: {
+            elements,
+            focusedInput,
+            canFocusNext,
+            canFocusPrevious,
+            inputAccessoryID,
+            register,
+            unregister,
+            onFocusNext,
+            onFocusPrevious,
+            setFocusedInput,
+        } },
+        children,
+        Platform.OS === "ios" && (React.createElement(InputAccessoryView, { nativeID: inputAccessoryID },
+            React.createElement(View, { testID: "ATL-InputAccessory", style: [
+                    styles.container,
+                    colorScheme === "dark" ? styles.darkTheme : styles.lightTheme,
+                ] },
+                React.createElement(RNButton, { onPress: Keyboard.dismiss, title: "Done", testID: "ATL-InputAccessory-Done", color: colorScheme === "dark" ? "white" : undefined }))))));
+    function register(name, onFocus) {
+        elements[name] = onFocus;
+        setElements(elements);
+    }
+    function unregister(name) {
+        delete elements[name];
+        setElements(elements);
+    }
+    function onFocusNext() {
+        const nextElement = elements[nextKey];
+        nextElement === null || nextElement === void 0 ? void 0 : nextElement();
+    }
+    function onFocusPrevious() {
+        const previousElement = elements[previousKey];
+        previousElement === null || previousElement === void 0 ? void 0 : previousElement();
+    }
+}
+function useInputAccessoriesProviderState() {
+    const [focusedInput, setFocusedInput] = useState("");
+    const [canFocusNext, setCanFocusNext] = useState(false);
+    const [canFocusPrevious, setCanFocusPrevious] = useState(false);
+    const [elements, setElements] = useState({});
+    const keys = Object.keys(elements);
+    const selectedIndex = keys.findIndex(key => key === focusedInput);
+    const nextKey = keys[selectedIndex + 1];
+    const previousKey = keys[selectedIndex - 1];
+    useEffect(() => {
+        setCanFocusNext(Boolean(nextKey));
+        setCanFocusPrevious(Boolean(previousKey));
+    }, [previousKey, nextKey]);
+    return {
+        previousKey,
+        nextKey,
+        focusedInput,
+        setFocusedInput,
+        canFocusNext,
+        setCanFocusNext,
+        canFocusPrevious,
+        setCanFocusPrevious,
+        elements,
+        setElements,
+    };
+}

package/dist/src/InputText/context/InputAccessoriesProvider.style.js

@@ -0,0 +1,21 @@
+import { PlatformColor, StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+const BAR_HEIGHT = 44;
+export const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingHorizontal: tokens["space-small"],
+        borderTopWidth: tokens["space-minuscule"],
+        borderTopColor: tokens["color-border"],
+        height: BAR_HEIGHT,
+    },
+    lightTheme: {
+        backgroundColor: tokens["color-surface--background"],
+    },
+    darkTheme: {
+        // PlatformColor has to be conditional for Storybook to run without error
+        backgroundColor: PlatformColor === null || PlatformColor === void 0 ? void 0 : PlatformColor("systemGray3"),
+    },
+});

package/dist/src/InputText/context/InputAccessory.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../utils/design";
+export const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: tokens["space-small"],
+        backgroundColor: tokens["color-surface--background"],
+        borderTopWidth: tokens["space-minuscule"],
+        borderTopColor: tokens["color-border"],
+    },
+    buttonContainer: {
+        flexDirection: "row",
+    },
+});

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

@@ -0,0 +1,2 @@
+export * from "./InputAccessoriesContext";
+export * from "./InputAccessoriesProvider";

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

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

package/dist/src/InputText/index.js

@@ -0,0 +1,2 @@
+export { InputText } from "./InputText";
+export * from "./context";

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/hooks/index.js

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

package/dist/src/hooks/useFormController.js

@@ -0,0 +1,38 @@
+import { v1 } from "react-native-uuid";
+import { useController, useForm, useFormContext, } from "react-hook-form";
+import { useState } from "react";
+export function useFormController({ name, value, validations, }) {
+    var _a, _b;
+    const fieldName = useControlName(name);
+    const form = useForm({
+        mode: "onTouched",
+        defaultValues: { [fieldName]: value },
+    });
+    const formContext = useFormContext();
+    const { control, formState: { errors }, } = formContext || form;
+    const { field } = useController({
+        name: fieldName,
+        control,
+        rules: validations,
+        defaultValue: value || undefined,
+    });
+    // The naming convention established by react-hook-form for arrays of fields is, for example, "emails.0.description".
+    // This corresponds to the structure of the error object, e.g. { emails: { 0: { description: "foobar" } } }
+    // We assume here that fields will either follow this period-delimited three-part convention, or else that they are simple and indivisible (e.g. "city").
+    // TODO: Add support for two-part identifiers (e.g. "property.province")
+    const fieldIdentifiers = fieldName.split(".");
+    let error;
+    if (fieldIdentifiers.length === 3) {
+        const [section, item, identifier] = fieldIdentifiers;
+        error = (_b = (_a = errors[section]) === null || _a === void 0 ? void 0 : _a[item]) === null || _b === void 0 ? void 0 : _b[identifier];
+    }
+    else {
+        error = errors[fieldName];
+    }
+    return { error, field };
+}
+function useControlName(name) {
+    const [identifier] = useState(v1());
+    const prefix = `generatedName--${identifier}`;
+    return `${name || prefix}`;
+}

package/dist/src/index.js

@@ -15,7 +15,9 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputPressable";
+export * from "./InputText";
 export * from "./ProgressBar";
 export * from "./StatusLabel";
+export * from "./Switch";
 export * from "./Text";
 export * from "./Typography";