@ozen-ui/kit/__inner__/esm/components/ChipGroup/ChipGroup.js

React component library

import { __assign, __read, __rest, __spreadArray } from "tslib";
import './ChipGroup.css';
import React, { useEffect, useMemo } from 'react';
import { useControlled } from '../../hooks/useControlled';
import { useThemeProps } from '../../hooks/useThemeProps';
import { isArray, isString } from '../../utils';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { FieldHint } from '../FieldHint';
import { FormGroup } from '../FormGroup';
import { FormTitle } from '../FormTitle';
import { ChipGroupContext } from './ChipGroupContext';
import { CHIP_GROUP_DEFAULT_AS, CHIP_GROUP_DEFAULT_DIRECTION, CHIP_GROUP_DEFAULT_MODE, CHIP_GROUP_DEFAULT_SIZE, CHIP_GROUP_SIZE_TO_HINT_SIZE, } from './constants';
import { chipGroupModeVariant } from './entities';
export var cnChipGroup = cn('ChipGroup');
export var ChipGroup = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'ChipGroup',
    });
    var _a = props.direction, direction = _a === void 0 ? CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? CHIP_GROUP_DEFAULT_AS : _c, color = props.color, title = props.title, className = props.className, children = props.children, valueProp = props.value, defaultValueProp = props.defaultValue, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, _d = props.mode, mode = _d === void 0 ? CHIP_GROUP_DEFAULT_MODE : _d, hint = props.hint, other = __rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps", "mode", "hint"]);
    var defaultValue = useMemo(function () {
        if (defaultValueProp !== undefined) {
            return defaultValueProp;
        }
        if (mode === 'checkbox') {
            return [];
        }
        if (mode === 'radio') {
            return null;
        }
        throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C mode \"".concat(mode, "\""));
    }, []);
    var _e = __read(useControlled({
        value: valueProp,
        defaultValue: defaultValue,
        name: 'ChipGroup',
        state: 'value',
    }), 2), valueState = _e[0], setValueState = _e[1];
    var setValue = function (value, event) {
        setValueState(value);
        onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
    };
    useEffect(function () {
        if (mode === 'checkbox') {
            if (isString(valueState)) {
                var value = [valueState];
                setValue(value, null);
                return;
            }
            if (valueState === null) {
                setValue([], null);
                return;
            }
            return;
        }
        if (mode === 'radio') {
            if (!isArray(valueState)) {
                return;
            }
            if (valueState.length > 0) {
                setValue(valueState[0], null);
                return;
            }
            setValue(null, null);
            return;
        }
        throw new Error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C \u0440\u0435\u0436\u0438\u043C \"".concat(mode, "\"."));
    }, [mode]);
    var valueArray = (function () {
        if (!valueState) {
            return [];
        }
        if (isString(valueState)) {
            return [valueState];
        }
        return valueState;
    })();
    var onClick = function (event, payload) {
        var itemValue = payload.value;
        if (itemValue === undefined) {
            return;
        }
        var isValueAlreadyChecked = valueArray.includes(itemValue);
        if (mode === 'checkbox') {
            var value = isValueAlreadyChecked
                ? valueArray.filter(function (item) { return item !== itemValue; })
                : __spreadArray(__spreadArray([], __read(valueArray), false), [itemValue], false);
            setValueState(value);
            onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
            return;
        }
        if (mode === 'radio') {
            if (isValueAlreadyChecked) {
                return;
            }
            setValueState(itemValue);
            onChange === null || onChange === void 0 ? void 0 : onChange(itemValue, event);
            return;
        }
        throw new Error("\u041D\u0435\u043E\u0436\u0438\u0434\u0430\u043D\u043D\u044B\u0439 mode \"".concat(mode, "\". \u0414\u043E\u0441\u0442\u0443\u043F\u043D\u044B\u0435 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u044B: ").concat(JSON.stringify(chipGroupModeVariant)));
    };
    return (React.createElement(Tag, __assign({ className: cnChipGroup({ size: size }, [className]), role: "group" }, other, { ref: ref }),
        React.createElement(ChipGroupContext.Provider, { value: {
                value: valueState,
                valueArray: valueArray,
                onClick: onClick,
                size: size,
                disabled: disabled,
                color: color,
            } },
            title && (React.createElement(FormTitle, __assign({ size: size }, titleProps), title)),
            React.createElement(FormGroup, __assign({ direction: direction, size: size }, groupProps), children),
            React.createElement(FieldHint, { size: CHIP_GROUP_SIZE_TO_HINT_SIZE[size], error: color === 'error', disabled: disabled }, hint))));
});
ChipGroup.displayName = 'ChipGroup';