1
- "use client"
1
+ "use client" ;
2
2
3
- import * as React from "react"
4
- import * as LabelPrimitive from "@radix-ui/react-label"
5
- import { Slot } from "@radix-ui/react-slot"
3
+ import * as React from "react" ;
4
+ import * as LabelPrimitive from "@radix-ui/react-label" ;
5
+ import { Slot } from "@radix-ui/react-slot" ;
6
6
import {
7
7
Controller ,
8
8
FormProvider ,
@@ -11,23 +11,21 @@ import {
11
11
type ControllerProps ,
12
12
type FieldPath ,
13
13
type FieldValues ,
14
- } from "react-hook-form"
14
+ } from "react-hook-form" ;
15
15
16
- import { cn } from "@/lib/utils"
17
- import { Label } from "@/components/ui/label"
16
+ import { cn } from "@/lib/utils" ;
17
+ import { Label } from "@/components/ui/label" ;
18
18
19
- const Form = FormProvider
19
+ const Form = FormProvider ;
20
20
21
21
type FormFieldContextValue <
22
22
TFieldValues extends FieldValues = FieldValues ,
23
23
TName extends FieldPath < TFieldValues > = FieldPath < TFieldValues > ,
24
24
> = {
25
- name : TName
26
- }
25
+ name : TName ;
26
+ } ;
27
27
28
- const FormFieldContext = React . createContext < FormFieldContextValue > (
29
- { } as FormFieldContextValue
30
- )
28
+ const FormFieldContext = React . createContext < FormFieldContextValue > ( { } as FormFieldContextValue ) ;
31
29
32
30
const FormField = <
33
31
TFieldValues extends FieldValues = FieldValues ,
@@ -39,21 +37,21 @@ const FormField = <
39
37
< FormFieldContext . Provider value = { { name : props . name } } >
40
38
< Controller { ...props } />
41
39
</ FormFieldContext . Provider >
42
- )
43
- }
40
+ ) ;
41
+ } ;
44
42
45
43
const useFormField = ( ) => {
46
- const fieldContext = React . useContext ( FormFieldContext )
47
- const itemContext = React . useContext ( FormItemContext )
48
- const { getFieldState } = useFormContext ( )
49
- const formState = useFormState ( { name : fieldContext . name } )
50
- const fieldState = getFieldState ( fieldContext . name , formState )
44
+ const fieldContext = React . useContext ( FormFieldContext ) ;
45
+ const itemContext = React . useContext ( FormItemContext ) ;
46
+ const { getFieldState } = useFormContext ( ) ;
47
+ const formState = useFormState ( { name : fieldContext . name } ) ;
48
+ const fieldState = getFieldState ( fieldContext . name , formState ) ;
51
49
52
50
if ( ! fieldContext ) {
53
- throw new Error ( "useFormField should be used within <FormField>" )
51
+ throw new Error ( "useFormField should be used within <FormField>" ) ;
54
52
}
55
53
56
- const { id } = itemContext
54
+ const { id } = itemContext ;
57
55
58
56
return {
59
57
id,
@@ -62,36 +60,27 @@ const useFormField = () => {
62
60
formDescriptionId : `${ id } -form-item-description` ,
63
61
formMessageId : `${ id } -form-item-message` ,
64
62
...fieldState ,
65
- }
66
- }
63
+ } ;
64
+ } ;
67
65
68
66
type FormItemContextValue = {
69
- id : string
70
- }
67
+ id : string ;
68
+ } ;
71
69
72
- const FormItemContext = React . createContext < FormItemContextValue > (
73
- { } as FormItemContextValue
74
- )
70
+ const FormItemContext = React . createContext < FormItemContextValue > ( { } as FormItemContextValue ) ;
75
71
76
72
function FormItem ( { className, ...props } : React . ComponentProps < "div" > ) {
77
- const id = React . useId ( )
73
+ const id = React . useId ( ) ;
78
74
79
75
return (
80
76
< FormItemContext . Provider value = { { id } } >
81
- < div
82
- data-slot = "form-item"
83
- className = { cn ( "grid gap-2" , className ) }
84
- { ...props }
85
- />
77
+ < div data-slot = "form-item" className = { cn ( "grid gap-2" , className ) } { ...props } />
86
78
</ FormItemContext . Provider >
87
- )
79
+ ) ;
88
80
}
89
81
90
- function FormLabel ( {
91
- className,
92
- ...props
93
- } : React . ComponentProps < typeof LabelPrimitive . Root > ) {
94
- const { error, formItemId } = useFormField ( )
82
+ function FormLabel ( { className, ...props } : React . ComponentProps < typeof LabelPrimitive . Root > ) {
83
+ const { error, formItemId } = useFormField ( ) ;
95
84
96
85
return (
97
86
< Label
@@ -101,29 +90,25 @@ function FormLabel({
101
90
htmlFor = { formItemId }
102
91
{ ...props }
103
92
/>
104
- )
93
+ ) ;
105
94
}
106
95
107
96
function FormControl ( { ...props } : React . ComponentProps < typeof Slot > ) {
108
- const { error, formItemId, formDescriptionId, formMessageId } = useFormField ( )
97
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField ( ) ;
109
98
110
99
return (
111
100
< Slot
112
101
data-slot = "form-control"
113
102
id = { formItemId }
114
- aria-describedby = {
115
- ! error
116
- ? `${ formDescriptionId } `
117
- : `${ formDescriptionId } ${ formMessageId } `
118
- }
103
+ aria-describedby = { ! error ? `${ formDescriptionId } ` : `${ formDescriptionId } ${ formMessageId } ` }
119
104
aria-invalid = { ! ! error }
120
105
{ ...props }
121
106
/>
122
- )
107
+ ) ;
123
108
}
124
109
125
110
function FormDescription ( { className, ...props } : React . ComponentProps < "p" > ) {
126
- const { formDescriptionId } = useFormField ( )
111
+ const { formDescriptionId } = useFormField ( ) ;
127
112
128
113
return (
129
114
< p
@@ -132,36 +117,22 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
132
117
className = { cn ( "text-muted-foreground text-sm" , className ) }
133
118
{ ...props }
134
119
/>
135
- )
120
+ ) ;
136
121
}
137
122
138
123
function FormMessage ( { className, ...props } : React . ComponentProps < "p" > ) {
139
- const { error, formMessageId } = useFormField ( )
140
- const body = error ? String ( error ?. message ?? "" ) : props . children
124
+ const { error, formMessageId } = useFormField ( ) ;
125
+ const body = error ? String ( error ?. message ?? "" ) : props . children ;
141
126
142
127
if ( ! body ) {
143
- return null
128
+ return null ;
144
129
}
145
130
146
131
return (
147
- < p
148
- data-slot = "form-message"
149
- id = { formMessageId }
150
- className = { cn ( "text-destructive text-sm" , className ) }
151
- { ...props }
152
- >
132
+ < p data-slot = "form-message" id = { formMessageId } className = { cn ( "text-destructive text-sm" , className ) } { ...props } >
153
133
{ body }
154
134
</ p >
155
- )
135
+ ) ;
156
136
}
157
137
158
- export {
159
- useFormField ,
160
- Form ,
161
- FormItem ,
162
- FormLabel ,
163
- FormControl ,
164
- FormDescription ,
165
- FormMessage ,
166
- FormField ,
167
- }
138
+ export { useFormField , Form , FormItem , FormLabel , FormControl , FormDescription , FormMessage , FormField } ;
0 commit comments