@beisen/ethos/lib/guide/item.js

beisencloud pc react components

'use strict';

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

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 _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _commonFunc = require('../common-func');

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

var Item = (_temp = _class = function (_Component) {
  (0, _inherits3.default)(Item, _Component);

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

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

    _this.itemClick = function () {
      var _this$props = _this.props,
          onClick = _this$props.onClick,
          disabled = _this$props.disabled;

      if (disabled) return;
      onClick && onClick(_this.props);
    };

    _this.itemMouseOver = function () {
      var disabled = _this.props.disabled;

      if (disabled) return;
      _this.setState({ hover: true });
    };

    _this.itemMouseOut = function () {
      var disabled = _this.props.disabled;

      if (disabled) return;
      _this.setState({ hover: false });
    };

    _this.getByteLen = function (val) {
      var len = 0;
      for (var i = 0; i < val.length; i++) {
        //wuzhe----全角2
        if (val[i].match(/[^\x00-\xff]/ig) != null) {
          len += 2;
          //wuzhe----大写字母1.2
        } else if (/^[A-Z]+$/.test(val[i])) {
          len += 1.2;
          //wuzhe----数字1.15
        } else if (/^\d+$/.test(val[i])) {
          len += 1.15;
          //wuzhe----半角1（差不多就是小写字母）
        } else {
          len += 1;
        }
      }
      return Math.ceil(len);
    };

    _this.state = {
      hover: false
    };
    _this.itemData = {
      "done": {
        "color": "#38ba72",
        "svg": "guide-done",
        "hover": "guide-done-hover",
        "ischecked": "guide-ischecked-done"
      },
      "doing": {
        "color": "#1687d9",
        "svg": "no",
        "ischecked": "guide-ischecked-doing"
      },
      "todo": {
        "color": "#c2cbd1",
        "svg": "no",
        "hover": "no-hover",
        "disabled": "guide-disabled",
        "ischecked": "guide-ischecked-todo"
      },
      "": {
        "color": "#c2cbd1",
        "svg": "no",
        "hover": "no-hover",
        "disabled": "guide-disabled",
        "ischecked": "guide-ischecked-todo"
      }
    };
    return _this;
  }

  (0, _createClass3.default)(Item, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          text = _props.text,
          status = _props.status,
          index = _props.index,
          isChecked = _props.isChecked,
          disabled = _props.disabled;
      var hover = this.state.hover;


      var checkStr = isChecked ? 'ischecked' : hover ? 'hover' : 'svg';
      var svg = this.itemData[status][checkStr];
      var hiddenInex = status == 'done' && !isChecked;

      var byteLen = this.getByteLen((0, _commonFunc.decode)(text));
      var textWidth = Math.floor(byteLen * 7);
      //添加字段。单个半角字符所占宽度，目前font-size为14px，因此为14／2=7，默认值也为7
      //添加最小宽度，防止文字换行

      var indexStyle = svg && svg.indexOf("no") >= 0 && (0, _commonFunc.judgeBrowser)().isIe ? { "lineHeight": "15px" } : {};

      return _react2.default.createElement(
        'li',
        {
          className: "bs-guide__item bs-guide__item_is-" + status + (disabled ? ' bs-guide__item_is-disabled' : ''),
          onMouseOver: this.itemMouseOver,
          onMouseOut: this.itemMouseOut,
          onClick: this.itemClick
        },
        _react2.default.createElement(
          'span',
          { className: "bs-guide__item-icon u-icon pc-sys-" + svg + "-svg" },
          hiddenInex ? "" : _react2.default.createElement(
            'span',
            { style: indexStyle, className: 'bs-guide__item-index' },
            index
          )
        ),
        _react2.default.createElement(
          'div',
          { style: { minWidth: textWidth }, className: 'bs-guide__item-text' },
          (0, _commonFunc.decode)(text)
        )
      );
    }
  }]);
  return Item;
}(_react.Component), _class.defaultProps = {
  status: "todo",
  isChecked: false,
  disabled: false
}, _temp);
exports.default = Item;
module.exports = exports['default'];