@mijadesign/mjui-react-taro/dist/esm/checkbox.taro-C5a3N8J5.js

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

import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import React, { createContext, useImperativeHandle, useCallback, useContext, useState, useEffect } from "react";
import classNames from "classnames";
import { b as a, a as a$1 } from "./Unselected-CDv_w30k.js";
/* empty css                        */
import { CheckDisabled, Checked, CheckNormal } from "@nutui/icons-react-taro";
import { View } from "@tarojs/components";
import { u as usePropsValue } from "./use-props-value-DuhZMy4U.js";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
const c = {
  size: "",
  classPrefix: "icon",
  fontClassName: "iconfont",
  color: "",
  tag: "i",
  onClick: (e) => {
  },
  className: ""
};
function h(e) {
  return e === "" ? "" : Number.isNaN(Number(e)) ? String(e) : `${e}px`;
}
function l(e) {
  const a2 = "selectedminus-fill", {
    size: i,
    classPrefix: r,
    color: f,
    tag: m,
    children: u,
    className: d,
    fontClassName: p,
    style: N,
    logValue: s,
    onClick: o,
    ...k
  } = {
    ...c,
    ...e
  }, C = (g) => {
    o && o(g);
  }, t = {}, n = h(i);
  return n && (t.fontSize = n), React.createElement(
    m,
    {
      className: classNames(`${p} ${r}-${a2} ${d || ""}`, { "auto-track": !!s }),
      style: {
        color: f,
        ...t,
        ...N
      },
      ...k,
      onClick: C,
      "data-log-name": s
    },
    u
  );
}
l.defaultProps = c;
l.displayName = "FiresoonMobileIcon-selectedminus-fill";
const CheckboxGroupContext = createContext(null);
const defaultProps$1 = {
  max: void 0,
  min: void 0,
  list: false,
  labelPosition: "right",
  direction: "vertical",
  onChange: (value) => {
  },
  onLimit: (type) => {
  },
  options: []
};
const classPrefix$1 = "nut-checkboxgroup";
const CheckboxGroup = React.forwardRef((props, ref) => {
  const _a = Object.assign(Object.assign({}, defaultProps$1), props), { children, className, disabled, list, onChange, value, defaultValue, max, min, onLimit, labelPosition, direction, options } = _a, rest = __rest(_a, ["children", "className", "disabled", "list", "onChange", "value", "defaultValue", "max", "min", "onLimit", "labelPosition", "direction", "options"]);
  useImperativeHandle(ref, () => ({
    toggle(state) {
      if (state === false) {
        setValue([]);
      } else {
        const childrenLabel = [];
        React.Children.map(children, (child) => {
          const childProps = child.props;
          childrenLabel.push(childProps.value);
        });
        setValue(childrenLabel);
      }
    },
    reverse() {
      const childrenLabel = [];
      React.Children.map(children, (child) => {
        const childProps = child.props;
        childrenLabel.push(childProps.value);
      });
      const reverse = childrenLabel.filter((c2) => (_value === null || _value === void 0 ? void 0 : _value.findIndex((v) => v === c2)) === -1);
      setValue(reverse);
    }
  }));
  const [_value, setValue] = usePropsValue({
    value: props.value,
    defaultValue: props.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.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.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.createElement("div", Object.assign({ className: classNames(classPrefix$1, {
      [`nut-checkboxgroup-${props.direction}`]: props.direction,
      [`nut-checkboxgroup-list`]: list
    }, className) }, rest), (options === null || options === void 0 ? void 0 : options.length) ? renderOptions() : children)
  );
});
CheckboxGroup.defaultProps = defaultProps$1;
CheckboxGroup.displayName = "NutCheckboxGroup";
const defaultProps = Object.assign(Object.assign({}, ComponentDefaults), { disabled: false, shape: "round", labelPosition: "right", icon: null, activeIcon: null, indeterminateIcon: null, onChange: (value) => {
} });
const classPrefix = "nut-checkbox";
const Checkbox$1 = (props) => {
  const { children } = Object.assign(Object.assign({}, defaultProps), props);
  const { icon, label, className, activeIcon, checked, defaultChecked, shape, disabled, onChange, indeterminate, indeterminateIcon } = props, others = __rest(props, ["icon", "label", "className", "activeIcon", "checked", "defaultChecked", "shape", "disabled", "onChange", "indeterminate", "indeterminateIcon"]);
  const { value } = props;
  let { labelPosition } = others, rest = __rest(others, ["labelPosition"]);
  const ctx = useContext(CheckboxGroupContext);
  let [innerChecked, setChecked] = usePropsValue({
    value: checked,
    defaultValue: defaultChecked,
    finalValue: defaultChecked,
    onChange
  });
  let [innerDisabled, setDisabled] = useState(disabled);
  const [innerIndeterminate, setIndeterminate] = useState(indeterminate);
  useEffect(() => {
    setDisabled(disabled);
  }, [disabled]);
  useEffect(() => {
    setIndeterminate(indeterminate);
  }, [indeterminate]);
  if (ctx) {
    if (ctx.labelPosition !== void 0) {
      labelPosition = ctx.labelPosition;
    }
    innerDisabled = ctx.disabled !== void 0 ? ctx.disabled : innerDisabled;
    innerChecked = ctx.value.includes(value);
    setChecked = (checked2) => {
      if (ctx.disabled)
        return;
      if (checked2)
        ctx.check(value);
      if (!checked2)
        ctx.uncheck(value);
    };
  }
  const renderDisableIcon = () => React.isValidElement(indeterminateIcon) ? React.cloneElement(indeterminateIcon, Object.assign(Object.assign({}, indeterminateIcon.props), { className: color() })) : React.createElement(CheckDisabled, { className: color() });
  const renderCheckedIcon = () => React.isValidElement(activeIcon) ? React.cloneElement(activeIcon, Object.assign(Object.assign({}, activeIcon.props), { className: color() })) : React.createElement(Checked, { className: color() });
  const renderNormalCheck = () => React.isValidElement(icon) ? React.cloneElement(icon, Object.assign(Object.assign({}, icon.props), { className: color() })) : React.createElement(CheckNormal, { className: color() });
  const renderIcon = () => {
    if (innerDisabled) {
      if (innerIndeterminate) {
        return renderDisableIcon();
      }
      if (innerChecked) {
        return renderCheckedIcon();
      }
      return renderNormalCheck();
    }
    if (!innerChecked) {
      return renderNormalCheck();
    }
    if (innerIndeterminate) {
      return renderDisableIcon();
    }
    return renderCheckedIcon();
  };
  const color = () => {
    const cls = `${classPrefix}-icon `;
    if (innerDisabled) {
      if (innerChecked && !innerIndeterminate) {
        return `${cls}${classPrefix}-icon-checked ${classPrefix}-icon-disabled`;
      }
      if (innerChecked && innerIndeterminate) {
        return `${cls}${classPrefix}-icon-indeterminate ${classPrefix}-icon-disabled`;
      }
      return `${cls}${classPrefix}-icon-disabled`;
    }
    if (innerChecked) {
      if (innerIndeterminate) {
        return `${cls}${classPrefix}-icon-indeterminate`;
      }
      return `${cls}${classPrefix}-icon-checked`;
    }
    return cls;
  };
  const renderLabel = () => {
    return React.createElement("span", { className: classNames(`${classPrefix}-label `, {
      [`${classPrefix}-label-disabled`]: innerDisabled
    }) }, children || label);
  };
  const handleClick = () => {
    if (disabled)
      return;
    const latestChecked = !innerChecked;
    setChecked(latestChecked);
  };
  const renderButton = () => {
    return React.createElement(
      View,
      { className: classNames(`${classPrefix}-button`, {
        [`${classPrefix}-button-active`]: innerChecked,
        [`${classPrefix}-button-disabled`]: disabled
      }) },
      children || label,
      innerChecked && activeIcon ? React.createElement(View, { className: classNames(`${classPrefix}-button-icon`) }, activeIcon) : null
    );
  };
  const renderListItem = () => {
    return React.createElement(
      View,
      { className: "nut-checkbox-list-item" },
      renderLabel(),
      renderIcon()
    );
  };
  const renderCheckboxItem = () => {
    if (ctx === null || ctx === void 0 ? void 0 : ctx.list) {
      return React.createElement(React.Fragment, null, renderListItem());
    }
    if (shape === "button") {
      return renderButton();
    }
    return React.createElement(
      React.Fragment,
      null,
      renderIcon(),
      renderLabel()
    );
  };
  return React.createElement(View, Object.assign({ className: classNames(classPrefix, {
    [`${classPrefix}-reverse`]: labelPosition === "left"
  }, className) }, rest, { onClick: handleClick }), renderCheckboxItem());
};
Checkbox$1.displayName = "NutCheckBox";
Checkbox$1.Group = CheckboxGroup;
const Checkbox = (_a) => {
  var { icon = React.createElement(a, null), activeIcon = React.createElement(a$1, null), indeterminateIcon = React.createElement(l, null) } = _a, rest = __rest(_a, ["icon", "activeIcon", "indeterminateIcon"]);
  if (rest.shape === "button") {
    activeIcon = null;
  }
  return React.createElement(Checkbox$1, Object.assign({ icon, activeIcon, indeterminateIcon }, rest));
};
Checkbox.displayName = "MjCheckbox";
Checkbox.Group = Checkbox$1.Group;
export {
  Checkbox as C,
  CheckboxGroup as a
};