@beisen/ethos/lib/radio-list/index.js

beisencloud pc react components

'use strict';

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

require('./style/radioList.scss');

var _radioItem = require('./radioItem.js');

var _radioItem2 = _interopRequireDefault(_radioItem);

var _commonLabel = require('../common-label');

var _commonLabel2 = _interopRequireDefault(_commonLabel);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var RadioList = function (_Component) {
  (0, _inherits3.default)(RadioList, _Component);

  function RadioList(props) {
    (0, _classCallCheck3.default)(this, RadioList);

    var _this = (0, _possibleConstructorReturn3.default)(this, (RadioList.__proto__ || (0, _getPrototypeOf2.default)(RadioList)).call(this, props));

    var defaults = {
      radioItems: [{
        bsStyle: false,
        isChecked: false
      }]
    };
    _this.state = (0, _extends3.default)({}, defaults, props);
    _this.labelClick = _this.labelClick.bind(_this);
    _this.handleClick = _this.handleClick.bind(_this);
    _this.handleKeyDown = _this.handleKeyDown.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(RadioList, [{
    key: 'handleClick',
    value: function handleClick(val, e) {
      if (this.props.disabled || val.disabled || !val.bsStyle || val.isChecked) return false;
      if (this.props.hasRender == true) {
        var radioItems = this.state.radioItems;
        if (this.props.required) {
          radioItems.forEach(function (elem, index) {
            if (val.bsStyle && val.isChecked == false) {
              elem.value == val.value ? elem.isChecked = !elem.isChecked : elem.isChecked = false;
            }
          });
        } else {
          radioItems.forEach(function (elem, index) {
            if (val.bsStyle) {
              elem.value == val.value ? elem.isChecked = !elem.isChecked : elem.isChecked = false;
            }
          });
        }
        this.setState({ radioItems: radioItems });
      }
      this.props.onClick && this.props.onClick(e, val);
    }
  }, {
    key: 'labelClick',
    value: function labelClick(val) {
      if (this.props.disabled) return false;
      this.props.onLabelClick && this.props.onLabelClick(val);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (nextProps.radioItems != this.props.radioItems) {
        this.state.radioItems = nextProps.radioItems;
        this.setState(this.state);
      }
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      document.addEventListener('keydown', this.handleKeyDown);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      document.removeEventListener('keydown', this.handleKeyDown);
    }
  }, {
    key: 'handleKeyDown',
    value: function handleKeyDown(e) {
      switch (e.keyCode) {
        case 13:
          // 回车
          if (e.target.className && e.target.className.indexOf('rb-radioBox') >= 0) {
            e.target.firstElementChild.click();
          }
          break;
        default:
          break;
      }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var radioItems = this.state.radioItems;
      var _props = this.props,
          hidden = _props.hidden,
          disabled = _props.disabled,
          errorStatus = _props.errorStatus;

      var errorMsg = "请填写正确信息",
          errorContent = void 0;
      if (this.props.errorStatus) {
        errorMsg = this.props.errorMsg.length > 0 ? this.props.errorMsg : errorMsg;
        errorContent = _react2.default.createElement(
          'span',
          { className: 'form-item__explain' },
          errorMsg
        );
      }

      if (hidden) {
        return _react2.default.createElement(
          'div',
          { className: 'field radiolist' },
          ' '
        );
      } else {
        return _react2.default.createElement(
          'div',
          { className: 'form-item radiolist ' },
          _react2.default.createElement(_commonLabel2.default, this.props),
          _react2.default.createElement(
            'div',
            { className: "form-item__control field-right " + (errorStatus ? "form-item__control_has-error" : "") },
            _react2.default.createElement(
              'div',
              { style: { "marginLeft": "5px", "width": "100%" }, className: "radio_list-container" },
              radioItems.map(function (item, index) {
                var radioItemStatus = item.isChecked ? 'radioItem-back radioItem-back-active' : 'radioItem-back';
                var innerCircleStatus = item.isChecked ? "inner-circle-back inner-circle-active" : "inner-circle-back";
                var isOptional = item.bsStyle ? 'rb-radioBox rb-Optional' : 'rb-radioBox rb-notOptional';
                return _react2.default.createElement(_radioItem2.default, (0, _extends3.default)({
                  key: index,
                  isOptional: isOptional,
                  radioItemStatus: radioItemStatus,
                  innerCircleStatus: innerCircleStatus
                }, item, {
                  handleClick: _this2.handleClick,
                  labelClick: _this2.labelClick,
                  allDisabled: disabled
                }));
              })
            ),
            errorContent
          )
        );
      }
    }
  }]);
  return RadioList;
}(_react.Component);

module.exports = RadioList;