Support for detecting what range of results are displayed by the list

Thank you for this awesome set of Components ❤️. I have the following feature request, “Support for detecting what range of results are displayed by the list”

Scenario

I am using the components at the moment to render a large finite list. I have a user base that is used to pagination and they are comfortable with how it helps them orient themselves on what they are viewing, the selected page let’s them know where they are within the list.

In case of an infinite List displaying a large finite list I understand that I can display them the total count and the Scroll bar position helps them orient themselves on the relative position in the list,

In order to address the change aversion, I want to be able to derive currentPageNumber out of the visible items in the List

<ItemListPageInfo>{currentPageNumber} of {this.props.itemList.total}</ItemListPageInfo>

Code example

Here is the complete code relevant to this for context.

<ItemListContainer>
    <InfiniteScrollWrapper>
        <InfiniteLoader
            isRowLoaded={this.isRowLoaded}
            loadMoreRows={this.loadMoreRows}
            rowCount={this.props.itemList.total}
            minimumBatchSize={100}
            threshold={10}
        >
            {({ onRowsRendered, registerChild }) => (
                <AutoSizer disableWidth>
                    {({ height }) => (
                        <List
                            ref={registerChild}
                            height={height}
                            onRowsRendered={onRowsRendered}
                            rowCount={this.props.itemList.total}
                            estimatedRowSize={92}
                            noRowsRenderer={this.noRowsRenderer}
                            overscanRowCount={10}
                            rowHeight={92}
                            rowRenderer={this.rowRenderer}
                            width={256}
                        />
                    )}
                </AutoSizer>
            )}
        </InfiniteLoader>
    </InfiniteScrollWrapper>
    <ItemListFooter>
        <ItemCreateButton>+ Create Item</ItemCreateButton>
        <ItemListPageInfo>{currentPageNumber} of {this.props.itemList.total}</ItemListPageInfo>
    </ItemListFooter>
</ItemListContainer>

Interface suggestion

Add a new public method for List component

getVisibleItemsInfo({ excludePartiallyVisibleItems: ?boolean}) which will provide information about the currently displayed visible Items Return Information {startIndex:number, endIndex:number} Which can be used to render information to the user like

• Viewing items 10 to 20
• 10 of 20123

[soneymathew]

@k-mada https://lodash.com/docs/4.17.10#wrap

[soneymathew]

Ah my bad I didn’t think that was an API, gotta read the code better ☹️ thanks a lot !

So wrap the function

    onRowsRendered={wrap(
        onRowsRendered,
        this.wrappedOnRowsRendered,
    )}

Sniff for changes to calculate page number

    wrappedOnRowsRendered = (onRowsRendered, ref) => {
        const { startIndex, stopIndex } = ref;
        console.log(
            `StartIndex: ${startIndex} - StopIndex: ${stopIndex}`,
        );
        // put it in the state or calculate pagenumber here
        return onRowsRendered(ref);
    };