@ozen-ui/kit
Version:
React component library
120 lines (119 loc) • 6.15 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.__importStar(require("react"));
var useControlled_1 = require("../../hooks/useControlled");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var utils_1 = require("../../utils");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var FieldHint_1 = require("../FieldHint");
var FormGroup_1 = require("../FormGroup");
var FormTitle_1 = require("../FormTitle");
var ChipGroupContext_1 = require("./ChipGroupContext");
var constants_1 = require("./constants");
var entities_1 = require("./entities");
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, defaultValueProp = props.defaultValue, onChange = props.onChange, disabled = props.disabled, titleProps = props.titleProps, groupProps = props.groupProps, _d = props.mode, mode = _d === void 0 ? constants_1.CHIP_GROUP_DEFAULT_MODE : _d, hint = props.hint, other = tslib_1.__rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps", "mode", "hint"]);
var defaultValue = (0, react_1.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 = tslib_1.__read((0, useControlled_1.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);
};
(0, react_1.useEffect)(function () {
if (mode === 'checkbox') {
if ((0, utils_1.isString)(valueState)) {
var value = [valueState];
setValue(value, null);
return;
}
if (valueState === null) {
setValue([], null);
return;
}
return;
}
if (mode === 'radio') {
if (!(0, utils_1.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 ((0, utils_1.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; })
: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__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(entities_1.chipGroupModeVariant)));
};
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,
valueArray: valueArray,
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),
react_1.default.createElement(FieldHint_1.FieldHint, { size: constants_1.CHIP_GROUP_SIZE_TO_HINT_SIZE[size], error: color === 'error', disabled: disabled }, hint))));
});
exports.ChipGroup.displayName = 'ChipGroup';