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

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 React from 'react';
import Tooltip from '@beisen-phoenix/tooltip';
import utils from '@beisen-phoenix/common-utils';
import './style.css';
var classes = utils.BEMClass('radio');

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

var Radio =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Radio, _React$Component);

  function Radio(props) {
    var _this;

    _classCallCheck(this, Radio);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Radio).call(this, props));
    _this.txtRef = React.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;
  }

  _createClass(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.createElement("label", {
        className: containerCls,
        onClick: this.radioOnclick,
        style: widthStyle
      }, React.createElement("div", {
        className: flexWrapperCls
      }, React.createElement("div", {
        className: circleWrapperCls
      }, React.createElement("div", {
        className: circleCls
      }), React.createElement("div", {
        className: dotCls
      })), React.createElement(Tooltip, {
        extraCls: tipCls,
        title: label,
        showOverflowTooltip: true
      }, React.createElement("span", {
        className: textCls,
        ref: this.txtRef
      }, label))));
    }
  }]);

  return Radio;
}(React.Component);

export default Radio;