import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useState, useEffect } from 'react';
import Label from '../Label/index.js';
import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
import '../_verture/unsupportedIterableToArray-cb478f24.js';
import '../_verture/tslib.es6-55ed4bd2.js';
import '../Help/index.js';
import '../Tooltip/index.js';
import 'rc-tooltip';
import 'rc-tooltip/lib/placements';
import 'clsx';
import '@iam-com/icons/Help';

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-checkbox {\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: flex-start;\n  line-height: 16px;\n}\n.paraui-v3-checkbox:hover > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-help {\n  padding: 0 8px;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label {\n  color: rgba(54, 102, 214, 0.8);\n  cursor: pointer;\n}\n.paraui-v3-checkbox:hover > .checkbox-help > .checkbox-label svg {\n  color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox:hover > .checkbox-box > .checkbox-box-inner {\n  border-color: rgba(54, 102, 214, 0.8);\n}\n.paraui-v3-checkbox > .checkbox-box {\n  position: relative;\n}\n.paraui-v3-checkbox > .checkbox-box > input {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  cursor: pointer;\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner {\n  position: relative;\n  top: 0;\n  left: 0;\n  display: block;\n  border-radius: 2px;\n  background-color: white;\n  border: 1px solid rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox > .checkbox-box > .checkbox-box-inner:after {\n  position: absolute;\n  display: table;\n  content: \" \";\n}\n.paraui-v3-checkbox > .checkbox-label {\n  color: rgb(46, 55, 67);\n  padding: 0 8px;\n  margin: 0;\n  display: inline-flex;\n  align-items: flex-start;\n}\n.paraui-v3-checkbox > .checkbox-label > .checkbox-help > svg {\n  top: 0;\n}\n.paraui-v3-checkbox .checkbox-label {\n  line-height: 16px;\n}\n.paraui-v3-checkbox > .checkbox-help {\n  padding: 0 8px;\n  position: relative;\n  top: -1px;\n}\n.paraui-v3-checkbox > .checkbox-help > .checkbox-label {\n  color: rgb(46, 55, 67);\n  margin: 0;\n  display: inline-flex;\n  align-items: center;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  border: 1px solid white;\n  border-top: 0;\n  border-left: 0;\n  transform: rotate(45deg) scale(1) translate(-50%, -50%);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(54, 102, 214, 0.8);\n  border-color: transparent;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: white;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) scale(1);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label {\n  color: rgba(46, 55, 67, 0.4);\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-help > .checkbox-label svg {\n  color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > input {\n  cursor: not-allowed;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-checked:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  border-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-indeterminate:hover > .checkbox-box > .checkbox-box-inner {\n  background-color: rgba(171, 176, 185, 0.12);\n  border-color: rgba(171, 176, 185, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-disabled.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  background-color: rgba(46, 55, 67, 0.4);\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box {\n  top: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small > .checkbox-box > .checkbox-box-inner {\n  width: 14px;\n  height: 14px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 4px;\n  height: 7px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-small.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-medium.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large > .checkbox-box > .checkbox-box-inner {\n  width: 16px;\n  height: 16px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-checked > .checkbox-box > .checkbox-box-inner:after {\n  top: 45%;\n  left: 21%;\n  width: 5px;\n  height: 8px;\n}\n.paraui-v3-checkbox.paraui-v3-checkbox-large.paraui-v3-checkbox-indeterminate > .checkbox-box > .checkbox-box-inner:after {\n  width: 8px;\n  height: 1px;\n}";
styleInject(css_248z);

var Checkbox = function Checkbox(props) {
  var _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    _props$label = props.label,
    label = _props$label === void 0 ? '' : _props$label,
    labelTooltip = props.labelTooltip,
    _props$size = props.size,
    size = _props$size === void 0 ? 'large' : _props$size,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled,
    _props$indeterminate = props.indeterminate,
    indeterminate = _props$indeterminate === void 0 ? false : _props$indeterminate,
    onChange = props.onChange,
    style = props.style;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    checkedCom = _useState2[0],
    setCheckedCom = _useState2[1]; // 复选框状态
  useEffect(function () {
    if (props.defaultChecked !== undefined) setCheckedCom(props.defaultChecked);
  }, []);
  useEffect(function () {
    if (props.checked !== undefined) setCheckedCom(props.checked);
  }, [props.checked]);
  // 点击选择
  var clickCheck = function clickCheck(e) {
    e.preventDefault();
    if (disabled) return;
    if (indeterminate) {
      // 不可受控组件
      if (props.checked === undefined) setCheckedCom(true);
      onChange && onChange(e, true);
      return;
    }
    // 不可受控组件
    if (props.checked === undefined) setCheckedCom(!checkedCom);
    e.target.checked = !checkedCom;
    e.target.value = !checkedCom;
    onChange && onChange(e, !checkedCom);
  };
  // 处理class
  var handClass = function handClass() {
    var str = $prefixCls + '-checkbox';
    if (className) str += ' ' + className;
    if (size) str += " ".concat($prefixCls, "-checkbox-").concat(size);
    if (disabled) str += " ".concat($prefixCls, "-checkbox-disabled");
    if (indeterminate) str += " ".concat($prefixCls, "-checkbox-indeterminate");else if (checkedCom) str += " ".concat($prefixCls, "-checkbox-checked");
    if (labelTooltip && labelTooltip.tooltipType) {
      str += " ".concat($prefixCls, "-checkbox-").concat(labelTooltip.tooltipType);
    }
    return str;
  };
  var handLabelClass = function handLabelClass() {
    var str = 'checkbox-label';
    if (labelTooltip && labelTooltip.className) {
      str += ' ' + labelTooltip.className;
    }
    return str;
  };
  /** 处理帮组classNaem */
  var handHelpClassName = function handHelpClassName() {
    var str = ' checkbox-help';
    if (labelTooltip && labelTooltip.helpClassName) {
      str += ' ' + labelTooltip.helpClassName;
    }
    return str;
  };
  return jsxs("label", Object.assign({
    className: handClass(),
    onClick: clickCheck,
    style: style
  }, {
    children: [jsxs("span", Object.assign({
      className: "checkbox-box"
    }, {
      children: [jsx("input", Object.assign({
        type: "checkbox",
        value: checkedCom
      }, props.inputProps)), jsx("span", {
        className: "checkbox-box-inner"
      })]
    })), label !== undefined && label !== '' && label !== null ? jsx(Label, Object.assign({
      label: label
    }, labelTooltip, {
      helpClassName: handHelpClassName(),
      className: handLabelClass()
    })) : null]
  }));
};

export { Checkbox, Checkbox as default };
