@nutui/nutui-react/dist/esm/CheckboxGroup.js

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { useImperativeHandle, useCallback } from "react";
import classNames from "classnames";
import { C as Checkbox, a as CheckboxGroupContext } from "./checkbox2.js";
import { u as usePropsValue } from "./use-props-value.js";
const defaultProps = {
  max: void 0,
  min: void 0,
  list: false,
  labelPosition: "right",
  direction: "vertical",
  onChange: (value) => {
  },
  onLimit: (type) => {
  },
  options: []
};
const classPrefix = "nut-checkboxgroup";
const CheckboxGroup = React__default.forwardRef((props, ref) => {
  const _a = Object.assign(Object.assign({}, defaultProps), props), { children, className, disabled, list, value, defaultValue, max, min, labelPosition, direction, options, onChange, onLimit } = _a, rest = __rest(_a, ["children", "className", "disabled", "list", "value", "defaultValue", "max", "min", "labelPosition", "direction", "options", "onChange", "onLimit"]);
  useImperativeHandle(ref, () => ({
    toggle(state) {
      if (state === false) {
        setValue([]);
      } else {
        const childrenLabel = [];
        React__default.Children.map(children, (child) => {
          const childProps = child.props;
          childrenLabel.push(childProps.value);
        });
        setValue(childrenLabel);
      }
    },
    reverse() {
      const childrenLabel = [];
      React__default.Children.map(children, (child) => {
        const childProps = child.props;
        childrenLabel.push(childProps.value);
      });
      const reverse = childrenLabel.filter((c) => (_value === null || _value === void 0 ? void 0 : _value.findIndex((v) => v === c)) === -1);
      setValue(reverse);
    }
  }));
  const [_value, setValue] = usePropsValue({
    value,
    defaultValue,
    finalValue: [],
    onChange
  });
  const renderOptions = useCallback(() => {
    return options === null || options === void 0 ? void 0 : options.map((_a2) => {
      var { label, value: value2, disabled: disabled2, onChange: onChange2 } = _a2, rest2 = __rest(_a2, ["label", "value", "disabled", "onChange"]);
      return React__default.createElement(Checkbox, Object.assign({ key: value2 === null || value2 === void 0 ? void 0 : value2.toString(), label, disabled: disabled2, value: value2 }, rest2));
    });
  }, [options, max, min]);
  return React__default.createElement(
    CheckboxGroupContext.Provider,
    { value: {
      labelPosition: labelPosition || "right",
      disabled,
      max,
      list,
      onLimit,
      value: _value,
      check: (value2) => {
        const combined = [..._value, value2];
        if (max !== void 0) {
          if (combined.length > max) {
            return onLimit === null || onLimit === void 0 ? void 0 : onLimit("max");
          }
        }
        setValue(combined);
      },
      uncheck: (value2) => {
        const reduced = _value.filter((item) => item !== value2);
        if (min !== void 0 && reduced.length < min) {
          return onLimit === null || onLimit === void 0 ? void 0 : onLimit("min");
        }
        setValue(reduced);
      }
    } },
    React__default.createElement("div", Object.assign({ className: classNames(classPrefix, {
      [`nut-checkboxgroup-${direction}`]: direction,
      [`nut-checkboxgroup-list`]: list
    }, className) }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptions() : children)
  );
});
CheckboxGroup.displayName = "NutCheckboxGroup";
export {
  CheckboxGroup as default
};