@beisen-phoenix/radio/cjs/index.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _tooltip = _interopRequireDefault(require("@beisen-phoenix/tooltip"));

var _commonUtils = _interopRequireDefault(require("@beisen-phoenix/common-utils"));

require("./style.css");

var classes = _commonUtils.default.BEMClass('radio');

function isPxStyle(value) {
  return /^([\d]+)px$/.test(value);
}

var Radio =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Radio, _React$Component);

  function Radio(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Radio);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Radio).call(this, props));
    _this.txtRef = _react.default.createRef();

    _this.radioOnclick = function (e) {
      var isDisabled = _this.isDisabled();

      var isRadioControled = _this.isRadioControled();

      var isChecked = _this.isChecked();

      if (isDisabled || isChecked) return;

      _this.setState({
        "radioClicked": true
      });

      if (!isRadioControled) {
        // 非受控情况下先更新状态，然后同步syncClick
        _this.setState({
          checked: true
        }, function () {
          _this.syncClick(e);
        });
      } else {
        // 受控情况下，直接syncClick，checked状态为true
        _this.syncClick(e);
      }
    };

    _this.isRadioControled = function () {
      return _this.props.checked !== undefined;
    };

    _this.getValue = function () {
      return {
        label: _this.props.label || _this.props.children,
        value: _this.props.value,
        checked: _this.isChecked()
      };
    };

    _this.syncClick = function (e) {
      var isRadioControled = _this.isRadioControled();

      var curRadioData = _this.getValue();

      if (isRadioControled) {
        curRadioData.checked = true;
      }

      _this.props.onChange && _this.props.onChange(curRadioData, e);
    };

    _this.isChecked = function () {
      var checked = _this.props.checked;
      return checked === undefined ? _this.state.checked : checked;
    };

    _this.isDisabled = function () {
      var disabled = _this.props.disabled;
      return disabled === undefined ? false : disabled;
    };

    _this.getMinWidth = function () {
      // 先检查是否是有值
      // 然后检查是否是以px为单位
      // 检查值得数值部分是否大于42（设计规定raido文字加图标最小宽度为42px）
      var minWidth = _this.props.minWidth;
      if (minWidth === undefined) return '42px';
      if (!isPxStyle(minWidth)) return '42px';
      var minWidthInNumber = parseInt(minWidth);
      return minWidthInNumber >= 42 ? "".concat(minWidthInNumber, "px") : '42px';
    };

    _this.getMaxWidth = function () {
      var maxWidth = _this.props.maxWidth;
      if (maxWidth === undefined) return '';
      return isPxStyle(maxWidth) ? maxWidth : '100%';
    };

    _this.state = {
      checked: !!_this.props.defaultChecked,
      radioClicked: false
    };
    return _this;
  }

  (0, _createClass2.default)(Radio, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          _this$props$label = _this$props.label,
          label = _this$props$label === void 0 ? this.props.children : _this$props$label,
          _this$props$extraCls = _this$props.extraCls,
          extraCls = _this$props$extraCls === void 0 ? '' : _this$props$extraCls,
          fontSize = _this$props.fontSize,
          textColor = _this$props.textColor;
      var hasLabel = !!label;
      var containerCls = classes({
        element: "",
        modifier: {
          disabled: this.isDisabled(),
          checked: this.isChecked(),
          withLabel: label
        },
        extra: extraCls + ' animation'
      });
      var flexWrapperCls = classes({
        element: "wrapper",
        modifier: {}
      });
      var circleWrapperCls = classes({
        element: "circle-wrapper",
        modifier: {
          disabled: this.isDisabled(),
          checked: this.isChecked(),
          disabledWithChecked: this.isDisabled() && this.isChecked()
        }
      });
      var circleCls = classes({
        element: "circle",
        modifier: {
          // disabled:this.isDisabled() && !this.isChecked(),
          disabled: this.isDisabled(),
          checked: this.isChecked(),
          disabledWithChecked: this.isDisabled() && this.isChecked()
        },
        extral: 'center'
      });
      var dotCls = classes({
        element: "dot",
        modifier: {
          disabled: this.isDisabled(),
          checked: this.isChecked(),
          checkedWithRadioClicked: this.isChecked() && this.state.radioClicked
        }
      });
      var textCls = classes({
        element: "radio-text",
        modifier: {
          disabled: this.isDisabled(),
          appear: hasLabel,
          fontMiddle: fontSize === 'middle'
        },
        extra: "color-".concat(textColor)
      });
      var widthStyle = label ? {
        maxWidth: this.getMaxWidth(),
        minWidth: this.getMinWidth()
      } : {};
      var tipCls = classes({
        element: 'tooltip',
        extra: this.props.extraCls
      });
      return _react.default.createElement("label", {
        className: containerCls,
        onClick: this.radioOnclick,
        style: widthStyle
      }, _react.default.createElement("div", {
        className: flexWrapperCls
      }, _react.default.createElement("div", {
        className: circleWrapperCls
      }, _react.default.createElement("div", {
        className: circleCls
      }), _react.default.createElement("div", {
        className: dotCls
      })), _react.default.createElement(_tooltip.default, {
        extraCls: tipCls,
        title: label,
        showOverflowTooltip: true
      }, _react.default.createElement("span", {
        className: textCls,
        ref: this.txtRef
      }, label))));
    }
  }]);
  return Radio;
}(_react.default.Component);

var _default = Radio;
exports.default = _default;