|
|
|
|
@ -1,174 +1,38 @@
|
|
|
|
|
import React, {
|
|
|
|
|
useEffect,
|
|
|
|
|
useLayoutEffect,
|
|
|
|
|
useMemo,
|
|
|
|
|
useRef,
|
|
|
|
|
useState,
|
|
|
|
|
} from 'react';
|
|
|
|
|
import AutoSizer from 'react-virtualized-auto-sizer';
|
|
|
|
|
import { ChatMessage, t, usePrevious, useUpdateRef } from 'tailchat-shared';
|
|
|
|
|
import { messageReverseItemId } from './const';
|
|
|
|
|
import React, { useRef } from 'react';
|
|
|
|
|
import { buildMessageItemRow } from './Item';
|
|
|
|
|
import type { MessageListProps } from './types';
|
|
|
|
|
import {
|
|
|
|
|
List,
|
|
|
|
|
CellMeasurer,
|
|
|
|
|
CellMeasurerCache,
|
|
|
|
|
ListRowRenderer,
|
|
|
|
|
InfiniteLoader,
|
|
|
|
|
} from 'react-virtualized';
|
|
|
|
|
|
|
|
|
|
// const OVERSCAN_COUNT_BACKWARD = 80;
|
|
|
|
|
// const OVERSCAN_COUNT_FORWARD = 80;
|
|
|
|
|
// const HEIGHT_TRIGGER_FOR_MORE_POSTS = 200; // 触发加载更多的方法
|
|
|
|
|
|
|
|
|
|
// const postListStyle = {
|
|
|
|
|
// padding: '14px 0px 7px',
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const virtListStyles: React.CSSProperties = {
|
|
|
|
|
// position: 'absolute',
|
|
|
|
|
// bottom: 0,
|
|
|
|
|
// maxHeight: '100%',
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const dynamicListStyle: React.CSSProperties = {}; // TODO
|
|
|
|
|
import { Virtuoso, VirtuosoGridHandle } from 'react-virtuoso';
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 新版的虚拟列表
|
|
|
|
|
*/
|
|
|
|
|
export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
|
|
|
|
|
(props) => {
|
|
|
|
|
const listRef = useRef<List>(null);
|
|
|
|
|
// const postListRef = useRef<HTMLDivElement>(null);
|
|
|
|
|
// const [isBottom, setIsBottom] = useState(true);
|
|
|
|
|
// useLockScroll(props.messages, listRef);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
listRef.current?.scrollToRow(props.messages.length - 1);
|
|
|
|
|
}, [props.messages]);
|
|
|
|
|
|
|
|
|
|
// const handleScroll = (info: OnScrollInfo) => {
|
|
|
|
|
// const {
|
|
|
|
|
// clientHeight,
|
|
|
|
|
// scrollOffset,
|
|
|
|
|
// scrollHeight,
|
|
|
|
|
// scrollDirection,
|
|
|
|
|
// scrollUpdateWasRequested,
|
|
|
|
|
// } = info;
|
|
|
|
|
// if (scrollHeight <= 0) {
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// const didUserScrollBackwards =
|
|
|
|
|
// scrollDirection === 'backward' && !scrollUpdateWasRequested;
|
|
|
|
|
// const isOffsetWithInRange = scrollOffset < HEIGHT_TRIGGER_FOR_MORE_POSTS;
|
|
|
|
|
|
|
|
|
|
// if (
|
|
|
|
|
// didUserScrollBackwards &&
|
|
|
|
|
// isOffsetWithInRange &&
|
|
|
|
|
// !props.isLoadingMore
|
|
|
|
|
// ) {
|
|
|
|
|
// // 加载更多历史信息
|
|
|
|
|
// props.onLoadMore();
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// if (clientHeight + scrollOffset === scrollHeight) {
|
|
|
|
|
// // 当前滚动条位于底部
|
|
|
|
|
// setIsBottom(true);
|
|
|
|
|
// props.onUpdateReadedMessage(
|
|
|
|
|
// props.messages[props.messages.length - 1]._id
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
// };
|
|
|
|
|
|
|
|
|
|
// const onUpdateReadedMessageRef = useUpdateRef(props.onUpdateReadedMessage);
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// if (props.messages.length === 0) {
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// if (postListRef.current?.scrollTop === 0) {
|
|
|
|
|
// // 当前列表在最低
|
|
|
|
|
// onUpdateReadedMessageRef.current(
|
|
|
|
|
// props.messages[props.messages.length - 1]._id
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
// }, [props.messages.length]);
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 渲染列表元素
|
|
|
|
|
*/
|
|
|
|
|
const rowRenderer: ListRowRenderer = ({ index, key, parent, style }) => {
|
|
|
|
|
// if (key === messageReverseItemId.OLDER_MESSAGES_LOADER) {
|
|
|
|
|
// return (
|
|
|
|
|
// <div key={key} className="text-center text-gray-400">
|
|
|
|
|
// {t('加载中...')}
|
|
|
|
|
// </div>
|
|
|
|
|
// );
|
|
|
|
|
// } else if (key === messageReverseItemId.TEXT_CHANNEL_INTRO) {
|
|
|
|
|
// return (
|
|
|
|
|
// <div key={key} className="text-center text-gray-400">
|
|
|
|
|
// {t('到顶了')}
|
|
|
|
|
// </div>
|
|
|
|
|
// );
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<CellMeasurer
|
|
|
|
|
cache={measurerCache}
|
|
|
|
|
columnIndex={0}
|
|
|
|
|
key={key}
|
|
|
|
|
rowIndex={index}
|
|
|
|
|
parent={parent}
|
|
|
|
|
>
|
|
|
|
|
{({ measure, registerChild }) => (
|
|
|
|
|
<div
|
|
|
|
|
ref={(el) => el && registerChild && registerChild(el)}
|
|
|
|
|
onLoad={measure}
|
|
|
|
|
style={style}
|
|
|
|
|
>
|
|
|
|
|
{buildMessageItemRow(props.messages, props.messages[index]._id)}
|
|
|
|
|
{/* {buildMessageItemRow(props.messages, key)} */}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</CellMeasurer>
|
|
|
|
|
);
|
|
|
|
|
const listRef = useRef<VirtuosoGridHandle>();
|
|
|
|
|
const lastMessageId = useRef('');
|
|
|
|
|
const handleLoadMore = () => {
|
|
|
|
|
// TODO: 待修复， 这个方法只会被触发一次
|
|
|
|
|
lastMessageId.current = props.messages[0]._id;
|
|
|
|
|
props.onLoadMore().then(() => {
|
|
|
|
|
listRef.current?.scrollToIndex(50);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
return false;
|
|
|
|
|
};
|
|
|
|
|
// const itemData = useMemo(
|
|
|
|
|
// () => [
|
|
|
|
|
// ...props.messages.map((m) => m._id).reverse(),
|
|
|
|
|
// props.hasMoreMessage
|
|
|
|
|
// ? messageReverseItemId.OLDER_MESSAGES_LOADER
|
|
|
|
|
// : messageReverseItemId.TEXT_CHANNEL_INTRO,
|
|
|
|
|
// ],
|
|
|
|
|
// [props.messages, props.hasMoreMessage]
|
|
|
|
|
// );
|
|
|
|
|
|
|
|
|
|
const measurerCache = useMemo(
|
|
|
|
|
() =>
|
|
|
|
|
new CellMeasurerCache({
|
|
|
|
|
fixedWidth: true,
|
|
|
|
|
minHeight: 24,
|
|
|
|
|
}),
|
|
|
|
|
[]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<AutoSizer>
|
|
|
|
|
{({ height, width }) => (
|
|
|
|
|
<List
|
|
|
|
|
ref={listRef}
|
|
|
|
|
height={height}
|
|
|
|
|
width={width}
|
|
|
|
|
overscanRowCount={0}
|
|
|
|
|
rowCount={props.messages.length}
|
|
|
|
|
deferredMeasurementCache={measurerCache}
|
|
|
|
|
rowHeight={measurerCache.rowHeight}
|
|
|
|
|
rowRenderer={rowRenderer}
|
|
|
|
|
onRowsRendered={({ startIndex }) => console.log(startIndex)}
|
|
|
|
|
scrollToIndex={props.messages.length - 1}
|
|
|
|
|
scrollToAlignment="end"
|
|
|
|
|
/>
|
|
|
|
|
)}
|
|
|
|
|
</AutoSizer>
|
|
|
|
|
<Virtuoso
|
|
|
|
|
style={{ height: '100%' }}
|
|
|
|
|
ref={listRef as any}
|
|
|
|
|
initialTopMostItemIndex={props.messages.length - 1}
|
|
|
|
|
data={props.messages}
|
|
|
|
|
overscan={100}
|
|
|
|
|
itemContent={(index, data) =>
|
|
|
|
|
buildMessageItemRow(props.messages, data._id)
|
|
|
|
|
}
|
|
|
|
|
alignToBottom={true}
|
|
|
|
|
startReached={handleLoadMore}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
|
moonrailgun
4 years ago