fcr-ui-scene-mobile 3.4.0

package/lib/modules/chat/message-list.js

@@ -0,0 +1,617 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/esnext.async-iterator.filter.js");
+require("core-js/modules/esnext.async-iterator.for-each.js");
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.weak-map.delete-all.js");
+require("core-js/modules/esnext.weak-map.emplace.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MessageList = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.find-index.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/esnext.map.delete-all.js");
+require("core-js/modules/esnext.map.emplace.js");
+require("core-js/modules/esnext.map.every.js");
+require("core-js/modules/esnext.map.filter.js");
+require("core-js/modules/esnext.map.find.js");
+require("core-js/modules/esnext.map.find-key.js");
+require("core-js/modules/esnext.map.includes.js");
+require("core-js/modules/esnext.map.key-of.js");
+require("core-js/modules/esnext.map.map-keys.js");
+require("core-js/modules/esnext.map.map-values.js");
+require("core-js/modules/esnext.map.merge.js");
+require("core-js/modules/esnext.map.reduce.js");
+require("core-js/modules/esnext.map.some.js");
+require("core-js/modules/esnext.map.update.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/web.timers.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _reactVirtualized = require("react-virtualized");
+var _messageBubble = require("agora-ui-foundation/lib/components/message-bubble");
+var _messageLabelMobile = require("agora-ui-foundation/lib/components/message-label-mobile");
+var _avatar = require("agora-ui-foundation/lib/components/avatar");
+var _util = require("./util");
+var _textBubble = require("agora-ui-foundation/lib/components/text-bubble");
+var _latestButton = require("agora-ui-foundation/lib/components/latest-button");
+var _store = require("./store");
+var _i18n = require("agora-ui-foundation/lib/i18n");
+var _contex = require("./contex");
+var _mobxReact = require("mobx-react");
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _multiSelect = require("agora-ui-foundation/lib/components/multi-select");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _copyText = require("../../utilities/copyText");
+var _icon = require("agora-ui-foundation/lib/components/icon");
+var _type = require("agora-ui-foundation/lib/components/icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // 当向上滚动时，且超出底部 10 条，点击需要回到底部，如果此时有新的消息，那么展示未读的新消息
+// 当滚动条在最底部时，有新消息时，自动滚动到最新消息
+// 初始化时，如果有历史消息未读，展示未读条数，并且要回到指定的位置
+// 消息列表
+// 显示的消息列表
+// 未读消息列表
+var genRequestAnimationFrame = function genRequestAnimationFrame(cb) {
+  return requestAnimationFrame(cb);
+};
+var MessageList = exports.MessageList = (0, _mobxReact.observer)(function (_ref) {
+  var updateReadMsgIndex = _ref.updateReadMsgIndex,
+    localUserId = _ref.userId,
+    setMultiSelectActive = _ref.setMultiSelectActive,
+    multiSelectActive = _ref.multiSelectActive,
+    copyMap = _ref.copyMap,
+    setCopyMap = _ref.setCopyMap,
+    selectCnt = _ref.selectCnt,
+    copyTips = _ref.copyTips;
+  var t = (0, _i18n.useI18n)();
+  var _useContext = (0, _react.useContext)(_contex.StoreContext),
+    chatRoomStores = _useContext.chatRoomStores,
+    activeTabIndex = _useContext.activeTabIndex;
+  var _ref2 = chatRoomStores[activeTabIndex],
+    storeMsgs = _ref2.messageList,
+    readMsgIndex = _ref2.readMsgIndex,
+    needCbBottomCount = _ref2.needCbBottomCount,
+    list = _ref2.list,
+    mostRecentHeight = _ref2.mostRecentHeight,
+    mostRecentWidth = _ref2.mostRecentWidth,
+    cache = _ref2.cache,
+    scrollHeight = _ref2.scrollHeight,
+    scrollTop = _ref2.scrollTop,
+    clientHeight = _ref2.clientHeight,
+    firstMsgId = _ref2.firstMsgId,
+    readIdx = _ref2.readIdx,
+    viewIdx = _ref2.viewIdx,
+    historyUnReadCount = _ref2.historyUnreadCount,
+    hasHistoryMsg = _ref2.hasHistoryMsg,
+    newMsgsUnReadCnt = _ref2.newMsgsUnReadCnt,
+    initReadInfo = _ref2.initReadInfo,
+    updateScrollInfo = _ref2.updateScrollInfo,
+    updateHasHistoryMsg = _ref2.updateHasHistoryMsg,
+    updateHistoryCnt = _ref2.updateHistoryUnreadCnt,
+    updateViewIdx = _ref2.updateViewIdx,
+    updateReadIdx = _ref2.updateReadIdx,
+    updateFirstMsgId = _ref2.updateFirstMsgId,
+    updateHistoryUnReadCount = _ref2.updateHistoryUnReadCount,
+    updateList = _ref2.updateList,
+    updateMostRecentHeight = _ref2.updateMostRecentHeight,
+    updateMostRecentWidth = _ref2.updateMostRecentWidth,
+    forceNotifyMsgs = _ref2.forceNotifyMsgs,
+    permitPrivateChat = _ref2.permitPrivateChat,
+    lastScrollTop = _ref2.lastScrollTop,
+    setLastScrollTop = _ref2.setLastScrollTop;
+  var _useState = (0, _react.useState)(storeMsgs !== null && storeMsgs !== void 0 ? storeMsgs : []),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    messageList = _useState2[0],
+    setMessageList = _useState2[1];
+  var _useState3 = (0, _react.useState)(messageList.length - 1),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    scrollIndex = _useState4[0],
+    setScrollIndex = _useState4[1];
+  var firstRowsRendered = undefined;
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    latestBtnVisible = _useState6[0],
+    setLatestBtnVisible = _useState6[1];
+  var latestBtnVisibleFlag = false;
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    historyMsgVisible = _useState8[0],
+    setHistoryMsgVisible = _useState8[1];
+  var latestBtnVisibleTimer = undefined;
+  // const [checkboxVisible, setCheckboxVisible] = useState<boolean>(false);
+  // const [copyMap, setCopyMap] = useState<Map<number, boolean>>(new Map());
+
+  (0, _react.useEffect)(function () {
+    initReadInfo();
+    return function () {
+      updateReadInfo();
+      clearTimeout(latestBtnVisibleTimer);
+    };
+  }, []);
+  var updateReadInfo = function updateReadInfo(data) {
+    updateReadMsgIndex && messageList.length > 0 && updateReadMsgIndex(data);
+    updateHistoryUnReadCount(0);
+    updateHasHistoryMsg(false);
+  };
+  (0, _react.useEffect)(function () {
+    setMessageList(storeMsgs);
+  }, [storeMsgs]);
+  (0, _react.useEffect)(function () {
+    var _messageList$;
+    // 视口位置在最底部时, 滚动到最新消息
+    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < cache.rowHeight({
+      index: readIdx
+    });
+    if (isBottom) {
+      genRequestAnimationFrame(function () {
+        scrollToIdx(messageList.length - 1);
+      });
+    } else {
+      var _messageList;
+      var len = messageList.length;
+      if (readMsgIndex.index === len - 2 && ((_messageList = messageList[len - 1]) === null || _messageList === void 0 ? void 0 : _messageList.uid) === localUserId) {
+        scrollToIdx(len - 1);
+      }
+    }
+
+    // TODO: 优化, 消息队列中, 后部分消息高度不会变, 是否可以使用 cache 中已有的高度?
+    // 消息列表从头更新, 重新计算每条消息的高度
+    if (firstMsgId && messageList[0] && ((_messageList$ = messageList[0]) === null || _messageList$ === void 0 ? void 0 : _messageList$.id) !== firstMsgId) {
+      cache.clearAll();
+      list === null || list === void 0 || list.recomputeRowHeights();
+      updateFirstMsgId(messageList[0].id);
+    }
+    var last2Idx = messageList.length - 2;
+    if (last2Idx >= 0) {
+      // 防止 margin 堆叠, 动态计算倒数第二条消息高度
+      cache.clear(last2Idx, 0);
+      list === null || list === void 0 || list.recomputeRowHeights(last2Idx);
+    }
+  }, [messageList]);
+  (0, _react.useEffect)(function () {
+    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+    if (newMsgsUnReadCnt === 0 || isBottom) {
+      return;
+    }
+    // 当有新消息来时，视口不在底部，需要提示有新消息
+    setLatestBtnVisible(true);
+    latestBtnVisibleFlag = true;
+    scrollToIdx(viewIdx);
+  }, [newMsgsUnReadCnt]);
+  var handleCopyMsg = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(msg, time, publisherNickName, targetNickname) {
+      var msgHandled;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            msgHandled = (0, _i18n.getLanguage)() === 'zh' ? "".concat(publisherNickName, "\u5BF9").concat(targetNickname, "\u8BF4(").concat(time, ")\n").concat(msg) : "".concat(publisherNickName, " said to ").concat(targetNickname, "(").concat(time, ")\n").concat(msg);
+            _context.next = 3;
+            return (0, _copyText.copyText)(msgHandled);
+          case 3:
+            copyTips === null || copyTips === void 0 || copyTips();
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleCopyMsg(_x, _x2, _x3, _x4) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handleSelectMsg = function handleSelectMsg(idx, checked) {
+    var _copyMap = new Map(copyMap);
+    if (checked) {
+      _copyMap === null || _copyMap === void 0 || _copyMap.set(idx, checked);
+      setCopyMap && setCopyMap(_copyMap !== null && _copyMap !== void 0 ? _copyMap : new Map());
+    } else {
+      _copyMap["delete"](idx);
+      setCopyMap && setCopyMap(_copyMap !== null && _copyMap !== void 0 ? _copyMap : new Map());
+    }
+
+    // const _scrollTop = list?.getOffsetForRow({ index: idx });
+    // cache.clear(idx, 0);
+    // // TODO: 宽高改变后需要回到视口位置
+    // // 强制渲染列表
+    // list?.recomputeRowHeights(idx);
+    // list?.scrollToPosition(_scrollTop);
+  };
+  var rowRenderer = function rowRenderer(messageList) {
+    return function (_ref4) {
+      var _arr, _arr2, _arr3, _arr4;
+      var index = _ref4.index,
+        key = _ref4.key,
+        parent = _ref4.parent,
+        style = _ref4.style;
+      var datum = messageList[index % messageList.length];
+      if (!datum) {
+        return;
+      }
+      var publisherRole = datum.role,
+        time = datum.time,
+        _datum$msg = datum.msg,
+        msg = _datum$msg === void 0 ? '' : _datum$msg,
+        color = datum.color,
+        publisherNickName = datum.nickName,
+        publisherUid = datum.uid,
+        isPrivate = datum.isPrivate,
+        targetNickname = datum.target,
+        chatLevel = datum.chatLevel;
+      var arr = messageList;
+      var idx = index;
+      var systemMsg = datum.systemMsg;
+      var publisherIsSelf = publisherUid === localUserId;
+      var checked = (copyMap === null || copyMap === void 0 ? void 0 : copyMap.get(idx)) || false;
+      var checkDisabled = (selectCnt !== null && selectCnt !== void 0 ? selectCnt : 0) >= _multiSelect.MAX_SELECT_CNT && !checked;
+      var needLabel = ((_arr = arr[idx - 1]) === null || _arr === void 0 ? void 0 : _arr.uid) !== publisherUid || ((_arr2 = arr[idx - 1]) === null || _arr2 === void 0 ? void 0 : _arr2.isPrivate) !== isPrivate || ((_arr3 = arr[idx - 1]) === null || _arr3 === void 0 ? void 0 : _arr3.role) !== publisherRole || ((_arr4 = arr[idx - 1]) === null || _arr4 === void 0 ? void 0 : _arr4.target) !== targetNickname;
+      var isManager = publisherRole === 'host' || publisherRole === 'union-host';
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.CellMeasurer, {
+        cache: cache,
+        columnIndex: 0,
+        rowIndex: index,
+        parent: parent,
+        children: function children() {
+          var _datum$img, _arr5;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            style: _objectSpread(_objectSpread(_objectSpread({}, style), {}, {
+              display: 'flex',
+              flexDirection: 'column'
+            }, systemMsg ? {
+              width: '100%'
+            } : {
+              width: 'auto'
+            }), systemMsg ? {} : publisherIsSelf ? {
+              marginRight: 15,
+              marginLeft: multiSelectActive ? 8 : 25,
+              alignItems: 'flex-end',
+              right: 0
+            } : {
+              marginRight: 15,
+              marginLeft: multiSelectActive ? 8 : 15,
+              alignItems: 'flex-start'
+            }),
+            id: String(idx),
+            children: systemMsg ? publisherRole === 'system' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+              txt: (0, _util.handleMessageTime)(time),
+              type: "transparent",
+              bold: true,
+              lineHeight: "small",
+              styles: {
+                marginBottom: 16
+              }
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_textBubble.TextBubble, {
+              txt: "".concat((0, _util.handleChatLevelChangedSystemMsg)(t, chatLevel, publisherRole, publisherNickName, publisherIsSelf)),
+              marginBottom: 15
+            }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [needLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageLabelMobile.MessageLabel, {
+                styles: {
+                  marginLeft: publisherUid !== localUserId && multiSelectActive ? 24 : 0
+                },
+                color: color,
+                time: (0, _util.handleMessageTime)(time),
+                publisher: publisherNickName,
+                avatar: publisherUid !== localUserId ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_avatar.FcrAvatar, {
+                  size: 24,
+                  textSize: 24,
+                  nickName: publisherNickName
+                }) : null,
+                publisherIsSelf: publisherIsSelf,
+                target: targetNickname || _store.allToUser.userName,
+                isPrivate: isPrivate,
+                tag: isManager ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: (0, _classnames["default"])('fcr-msg-tag', {
+                    'fcr-msg-tag--union': publisherRole === 'union-host'
+                  }),
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                    children: publisherRole === 'host' ? t('fmt_role_host') : t('fmt_role_cohost')
+                  })
+                }) : null
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: "fcr-line-message",
+                style: {
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: publisherIsSelf ? multiSelectActive ? 'space-between' : 'flex-end' : 'flex-start',
+                  flexDirection: 'row',
+                  width: '100%'
+                },
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  onClick: function onClick() {
+                    if (!multiSelectActive || checkDisabled) {
+                      return;
+                    }
+                    var newChecked = !checked;
+                    handleSelectMsg(idx, newChecked);
+                  },
+                  style: {
+                    // marginLeft: uid !== userId && multiSelectActive ? 24 : 0,
+                  },
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_messageBubble.MessageBubble, {
+                    file: datum === null || datum === void 0 || (_datum$img = datum.img) === null || _datum$img === void 0 ? void 0 : _datum$img.url,
+                    msg: msg,
+                    role: publisherRole,
+                    isSelf: publisherIsSelf
+                    // 消息间间距
+                    ,
+                    marginBottom: ((_arr5 = arr[idx + 1]) === null || _arr5 === void 0 ? void 0 : _arr5.uid) === publisherUid ? 'small' : 'large',
+                    styles: {
+                      marginLeft: publisherUid !== localUserId && !multiSelectActive ? 34 : 0,
+                      width: 'auto'
+                    },
+                    onCopy: (/*#__PURE__*/function () {
+                      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2(type) {
+                        var currentScrollTop;
+                        return _regenerator["default"].wrap(function _callee2$(_context2) {
+                          while (1) switch (_context2.prev = _context2.next) {
+                            case 0:
+                              if (!(type === 'singling')) {
+                                _context2.next = 5;
+                                break;
+                              }
+                              _context2.next = 3;
+                              return handleCopyMsg(msg, (0, _util.handleMessageTime)(time), publisherIsSelf && isPrivate ? t('fmt_settings_labels_you') : publisherNickName, // 你
+                              targetNickname !== null && targetNickname !== void 0 ? targetNickname : _store.allToUser.userName);
+                            case 3:
+                              _context2.next = 6;
+                              break;
+                            case 5:
+                              if (type === 'multiple') {
+                                currentScrollTop = list === null || list === void 0 ? void 0 : list.getOffsetForRow({
+                                  index: idx
+                                });
+                                scrollToIdx(viewIdx);
+                                setLastScrollTop(currentScrollTop);
+                                setMultiSelectActive && setMultiSelectActive(true);
+                              }
+                            case 6:
+                            case "end":
+                              return _context2.stop();
+                          }
+                        }, _callee2);
+                      }));
+                      return function (_x5) {
+                        return _ref5.apply(this, arguments);
+                      };
+                    }()),
+                    onPrivate: function onPrivate() {
+                      handleClickPrivateChat(publisherUid);
+                    },
+                    hiddenMore: true
+                  })
+                })
+              })]
+            })
+          });
+        }
+      }, key);
+    };
+  };
+  var scrollToIdx = function scrollToIdx(idx) {
+    var rowCount = messageList.length;
+    var scrollIdx = Math.min(rowCount - 1, idx);
+    if (isNaN(scrollIdx)) {
+      scrollIdx = undefined;
+    }
+    setScrollIndex(scrollIdx);
+  };
+  var handleScroll = function handleScroll(params) {
+    var listScrollHeight = params.scrollHeight,
+      listScrollTop = params.scrollTop,
+      listClientHeight = params.clientHeight;
+    updateScrollInfo(listScrollHeight, listScrollTop, listClientHeight);
+    updateScrollIndexByScroll();
+  };
+  var updateScrollIndexByScroll = (0, _throttle["default"])(function () {
+    if (scrollTop !== 0 && scrollHeight - scrollTop === clientHeight && latestBtnVisible) {
+      setLatestBtnVisible(false);
+      scrollToIdx(messageList.length - 1);
+    }
+  }, 200);
+  var handleRowRendered = function handleRowRendered(params) {
+    var stopIndex = params.stopIndex,
+      startIndex = params.startIndex;
+
+    // 历史未读消息
+    var lastReadIdx = messageList.findIndex(function (msg) {
+      return msg.id === readMsgIndex.msgId;
+    });
+    var hasHistoryUnRead = readMsgIndex.index < 0 || lastReadIdx < 0 || readMsgIndex.index < startIndex;
+    if (messageList.length > 0 && stopIndex >= messageList.length - 1 && hasHistoryUnRead && startIndex > 0 && hasHistoryMsg) {
+      var unReadCnt = 0;
+      if (lastReadIdx === -1) {
+        unReadCnt = startIndex - 1;
+      } else if (lastReadIdx >= 0) {
+        unReadCnt = startIndex - lastReadIdx;
+      }
+      updateHistoryCnt(unReadCnt);
+      unReadCnt > 0 && setHistoryMsgVisible(true);
+      updateHasHistoryMsg(false);
+    }
+
+    // 视口已经滚动到所有历史未读消息之前
+    var unreadIdx = messageList.findIndex(function (msg) {
+      return msg.id === readMsgIndex.msgId;
+    });
+    if (stopIndex <= unreadIdx) {
+      setHistoryMsgVisible(false);
+    }
+    updateViewIdx(stopIndex);
+    if (firstRowsRendered) {
+      firstRowsRendered = false;
+      return;
+    }
+    var latestIdx = messageList.length - 1;
+    // 往上滚动超过 40 条
+    if (latestIdx - stopIndex >= needCbBottomCount && !latestBtnVisibleFlag) {
+      latestBtnVisibleFlag = true;
+      clearTimeout(latestBtnVisibleTimer);
+      latestBtnVisibleTimer = setTimeout(function () {
+        var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+        !isBottom && setLatestBtnVisible(true);
+      }, 500);
+    }
+    if (latestIdx - stopIndex < 10 && latestBtnVisibleFlag) {
+      latestBtnVisibleFlag = false;
+      setTimeout(function () {
+        setLatestBtnVisible(false);
+      }, 500);
+    }
+
+    // 视口出现新消息
+    if (stopIndex > readIdx) {
+      updateReadIdx(stopIndex);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var isBottom = clientHeight === 0 || Math.abs(scrollHeight - clientHeight - scrollTop) < 1;
+    if (isBottom) {
+      return;
+    }
+  }, [readMsgIndex]);
+  (0, _react.useEffect)(function () {
+    // 重新计算高度
+    cache.clearAll();
+    list === null || list === void 0 || list.recomputeRowHeights();
+    if (lastScrollTop !== undefined) {
+      list === null || list === void 0 || list.scrollToPosition(lastScrollTop);
+      setLastScrollTop(undefined);
+    }
+  }, [multiSelectActive]);
+  var handleClickPrivateChat = function handleClickPrivateChat(userId) {
+    permitPrivateChat(userId);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: 'fcr-message-list',
+    style: {},
+    children: [historyMsgVisible && messageList.length > 0 && historyUnReadCount > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_latestButton.LatestButton, {
+      onClick: function onClick() {
+        var len = messageList.length;
+        // 回到历史消息指定位置
+        var idx = (readMsgIndex === null || readMsgIndex === void 0 ? void 0 : readMsgIndex.index) < 0 ? 0 : messageList.findIndex(function (msg) {
+          return msg.id === readMsgIndex.msgId;
+        });
+        scrollToIdx(idx);
+        setHistoryMsgVisible(false);
+        var lastMsg = messageList[len - 1];
+        if (updateReadMsgIndex && lastMsg) {
+          updateReadMsgIndex({
+            index: len - 1,
+            msgId: lastMsg.id
+          });
+        }
+        updateHistoryUnReadCount(0);
+      },
+      txt: "".concat(t('fmt_chat_tips_newmessage', {
+        reason1: historyUnReadCount
+      })),
+      iconTransform: true,
+      direction: "top",
+      styles: {
+        zIndex: 999
+      }
+    }) : null, latestBtnVisible === true ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_latestButton.LatestButton, {
+      onClick: function onClick() {
+        forceNotifyMsgs();
+        var len = messageList.length;
+
+        // 回到最新消息的第一条
+        if (readIdx === len - 1) {
+          // 没有新消息
+          if (scrollIndex === len - 1) {
+            list === null || list === void 0 || list.scrollToPosition(scrollHeight - clientHeight);
+          } else {
+            scrollToIdx(len - 1);
+          }
+        }
+        setLatestBtnVisible(false);
+        latestBtnVisibleFlag = false;
+        var lastMsg = messageList[len - 1];
+        if (updateReadMsgIndex && lastMsg) {
+          updateReadMsgIndex({
+            index: len - 1,
+            msgId: lastMsg.id
+          });
+        }
+      },
+      txt: "".concat(
+      // readIdx === messageList.length - 1
+      newMsgsUnReadCnt === 0 ? t('fmt_chat_button_latestlocation') // 回到最新位置
+      : t('fmt_chat_tips_newmessage', {
+        reason1: newMsgsUnReadCnt || messageList.length - 1 - readIdx
+      })),
+      styles: {
+        zIndex: 999
+      }
+    }) : null, messageList.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-no-data-chat",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_DEFAULTPAGE
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: t('fmt_chat_tips_nodata')
+      })]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.AutoSizer, {
+      style: {
+        alignSelf: 'stretch'
+      },
+      children: function children(_ref6) {
+        var height = _ref6.height,
+          width = _ref6.width;
+        if (height !== mostRecentHeight || width !== mostRecentWidth) {
+          cache.clearAll();
+          if (list) {
+            list.recomputeRowHeights();
+          }
+        }
+        updateMostRecentHeight(height);
+        updateMostRecentWidth(width);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtualized.List, {
+          ref: function ref(_ref7) {
+            updateList(_ref7);
+          },
+          style: {
+            padding: 'inherit',
+            scrollbarWidth: 'none'
+          },
+          onScroll: handleScroll,
+          onRowsRendered: handleRowRendered,
+          width: width,
+          height: height,
+          rowHeight: cache.rowHeight,
+          rowCount: messageList.length,
+          rowRenderer: rowRenderer(messageList),
+          deferredMeasurementCache: cache,
+          overscanRowCount: 0,
+          scrollToIndex: latestBtnVisible ? undefined : scrollIndex
+        });
+      }
+    })]
+  });
+});

package/lib/modules/chat/mock.d.ts

@@ -0,0 +1,2 @@
+import { MsgListType } from './store';
+export declare const messages: MsgListType[];