@beisen-platform/lookup-v2/lib/list.js

import "core-js/modules/es6.regexp.split";
import "core-js/modules/es6.string.small";
import "core-js/modules/es6.object.assign";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import React, { Component, PropTypes } from 'react';
import { render } from 'react-dom';
import Loading from '@beisen-platform/loading';
import { decode } from '@beisen-platform/common-func';

function empty() {}

var List =
/*#__PURE__*/
function (_Component) {
  _inherits(List, _Component);

  function List(props) {
    var _this;

    _classCallCheck(this, List);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(List).call(this, props));

    _this.handlerScroll = function (e) {
      var scrollHeight = e.target.scrollHeight;
      var clientHeight = e.target.clientHeight;
      var scrollTop = e.target.scrollTop;
      var 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: false
    };
    return _this;
  }

  _createClass(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 props = Object.assign({}, this.props);
      var fetchingFlag = this.state.fetchingFlag;

      if (props.isNotAllow || props.isNotInstall) {
        var fetchHeight = props.status == 'search' ? 320 : 360;
        var notClass = props.isNotAllow ? 'BS_lookupV2__not-allow' : '';
        notClass = props.isNotInstall ? 'BS_lookupV2__not-install' : notClass;
        return React.createElement("div", {
          className: "BS_lookupV2__mountContainer",
          style: {
            height: fetchHeight
          }
        }, React.createElement("div", {
          className: "BS_lookupV2__not-allow-wrapper"
        }, React.createElement("div", {
          className: notClass
        })));
      }

      var _containerClass = " BS_lookupV2__mountContainer_data-null",
          findAllText = "全部查找",
          footerShadow = {};

      if (Array.isArray(props.listValue)) {
        _containerClass = props.listValue.length ? '' : fetchingFlag ? '' : ' BS_lookupV2__mountContainer_no-data';
        findAllText = props.listValue.length ? "全部查找" : fetchingFlag ? "全部查找" : "“全部查找”";
        footerShadow = props.listValue.length > 8 ? {
          borderTop: "1px solid #e4ebf0"
        } : {};
      }

      footerShadow = fetchingFlag ? {
        position: 'absolute',
        bottom: 0,
        right: 0
      } : {};
      var loadingstyle, mountContainer;
      loadingstyle = props.isShowFindAll ? {
        height: '90%'
      } : {};
      mountContainer = fetchingFlag ? props.status == 'search' ? {
        height: 320
      } : {
        height: 360
      } : {};
      return React.createElement("div", {
        className: "BS_lookupV2__mountContainer" + _containerClass,
        style: mountContainer
      }, fetchingFlag ? React.createElement(Loading, {
        type: "small",
        style: loadingstyle
      }) : Array.isArray(props.listValue) && props.listValue.length ? React.createElement("div", {
        onScroll: this.handlerScroll,
        style: {
          maxHeight: '300px'
        }
      }, React.createElement("ul", {
        className: "lookupv2__select-list",
        ref: "selectList"
      }, props.listValue.map(function (item, index) {
        return React.createElement(ListItem, {
          key: index,
          value: props.value,
          data: item,
          listClick: props.listClick,
          handlerClick: _this2.handlerClick
        });
      }))) : null, React.createElement("div", {
        className: "lookupv2__footer",
        ref: "lookupFooter",
        style: footerShadow
      }, Array.isArray(props.listValue) && !props.listValue.length && !fetchingFlag ? React.createElement("div", {
        className: "lookupv2__empty-data"
      }) : null, props.isShowFindAll && !fetchingFlag ? React.createElement("p", {
        className: "lookupv2__findAll",
        onClick: this.handlerFindAll
      }, findAllText) : null));
    }
  }]);

  return List;
}(Component);

List.defaultProps = {
  isFetching: false,
  isNotAllow: false,
  isNotInstall: false,
  isShowFindAll: true,
  onFindAll: empty,
  listClick: empty,
  listHeight: 0
};
export { List as default };

var ListItem =
/*#__PURE__*/
function (_Component2) {
  _inherits(ListItem, _Component2);

  function ListItem(props) {
    var _this3;

    _classCallCheck(this, ListItem);

    _this3 = _possibleConstructorReturn(this, _getPrototypeOf(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'] = React.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'] = React.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 = decode(_this3.props.data[0]['text']);

      var _objText_1 = _this3.highlightText(text1);

      if (_this3.props.data.length == 1) {
        return React.createElement("div", {
          className: "lookupv2__content-wrapper"
        }, React.createElement("p", {
          className: "lookupv2__content-top"
        }, _objText_1['a'], _objText_1['b'], _objText_1['c']));
      } else {
        var text2 = decode(_this3.props.data[1]['text']);

        var _objText_2 = _this3.highlightText(text2);

        return React.createElement("div", {
          className: "lookupv2__content-wrapper"
        }, React.createElement("p", {
          className: "lookupv2__content-top"
        }, _objText_1['a'], _objText_1['b'], _objText_1['c']), React.createElement("p", {
          className: "lookupv2__content-bottom"
        }, _objText_2['a'], _objText_2['b'], _objText_2['c']));
      }
    };

    return _this3;
  }

  _createClass(ListItem, [{
    key: "render",
    value: function render() {
      var props = Object.assign({}, this.props);

      var _avatarDom;

      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 = React.createElement("span", {
                className: "avatar avatar_size-30"
              }, React.createElement("img", {
                src: props.data[i]['avatars'][j]['small']
              }));
            } else {
              _avatarDom = React.createElement("span", {
                className: "avatar avatar_size-30",
                style: {
                  backgroundColor: props.data[i]['avatars'][j]['color']
                }
              }, props.data[i]['text'].split("")[0]);
            }
          }
        }
      }

      return React.createElement("li", {
        className: "lookupv2__drop-item lookupv2__drop-item_has-avatar",
        onClick: this.handlerClick
      }, _avatarDom, this.renderContent());
    }
  }]);

  return ListItem;
}(Component);