48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import MessageListItem from '@components/chats/messageListItem';
|
|
|
|
import useLocalStorage from '@rehooks/local-storage';
|
|
import { useCallback, useRef } from 'react';
|
|
import { Virtuoso } from 'react-virtuoso';
|
|
|
|
export const MessageList = ({ data }: { data: any }) => {
|
|
const [activeAccount]: any = useLocalStorage('activeAccount', {});
|
|
const virtuosoRef = useRef(null);
|
|
|
|
const itemContent: any = useCallback(
|
|
(index: string | number) => {
|
|
return (
|
|
<MessageListItem
|
|
data={data[index]}
|
|
activeAccountPubkey={activeAccount.pubkey}
|
|
activeAccountPrivkey={activeAccount.privkey}
|
|
/>
|
|
);
|
|
},
|
|
[activeAccount.privkey, activeAccount.pubkey, data]
|
|
);
|
|
|
|
const computeItemKey = useCallback(
|
|
(index: string | number) => {
|
|
return data[index].id;
|
|
},
|
|
[data]
|
|
);
|
|
|
|
return (
|
|
<div className="h-full w-full">
|
|
<Virtuoso
|
|
ref={virtuosoRef}
|
|
data={data}
|
|
itemContent={itemContent}
|
|
computeItemKey={computeItemKey}
|
|
initialTopMostItemIndex={data.length - 1}
|
|
alignToBottom={true}
|
|
followOutput={true}
|
|
overscan={50}
|
|
increaseViewportBy={{ top: 200, bottom: 200 }}
|
|
className="scrollbar-hide h-full w-full overflow-y-auto"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|