deno.land / x / netzo@0.5.16 / components / form.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184// @deno-types="npm:@types/react@18.2.60"import * as React from "react";
import * as LabelPrimitive from "../deps/@radix-ui/react-label.ts";import { Slot } from "../deps/@radix-ui/react-slot.ts";import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext,} from "../deps/react-hook-form.ts";import { Label } from "./label.tsx";import { cn } from "./utils.ts";
export { zodResolver } from "../deps/@hookform/resolvers/zod.ts";export { useForm, type UseFormProps, type UseFormReturn,} from "../deps/react-hook-form.ts";
const Form = FormProvider;
type FormFieldContextValue< TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,> = { name: TName;};
const FormFieldContext = React.createContext<FormFieldContextValue>( {} as FormFieldContextValue,);
const FormField = < TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,>({ ...props}: ControllerProps<TFieldValues, TName>) => { return ( <FormFieldContext.Provider value={{ name: props.name }}> <Controller {...props} /> </FormFieldContext.Provider> );};
const useFormField = () => { const fieldContext = React.useContext(FormFieldContext); const itemContext = React.useContext(FormItemContext); const { getFieldState, formState } = useFormContext();
const fieldState = getFieldState(fieldContext.name, formState);
if (!fieldContext) { throw new Error("useFormField should be used within <FormField>"); }
const { id } = itemContext;
return { id, name: fieldContext.name, formItemId: `${id}-form-item`, formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, };};
type FormItemContextValue = { id: string;};
const FormItemContext = React.createContext<FormItemContextValue>( {} as FormItemContextValue,);
const FormItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => { const id = React.useId();
return ( <FormItemContext.Provider value={{ id }}> <div ref={ref} className={cn("space-y-2", className)} {...props} /> </FormItemContext.Provider> );});FormItem.displayName = "FormItem";
const FormLabel = React.forwardRef< React.ElementRef<typeof LabelPrimitive.Root>, React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>>(({ className, ...props }, ref) => { const { error, formItemId } = useFormField();
return ( <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} /> );});FormLabel.displayName = "FormLabel";
const FormControl = React.forwardRef< React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(({ ...props }, ref) => { const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
return ( <Slot ref={ref} id={formItemId} aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`} aria-invalid={!!error} {...props} /> );});FormControl.displayName = "FormControl";
const FormDescription = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, ...props }, ref) => { const { formDescriptionId } = useFormField();
return ( <p ref={ref} id={formDescriptionId} className={cn("text-[0.8rem] text-muted-foreground", className)} {...props} /> );});FormDescription.displayName = "FormDescription";
const FormMessage = React.forwardRef< HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(({ className, children, ...props }, ref) => { const { error, formMessageId } = useFormField(); const body = error ? String(error?.message) : children;
if (!body) { return null; }
return ( <p ref={ref} id={formMessageId} className={cn("text-[0.8rem] font-medium text-destructive", className)} {...props} > {body} </p> );});FormMessage.displayName = "FormMessage";
export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField,};
Version Info