50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
'use client';
|
|
import { FC, forwardRef, useCallback, useState } from 'react';
|
|
import clsx from 'clsx';
|
|
import Image from 'next/image';
|
|
import { useFormContext, useWatch } from 'react-hook-form';
|
|
|
|
export const Checkbox = forwardRef<null, {
|
|
checked?: boolean;
|
|
disableForm?: boolean;
|
|
name?: string;
|
|
className?: string;
|
|
onChange?: (event: { target: { name?: string, value: boolean } }) => void;
|
|
variant?: 'default' | 'hollow';
|
|
}>((props, ref: any) => {
|
|
const { checked, className, disableForm, variant } = props;
|
|
const form = useFormContext();
|
|
const register = disableForm ? {} : form.register(props.name!);
|
|
|
|
const watch = disableForm ? undefined : useWatch({
|
|
name: props.name!,
|
|
});
|
|
|
|
const [currentStatus, setCurrentStatus] = useState(watch || checked);
|
|
const changeStatus = useCallback(() => {
|
|
setCurrentStatus(!currentStatus);
|
|
props?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
|
|
if (!disableForm) {
|
|
// @ts-ignore
|
|
register?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
|
|
}
|
|
}, [currentStatus]);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
{...register}
|
|
onClick={changeStatus}
|
|
className={clsx(
|
|
'cursor-pointer rounded-[4px] select-none w-[24px] h-[24px] justify-center items-center flex',
|
|
variant === 'default' || !variant ? ('bg-forth') : ('border-[#324264] border-2 bg-[#141c2c]'),
|
|
className
|
|
)}
|
|
>
|
|
{currentStatus && (
|
|
<Image src="/form/checked.svg" alt="Checked" width={20} height={20} />
|
|
)}
|
|
</div>
|
|
);
|
|
});
|