46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Icon from 'components/common/Icon';
|
|
import Check from 'assets/check.svg';
|
|
import styles from './Checkbox.module.css';
|
|
|
|
function Checkbox({ name, value, label, onChange, valueArray }) {
|
|
const ref = useRef();
|
|
const [isChecked, setIsChecked] = useState();
|
|
|
|
const onClick = () => ref.current.click();
|
|
|
|
useEffect(() => {
|
|
setIsChecked((valueArray && valueArray.includes(value)) || (!valueArray && value));
|
|
}, [valueArray, value]);
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.checkbox} onClick={onClick}>
|
|
{isChecked && <Icon icon={<Check />} size="small" />}
|
|
</div>
|
|
<label className={styles.label} htmlFor={name} onClick={onClick}>
|
|
{label}
|
|
</label>
|
|
<input
|
|
ref={ref}
|
|
className={styles.input}
|
|
type="checkbox"
|
|
name={name}
|
|
value={valueArray ? value : isChecked}
|
|
defaultChecked={isChecked}
|
|
onChange={onChange}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Checkbox.propTypes = {
|
|
name: PropTypes.string,
|
|
value: PropTypes.any,
|
|
label: PropTypes.node,
|
|
onChange: PropTypes.func,
|
|
};
|
|
|
|
export default Checkbox;
|