summaryTableHeader.js
3.62 KB
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
const React = require('react');
function getSortDetails(sortKey, activeSort) {
let newSort = { sortKey, order: 'desc' };
let sortClass = '';
if (activeSort && activeSort.sortKey === sortKey) {
sortClass = 'sorted';
if (activeSort.order === 'desc') {
sortClass += '-desc';
newSort.order = 'asc';
} else {
if (sortKey !== 'file') {
newSort = { sortKey: 'file', order: 'desc' };
}
}
}
return {
newSort,
sortClass
};
}
function SummaryTableHeaderCell({ name, onSort, sortKey, activeSort }) {
const { newSort, sortClass } = getSortDetails(sortKey, activeSort);
return (
<th
className={'sortable headercell ' + sortClass}
onClick={() => onSort(newSort)}
>
{name}
<span className="sorter" />
</th>
);
}
function FileHeaderCell({ onSort, activeSort }) {
const { newSort, sortClass } = getSortDetails('file', activeSort);
return (
<th
className={'sortable file ' + sortClass}
onClick={() => onSort(newSort)}
>
File
<span className="sorter" />
</th>
);
}
function SubHeadings({ sortKeyPrefix, onSort, activeSort }) {
return (
<>
<SummaryTableHeaderCell
name="%"
onSort={onSort}
sortKey={sortKeyPrefix + '.pct'}
activeSort={activeSort}
/>
<th className="headercell"></th>
<SummaryTableHeaderCell
name="Covered"
onSort={onSort}
sortKey={sortKeyPrefix + '.covered'}
activeSort={activeSort}
/>
<SummaryTableHeaderCell
name="Total"
onSort={onSort}
sortKey={sortKeyPrefix + '.total'}
activeSort={activeSort}
/>
</>
);
}
module.exports = function SummaryTableHeader({
onSort,
activeSort,
metricsToShow
}) {
return (
<thead>
<tr className="topheading">
<th></th>
{metricsToShow.statements && <th colSpan={4}>Statements</th>}
{metricsToShow.branches && <th colSpan={4}>Branches</th>}
{metricsToShow.functions && <th colSpan={4}>Functions</th>}
{metricsToShow.lines && <th colSpan={4}>Lines</th>}
</tr>
<tr className="subheading">
<FileHeaderCell onSort={onSort} activeSort={activeSort} />
{metricsToShow.statements && (
<SubHeadings
sortKeyPrefix="statements"
onSort={onSort}
activeSort={activeSort}
/>
)}
{metricsToShow.branches && (
<SubHeadings
sortKeyPrefix="branches"
onSort={onSort}
activeSort={activeSort}
/>
)}
{metricsToShow.functions && (
<SubHeadings
sortKeyPrefix="functions"
onSort={onSort}
activeSort={activeSort}
/>
)}
{metricsToShow.lines && (
<SubHeadings
sortKeyPrefix="lines"
onSort={onSort}
activeSort={activeSort}
/>
)}
</tr>
</thead>
);
};