@@ -4,36 +4,29 @@ import clsx from 'clsx';
44import Image from 'next/image' ;
55import { useFormContext , useWatch } from 'react-hook-form' ;
66
7- export const Checkbox = forwardRef <
8- null ,
9- {
10- checked ?: boolean ;
11- disableForm ?: boolean ;
12- name ?: string ;
13- className ?: string ;
14- onChange ?: ( event : { target : { name ?: string ; value : boolean } } ) => void ;
15- variant ?: 'default' | 'hollow' ;
16- }
17- > ( ( props , ref : any ) => {
7+ export const Checkbox = forwardRef < null , {
8+ checked ?: boolean ;
9+ disableForm ?: boolean ;
10+ name ?: string ;
11+ className ?: string ;
12+ onChange ?: ( event : { target : { name ?: string , value : boolean } } ) => void ;
13+ variant ?: 'default' | 'hollow' ;
14+ } > ( ( props , ref : any ) => {
1815 const { checked, className, disableForm, variant } = props ;
1916 const form = useFormContext ( ) ;
2017 const register = disableForm ? { } : form . register ( props . name ! ) ;
2118
22- const watch = disableForm
23- ? undefined
24- : useWatch ( {
25- name : props . name ! ,
26- } ) ;
19+ const watch = disableForm ? undefined : useWatch ( {
20+ name : props . name ! ,
21+ } ) ;
2722
2823 const [ currentStatus , setCurrentStatus ] = useState ( watch || checked ) ;
2924 const changeStatus = useCallback ( ( ) => {
3025 setCurrentStatus ( ! currentStatus ) ;
3126 props ?. onChange ?.( { target : { name : props . name ! , value : ! currentStatus } } ) ;
3227 if ( ! disableForm ) {
3328 // @ts -ignore
34- register ?. onChange ?.( {
35- target : { name : props . name ! , value : ! currentStatus } ,
36- } ) ;
29+ register ?. onChange ?.( { target : { name : props . name ! , value : ! currentStatus } } ) ;
3730 }
3831 } , [ currentStatus ] ) ;
3932
@@ -44,29 +37,27 @@ export const Checkbox = forwardRef<
4437 onClick = { changeStatus }
4538 className = { clsx (
4639 'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex' ,
47- variant === 'default' || ! variant
48- ? 'bg-forth'
49- : 'border-customColor1 border-2 bg-customColor2' ,
40+ variant === 'default' || ! variant ? ( 'bg-forth' ) : ( 'border-customColor1 border-2 bg-customColor2' ) ,
5041 className
5142 ) }
5243 >
5344 { currentStatus && (
54- < div >
55- < svg
56- xmlns = "http://www.w3.org/2000/svg"
57- viewBox = "0 0 24 24"
58- width = "20"
59- height = "20"
60- fill = "none"
61- stroke = "currentColor"
62- strokeWidth = "2"
63- strokeLinecap = "round"
64- strokeLinejoin = "round"
65- >
66- < polyline points = "20 6 9 17 4 12" > </ polyline >
67- </ svg >
68- </ div >
69- ) }
45+ < div >
46+ < svg
47+ xmlns = "http://www.w3.org/2000/svg"
48+ viewBox = "0 0 24 24"
49+ width = "20"
50+ height = "20"
51+ fill = "none"
52+ stroke = "currentColor"
53+ strokeWidth = "2"
54+ strokeLinecap = "round"
55+ strokeLinejoin = "round"
56+ >
57+ < polyline points = "20 6 9 17 4 12" > </ polyline >
58+ </ svg >
59+ </ div >
60+ ) }
7061 </ div >
7162 ) ;
7263} ) ;
0 commit comments