65 lines
1.6 KiB
TypeScript
65 lines
1.6 KiB
TypeScript
import React, { InputHTMLAttributes, useState } from 'react';
|
|
import Checkbox from './checkbox';
|
|
|
|
type CheckboxValueType = string | string[] | number;
|
|
|
|
type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
label: string;
|
|
}
|
|
|
|
type Props = {
|
|
name: string;
|
|
options: CheckboxProps[];
|
|
defaultValue?: CheckboxValueType[];
|
|
isFullWidth?: boolean;
|
|
onChange?: (values: CheckboxValueType[]) => void;
|
|
};
|
|
|
|
const CheckboxGroup = ({
|
|
name,
|
|
options,
|
|
defaultValue,
|
|
isFullWidth,
|
|
onChange,
|
|
}: Props) => {
|
|
const [values, setValues] = useState(defaultValue || []);
|
|
|
|
const handleChange = (value: CheckboxValueType, isChecked: boolean) => {
|
|
const index = values.indexOf(value);
|
|
let newValues;
|
|
if (isChecked && index === -1) {
|
|
newValues = values.concat([value]);
|
|
}
|
|
if (!isChecked && index !== -1) {
|
|
newValues = values.filter((val: CheckboxValueType) => val !== value);
|
|
}
|
|
newValues.sort();
|
|
setValues(newValues);
|
|
onChange(newValues);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{options.map((props: CheckboxProps) => {
|
|
const { label, ...attributes } = props;
|
|
const value = (props.value as CheckboxValueType);
|
|
return (
|
|
<Checkbox
|
|
checked={values.includes(value)}
|
|
key={label}
|
|
name={name}
|
|
value={value}
|
|
onCheck={(isChecked) => handleChange(value, isChecked)}
|
|
isFullWidth={isFullWidth}
|
|
{...attributes} // eslint-disable-line react/jsx-props-no-spreading
|
|
>
|
|
{label}
|
|
</Checkbox>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CheckboxGroup;
|