z-react-ui/lib/chat-list/index.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

var _react = _interopRequireWildcard(require("react"));

var _hooks = require("@/_hooks");

var _classnames = _interopRequireDefault(require("classnames"));

var _getTimeText = require("@/_utils/chat/getTimeText");

var _chat = require("@/_utils/chat");

var _ChatItem = _interopRequireDefault(require("./ChatItem"));

var _ahooks = require("ahooks");

var _config = require("@/_config");

// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------
var defaultFieldNames = {
  id: 'id',
  avatarSrc: 'avatarSrc',
  createTime: 'createTime',
  msgType: 'msgType',
  msgId: 'msgId',
  msgContent: 'msgContent',
  userId: 'userId',
  userName: 'userName'
}; // 消息类型

var defaultMsgTypeManage = {
  system: [0],
  text: [1],
  img: [3],
  audio: [34],
  groupInvite: [49]
};

var defaultFn = function defaultFn() {
  return '';
};

var ChatPanel = function ChatPanel(_ref, ref) {
  var dataSource = _ref.dataSource,
      _ref$fieldNames = _ref.fieldNames,
      fieldNames = _ref$fieldNames === void 0 ? defaultFieldNames : _ref$fieldNames,
      _ref$msgTypeManage = _ref.msgTypeManage,
      msgTypeManage = _ref$msgTypeManage === void 0 ? defaultMsgTypeManage : _ref$msgTypeManage,
      loginId = _ref.loginId,
      _ref$loadMore = _ref.loadMore,
      loadMore = _ref$loadMore === void 0 ? defaultFn : _ref$loadMore,
      _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? true : _ref$isLoading,
      _ref$hasMore = _ref.hasMore,
      hasMore = _ref$hasMore === void 0 ? true : _ref$hasMore,
      _ref$reachedTopThresh = _ref.reachedTopThreshold,
      reachedTopThreshold = _ref$reachedTopThresh === void 0 ? 100 : _ref$reachedTopThresh;
  var prefixCls = (0, _hooks.usePrefixCls)('chat-list');
  var largeImgPrefixCls = (0, _hooks.usePrefixCls)('large-img');
  var scrollRef = (0, _react.useRef)();
  var queryHistoryMsg = (0, _ahooks.usePersistFn)(loadMore);
  var handleScroll = (0, _react.useCallback)(function (e) {
    if (!hasMore || !isLoading) return;
    var scrollTop = scrollRef.current.scrollTop;

    if (scrollTop < reachedTopThreshold && typeof queryHistoryMsg === 'function') {
      queryHistoryMsg();
    }
  }, [reachedTopThreshold, hasMore, isLoading]);

  var _useThrottleFn = (0, _ahooks.useThrottleFn)(handleScroll, {
    wait: 200
  }),
      throttleScroll = _useThrottleFn.run; // 初始化时，将聊天内容拉到最低, 时机：图片获取后


  (0, _react.useLayoutEffect)(function () {
    var imgArr = document.querySelectorAll(".".concat(prefixCls, " .").concat(largeImgPrefixCls, "-img"));
    Array.from(imgArr).forEach(function (item) {
      item.onload = handleRearchBottom;
      item.onerror = handleRearchBottom;
    });
    handleRearchBottom();
  }, []); // 聊天列表触底

  var handleRearchBottom = (0, _react.useCallback)(function () {
    var scrollHeight = scrollRef.current.scrollHeight;
    var clientheight = scrollRef.current.clientHeight;
    scrollRef.current.scrollTo(0, Math.abs(scrollHeight - clientheight));
  }, []);
  (0, _react.useEffect)(function () {
    scrollRef.current.addEventListener('scroll', throttleScroll);
    return function () {
      scrollRef.current.removeEventListener('scroll', throttleScroll);
    };
  }, [throttleScroll]);
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      chatListRearchBottom: handleRearchBottom
    };
  }, [handleRearchBottom]);
  return (
    /*#__PURE__*/
    // <div className={classNames(prefixCls,`${prefixCls}-transparent-scroll-bar`)} ref={scrollRef}>
    _react.default.createElement("div", {
      className: (0, _classnames.default)(prefixCls),
      ref: scrollRef
    }, hasMore ? isLoading ? /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(prefixCls, "-loading-msg-panel")
    }, /*#__PURE__*/_react.default.createElement("img", {
      src: "".concat(_config.staticImgPrefix, "/common/loading@2x.png"),
      alt: "\u52A0\u8F7D\u6D88\u606F",
      draggable: "false"
    })) : null : /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(prefixCls, "-loading-msg-panel")
    }, "\u6CA1\u6709\u66F4\u591A\u4E86"), Array.isArray(dataSource) ? dataSource.map(function (item, index) {
      var preData = index !== 0 ? dataSource[index - 1] : {};
      var isLoginer = (0, _chat.isLoginerFn)(loginId, item.userId);
      var contentType = (0, _chat.msgTypeToContentType)(item.msgType);
      return /*#__PURE__*/_react.default.createElement("div", {
        key: item.id,
        className: (0, _classnames.default)("".concat(prefixCls, "-row-list"))
      }, index === 0 ? /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-sender-time-list")
      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _getTimeText.getTimeText)(item.createTime).parser1())) : // 当前消息与上一条消息发送时间间隔30(暂定)分钟就显示
      !(0, _getTimeText.diffHalfHour)(preData.createTime, item.createTime) ? /*#__PURE__*/_react.default.createElement("div", {
        className: "".concat(prefixCls, "-sender-time-list")
      }, /*#__PURE__*/_react.default.createElement("span", null, (0, _getTimeText.getTimeText)(item.createTime).parser1())) : null, /*#__PURE__*/_react.default.createElement(_ChatItem.default, {
        layout: (0, _chat.getLayout)(isLoginer, contentType),
        contentType: contentType,
        chatItem: item
      }));
    }) : null)
  );
};

var _default = /*#__PURE__*/(0, _react.forwardRef)(ChatPanel);

exports.default = _default;