VirtualizedScrollElement.tsx

import React, { Component, ComponentType, ReactType, UIEvent } from 'react';

type VirtualizedScrollElementProps<
    T, 
    B
> = {
    childElement: T;
    items: ExtractProps<T>[];
    baseProps?: B;
    prepend?: Element[];
}

type IVirtualizedScrollElement<
    T extends ComponentType<ExtractProps<T>>, 
    B = any
> = Component<
    VirtualizedScrollElementProps<
        T,
        B
    >
>;

type VirtualizedScrollElementState<T> = {
    visibleItems: ExtractProps<T>[];
    setupDone: boolean;
}

type ExtractProps<TComponentOrTProps> =
    TComponentOrTProps extends ComponentType<infer TProps>
        ? TProps
        : TComponentOrTProps;

export default class VirtualizedScrollElement<
    T extends ComponentType<ExtractProps<T>>, 
    B = any
> extends Component<
    VirtualizedScrollElementProps<
        T, 
        B
    >,
    VirtualizedScrollElementState<T>
> implements IVirtualizedScrollElement<
    T, 
    B
> {

    state: VirtualizedScrollElementState<T> = {
        setupDone: false,
        visibleItems: []
    }

    ref = React.createRef<HTMLDivElement>();
    containerRef = React.createRef<HTMLDivElement>();
    itemHeight: number = 0;
    currentItemOffset: number = 0;
    lastScrollTop: number = 0;

    componentDidMount = () => {
        const rect = this.ref.current?.firstElementChild?.getBoundingClientRect();
        this.itemHeight = rect?.height || 0;
        window.addEventListener('resize', () => {
            this.calculateVisibleElements();
        });
        this.setState({ setupDone: true }, this.calculateVisibleElements);
    }

    componentDidUpdate = () => {
        if (this.state.setupDone && this.containerRef.current) {
            this.containerRef.current.onscroll = (e) => {
                const { scrollTop } = e.target as HTMLDivElement;
                console.log(scrollTop);
                if (scrollTop > this.itemHeight * 5) {
                    this.currentItemOffset += Math.floor((scrollTop - (this.itemHeight * 5)) / this.itemHeight);
                    console.log(this.currentItemOffset);
                    this.lastScrollTop = scrollTop;
                }
                this.calculateVisibleElements();
            }
        }
    }

    calculateVisibleElements = () => {
        console.log('updating');
        if (this.containerRef.current) {
            // calculate visible element amount 
            const visibleAmount = Math.ceil(this.containerRef.current.getBoundingClientRect().height / this.itemHeight + 2);
            const visibleItems: ExtractProps<T>[] = [];
            if (this.currentItemOffset + visibleAmount > this.props.items.length) this.currentItemOffset = this.props.items.length - visibleAmount;
            for (let i = 0; i < visibleAmount; i++) {
                visibleItems.push(this.props.items[i + this.currentItemOffset]);
            }
            this.setState({
                setupDone: true,
                visibleItems
            }, () => {
                if (this.lastScrollTop > this.itemHeight * 5) this.containerRef.current?.scrollTo({ top: this.lastScrollTop, behavior: 'auto' });
            });
        }
    }

    render = () => {
        // if setup isnt done we just render a single element to get the height for calculations
        if (!this.state.setupDone) {
            return (
                <div ref={this.ref} style={{
                    height: 'auto',
                    width: 'auto'
                }}>
                    <this.props.childElement {...this.props.items[0]}/>
                </div>
            );
        }

        return (
            <div ref={this.containerRef} {...this.props.baseProps}>
                {this.state.visibleItems.map((props) => {
                    return <this.props.childElement {...props}/>
                })}
            </div>
        );
    }

}