sizer.tsx

import * as React from 'react';
import { InfiniteLoader, AutoSizer, GridProps, Dimensions, IndexRange, Index } from 'react-virtualized';
import ProductLoader from './ProductLoader';
import ProductFilters from './ProductFilters';

export interface Props extends GridProps {
  limit: number;
  cardWidth: number;
  cardHeight: number;
  padding: number;
  maxWidth: number;
  productCount: number;
  requestProducts(t1?: Query): Action<void>;
}

export default class Products extends React.PureComponent<Props> {
  static defaultProps: Partial<Props> = {
    limit: 25,
    cardWidth: 280,
    cardHeight: 400,
    padding: 24,
    maxWidth: 2500,
    productCount: 0,
    overscanRowCount: 10,
  };

  getColumnCount(width: number): number {
    const { padding, maxWidth, cardWidth, productCount } = this.props;
    const effectiveWidth = Math.min(width, maxWidth);
    return Math.floor((effectiveWidth - padding) / (cardWidth + padding));
  }

  render() {
    const { maxWidth, cardWidth, cardHeight, padding, productCount, ...props } = this.props;
    return (
      <AutoSizer>
        {({ height, width }) => {
          const columnCount = this.getColumnCount(width);
          const rowCount = Math.max(Math.ceil(productCount / columnCount), 1);
          return (
            <ProductLoader
              {...this.props}
              width={width}
              height={height}
              rowCount={rowCount}
              columnCount={columnCount}
              columnWidth={cardWidth + padding}
              rowHeight={cardHeight + padding}
            />
          );
        }}
      </AutoSizer>
    )
  }
}