Form

1import {
2  Children,
3  cloneElement,
4  createContext,
5  useContext,
6  useMemo,
7} from "react";
8import type { FieldErrors, FieldPath } from "react-hook-form";
9import { get } from "react-hook-form";
10import { Text, type TextProps, View } from "react-native";
11import { cn } from "../lib/utils";
12import { Label, type LabelProps } from "./label";
13 
14// Types
15type FieldStateProps = {
16  invalid?: boolean;
17  disabled?: boolean;
18};
19 
20type InternalFieldContextType = FieldStateProps & {
21  errorMessage?: string;
22};
23 
24export type FieldProps = InternalFieldContextType & {
25  children: React.ReactNode;
26};
27 
28type FieldControlProps = {
29  children: React.ReactElement<FieldStateProps>;
30};
31 
32// Context
33const FieldContext = createContext<InternalFieldContextType | null>(null);
34 
35const useFieldContext = () => {
36  const context = useContext(FieldContext);
37  if (!context) {
38    throw new Error("useFieldContext must be used within a Field component");
39  }
40  return context;
41};
42 
43// Components
44export const Field = ({
45  errorMessage,
46  invalid,
47  disabled,
48  children,
49}: FieldProps) => {
50  const ctx = useMemo(
51    () => ({ disabled, errorMessage, invalid }),
52    [errorMessage, disabled, invalid]
53  );
54 
55  return (
56    <FieldContext.Provider value={ctx}>
57      <View className="flex flex-col gap-2">{children}</View>
58    </FieldContext.Provider>
59  );
60};
61 
62export const FieldLabel = ({ className, ...props }: LabelProps) => {
63  const { disabled, invalid } = useFieldContext();
64 
65  return (
66    <Label
67      {...props}
68      className={cn(
69        {
70          "text-destructive": invalid,
71          "text-muted-foreground": disabled,
72        },
73        className
74      )}
75    />
76  );
77};
78 
79export const FieldControl = ({ children }: FieldControlProps) => {
80  const { disabled, invalid } = useFieldContext();
81  const child = Children.only(children);
82 
83  if (!child) {
84    if (__DEV__) {
85      throw new Error(
86        "FieldControl expects a single React element as children"
87      );
88    }
89 
90    return null;
91  }
92 
93  return cloneElement(child, {
94    disabled,
95    invalid,
96  });
97};
98 
99export const FieldDescription = ({ className, ...props }: TextProps) => {
100  const { errorMessage } = useFieldContext();
101 
102  if (errorMessage) {
103    return null;
104  }
105 
106  return (
107    <Text
108      {...props}
109      className={cn("text-muted-foreground text-sm", className)}
110    />
111  );
112};
113 
114export const FieldErrorMessage = ({
115  className,
116  ...props
117}: Omit<TextProps, "children">) => {
118  const { errorMessage } = useFieldContext();
119 
120// … truncated