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

beisencloud pc react components

'use strict';

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

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

var _ParItems = require('./ParItems');

var _ParItems2 = _interopRequireDefault(_ParItems);

var _UserItems = require('./UserItems');

var _UserItems2 = _interopRequireDefault(_UserItems);

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 ChildItems = function (_Component) {
  (0, _inherits3.default)(ChildItems, _Component);

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

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

    _this.state = {
      isOpen: props.isOpen || false, // 部门下拉
      isDelete: props.isDelete || false, // 鼠标划过 是否添加
      level: 1
    };
    _this.depClick = _this.depClick.bind(_this);
    return _this;
  }
  // 嵌套部门渲染


  (0, _createClass3.default)(ChildItems, [{
    key: 'renderChildDep',
    value: function renderChildDep() {
      var _props = this.props,
          childDep = _props.childDep,
          getDepInfo = _props.getDepInfo,
          urls = _props.urls,
          isUseInitial = _props.isUseInitial,
          apiType = _props.apiType,
          isDelete = _props.isDelete,
          addDepartment = _props.addDepartment,
          changeLen = _props.changeLen,
          hiddenTip = _props.hiddenTip,
          sideTip = _props.sideTip,
          level = _props.level,
          translation = _props.translation;

      if (!childDep) return;
      var tempLevel = level ? level + 1 : this.state.level + 1;
      var addDepartIconShow = isDelete ? false : addDepartment;
      return childDep && childDep.map(function (item, index) {
        return _react2.default.createElement(_ParItems2.default, (0, _extends3.default)({}, item, {
          level: tempLevel,
          changeLen: changeLen,
          isDelete: isDelete,
          addDepartment: addDepartIconShow,
          key: index,
          getDepInfo: getDepInfo,
          urls: urls,
          isUseInitial: isUseInitial,
          apiType: apiType,
          hiddenTip: hiddenTip,
          sideTip: sideTip,
          translation: translation
        }));
      });
    }
    /*
      收起下拉点击
     */

  }, {
    key: 'depClick',
    value: function depClick(event) {
      event.nativeEvent.stopImmediatePropagation();
      var isOpen = this.state.isOpen;
      var _props2 = this.props,
          childUser = _props2.childUser,
          Id = _props2.Id,
          isUseInitial = _props2.isUseInitial,
          urls = _props2.urls,
          apiType = _props2.apiType,
          getDepInfo = _props2.getDepInfo,
          changeLen = _props2.changeLen;
      //if (isDelete&&!addDepartment) return;

      var node = event.target;
      if (node.className == 'sys-icon-add') return;
      if (node.className == 'sys-icon-close') return;
      var highLight = document.querySelectorAll('.dep-hold-on');
      for (var i = 0; i < highLight.length; i++) {
        highLight[i].className = highLight[i].className.substring(0, highLight[i].className.length - 11);
      }
      if (node.className == 'us-avatar' || node.className == 'us-info-name' || node.className == 'us-info-email') {
        return false;
      } else {
        event.currentTarget.firstChild.className = event.currentTarget.firstChild.className + ' dep-hold-on';
      }
      var getParNode = function getParNode(node, target, className) {
        if (node.className == 'us-item-top') return;
        if (node.tagName == target.toUpperCase() && node.className == className) return node;
        return getParNode(node.parentNode, target, className);
      };
      if (getParNode(node, 'li', 'us-item us-item-user')) return;
      changeLen(this);
      if (getParNode(node, 'li', 'us-item us-item-department')) {
        event.stopPropagation();
        if (!childUser && !isOpen) {
          if (isUseInitial) {
            var tempDepUserUrl = urls['get' + apiType]('depUserUrl') + Id;
            getDepInfo && getDepInfo(Id, tempDepUserUrl);
          } else {
            getDepInfo && getDepInfo(Id);
          }
        }
        this.setState({
          isOpen: !this.state.isOpen
        });
      }
    }
    //渲染部门人员

  }, {
    key: 'renderDepUser',
    value: function renderDepUser() {
      var _props3 = this.props,
          childUser = _props3.childUser,
          translation = _props3.translation;

      if (!childUser) return;
      return childUser && childUser.map(function (item, index) {
        return _react2.default.createElement(_UserItems2.default, (0, _extends3.default)({}, item, { key: index, translation: translation }));
      });
    }
  }, {
    key: 'render',
    value: function render() {
      var _props4 = this.props,
          Id = _props4.Id,
          DepartmentName = _props4.DepartmentName,
          TotalUserCount = _props4.TotalUserCount,
          addDepartment = _props4.addDepartment,
          IsShowTotalUserCount = _props4.IsShowTotalUserCount,
          hiddenTip = _props4.hiddenTip,
          sideTip = _props4.sideTip,
          level = _props4.level,
          translation = _props4.translation;
      var _state = this.state,
          isOpen = _state.isOpen,
          isDelete = _state.isDelete;

      var childDep = isOpen ? this.renderChildDep() : undefined;
      var childUser = isOpen ? this.renderDepUser() : undefined;
      var style = {
        'display': 'inline-block',
        //'marginLeft': '10px',
        'lineHeight': '30px',
        'whiteSpace': 'nowrap',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis',
        'maxWidth': (addDepartment ? 145 : 190) - (level ? level * 10 : this.state.level * 10) - (IsShowTotalUserCount != false ? (TotalUserCount + '').length * 6.7 : 0)
      };
      var stylePerson = {
        'display': 'inline-block',
        //'marginLeft': '10px',
        'lineHeight': '30px',
        'whiteSpace': 'nowrap',
        'overflow': 'hidden',
        'textOverflow': 'ellipsis'
      };
      var openClass = isOpen ? 'pc-sys-arrowdown-nomal-svg' : 'pc-sys-arrowright-nomal-svg';
      var addClassName = isDelete ? 'sys-icon-close' : 'sys-icon-add';
      return _react2.default.createElement(
        'li',
        { className: 'us-item us-item-department', 'data-id': Id, onClick: this.depClick },
        _react2.default.createElement(
          'div',
          { className: 'us-item-list us-department' },
          _react2.default.createElement('span', { className: openClass }),
          _react2.default.createElement(
            'div',
            { className: 'us-department-info' },
            _react2.default.createElement(
              _toolTip2.default,
              { title: (0, _commonFunc.decode)(DepartmentName), hidden: hiddenTip, side: sideTip },
              _react2.default.createElement(
                'span',
                { style: style, ref: 'depName' },
                (0, _commonFunc.decode)(DepartmentName)
              )
            ),
            IsShowTotalUserCount != false ? _react2.default.createElement(
              'span',
              { style: stylePerson },
              '\xA0\xA0\xA0',
              (0, _commonFunc.transFormat)(translation.personCount, TotalUserCount)
            ) : ""
          ),
          addDepartment ? _react2.default.createElement('a', { href: 'javascript:void(0)', className: addClassName }) : ''
        ),
        _react2.default.createElement(
          'ul',
          { className: 'us-item-container' },
          childUser,
          childDep
        )
      );
    }
  }]);
  return ChildItems;
}(_react.Component);

exports.default = ChildItems;
module.exports = exports['default'];