@jobber/components-native 0.21.1 → 0.22.0

package/src/InputText/context/InputAccessoriesProvider.tsx

@@ -0,0 +1,121 @@
+import React, { ReactNode, 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,
+}: {
+  children: ReactNode;
+}): JSX.Element {
+  const inputAccessoryID = useRef(v4()).current;
+  const {
+    focusedInput,
+    setFocusedInput,
+    canFocusNext,
+    canFocusPrevious,
+    elements,
+    setElements,
+    previousKey,
+    nextKey,
+  } = useInputAccessoriesProviderState();
+
+  const colorScheme = useColorScheme();
+
+  return (
+    <InputAccessoriesContext.Provider
+      value={{
+        elements,
+        focusedInput,
+        canFocusNext,
+        canFocusPrevious,
+        inputAccessoryID,
+        register,
+        unregister,
+        onFocusNext,
+        onFocusPrevious,
+        setFocusedInput,
+      }}
+    >
+      {children}
+      {Platform.OS === "ios" && (
+        <InputAccessoryView nativeID={inputAccessoryID}>
+          <View
+            testID="ATL-InputAccessory"
+            style={[
+              styles.container,
+              colorScheme === "dark" ? styles.darkTheme : styles.lightTheme,
+            ]}
+          >
+            <RNButton
+              onPress={Keyboard.dismiss}
+              title="Done"
+              testID="ATL-InputAccessory-Done"
+              color={colorScheme === "dark" ? "white" : undefined}
+            />
+          </View>
+        </InputAccessoryView>
+      )}
+    </InputAccessoriesContext.Provider>
+  );
+
+  function register(name: string, onFocus: () => void) {
+    elements[name] = onFocus;
+    setElements(elements);
+  }
+
+  function unregister(name: string) {
+    delete elements[name];
+    setElements(elements);
+  }
+
+  function onFocusNext() {
+    const nextElement = elements[nextKey];
+    nextElement?.();
+  }
+
+  function onFocusPrevious() {
+    const previousElement = elements[previousKey];
+    previousElement?.();
+  }
+}
+
+function useInputAccessoriesProviderState() {
+  const [focusedInput, setFocusedInput] = useState("");
+  const [canFocusNext, setCanFocusNext] = useState(false);
+  const [canFocusPrevious, setCanFocusPrevious] = useState(false);
+  const [elements, setElements] = useState<Record<string, () => void>>({});
+
+  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/src/InputText/context/InputAccessory.style.ts

@@ -0,0 +1,17 @@
+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/src/InputText/context/index.ts

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

package/src/InputText/context/types.ts

@@ -0,0 +1,28 @@
+type Name = string;
+
+export interface InputAccessoriesContextProps {
+  /**
+   * Registered elements.
+   */
+  readonly elements: Record<Name, () => void>;
+
+  readonly focusedInput: string;
+
+  readonly canFocusNext: boolean;
+  readonly canFocusPrevious: boolean;
+  readonly inputAccessoryID?: string;
+
+  /**
+   * Registers the element to the context.
+   */
+  readonly register: (name: Name, onFocus: () => void) => void;
+
+  /**
+   * Un-registers the element from the context.
+   */
+  readonly unregister: (name: Name) => void;
+
+  readonly onFocusNext: () => void;
+  readonly onFocusPrevious: () => void;
+  readonly setFocusedInput: (name: string) => void;
+}

package/src/InputText/index.ts

@@ -0,0 +1,3 @@
+export { InputText } from "./InputText";
+export type { InputTextRef, InputTextProps } from "./InputText";
+export * from "./context";

package/src/hooks/index.ts

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

package/src/hooks/useFormController.ts

@@ -0,0 +1,68 @@
+import { v1 } from "react-native-uuid";
+import {
+  FieldError,
+  RegisterOptions,
+  UseControllerReturn,
+  useController,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import { useState } from "react";
+
+interface UseFormControllerProps<T> {
+  name?: string;
+  value?: T;
+  validations?: RegisterOptions;
+}
+
+interface UseFormController {
+  error?: FieldError;
+  field: UseControllerReturn["field"];
+}
+
+export function useFormController<T>({
+  name,
+  value,
+  validations,
+}: UseFormControllerProps<T>): UseFormController {
+  const fieldName = useControlName(name);
+
+  const form = useForm<{ fieldName: T }>({
+    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: FieldError | undefined;
+  if (fieldIdentifiers.length === 3) {
+    const [section, item, identifier] = fieldIdentifiers;
+    error = errors[section]?.[item]?.[identifier];
+  } else {
+    error = errors[fieldName];
+  }
+
+  return { error, field };
+}
+
+function useControlName(name?: string): UseControllerReturn["field"]["name"] {
+  const [identifier] = useState(v1());
+  const prefix = `generatedName--${identifier}`;
+  return `${name || prefix}` as const;
+}

package/src/index.ts

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