@ozen-ui/kit
Version:
React component library
50 lines (49 loc) • 3.06 kB
JavaScript
import { __assign, __read, __rest, __spreadArray } from "tslib";
import './ChipGroup.css';
import React from 'react';
import { useControlled } from '../../hooks/useControlled';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { FormGroup } from '../FormGroup';
import { FormTitle } from '../FormTitle';
import { ChipGroupContext } from './ChipGroupContext';
import { CHIP_GROUP_DEFAULT_AS, CHIP_GROUP_DEFAULT_DIRECTION, CHIP_GROUP_DEFAULT_SIZE, } from './constants';
export var cnChipGroup = cn('ChipGroup');
export var ChipGroup = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({
props: inProps,
name: 'ChipGroup',
});
var _a = props.direction, direction = _a === void 0 ? CHIP_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? CHIP_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? 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 = __rest(props, ["direction", "size", "as", "color", "title", "className", "children", "value", "defaultValue", "onChange", "disabled", "titleProps", "groupProps"]);
var _e = __read(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; })
: __spreadArray(__spreadArray([], __read(requiredValueState), false), [itemValue], false);
setValueState(value);
onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
};
return (React.createElement(Tag, __assign({ className: cnChipGroup({ size: size }, [className]), role: "group" }, other, { ref: ref }),
React.createElement(ChipGroupContext.Provider, { value: {
value: valueState,
onClick: onClick,
size: size,
disabled: disabled,
color: color,
} },
title && (React.createElement(FormTitle, __assign({ size: size }, titleProps), title)),
React.createElement(FormGroup, __assign({ direction: direction, size: size }, groupProps), children))));
});
ChipGroup.displayName = 'ChipGroup';