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

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

import { _ as __rest } from "./tslib.es6.js";
import React__default, { createContext, useContext, useState, useEffect } from "react";
import { CheckDisabled, Checked, CheckNormal } from "@nutui/icons-react";
import classNames from "classnames";
import CheckboxGroup__default from "./CheckboxGroup.js";
import { C as ComponentDefaults } from "./typings.js";
import { u as usePropsValue } from "./use-props-value.js";
const CheckboxGroupContext = createContext(null);
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 = (props) => {
  const { children } = Object.assign(Object.assign({}, defaultProps), props);
  const _a = props, { icon, label, className, activeIcon, checked, value, defaultChecked, shape, disabled, onChange, indeterminate, indeterminateIcon } = _a, others = __rest(_a, ["icon", "label", "className", "activeIcon", "checked", "value", "defaultChecked", "shape", "disabled", "onChange", "indeterminate", "indeterminateIcon"]);
  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 renderIcon = () => {
    if (innerDisabled) {
      if (innerIndeterminate) {
        return React__default.createElement(CheckDisabled, { className: color() });
      }
      if (innerChecked) {
        return React__default.createElement(Checked, { className: color() });
      }
      return React__default.createElement(CheckDisabled, { className: color() });
    }
    if (!innerChecked) {
      return React__default.isValidElement(icon) ? icon : React__default.createElement(CheckNormal, { className: color() });
    }
    if (innerIndeterminate) {
      return React__default.isValidElement(indeterminateIcon) ? indeterminateIcon : React__default.createElement(CheckDisabled, { className: color() });
    }
    return React__default.isValidElement(activeIcon) ? activeIcon : React__default.createElement(Checked, { className: color() });
  };
  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__default.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__default.createElement(
      "div",
      { className: classNames(`${classPrefix}-button`, {
        [`${classPrefix}-button-active`]: innerChecked,
        [`${classPrefix}-button-disabled`]: disabled
      }) },
      children || label,
      innerChecked && activeIcon ? React__default.createElement("div", { className: classNames(`${classPrefix}-button-icon`) }, activeIcon) : null
    );
  };
  const renderListItem = () => {
    return React__default.createElement(
      "div",
      { className: `${classPrefix}-list-item` },
      renderLabel(),
      renderIcon()
    );
  };
  const renderCheckboxItem = () => {
    if (ctx === null || ctx === void 0 ? void 0 : ctx.list) {
      return React__default.createElement(React__default.Fragment, null, renderListItem());
    }
    if (shape === "button") {
      return renderButton();
    }
    return React__default.createElement(
      React__default.Fragment,
      null,
      renderIcon(),
      renderLabel()
    );
  };
  return React__default.createElement("div", Object.assign({ className: classNames(classPrefix, {
    [`${classPrefix}-reverse`]: labelPosition === "left"
  }, className) }, rest, { onClick: handleClick }), renderCheckboxItem());
};
Checkbox.displayName = "NutCheckBox";
Checkbox.Group = CheckboxGroup__default;
export {
  Checkbox as C,
  CheckboxGroupContext as a
};