72 lines
2.1 KiB
TypeScript
72 lines
2.1 KiB
TypeScript
import React, { forwardRef, useImperativeHandle } from 'react';
|
|
import { RefreshControl } from 'react-native';
|
|
|
|
import ActivityIndicator from '../../../containers/ActivityIndicator';
|
|
import { useMessages, useRefresh, useScroll } from './hooks';
|
|
import { isIOS, useDebounce } from '../../../lib/methods/helpers';
|
|
import { EmptyRoom, List } from './components';
|
|
import { IListContainerProps, IListContainerRef, IListProps } from './definitions';
|
|
import { useTheme } from '../../../theme';
|
|
|
|
const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
|
|
({ rid, tmid, renderRow, showMessageInMainThread, serverVersion, hideSystemMessages, listRef, loading }, ref) => {
|
|
const [messages, messagesIds, fetchMessages] = useMessages({
|
|
rid,
|
|
tmid,
|
|
showMessageInMainThread,
|
|
serverVersion,
|
|
hideSystemMessages
|
|
});
|
|
const { colors } = useTheme();
|
|
const [refreshing, refresh] = useRefresh({ rid, tmid, messagesLength: messages.length });
|
|
const {
|
|
jumpToBottom,
|
|
jumpToMessage,
|
|
cancelJumpToMessage,
|
|
viewabilityConfigCallbackPairs,
|
|
handleScrollToIndexFailed,
|
|
highlightedMessageId
|
|
} = useScroll({ listRef, messagesIds });
|
|
|
|
const onEndReached = useDebounce(() => {
|
|
fetchMessages();
|
|
}, 300);
|
|
|
|
useImperativeHandle(ref, () => ({
|
|
jumpToMessage,
|
|
cancelJumpToMessage
|
|
}));
|
|
|
|
const renderFooter = () => {
|
|
if (loading && rid) {
|
|
return <ActivityIndicator />;
|
|
}
|
|
return null;
|
|
};
|
|
|
|
const renderItem: IListProps['renderItem'] = ({ item, index }) => renderRow(item, messages[index + 1], highlightedMessageId);
|
|
|
|
return (
|
|
<>
|
|
<EmptyRoom rid={rid} length={messages.length} />
|
|
<List
|
|
listRef={listRef}
|
|
data={messages}
|
|
renderItem={renderItem}
|
|
onEndReached={onEndReached}
|
|
ListFooterComponent={renderFooter}
|
|
onScrollToIndexFailed={handleScrollToIndexFailed}
|
|
viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
|
|
jumpToBottom={jumpToBottom}
|
|
isThread={!!tmid}
|
|
refreshControl={
|
|
isIOS ? <RefreshControl refreshing={refreshing} onRefresh={refresh} tintColor={colors.auxiliaryText} /> : undefined
|
|
}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
);
|
|
|
|
export default ListContainer;
|