mirror of https://github.com/msgbyte/tailchat
refactor: 移除弃用的虚拟列表组件
moonrailgun
3 years ago
parent
0793490bc6
commit
971691bc82
@ -1,185 +0,0 @@
|
||||
import {
|
||||
DynamicSizeList,
|
||||
DynamicSizeRenderInfo,
|
||||
OnScrollInfo,
|
||||
} from '@/components/DynamicVirtualizedList/DynamicSizeList';
|
||||
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 { buildMessageItemRow } from './Item';
|
||||
import type { MessageListProps } from './types';
|
||||
|
||||
// Reference: https://github.com/mattermost/mattermost-webapp/blob/master/components/post_view/post_list_virtualized/post_list_virtualized.jsx
|
||||
|
||||
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
|
||||
|
||||
export const VirtualizedMessageList: React.FC<MessageListProps> = React.memo(
|
||||
(props) => {
|
||||
const listRef = useRef<DynamicSizeList>(null);
|
||||
const postListRef = useRef<HTMLDivElement>(null);
|
||||
const [isBottom, setIsBottom] = useState(true);
|
||||
useLockScroll(props.messages, listRef);
|
||||
|
||||
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 initScrollToIndex = () => {
|
||||
return {
|
||||
index: 0,
|
||||
position: 'end' as const,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 渲染列表元素
|
||||
*/
|
||||
const renderRow = ({ itemId }: DynamicSizeRenderInfo) => {
|
||||
if (itemId === messageReverseItemId.OLDER_MESSAGES_LOADER) {
|
||||
return (
|
||||
<div key={itemId} className="text-center text-gray-400">
|
||||
{t('加载中...')}
|
||||
</div>
|
||||
);
|
||||
} else if (itemId === messageReverseItemId.TEXT_CHANNEL_INTRO) {
|
||||
return (
|
||||
<div key={itemId} className="text-center text-gray-400">
|
||||
{t('到顶了')}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return buildMessageItemRow(props.messages, itemId);
|
||||
};
|
||||
|
||||
// 初始渲染范围
|
||||
const initRangeToRender = useMemo(() => [0, props.messages.length], []);
|
||||
|
||||
const itemData = useMemo(
|
||||
() => [
|
||||
...props.messages.map((m) => m._id).reverse(),
|
||||
props.hasMoreMessage
|
||||
? messageReverseItemId.OLDER_MESSAGES_LOADER
|
||||
: messageReverseItemId.TEXT_CHANNEL_INTRO,
|
||||
],
|
||||
[props.messages, props.hasMoreMessage]
|
||||
);
|
||||
|
||||
return (
|
||||
<AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<DynamicSizeList
|
||||
ref={listRef}
|
||||
height={height}
|
||||
width={width}
|
||||
itemData={itemData}
|
||||
renderItem={renderRow}
|
||||
overscanCountForward={OVERSCAN_COUNT_FORWARD}
|
||||
overscanCountBackward={OVERSCAN_COUNT_BACKWARD}
|
||||
onScroll={handleScroll}
|
||||
initScrollToIndex={initScrollToIndex}
|
||||
canLoadMorePosts={() => {}}
|
||||
innerRef={postListRef}
|
||||
style={{ ...virtListStyles, ...dynamicListStyle }}
|
||||
innerListStyle={postListStyle}
|
||||
initRangeToRender={initRangeToRender}
|
||||
loaderId={messageReverseItemId.OLDER_MESSAGES_LOADER}
|
||||
correctScrollToBottom={isBottom}
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
);
|
||||
}
|
||||
);
|
||||
VirtualizedMessageList.displayName = 'VirtualizedMessageList';
|
||||
|
||||
/**
|
||||
* 当增加历史信息时锁定滚动条位置
|
||||
*/
|
||||
function useLockScroll(
|
||||
messages: ChatMessage[],
|
||||
listRef: React.RefObject<DynamicSizeList>
|
||||
) {
|
||||
const previousMessages = usePrevious(messages);
|
||||
const previousScrollHeight = usePrevious(
|
||||
listRef.current?._outerRef?.scrollHeight
|
||||
);
|
||||
useLayoutEffect(() => {
|
||||
if (previousMessages && messages[0]._id !== previousMessages[0]._id) {
|
||||
// 增加了历史消息
|
||||
if (listRef.current?._outerRef) {
|
||||
// 能够拿到容器
|
||||
listRef.current.scrollTo(
|
||||
listRef.current._outerRef.scrollTop +
|
||||
listRef.current._outerRef.scrollHeight -
|
||||
(previousScrollHeight || 0)
|
||||
);
|
||||
}
|
||||
}
|
||||
}, [messages.length, previousMessages?.length]);
|
||||
}
|
||||
Loading…
Reference in New Issue