UNPKG

@nutui/nutui-react

Version:

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

128 lines (127 loc) 5.35 kB
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';