blob: ab2ff05cd4e5dbb7505c18a7c1c5e387258350e4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
import {DSCard, PlaceholderDSCard} from "../DSCard/DSCard.jsx";
import {DSEmptyState} from "../DSEmptyState/DSEmptyState.jsx";
import React from "react";
export class CardGrid extends React.PureComponent {
renderCards() {
const recs = this.props.data.recommendations.slice(0, this.props.items);
const cards = [];
for (let index = 0; index < this.props.items; index++) {
const rec = recs[index];
cards.push(!rec || rec.placeholder ? (
<PlaceholderDSCard key={`dscard-${index}`} />
) : (
<DSCard
key={`dscard-${index}`}
pos={rec.pos}
campaignId={rec.campaign_id}
image_src={rec.image_src}
raw_image_src={rec.raw_image_src}
title={rec.title}
excerpt={rec.excerpt}
url={rec.url}
id={rec.id}
type={this.props.type}
context={rec.context}
dispatch={this.props.dispatch}
source={rec.domain}
pocket_id={rec.pocket_id}
bookmarkGuid={rec.bookmarkGuid} />
));
}
let divisibility = ``;
if (this.props.items % 4 === 0) {
divisibility = `divisible-by-4`;
} else if (this.props.items % 3 === 0) {
divisibility = `divisible-by-3`;
}
return (
<div className={`ds-card-grid ds-card-grid-${this.props.border} ds-card-grid-${divisibility}`}>
{cards}
</div>
);
}
render() {
const {data} = this.props;
// Handle a render before feed has been fetched by displaying nothing
if (!data) {
return null;
}
// Handle the case where a user has dismissed all recommendations
const isEmpty = data.recommendations.length === 0;
return (<div>
<div className="ds-header">{this.props.title}</div>
{isEmpty ?
<div className="ds-card-grid empty"><DSEmptyState /></div> :
this.renderCards()
}
</div>);
}
}
CardGrid.defaultProps = {
border: `border`,
items: 4, // Number of stories to display
};
|
