@ozen-ui/kit
Version:
React component library
72 lines (71 loc) • 4.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Chip = exports.cnChip = void 0;
var tslib_1 = require("tslib");
require("./Chip.css");
var react_1 = tslib_1.__importStar(require("react"));
var logger_1 = require("@ozen-ui/logger");
var environment_1 = require("../../constants/environment");
var useControlled_1 = require("../../hooks/useControlled");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var getIconSizeToFormElement_1 = require("../../utils/getIconSizeToFormElement");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var renderContent_1 = require("../../utils/renderContent");
var ChipGroupContext_1 = require("../ChipGroup/ChipGroupContext");
var constants_1 = require("./constants");
exports.cnChip = (0, classname_1.cn)('ChipNext');
exports.Chip = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var _a = (0, useThemeProps_1.useThemeProps)({ name: 'ChipNext', props: inProps }), _b = _a.size, sizeProp = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, colorProp = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabledProp = _d === void 0 ? constants_1.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 ? constants_1.CHIP_DEFAULT_TAG : _e, value = _a.value, dataTestId = _a["data-testid"], other = tslib_1.__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 = (0, react_1.useContext)(ChipGroupContext_1.ChipGroupContext);
if (chipGroup) {
if (environment_1.isDev && value === undefined) {
logger_1.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 = tslib_1.__read((0, useControlled_1.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 (0, renderContent_1.renderContent)({
content: content,
props: {
size: (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size),
className: (0, exports.cnChip)('Icon'),
},
});
};
return (react_1.default.createElement(Tag, tslib_1.__assign({ type: "button", "data-testid": dataTestId, disabled: disabled }, other, { className: (0, exports.cnChip)({ size: size, disabled: disabled, color: color, multiline: multiline, checked: checkedState }, [className]), onClick: handleClick, ref: ref }),
renderIcon(iconLeft),
children && react_1.default.createElement("span", { className: (0, exports.cnChip)('Content') }, children),
renderIcon(iconRight)));
});
exports.Chip.displayName = 'Chip';