@beisen-phoenix/checkbox/lib/Checkbox.js

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import * as React from 'react';
import Tooltip from '@beisen-phoenix/tooltip';
import './style.css';
import utils from '@beisen-phoenix/common-utils';

var Checkbox =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Checkbox, _React$PureComponent);

  function Checkbox(props) {
    var _this;

    _classCallCheck(this, Checkbox);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Checkbox).call(this, props));
    _this.inputRef = React.createRef();
    _this.txtRef = React.createRef();
    _this.containerRef = React.createRef();

    _this.onChange = function (event) {
      var checked = _this.state.checked;

      var _this$props = _this.props,
          onChange = _this$props.onChange,
          disabled = _this$props.disabled,
          restProps = _objectWithoutProperties(_this$props, ["onChange", "disabled"]);

      if (disabled) return;

      if (!_this.props.partialChecked) {
        _this.setState({
          checked: !checked
        });

        restProps.checked = !checked;
      }

      onChange && onChange(restProps, event);
      event.stopPropagation && event.stopPropagation();
    };

    var _checked = 'checked' in props ? props.checked : props.defaultChecked;

    _this.state = {
      checked: _checked
    };
    return _this;
  }

  _createClass(Checkbox, [{
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      'checked' in nextProps && this.setState({
        checked: nextProps.checked
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          disabled = _this$props2.disabled,
          _this$props2$label = _this$props2.label,
          label = _this$props2$label === void 0 ? '' : _this$props2$label,
          partialChecked = _this$props2.partialChecked,
          value = _this$props2.value,
          tipsType = _this$props2.tipsType,
          fontSize = _this$props2.fontSize,
          textColor = _this$props2.textColor;
      var checked = this.state.checked;
      var onChange = this.onChange;
      var inputProps = {
        value: value,
        onChange: onChange
      }; // 生成符合BEM规范的className

      var classes = utils.BEMClass('checkbox');
      var labelCls = classes({
        modifiers: {
          disabled: disabled
        },
        extra: this.props.extraCls
      });
      var boxCls = classes({
        element: 'box',
        modifiers: {
          partialChecked: partialChecked
        }
      });
      var inputCls = classes({
        element: 'input',
        modifiers: {
          disabled: disabled
        }
      });
      var realCls = classes({
        element: 'realInput',
        modifiers: {
          checked: checked,
          disabled: disabled,
          partialChecked: partialChecked,
          disabledChecked: disabled && checked
        }
      });
      var tipCls = classes({
        element: 'tooltip',
        extra: this.props.extraCls
      });
      var txtCls = classes({
        element: 'text',
        modifiers: {
          disabled: disabled,
          fontMiddle: fontSize === 'middle'
        },
        extra: "color-".concat(textColor)
      });
      return React.createElement("label", {
        className: labelCls,
        ref: this.containerRef
      }, React.createElement("span", {
        className: boxCls
      }, React.createElement("input", _extends({
        type: "checkbox",
        ref: this.inputRef
      }, inputProps, {
        className: inputCls
      })), React.createElement("span", {
        className: realCls
      })), label ? tipsType === 'animate' ? React.createElement(Tooltip, {
        extraCls: tipCls,
        showOverflowTooltip: true,
        title: label
      }, React.createElement("span", {
        className: txtCls,
        ref: this.txtRef
      }, label)) : React.createElement("span", {
        className: txtCls,
        title: label,
        ref: this.txtRef
      }, label) : null);
    }
  }]);

  return Checkbox;
}(React.PureComponent);

Checkbox.defaultProps = {
  disabled: false,
  defaultChecked: false,
  label: '',
  tipsType: 'animate',
  fontSize: 'normal',
  textColor: 'M1'
};
export { Checkbox as default };