File size: 1,374 Bytes
41a71fd |
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 |
import { ReactNode, useEffect, useId, useRef } from 'react';
import { classNames } from '@/shared/lib/classNames/classNames';
import Checkmark from '@/shared/assets/icons/checkmark.svg?react';
import cls from './Checkbox.module.scss';
interface CheckboxProps {
className?: string;
name: string;
children: ReactNode;
onChange?: (value: string) => void;
inputRef?: (ref: any) => void;
}
export const Checkbox = (props: CheckboxProps) => {
const { className, name, children, onChange, inputRef } = props;
const checkboxId = useId();
const inputRefValue = useRef(null);
useEffect(() => {
if (inputRef) inputRef(inputRefValue.current);
}, [inputRefValue.current]);
return (
<div className={classNames(cls.Checkbox, {}, [className])}>
<input //
id={checkboxId}
className={`${cls.input} visually-hidden`}
ref={inputRefValue}
name={name}
type="checkbox"
onChange={(e) => onChange?.(e.target.value)}
/>
<label htmlFor={checkboxId} className={cls.name}>
<div className={cls.window}>
<Checkmark className={cls.iconMark} />
</div>
<div className={cls.content}>{children}</div>
</label>
</div>
);
};
|