@ozen-ui/kit
Version:
React component library
53 lines (52 loc) • 3.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChipGroup = exports.cnChipGroup = void 0;
var tslib_1 = require("tslib");
require("./ChipGroup.css");
var react_1 = tslib_1.__importDefault(require("react"));
var useControlled_1 = require("../../hooks/useControlled");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var FormGroup_1 = require("../FormGroup");
var FormTitle_1 = require("../FormTitle");
var ChipGroupContext_1 = require("./ChipGroupContext");
var constants_1 = require("./constants");
exports.cnChipGroup = (0, classname_1.cn)('ChipGroup');
exports.ChipGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'ChipGroup',
});
var _a = props.direction, direction = _a === void 0 ? constants_1.CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.CHIP_GROUP_DEFAULT_AS : _c, color = props.color, title = props.title, className = props.className, children = props.children, valueProp = props.value, _d = props.defaultValue, defaultValue = _d === void 0 ? [] : _d, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, other = tslib_1.__rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps"]);
var _e = tslib_1.__read((0, useControlled_1.useControlled)({
value: valueProp,
defaultValue: defaultValue,
name: 'ChipGroup',
state: 'value',
}), 2), valueState = _e[0], setValueState = _e[1];
var onClick = function (event, payload) {
var itemValue = payload.value;
if (itemValue === undefined) {
return;
}
var requiredValueState = valueState !== null && valueState !== void 0 ? valueState : [];
var isValueAlreadyChecked = requiredValueState.includes(itemValue);
var value = isValueAlreadyChecked
? requiredValueState.filter(function (item) { return item !== itemValue; })
: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(requiredValueState), false), [itemValue], false);
setValueState(value);
onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
};
return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnChipGroup)({ size: size }, [className]), role: "group" }, other, { ref: ref }),
react_1.default.createElement(ChipGroupContext_1.ChipGroupContext.Provider, { value: {
value: valueState,
onClick: onClick,
size: size,
disabled: disabled,
color: color,
} },
title && (react_1.default.createElement(FormTitle_1.FormTitle, tslib_1.__assign({ size: size }, titleProps), title)),
react_1.default.createElement(FormGroup_1.FormGroup, tslib_1.__assign({ direction: direction, size: size }, groupProps), children))));
});
exports.ChipGroup.displayName = 'ChipGroup';