File size: 2,118 Bytes
f2e9a59 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 'use client';
import { FC, forwardRef, useCallback, useState } from 'react';
import clsx from 'clsx';
import { useFormContext, useWatch } from 'react-hook-form';
export const Checkbox = forwardRef<
null,
{
checked?: boolean;
disableForm?: boolean;
name?: string;
className?: string;
label?: string;
onChange?: (event: {
target: {
name?: string;
value: boolean;
};
}) => void;
variant?: 'default' | 'hollow';
}
>((props, ref: any) => {
const { checked, className, label, disableForm, variant } = props;
const form = useFormContext();
const register = disableForm ? {} : form.register(props.name!);
const watch = disableForm ? false : form.watch(props.name!);
const val = watch || checked;
const changeStatus = useCallback(() => {
props?.onChange?.({
target: {
name: props.name!,
value: !val,
},
});
if (!disableForm) {
// @ts-ignore
register?.onChange?.({
target: {
name: props.name!,
value: !val,
},
});
}
}, [val]);
return (
<div className="flex gap-[10px]">
<div
ref={ref}
{...disableForm ? {} : form.register(props.name!)}
onClick={changeStatus}
className={clsx(
'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex text-white',
variant === 'default' || !variant
? 'bg-forth'
: 'border-customColor1 border-2 bg-customColor2',
className
)}
>
{val && (
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="20"
height="20"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
)}
</div>
{!!label && <div>{label}</div>}
</div>
);
});
|