Nitro-V3/src/common/InfiniteScroll.tsx

import { useVirtualizer } from '@tanstack/react-virtual';
import { FC, ReactElement, useRef, useState } from 'react';
import { Base } from './Base';

interface InfiniteScrollProps<T = any>
{
    rows: T[];
    overscan?: number;
    scrollToBottom?: boolean;
    rowRender: (row: T) => ReactElement;
}

export const InfiniteScroll: FC<InfiniteScrollProps> = props =>
{
    const { rows = [], overscan = 5, scrollToBottom = false, rowRender = null } = props;
    const [ scrollIndex, setScrollIndex ] = useState<number>(rows.length - 1);
    const parentRef = useRef<HTMLDivElement>(null);

    const virtualizer = useVirtualizer({
        count: rows.length,
        overscan,
        getScrollElement: () => parentRef.current,
        estimateSize: () => 45,
    });
    const items = virtualizer.getVirtualItems();

    return (
        <Base fit innerRef={ parentRef } overflow="auto" position="relative">
            <div
                style={ {
                    height: virtualizer.getTotalSize(),
                    width: '100%',
                    position: 'relative'
                } }>
                <div
                    style={ {
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        transform: `translateY(${ items[0]?.start ?? 0 }px)`
                    } }>
                    { items.map((virtualRow) => (
                        <div
                            key={ virtualRow.key }
                            ref={ virtualizer.measureElement }
                            data-index={ virtualRow.index }>
                            { rowRender(rows[virtualRow.index]) }
                        </div>
                    )) }
                </div>
            </div>
        </Base>
    );
};