@fle-ui/plus-im-record
Version:
66 lines • 2.94 kB
JavaScript
import React, { useMemo } from 'react';
import ChatMessageItem from '../ChatMessageItem';
import { debounce } from '../utils';
import './index.less';
var LOADING_STATUS = {
loading: '加载中...',
nomore: '没有更多了~'
};
var LOAD_LIMIT = 15;
var ChatMessageList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var searchValue = _ref.searchValue,
h5 = _ref.h5,
msgs = _ref.msgs,
onScrollTop = _ref.onScrollTop,
onScrollBottom = _ref.onScrollBottom,
_ref$loadingStarus = _ref.loadingStarus,
loadingStarus = _ref$loadingStarus === void 0 ? '' : _ref$loadingStarus,
myAccount = _ref.myAccount,
style = _ref.style,
recordSession = _ref.recordSession,
_ref$accountsMap = _ref.accountsMap,
accountsMap = _ref$accountsMap === void 0 ? {} : _ref$accountsMap,
_ref$isSessionEnd = _ref.isSessionEnd,
isSessionEnd = _ref$isSessionEnd === void 0 ? false : _ref$isSessionEnd;
var prefixCls = "chart-messages";
var onScrollHandler = debounce(function (e) {
var scrollElRef = ref;
if (!(scrollElRef === null || scrollElRef === void 0 ? void 0 : scrollElRef.current)) return;
var isBottom = scrollElRef.current.scrollTop >= scrollElRef.current.scrollHeight - scrollElRef.current.clientHeight - 20;
var isTop = scrollElRef.current.scrollTop < 20;
isTop && (onScrollTop === null || onScrollTop === void 0 ? void 0 : onScrollTop(e));
isBottom && (onScrollBottom === null || onScrollBottom === void 0 ? void 0 : onScrollBottom(e));
}, 200);
var filteredMsgs = useMemo(function () {
return msgs.filter(function (msg) {
var _msg$attach, _msg$attach2;
return ((_msg$attach = msg.attach) === null || _msg$attach === void 0 ? void 0 : _msg$attach.type) === 'text' && (((_msg$attach2 = msg.attach) === null || _msg$attach2 === void 0 ? void 0 : _msg$attach2.content) || '').indexOf(searchValue) > -1;
});
}, [msgs, searchValue]);
var messagesToRender = searchValue ? filteredMsgs : msgs;
return /*#__PURE__*/React.createElement("div", {
className: prefixCls,
style: style || {}
}, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: "".concat(prefixCls, "-content scrollmini"),
onScroll: onScrollHandler
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-status")
}, msgs.length < LOAD_LIMIT || !LOADING_STATUS[loadingStarus] ? null : LOADING_STATUS[loadingStarus]), messagesToRender.map(function (msg) {
return /*#__PURE__*/React.createElement("div", {
id: msg.idServer,
key: msg.idServer
}, /*#__PURE__*/React.createElement(ChatMessageItem, {
h5: h5,
keyword: searchValue || '',
myAccount: myAccount,
prefix: "".concat(prefixCls, "-item"),
msg: msg,
isSessionEnd: isSessionEnd,
recordSession: recordSession,
accountInfo: accountsMap[msg.from] || {}
}));
})));
});
export default ChatMessageList;