react hooks rewrite

[roeycohen]

Hi @developerdizzle,

I've reorganized this library code using hooks and react 17. I'm willing to share if you want to update this library...

Roey

[mmontag]

Can you share your fork? Would love to get rid of some console warnings.

[roeycohen]

hi @mmontag, I don't have it in a fork, but here's the code (if you could create a fork for the community it could be nice 😊):

import React, {memo, useEffect, useRef, useState} from "react";
import PropTypes from 'prop-types';

export const VirtualList = memo(function VirtualList({items = [], itemHeight, itemBuffer, container = window, InnerComponent})
{
    const listRef = useRef();
    const [range, setRange] = useState({firstItemIndex: 0, lastItemIndex: -1});
    let refreshState = () =>
    {
        if (!listRef.current)
            return;
        const newRange = getVisibleItemBounds(listRef.current, container, items, itemHeight, itemBuffer);
        if (!newRange || newRange.firstItemIndex > newRange.lastItemIndex)
            return;

        if (newRange.firstItemIndex !== range.firstItemIndex || newRange.lastItemIndex !== range.lastItemIndex)
            setRange(newRange);
    };
    if (typeof window !== 'undefined' && 'requestAnimationFrame' in window)
        refreshState = throttleWithRAF(refreshState);
    useEffect(refreshState);
    useEventListener('scroll', refreshState, container);
    useEventListener('resize', refreshState, container);

    return <InnerComponent
        listRef={listRef}
        partialList={range.lastItemIndex > -1 ? items.slice(range.firstItemIndex, range.lastItemIndex + 1) : []}
        style={{
            height: items.length * itemHeight,
            paddingTop: range.firstItemIndex * itemHeight,
            boxSizing: 'border-box'
        }}/>;
}, (prevProps, nextProps) =>
{
    return prevProps.items === nextProps.items &&
        prevProps.itemBuffer === nextProps.itemBuffer &&
        prevProps.itemHeight === nextProps.itemHeight &&
        prevProps.container === nextProps.container;
});

VirtualList.propTypes = {
    InnerComponent: PropTypes.func,
    container: PropTypes.any,
    itemBuffer: PropTypes.number,
    itemHeight: PropTypes.number,
    items: PropTypes.array,
};

const getVisibleItemBounds = (list, container, items, itemHeight, itemBuffer) =>
{
    // early return if we can't calculate
    if (!container || !itemHeight || !items || items.length === 0)
        return undefined;

    // what the user can see
    const {innerHeight, clientHeight} = container;
    const viewHeight = innerHeight || clientHeight; // how many pixels are visible
    if (!viewHeight)
        return undefined;

    const viewTop = getElementTop(container); // top y-coordinate of viewport inside container
    const viewBottom = viewTop + viewHeight;

    const listTop = topFromWindow(list) - topFromWindow(container); // top y-coordinate of container inside window
    const listHeight = itemHeight * items.length;

    // visible list inside view
    const listViewTop = Math.max(0, viewTop - listTop); // top y-coordinate of list that is visible inside view
    const listViewBottom = Math.max(0, Math.min(listHeight, viewBottom - listTop)); // bottom y-coordinate of list that is visible inside view

    // visible item indexes
    const firstItemIndex = Math.max(0, Math.floor(listViewTop / itemHeight) - itemBuffer);
    const lastItemIndex = Math.min(items.length, Math.ceil(listViewBottom / itemHeight) + itemBuffer) - 1;

    return {firstItemIndex, lastItemIndex};
};

const topFromWindow = (element) =>
{
    if (typeof element === 'undefined' || !element)
        return 0;

    return (element.offsetTop || 0) + topFromWindow(element.offsetParent);
};

const getElementTop = (element) =>
{
    if (element.pageYOffset)
        return element.pageYOffset;

    if (element.document)
    {
        if (element.document.documentElement && element.document.documentElement.scrollTop)
            return element.document.documentElement.scrollTop;
        if (element.document.body && element.document.body.scrollTop)
            return element.document.body.scrollTop;

        return 0;
    }

    return element.scrollY || element.scrollTop || 0;
};

const throttleWithRAF = function (fn)
{
    let running = false;
    return () =>
    {
        if (running)
            return;

        running = true;
        window.requestAnimationFrame(() =>
        {
            fn.apply(this, arguments);
            running = false;
        });
    };
};

// based on: https://usehooks.com/useEventListener/
const useEventListener = (eventName, handler, element = window) =>
{
    const savedHandler = useRef();

    useEffect(() => void (savedHandler.current = handler), [handler]);

    useEffect(
        () =>
        {
            const eventListener = event => savedHandler.current(event);
            element.addEventListener(eventName, eventListener);
            return () => element.removeEventListener(eventName, eventListener);
        },
        [eventName, element] // Re-run if eventName or element changes
    );
};

[roeycohen]

also, here's a sample code on how to use it (I've extracted it from my project, hope it will help you although i'm using it with tables and not lists):

const innerTableComponent = useCallback(({partialList, style, listRef}) =>
      <div css={styleTableList(compact)}>
          <table style={style} ref={listRef}>
              {thead}
              <tbody>
                  {partialList.map(r => <ErrorBoundary key={r[rowIdCol]}><RowRenderer row={r} rowProps={rowProps}/></ErrorBoundary>)}
                  <tr style={{height: 'auto'}}/>
              </tbody>
          </table>
      </div>
    );

return <VirtualList
    items={_collection}
    itemHeight={50}
    itemBuffer={15}
    container={scrollParent || window}
    InnerComponent={innerTableComponent}
/>;

[roeycohen]

hi @mmontag, let me know if this code helped you... or if you have any comments.

[wuarmin]

Does it work with tbody?

[roeycohen]

hi @wuarmin, we're using it with Tables if that's what you're asking...

[wuarmin]

Thanks @roeycohen ! Yeah that's my question. I want to use react table and need a working virtualization for tbody, but I need to use html table markup too. WDYT? Best regards

[roeycohen]

hi @wuarmin, sorry for my late reply... please take a look on my comment from Sep 17, 2021 above... it's a sample with a table :)

[wuarmin]

Hey @roeycohen! Thanks. I tested your code, and I'm close to making it work. One question: I have a container with 400px height. In my Testcase I have 100 rows with height 26px, so table has a height of 2600px. If I scroll down, some upper rows (still in dom) are rendered above the viewport and so they are not visible: The padding-top of table has no effect on collapsed tables. I have to set border to separate, but that is no option for me. Do you have an idea, how to solve this?

Thanks!

[mmontag]

@roeycohen it didn't work for me since it looks like you changed the interface a bit. However, #78 works great without any codechange and would be nice to merge @developerdizzle.