/
row.tsx
85 lines (70 loc) 路 2.07 KB
/
row.tsx
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
74
75
76
77
78
79
80
81
82
83
84
85
import React from "react";
import { T } from "renderer/t";
import { map, each } from "underscore";
import Icon from "../basics/icon";
import TimeAgo from "../basics/time-ago";
import { Collection } from "common/butlerd/messages";
import { HoverCover } from "../basics/cover";
class CollectionRow extends React.PureComponent<IProps> {
render() {
const { collection } = this.props;
const { title } = collection;
const games = map(collection.collectionGames, cg => cg.game);
const gameItems = map(games, (game, index) => {
const { coverUrl, stillCoverUrl } = game;
return (
<HoverCover
key={game.id}
className="fresco--cover"
coverUrl={coverUrl}
stillCoverUrl={stillCoverUrl}
gameId={game.id}
/>
);
});
const cols: JSX.Element[] = [];
each(gameItems, (item, i) => {
cols.push(item);
});
const itemCount = collection.gamesCount;
const { index, rowHeight, interiorPadding, globalPadding } = this.props;
const translateY = Math.round(
globalPadding + index * (rowHeight + interiorPadding)
);
const style: React.CSSProperties = {
transform: `translateY(${translateY}px)`,
};
return (
<div
data-collection-id={collection.id}
className="grid--row"
style={style}
>
<section className="title">{title}</section>
<section className="info">
<Icon icon="tag" />
<span className="total">
{T(["collection.summary", { itemCount }])}
</span>
<span className="spacer" />
<Icon icon="history" />
{T([
"collection_grid.item.updated_at",
{
time_ago: <TimeAgo key="timeago" date={collection.updatedAt} />,
},
])}
</section>
<section className="fresco">{cols}</section>
</div>
);
}
}
export default CollectionRow;
interface IProps {
collection: Collection;
index: number;
rowHeight: number;
interiorPadding: number;
globalPadding: number;
}