@kadconsulting/dry/dist/next/esm/src/components/CheckBoxGroup/CheckBoxGroup.js

KAD Reusable Component Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useState } from 'react';
import classnames from 'classnames';
import './CheckBoxGroup.scss';
import { Checkbox } from '../Checkbox';
const CheckboxGroup = forwardRef(({ id, className, name, options, selectedValues = [], onChange, hasAll, ...props }, ref) => {
    const [isAllChecked, setIsAllChecked] = useState(false);
    const handleChange = (value, checked) => {
        const newSelectedValues = checked
            ? [...selectedValues, value]
            : selectedValues.filter((v) => v !== value);
        setIsAllChecked(newSelectedValues.length === options.length);
        onChange?.(newSelectedValues);
    };
    const handleAllChange = () => {
        const allValues = options.map((option) => option?.value ?? '');
        onChange?.(isAllChecked ? [] : allValues);
        setIsAllChecked(!isAllChecked);
    };
    return (_jsxs("div", { id: id, ref: ref, className: classnames('dry-checkbox-group', className), ...props, children: [hasAll && (_jsx(Checkbox, { LabelContent: 'All', checked: isAllChecked, onChange: handleAllChange, color: 'light-contrast' })), options.map((option, index) => {
                return (_jsx(Checkbox, { checked: selectedValues.includes(option.value ?? ''), onChange: (e) => handleChange(option.value ?? '', e.target.checked), LabelContent: option.LabelContent, disabled: option.disabled, LabelProps: option.LabelProps, color: option.color, isCard: option.isCard, extraColor: option.extraColor, ...(option.passProps || {}) }, option.value ?? index));
            })] }));
});
export default CheckboxGroup;
//# sourceMappingURL=CheckBoxGroup.js.map