@i-novus/ui-core/dist/data-entry/Checkbox/CheckboxGroup.js

Базовые UI компоненты

import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
import classNames from 'classnames';
import omit from 'lodash/omit';
import { useConfigProvider } from '../../core';
export const CheckboxGroupContext = createContext(null);
export const useCheckboxGroupContext = () => {
    const checkboxGroupContext = useContext(CheckboxGroupContext);
    if (checkboxGroupContext === undefined) {
        throw new Error('useCheckboxGroupContext должен быть использован в рамках <CheckboxGroupContext.Provider>');
    }
    return checkboxGroupContext;
};
const initialStateValue = [];
export const CheckboxGroup = forwardRef((props, ref) => {
    const { className, prefix, defaultValue, value: valueFromProps, disabled, readOnly, visible = true, onChange, onBlur, onFocus, direction = 'horizontal', children, style, ...restProps } = props;
    const { getPrefix } = useConfigProvider();
    const prefixCls = getPrefix(prefix);
    const checkboxGroupPrefix = `${prefixCls}-checkbox-group`;
    const [groupValue, setGroupValue] = useState(valueFromProps || defaultValue || initialStateValue);
    const hasExternalControl = useMemo(() => Object.hasOwn(props, 'value') && Object.hasOwn(props, 'onChange'), [props]);
    const groupClassName = useMemo(() => classNames(className, checkboxGroupPrefix, `${checkboxGroupPrefix}_${direction}`), [checkboxGroupPrefix, className, direction]);
    useEffect(() => {
        if (hasExternalControl) {
            setGroupValue(valueFromProps || []);
        }
    }, [hasExternalControl, valueFromProps]);
    const onGroupValueChange = useCallback((checkboxId, event) => {
        let newGroupValue = [...groupValue];
        if (newGroupValue.includes(checkboxId)) {
            newGroupValue = newGroupValue.filter(id => id !== checkboxId);
        }
        else {
            newGroupValue.push(checkboxId);
        }
        if (!hasExternalControl) {
            setGroupValue(newGroupValue);
        }
        if (onChange) {
            onChange(newGroupValue, event);
        }
    }, [groupValue, onChange, hasExternalControl]);
    const checkboxGroupContextValue = useMemo(() => {
        return {
            onChange: onGroupValueChange,
            value: groupValue,
            disabled,
            readOnly,
            onBlur,
            onFocus,
        };
    }, [onGroupValueChange, groupValue, disabled, readOnly, onBlur, onFocus]);
    if (!visible) {
        return null;
    }
    return (_jsx("div", { ...omit(restProps, 'title'), ref: ref, className: groupClassName, style: style, children: _jsx(CheckboxGroupContext.Provider, { value: checkboxGroupContextValue, children: children }) }));
});
CheckboxGroup.displayName = 'CheckboxGroup';