-
Notifications
You must be signed in to change notification settings - Fork 11.7k
/
FooterRow.tsx
90 lines (76 loc) · 2.54 KB
/
FooterRow.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
86
87
88
89
90
import React from 'react';
import { ColumnInstance, HeaderGroup } from 'react-table';
import { selectors } from '@grafana/e2e-selectors';
import { useStyles2 } from '../../themes';
import { EmptyCell, FooterCell } from './FooterCell';
import { getTableStyles, TableStyles } from './styles';
import { FooterItem } from './types';
export interface FooterRowProps {
totalColumnsWidth: number;
footerGroups: HeaderGroup[];
footerValues: FooterItem[];
isPaginationVisible: boolean;
isCountAllSet: boolean;
height: number;
}
export const FooterRow = (props: FooterRowProps) => {
const { totalColumnsWidth, footerGroups, height, isPaginationVisible, isCountAllSet } = props;
const e2eSelectorsTable = selectors.components.Panels.Visualization.Table;
const tableStyles = useStyles2(getTableStyles);
return (
<div
style={{
position: isPaginationVisible ? 'relative' : 'absolute',
width: totalColumnsWidth ? `${totalColumnsWidth}px` : '100%',
bottom: '0px',
}}
>
{footerGroups.map((footerGroup: HeaderGroup) => {
const { key, ...footerGroupProps } = footerGroup.getFooterGroupProps();
return (
<div
className={tableStyles.tfoot}
{...footerGroupProps}
key={key}
data-testid={e2eSelectorsTable.footer}
style={height ? { height: `${height}px` } : undefined}
>
{footerGroup.headers.map((column: ColumnInstance) =>
renderFooterCell(column, tableStyles, height, isCountAllSet)
)}
</div>
);
})}
</div>
);
};
function renderFooterCell(column: ColumnInstance, tableStyles: TableStyles, height?: number, isCountAllSet?: boolean) {
const footerProps = column.getHeaderProps();
if (!footerProps) {
return null;
}
footerProps.style = footerProps.style ?? {};
footerProps.style.position = 'absolute';
footerProps.style.justifyContent = (column as any).justifyContent;
if (height) {
footerProps.style.height = height;
}
return (
<div className={tableStyles.headerCell} {...footerProps}>
{column.render('Footer')}
</div>
);
}
export function getFooterValue(index: number, footerValues?: FooterItem[], isCountAllSet?: boolean) {
if (footerValues === undefined) {
return EmptyCell;
}
if (isCountAllSet) {
const count = footerValues[index];
if (typeof count !== 'string') {
return EmptyCell;
}
return FooterCell({ value: [{ Count: count }] });
}
return FooterCell({ value: footerValues[index] });
}