Skip to content

Instantly share code, notes, and snippets.

@AlexFrazer
Created April 20, 2018 18:52
Embed
What would you like to do?
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>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment