@beisen/ethos/lib/lookup-v2/list.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 _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _loading = require('../loading');

var _loading2 = _interopRequireDefault(_loading);

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

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

function empty() {}

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

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

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

    _this.handlerScroll = function (e) {
      // const scrollHeight = e.target.scrollHeight;
      // const clientHeight = e.target.clientHeight;
      // const scrollTop = e.target.scrollTop;
      // const footerDom = this.refs.lookupFooter;
      // if(clientHeight + scrollTop >= scrollHeight){
      //    footerDom.style.borderTop = "1px solid #ffffff";
      // }else{
      //    footerDom.style.borderTop = "1px solid #e4ebf0";
      // }
    };

    _this.handlerClick = function () {
      if (!_this.props.multiple) {
        _this.props.setComState('isShowDoropList', false);
        _this.props.commonMount.unmountBox();
      }
    };

    _this.handlerFindAll = function (event) {
      _this.props.setComState('isShowDoropList', false);
      _this.props.handlerFindAll();
    };

    _this.state = {
      fetchingFlag: true
    };
    return _this;
  }

  (0, _createClass3.default)(List, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      if (!nextProps.isFetching) {
        this.setState({ fetchingFlag: false });
      }
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps, prevState) {
      // if (this.refs.selectList && this.refs.selectList.clientHeight > 300) {
      //   this.refs.lookupFooter.style.borderTop = "1px solid #e4ebf0";
      // }
    }
  }, {
    key: 'render',
    value: function render() {
      var _this2 = this;

      var translation = this.props.translation;

      var props = (0, _extends3.default)({}, this.props);
      var fetchingFlag = this.state.fetchingFlag;

      if (props.isNotAllow || props.isNotInstall) {
        var fetchHeight = props.status == 'search' ? 320 : 360;
        // 201907 需求变更 未安装应用和没有权限统一用盒子提示，但是提示文字是前端做多语言翻译和默认值的，所以仍然保留这个参数来判断用哪个文字
        var notClass = props.isNotAllow || props.isNotInstall ? 'BS_lookupV2__not-allow' : '';
        // notClass = props.isNotInstall ? 'BS_lookupV2__not-install' : notClass;
        var bgText = '';
        if (props.isNotAllow) {
          bgText = translation.notAllowedText;
        }
        if (props.isNotInstall) {
          bgText = translation.notInstalledText;
        }
        return _react2.default.createElement(
          'div',
          { className: 'BS_lookupV2__mountContainer', style: { height: fetchHeight } },
          _react2.default.createElement(
            'div',
            { className: 'BS_lookupV2__not-allow-wrapper' },
            _react2.default.createElement('div', { className: notClass, 'data-bg-text': bgText })
          )
        );
      }
      var _containerClass = " BS_lookupV2__mountContainer_data-null",
          findAllText = translation.showAllText,
          footerShadow = {};
      if (Array.isArray(props.listValue)) {
        _containerClass = props.listValue.length ? '' : fetchingFlag ? '' : ' BS_lookupV2__mountContainer_no-data';
        findAllText = props.listValue.length ? translation.showAllText : fetchingFlag ? translation.showAllText : '\u201C' + translation.showAllText + '\u201D';
        // footerShadow = props.listValue.length > 8 ? {borderTop: "1px solid #e4ebf0"} : {};
      }
      footerShadow = fetchingFlag ? { position: 'absolute', bottom: 0, right: 0 } : {};
      var loadingstyle = void 0,
          mountContainer = void 0;
      loadingstyle = props.isShowFindAll ? { height: '90%' } : {};
      mountContainer = fetchingFlag ? props.status == 'search' ? { height: 320 } : { height: 360 } : {};
      return _react2.default.createElement(
        'div',
        { className: "BS_lookupV2__mountContainer" + _containerClass, style: mountContainer },
        fetchingFlag ? _react2.default.createElement(_loading2.default, { type: "small", style: loadingstyle }) : Array.isArray(props.listValue) && props.listValue.length ? _react2.default.createElement(
          'div',
          { onScroll: this.handlerScroll, style: { height: '300px' } },
          _react2.default.createElement(
            'ul',
            { className: 'lookupv2__select-list', ref: 'selectList' },
            props.listValue.map(function (item, index) {
              return _react2.default.createElement(ListItem, { key: index, value: props.value, data: item, listClick: props.listClick, handlerClick: _this2.handlerClick });
            })
          )
        ) : null,
        _react2.default.createElement(
          'div',
          { className: 'lookupv2__footer', ref: 'lookupFooter', style: footerShadow },
          Array.isArray(props.listValue) && !props.listValue.length && !fetchingFlag ? _react2.default.createElement('div', { className: 'lookupv2__empty-data', 'data-bg-text': translation.emptyBgText }) : null,
          props.isShowFindAll && !fetchingFlag ? _react2.default.createElement(
            'p',
            { className: 'lookupv2__findAll', onMouseDown: this.handlerFindAll },
            findAllText
          ) : null
        )
      );
    }
  }]);
  return List;
}(_react.Component), _class.defaultProps = {
  isFetching: false,
  isNotAllow: false,
  isNotInstall: false,
  isShowFindAll: true,
  onFindAll: empty,
  listClick: empty,
  listHeight: 0
}, _temp);

var ListItem = function (_Component2) {
  (0, _inherits3.default)(ListItem, _Component2);

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

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

    _this3.highlightText = function (text) {
      var obj = {
        a: null,
        b: null,
        c: text
      };
      var index = text && text.indexOf(_this3.props.value);
      var highlightLength = _this3.props.value.length;
      if (index == 0) {
        var subValue = text.substring(index, highlightLength);
        obj['b'] = _react2.default.createElement(
          'em',
          null,
          subValue
        );
        obj['c'] = text.substring(highlightLength, text.length);
      } else if (index > 0) {
        obj['a'] = text.substring(0, index);
        var _subValue = text.substring(index, highlightLength + index);
        obj['b'] = _react2.default.createElement(
          'em',
          null,
          _subValue
        );
        obj['c'] = text.substring(highlightLength + index, text.length);
      }
      return {
        a: obj['a'],
        b: obj['b'],
        c: obj['c']
      };
    };

    _this3.handlerClick = function (event) {
      _this3.props.handlerClick();
      _this3.props.listClick(event, _this3.props.data);
    };

    _this3.renderContent = function () {
      var text1 = (0, _commonFunc.decode)(_this3.props.data[0]['text']);
      var _objText_1 = _this3.highlightText(text1);
      if (_this3.props.data.length == 1) {
        return _react2.default.createElement(
          'div',
          { className: 'lookupv2__content-wrapper' },
          _react2.default.createElement(
            'p',
            { className: 'lookupv2__content-top' },
            _objText_1['a'],
            _objText_1['b'],
            _objText_1['c']
          )
        );
      } else {
        var text2 = (0, _commonFunc.decode)(_this3.props.data[1]['text']);
        var _objText_2 = _this3.highlightText(text2);
        return _react2.default.createElement(
          'div',
          { className: 'lookupv2__content-wrapper' },
          _react2.default.createElement(
            'p',
            { className: 'lookupv2__content-top' },
            _objText_1['a'],
            _objText_1['b'],
            _objText_1['c']
          ),
          _react2.default.createElement(
            'p',
            { className: 'lookupv2__content-bottom' },
            _objText_2['a'],
            _objText_2['b'],
            _objText_2['c']
          )
        );
      }
    };

    return _this3;
  }

  (0, _createClass3.default)(ListItem, [{
    key: 'render',
    value: function render() {
      var props = (0, _extends3.default)({}, this.props);
      var _avatarDom = void 0;
      for (var i = 0; i < 2; i++) {
        if (props.data[i] && props.data[i]['avatars']) {
          for (var j in props.data[i]['avatars']) {
            if (props.data[i]['avatars'][j]['hasAvatar']) {
              _avatarDom = _react2.default.createElement(
                'span',
                { className: 'avatar avatar_size-30' },
                _react2.default.createElement('img', { src: props.data[i]['avatars'][j]['small'] })
              );
            } else {
              _avatarDom = _react2.default.createElement(
                'span',
                { className: 'avatar avatar_size-30', style: { backgroundColor: props.data[i]['avatars'][j]['color'] } },
                props.data[i]['text'].split("")[0]
              );
            }
          }
        }
      }

      return _react2.default.createElement(
        'li',
        { className: 'lookupv2__drop-item lookupv2__drop-item_has-avatar', onClick: this.handlerClick },
        _avatarDom,
        this.renderContent()
      );
    }
  }]);
  return ListItem;
}(_react.Component);

module.exports = List;