@ozen-ui/kit/__inner__/esm/components/ChipNext/Chip.js

React component library

import { __assign, __read, __rest } from "tslib";
import './Chip.css';
import React, { useContext } from 'react';
import { logger } from '@ozen-ui/logger';
import { isDev } from '../../constants/environment';
import { useControlled } from '../../hooks/useControlled';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { getIconSizeToFormElement } from '../../utils/getIconSizeToFormElement';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { renderContent } from '../../utils/renderContent';
import { ChipGroupContext } from '../ChipGroup/ChipGroupContext';
import { CHIP_DEFAULT_TAG, CHIP_DEFAULT_SIZE, CHIP_DEFAULT_VARIANT, CHIP_DEFAULT_DISABLED, } from './constants';
export var cnChip = cn('ChipNext');
export var Chip = polymorphicComponentWithRef(function (inProps, ref) {
    var _a = useThemeProps({ name: 'ChipNext', props: inProps }), _b = _a.size, sizeProp = _b === void 0 ? CHIP_DEFAULT_SIZE : _b, _c = _a.color, colorProp = _c === void 0 ? CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabledProp = _d === void 0 ? CHIP_DEFAULT_DISABLED : _d, iconLeft = _a.iconLeft, iconRight = _a.iconRight, multiline = _a.multiline, className = _a.className, children = _a.children, onClick = _a.onClick, checkedProp = _a.checked, _e = _a.as, Tag = _e === void 0 ? CHIP_DEFAULT_TAG : _e, value = _a.value, dataTestId = _a["data-testid"], other = __rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "multiline", "className", "children", "onClick", "checked", "as", "value", 'data-testid']);
    var checked = checkedProp;
    var size = sizeProp;
    var disabled = disabledProp;
    var color = colorProp;
    var chipGroup = useContext(ChipGroupContext);
    if (chipGroup) {
        if (isDev && value === undefined) {
            logger.error('Отсутствует параметр "value" для Chip, находящегося в ChipGroup.');
        }
        if (checked === undefined && chipGroup.value) {
            checked = chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.value.includes(value);
        }
        if (inProps.size === undefined && chipGroup.size) {
            size = chipGroup.size;
        }
        if (inProps.disabled === undefined && chipGroup.disabled !== undefined) {
            disabled = chipGroup.disabled;
        }
        if (inProps.color === undefined && chipGroup.color) {
            color = chipGroup.color;
        }
    }
    var _f = __read(useControlled({
        value: checked,
        defaultValue: false,
        name: 'ChipNext',
        state: 'open',
    }), 2), checkedState = _f[0], setCheckedState = _f[1];
    var handleClick = function (event) {
        if (disabled) {
            return;
        }
        var newCheckedState = !checkedState;
        setCheckedState(newCheckedState);
        onClick === null || onClick === void 0 ? void 0 : onClick(event, { checked: newCheckedState, value: value });
        chipGroup === null || chipGroup === void 0 ? void 0 : chipGroup.onClick(event, { checked: newCheckedState, value: value });
    };
    var renderIcon = function (content) {
        return renderContent({
            content: content,
            props: {
                size: getIconSizeToFormElement(size),
                className: cnChip('Icon'),
            },
        });
    };
    return (React.createElement(Tag, __assign({ type: "button", "data-testid": dataTestId, disabled: disabled }, other, { className: cnChip({ size: size, disabled: disabled, color: color, multiline: multiline, checked: checkedState }, [className]), onClick: handleClick, ref: ref }),
        renderIcon(iconLeft),
        children && React.createElement("span", { className: cnChip('Content') }, children),
        renderIcon(iconRight)));
});
Chip.displayName = 'Chip';