// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. // SPDX-License-Identifier: MIT-0 import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { CardDeck } from 'reactstrap'; import { CardItem } from './CardItem'; export class CardGrid extends Component { static DEFAULT_CARD_PER_ROW = 3; copyStyleWithFixedWidth = (existingStyle, width) => { return { ...existingStyle, flex: `0 0 ${width}px` } } render() { let gridContent = null; const {cards, cardPerRow, cardWidth, ...rest} = this.props; if(cardPerRow && cardWidth){ console.error('You can specify only cardPerRow or cardWidth. Default to rendering cardWidth only'); } if(cardWidth) { let cardItems = []; cards.forEach((card, index) => { let cardClassName = card.className || ''; cardClassName += ' mb-4'; const cardStyle = this.copyStyleWithFixedWidth(card.style, cardWidth); cardItems.push( ) }); gridContent = ( {cardItems} ) } else { const perRow = cardPerRow || CardGrid.DEFAULT_CARD_PER_ROW; let rows = []; let currRow = -1; cards.forEach((card, index) => { if(index % perRow === 0){ currRow += 1; rows.push([]) } rows[currRow].push( ) }); // CardDeck will expand last row to full width. This will mess up the card width that is auto adjusted by flex layout. // We fill dummy CardItem element in the last row to ensure that we have the same number of item per row. So the widths of all cards are equal. // TODO: Better rewrite this with CSS Grid. This is too hacky. const lastRow = rows[currRow]; while(lastRow.length < perRow){ lastRow.push(); } gridContent = rows.map((row, index) => { return ( {row} ) }); } return (
{ gridContent }
) } } CardGrid.propTypes = { cards : PropTypes.array, cardPerRow : PropTypes.number };