@nutui/nutui-react
Version:
京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序
128 lines (127 loc) • 5.35 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
import React, { useCallback, useImperativeHandle } from "react";
import classNames from "classnames";
import { Checkbox } from "../checkbox/checkbox";
import Context from "./context";
import { usePropsValue } from "../../hooks/use-props-value";
var defaultProps = {
max: undefined,
min: undefined,
list: false,
labelPosition: 'right',
direction: 'vertical',
onChange: function(value) {},
onLimit: function(type) {},
options: []
};
var classPrefix = 'nut-checkboxgroup';
export var CheckboxGroup = /*#__PURE__*/ React.forwardRef(function(props, ref) {
var _ref = _object_spread({}, defaultProps, props), children = _ref.children, className = _ref.className, disabled = _ref.disabled, list = _ref.list, value = _ref.value, defaultValue = _ref.defaultValue, max = _ref.max, min = _ref.min, labelPosition = _ref.labelPosition, direction = _ref.direction, options = _ref.options, onChange = _ref.onChange, onLimit = _ref.onLimit, rest = _object_without_properties(_ref, [
"children",
"className",
"disabled",
"list",
"value",
"defaultValue",
"max",
"min",
"labelPosition",
"direction",
"options",
"onChange",
"onLimit"
]);
useImperativeHandle(ref, function() {
return {
toggle: function toggle(state) {
if (state === false) {
setValue([]);
} else {
var childrenLabel = [];
React.Children.map(children, function(child) {
var childProps = child.props;
childrenLabel.push(childProps.value);
});
setValue(childrenLabel);
}
},
reverse: function reverse() {
var childrenLabel = [];
React.Children.map(children, function(child) {
var childProps = child.props;
childrenLabel.push(childProps.value);
});
var reverse = childrenLabel.filter(function(c) {
return (_value === null || _value === void 0 ? void 0 : _value.findIndex(function(v) {
return v === c;
})) === -1;
});
setValue(reverse);
}
};
});
var _usePropsValue = _sliced_to_array(usePropsValue({
value: value,
defaultValue: defaultValue,
finalValue: [],
onChange: onChange
}), 2), _value = _usePropsValue[0], setValue = _usePropsValue[1];
var renderOptions = useCallback(function() {
return options === null || options === void 0 ? void 0 : options.map(function(_param) {
var label = _param.label, value = _param.value, disabled = _param.disabled, onChange = _param.onChange, rest = _object_without_properties(_param, [
"label",
"value",
"disabled",
"onChange"
]);
return /*#__PURE__*/ React.createElement(Checkbox, _object_spread({
key: value === null || value === void 0 ? void 0 : value.toString(),
label: label,
disabled: disabled,
value: value
}, rest));
});
}, [
options,
max,
min
]);
var _obj;
return /*#__PURE__*/ React.createElement(Context.Provider, {
value: {
labelPosition: labelPosition || 'right',
disabled: disabled,
max: max,
list: list,
onLimit: onLimit,
value: _value,
check: function(value) {
var combined = _to_consumable_array(_value).concat([
value
]);
if (max !== undefined) {
if (combined.length > max) {
return onLimit === null || onLimit === void 0 ? void 0 : onLimit('max');
}
}
setValue(combined);
},
uncheck: function(value) {
var reduced = _value.filter(function(item) {
return item !== value;
});
if (min !== undefined && reduced.length < min) {
return onLimit === null || onLimit === void 0 ? void 0 : onLimit('min');
}
setValue(reduced);
}
}
}, /*#__PURE__*/ React.createElement("div", _object_spread({
className: classNames(classPrefix, (_obj = {}, _define_property(_obj, "nut-checkboxgroup-".concat(direction), direction), _define_property(_obj, "nut-checkboxgroup-list", list), _obj), className)
}, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptions() : children));
});
CheckboxGroup.displayName = 'NutCheckboxGroup';