54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
import { Placeholder } from '@components/note/placeholder';
|
|
import { Repost } from '@components/note/repost';
|
|
import { Single } from '@components/note/single';
|
|
|
|
import { useCallback } from 'react';
|
|
import { Virtuoso } from 'react-virtuoso';
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
export function Thread({ data }: { data: any }) {
|
|
const ItemContent = useCallback(
|
|
(index: string | number) => {
|
|
const event = data[index];
|
|
|
|
if (event.content.includes('#[0]') && event.tags[0][0] == 'e') {
|
|
// type: repost
|
|
return <Repost root={event.tags} user={event.pubkey} />;
|
|
} else {
|
|
// type: default
|
|
return <Single event={event} />;
|
|
}
|
|
},
|
|
[data]
|
|
);
|
|
|
|
const computeItemKey = useCallback(
|
|
(index) => {
|
|
return data[index].id;
|
|
},
|
|
[data]
|
|
);
|
|
|
|
return (
|
|
<Virtuoso
|
|
data={data}
|
|
itemContent={ItemContent}
|
|
components={{
|
|
EmptyPlaceholder: () => <Placeholder />,
|
|
ScrollSeekPlaceholder: () => <Placeholder />,
|
|
}}
|
|
computeItemKey={computeItemKey}
|
|
scrollSeekConfiguration={{
|
|
enter: (velocity) => Math.abs(velocity) > 800,
|
|
exit: (velocity) => Math.abs(velocity) < 500,
|
|
}}
|
|
overscan={800}
|
|
increaseViewportBy={1000}
|
|
className="scrollbar-hide relative h-full w-full rounded-lg"
|
|
style={{
|
|
contain: 'strict',
|
|
}}
|
|
/>
|
|
);
|
|
}
|