@beisen/ethos/lib/user-selector/UserItems.js

beisencloud pc react components

'use strict';

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');

var _toolTip = require('../tool-tip');

var _toolTip2 = _interopRequireDefault(_toolTip);

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

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

/* eslint-disable */
var UserItems = function (_Component) {
  (0, _inherits3.default)(UserItems, _Component);

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

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

    _this.setDepartmentElWidth = function () {
      // 计算当前姓名所占宽度 在计算剩余宽度
      if (_this.nameEl && _this.departmentEl) {
        _this.departmentEl.style.width = 'calc(100% - ' + (_this.nameEl.clientWidth + 18) + 'px)';
      }
    };

    _this.state = {
      isDelete: props.isDelete || false // 鼠标划过 是否添加
    };
    _this.liClick = _this.liClick.bind(_this);
    _this.onMouseOver = _this.onMouseOver.bind(_this);
    _this.onMouseOut = _this.onMouseOut.bind(_this);
    return _this;
  }
  //li click


  (0, _createClass3.default)(UserItems, [{
    key: 'liClick',
    value: function liClick(event) {

      if (this.props.userSelect) {
        event.stopPropagation();
        this.props.userSelect(this.refs.liNode, true);
      }
    }
  }, {
    key: 'onMouseOver',
    value: function onMouseOver(e) {
      this.props.onMouseOver && this.props.onMouseOver(e, this.props.index);
    }
  }, {
    key: 'onMouseOut',
    value: function onMouseOut(e) {
      this.props.onMouseOut && this.props.onMouseOut(e, -1);
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate() {
      this.setDepartmentElWidth();
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.setDepartmentElWidth();
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
          Name = _props.Name,
          Email = _props.Email,
          UserAvatar = _props.UserAvatar,
          Id = _props.Id,
          _props$isSearch = _props.isSearch,
          isSearch = _props$isSearch === undefined ? false : _props$isSearch,
          _props$searchVal = _props.searchVal,
          searchVal = _props$searchVal === undefined ? null : _props$searchVal,
          holdOn = _props.holdOn;
      var isDelete = this.state.isDelete;

      var avatar = void 0;
      avatar = UserAvatar && UserAvatar.HasAvatar ? _react2.default.createElement('img', { className: 'us-avatar', src: UserAvatar.Medium, alt: Name }) : _react2.default.createElement(
        'span',
        { className: 'us-avatar', style: { backgroundColor: UserAvatar.Color } },
        Name && Name.substr(0, 1)
      );
      var deleteIcon = isDelete ? _react2.default.createElement('a', { href: 'javascript:void(0)', className: 'sys-icon-close' }) : undefined;
      var _Name = _react2.default.createElement(
        'p',
        { className: 'us-info-name' },
        Name
      );
      var _Email = _react2.default.createElement(
        'p',
        { className: 'us-info-email' },
        Email
      );
      var _arr = [_Name, _Email];
      if (isSearch && searchVal) {
        // 由于 输入有可能为  ( 开始圆括号，导致RegExp报错， 现使用其它方法代替
        //以下正则匹配仅用于获取index
        // let patt = new RegExp(searchVal, 'g');
        for (var i = 0; i < _arr.length; i++) {
          var _tempVal = i == 0 ? (0, _commonFunc.decode)(Name) : (0, _commonFunc.decode)(Email);
          // let patResult = patt.exec(_tempVal);
          // if (patResult == null) continue;
          // let endIndex = patt.lastIndex;
          if (_tempVal == null) continue;
          var endIndex = _tempVal.indexOf(searchVal) + 1;
          var startIndex = endIndex - searchVal.length;
          var _classname = i == 0 ? 'name' : 'email';
          if (searchVal.length == _tempVal.length) {
            _arr[i] = _react2.default.createElement(
              'p',
              { className: 'us-info-' + _classname },
              _react2.default.createElement(
                'em',
                null,
                searchVal
              )
            );
          } else if (startIndex == 0) {
            _arr[i] = _react2.default.createElement(
              'p',
              { className: 'us-info-' + _classname },
              _react2.default.createElement(
                'em',
                null,
                searchVal
              ),
              _tempVal.substr(endIndex, _tempVal.length)
            );
          } else if (endIndex == _tempVal.length) {
            _arr[i] = _react2.default.createElement(
              'p',
              { className: 'us-info-' + _classname },
              _tempVal.substr(0, startIndex),
              _react2.default.createElement(
                'em',
                null,
                searchVal
              )
            );
          } else {
            _arr[i] = _react2.default.createElement(
              'p',
              { className: 'us-info-' + _classname },
              _tempVal.substr(0, startIndex),
              _react2.default.createElement(
                'em',
                null,
                searchVal
              ),
              _tempVal.substr(endIndex, _tempVal.length)
            );
          }
        }
      }
      var obj = {
        0: {
          a: null,
          b: null,
          c: (0, _commonFunc.decode)(Name)
        },
        1: {
          a: null,
          b: null,
          c: (0, _commonFunc.decode)(Email)
        }
      };
      if (isSearch && searchVal) {
        for (var _i = 0; _i < 2; _i++) {
          var _tempVal2 = _i == 0 ? (0, _commonFunc.decode)(Name) : (0, _commonFunc.decode)(Email);
          var index = _tempVal2 ? _tempVal2.indexOf(searchVal) : -1;
          var searchLength = searchVal.length;
          if (index == 0) {
            var subValue = _tempVal2.substring(index, searchLength);
            obj[_i]['b'] = _react2.default.createElement(
              'em',
              null,
              subValue
            );
            obj[_i]['c'] = _tempVal2.substring(searchLength, _tempVal2.length);
          } else if (index > 0) {
            obj[_i]['a'] = _tempVal2.substring(0, index);
            var _subValue = _tempVal2.substring(index, searchLength + index);
            obj[_i]['b'] = _react2.default.createElement(
              'em',
              null,
              _subValue
            );
            obj[_i]['c'] = _tempVal2.substring(searchLength + index, _tempVal2.length);
          }
        }
      }
      var holdOnClass = holdOn ? 'us-item-list us-user clearfix user-hold-on' : 'us-item-list us-user clearfix';
      // isDelete用于判断是否是在结果中，结果中不显示部门信息
      // 增加参数判断是否显示部门
      var departName = this.props.Department && this.props.isShowDepartmentName && !this.state.isDelete ? (0, _commonFunc.decode)(this.props.Department) + (this.props.TopDepartmentName && this.props.Department !== this.props.TopDepartmentName ? '（' + (0, _commonFunc.decode)(this.props.TopDepartmentName) + '）' : '') : '';

      return _react2.default.createElement(
        'li',
        { className: 'us-item us-item-user', ref: 'liNode', onClick: this.liClick, 'data-id': Id, onMouseOver: this.onMouseOver, onMouseOut: this.onMouseOut },
        _react2.default.createElement(
          'div',
          { className: holdOnClass },
          avatar,
          _react2.default.createElement(
            'div',
            { className: 'us-user-info' },
            _react2.default.createElement(
              'p',
              { className: 'us-info-name' },
              _react2.default.createElement(
                _toolTip2.default,
                { title: (0, _commonFunc.decode)(Name) + '  ' + departName },
                _react2.default.createElement(
                  'span',
                  { className: 'us-info-dis-tip', ref: function ref(nameEl) {
                      return _this2.nameEl = nameEl;
                    } },
                  obj[0]['a'],
                  obj[0]['b'],
                  obj[0]['c']
                )
              ),
              _react2.default.createElement(
                _toolTip2.default,
                { title: departName },
                _react2.default.createElement(
                  'span',
                  { className: 'us-info-dis-tip last-department', ref: function ref(departmentEl) {
                      return _this2.departmentEl = departmentEl;
                    } },
                  departName
                )
              )
            ),
            _react2.default.createElement(
              _toolTip2.default,
              { title: (0, _commonFunc.decode)(Email) },
              _react2.default.createElement(
                'p',
                { className: 'us-info-email', title: (0, _commonFunc.decode)(Email) },
                obj[1]['a'],
                obj[1]['b'],
                obj[1]['c']
              )
            )
          ),
          deleteIcon
        ),
        _react2.default.createElement('ul', { className: 'us-item-container' })
      );
    }
  }]);
  return UserItems;
}(_react.Component);

module.exports = UserItems;