-
Notifications
You must be signed in to change notification settings - Fork 63
/
index.jsx
88 lines (80 loc) · 2.54 KB
/
index.jsx
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
86
87
88
import PropTypes from 'prop-types';
import React from 'react';
import { Card, CardBody, Table } from '../../../../design';
import AnimatedChevron from '../../../../design/input/chevron/Animated';
import TableRow from './Row';
function LayoutTable(
{
columns,
data,
id,
sorting,
translations,
},
) {
let rows = data[id];
if (rows === undefined) {
rows = [];
}
return (
<Card>
<CardBody>
<Table striped hover responsive>
<thead>
<tr>
{columns.map((column) => {
let sortingDirection = 'neutral';
if (sorting.column === column.id) {
sortingDirection = sorting.direction === 'ASC' ? 'down' : 'up';
}
return (
<th key={`table-head-column-${column.id}`}>
<AnimatedChevron direction={sortingDirection} />
{column.title}
</th>
);
})}
</tr>
</thead>
<tbody>
{rows.map(row => (
<TableRow
key={`table-body-row-${row.id}`}
columns={columns}
data={row}
/>
))}
</tbody>
</Table>
{data.size
? (
<span>
{`${translations['table.showing']} ${data.size}/${data.totalSize}`}
</span>
)
: undefined}
</CardBody>
</Card>
);
}
LayoutTable.propTypes = {
columns: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.string,
title: PropTypes.string,
})).isRequired,
translations: PropTypes.shape({
'table.showing': PropTypes.string,
}).isRequired,
data: PropTypes.shape({}),
id: PropTypes.string,
sorting: PropTypes.shape({
column: PropTypes.string,
direction: PropTypes.oneOf(['ASC', 'DESC']),
}),
};
LayoutTable.defaultProps = {
data: [],
id: undefined,
sorting: undefined,
};
export default LayoutTable;