3

I have been trying this code and it just does not work.

With AutoSizer, Row does not gets rendered.

It only starts working when I remove AutoSizer from the code.

I don't know what is wrong with the code and the docs is not helping either.

Full code:

import React, { Component } from 'react';
import Card from './Card';
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";
import memoize from "memoize-one";

const CARD_SIZE = 340;

class CardList extends Component {

    getItemData = memoize((itemsPerRow, locations) => ({
        itemsPerRow,
        locations
    }))

    render() {

        const { locations } = this.props;
        console.log(locations.length)


        const Row = ({ data, index, style }) => {
            const { itemsPerRow, locations } = data;
            console.log(data)

            const items = [];
            const fromIndex = index * itemsPerRow;
            const toIndex = Math.min(fromIndex + itemsPerRow, locations.length);

            for (let i = fromIndex; i < toIndex; i++) {
                items.push(
                    <Card key={i} location={locations[i]} />
                    );
            }
            return (
                <div className={'flex-auto'} style={style}>
                {items}
                </div>
                );
        }

        return (
            <div style={{ marginTop: "10px", height: "80%" }}>
            <AutoSizer>
            {
                ({ height, width }) => {
                    const itemsPerRow = Math.floor(width / CARD_SIZE) || 1;
                    const rowCount = Math.ceil(locations.length / itemsPerRow);
                    const itemData = this.getItemData(itemsPerRow, locations);

                    return (
                        <div>
                        <List
                        height={height}
                        itemCount={rowCount}
                        itemData={itemData}
                        itemSize={CARD_SIZE}
                        width={width}
                        >
                        { Row }
                        </List>
                        </div>
                        );
                }
            }
            </AutoSizer> 
            </div>
            );
    }
}

P.S. locations props is an array of images

JKhan
  • 1,157
  • 4
  • 14
  • 23

2 Answers2

3

I tried removing "react-virtualized-auto-sizer" and installed "react-virtualized"

Then, 

import {AutoSizer} from 'react-virtualized';

and it works!!

But I don't want to keep react-window and react-virtualized together.

I hope the author of this package will help in fixing this problem.

JKhan
  • 1,157
  • 4
  • 14
  • 23
  • Consider raising a ticket on https://github.com/bvaughn/react-virtualized/ or https://github.com/bvaughn/react-window/? – evolutionxbox May 22 '19 at 10:40
3

Maybe it's because of height incompatibility. You can check with :

<div style={{ flex: '1 1 auto' , height: '100vh'}}>
            <AutoSizer>
                {({ height, width }) => {
                   return (
                        <FixedSizeList
                            className="List"
                            height={height}
                            itemCount={1000}
                            itemSize={35}
                            width={width}
                        >
                            {Row}
                        </FixedSizeList>
                    )
                }}
            </AutoSizer>
            </div>
Shahnad S
  • 983
  • 10
  • 17