@ozen-ui/kit
Version:
React component library
50 lines (49 loc) • 3.45 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.CheckboxGroup = exports.cnCheckboxGroup = void 0;
var tslib_1 = require("tslib");
require("./CheckboxGroup.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 CheckboxGroupContext_1 = require("./CheckboxGroupContext");
var constants_1 = require("./constants");
exports.cnCheckboxGroup = (0, classname_1.cn)('CheckboxGroupNext');
exports.CheckboxGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'CheckboxGroupNext',
});
var _a = props.direction, direction = _a === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_AS : _c, _d = props.variant, variant = _d === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_VARIANT : _d, _e = props.align, align = _e === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_ALIGN : _e, _f = props.mirrored, mirrored = _f === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_MIRRORED : _f, title = props.title, className = props.className, children = props.children, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, other = tslib_1.__rest(props, ["direction", "size", "as", "variant", "align", "mirrored", "title", "className", "children", "name", "value", "defaultValue", "onChange"]);
var _g = tslib_1.__read((0, useControlled_1.useControlled)({
value: valueProp,
defaultValue: defaultValue,
name: 'CheckboxGroup',
state: 'value',
}), 2), valueState = _g[0], setValueState = _g[1];
var handleChange = function (event) {
var itemValue = event.currentTarget.value;
var value = (valueState === null || valueState === void 0 ? void 0 : valueState.includes(itemValue))
? valueState.filter(function (item) { return item !== itemValue; })
: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((valueState || [])), false), [itemValue], false);
setValueState(value);
onChange === null || onChange === void 0 ? void 0 : onChange(value);
};
return (react_1.default.createElement(CheckboxGroupContext_1.CheckboxGroupContext.Provider, { value: {
value: valueState,
onChange: handleChange,
name: name,
size: size,
variant: variant,
align: align,
mirrored: mirrored,
} },
react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnCheckboxGroup)({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
title && react_1.default.createElement(FormTitle_1.FormTitle, { size: size }, title),
react_1.default.createElement(FormGroup_1.FormGroup, { direction: direction, size: size }, children))));
});
exports.CheckboxGroup.displayName = 'CheckboxGroup';