removed formatting
This commit is contained in:
parent
57a3a90941
commit
f21ea604ce
|
|
@ -4,26 +4,21 @@ 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) => {
|
||||
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 watch = disableForm ? undefined : useWatch({
|
||||
name: props.name!,
|
||||
});
|
||||
|
||||
const [currentStatus, setCurrentStatus] = useState(watch || checked);
|
||||
const changeStatus = useCallback(() => {
|
||||
|
|
@ -31,9 +26,7 @@ export const Checkbox = forwardRef<
|
|||
props?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
|
||||
if (!disableForm) {
|
||||
// @ts-ignore
|
||||
register?.onChange?.({
|
||||
target: { name: props.name!, value: !currentStatus },
|
||||
});
|
||||
register?.onChange?.({ target: { name: props.name!, value: !currentStatus } });
|
||||
}
|
||||
}, [currentStatus]);
|
||||
|
||||
|
|
@ -44,29 +37,27 @@ export const Checkbox = forwardRef<
|
|||
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-customColor1 border-2 bg-customColor2',
|
||||
variant === 'default' || !variant ? ('bg-forth') : ('border-customColor1 border-2 bg-customColor2'),
|
||||
className
|
||||
)}
|
||||
>
|
||||
{currentStatus && (
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue