-
Notifications
You must be signed in to change notification settings - Fork 12
/
index.tsx
147 lines (136 loc) · 4.22 KB
/
index.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
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
// FileTable Component
/**
* Table to render files and their information.
* Opens a new page with file contents on row click
* @packageDocumentation
*/
import React, { useRef } from 'react';
import { ColumnProps, AutoSizer } from 'react-virtualized';
import clsx from 'clsx';
import styled from 'styled-components';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import BaseTable from '../../../InfiniteTable/BaseTable';
import * as file_pb from '../../../../api/file_pb';
const TableContainer = styled.div`
width: 100%;
height: 100%;
flex: 1;
`;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
flexContainer: {
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
},
tableRow: {
cursor: 'pointer',
outline: 'none',
minWidth: '0px',
flexGrow: 1,
},
tableRowHover: {
'&:hover': {
backgroundColor: theme.palette.grey[200],
},
},
tableCell: {
flexGrow: 1,
},
tableHeader: {
fontWeight: 550,
fontSize: 16,
},
})
);
const columns: ColumnProps[] = [
{ dataKey: 'name', label: 'Artifact Name', width: 400 },
{ dataKey: 'type', label: 'Type', width: 100 },
{ dataKey: 'size', label: 'File Size', width: 100 },
];
/** Data rendered by the file table */
export interface Data {
name: string;
type: string;
size: number;
}
/** FileTable Props */
interface Props {
/** Currently selected resource's name whose files are viewable*/
selectedName: string;
/** Currently selected resource's type whose files are viewable*/
selectedType: string;
/** Array of files to be rendered in the table */
files: Array<file_pb.File>;
/** Table rows are being loaded if true */
isLoadingTableRows: boolean;
}
/**
*
* @param file File whose information will be parsed into table readable data
*/
const parseFileTableData = (file: file_pb.File): Data => {
const name = file.getUid();
const type = file.getContentType();
const size = file.getLength().getValue();
return { name, type, size };
};
/** FileTable Component */
export const FileTable: React.FC<Props> = ({
files,
selectedName,
isLoadingTableRows,
}) => {
const classes = useStyles();
const rows = files
.filter((file) => !file.getHidden())
.map((file) => parseFileTableData(file));
const ref = useRef<HTMLDivElement>();
const cellClass = clsx(classes.tableCell, classes.flexContainer);
const headerClass = clsx(
classes.tableCell,
classes.flexContainer,
classes.tableHeader
);
const getRowClassName = ({ index }) => {
return clsx(classes.tableRow, classes.flexContainer, {
[classes.tableRowHover]: index !== -1,
});
};
const getFileURL = (fileUid: string) => {
return (
window.location.origin +
`/file?prefix=${selectedName}&fileName=${fileUid}`
);
};
return (
<TableContainer ref={ref} id={'FileTable'}>
<AutoSizer>
{({ height, width }) => (
<BaseTable
columns={columns}
width={width}
height={height}
rowHeight={48}
headerHeight={48}
rowCount={files.length}
onRowsRendered={() => {}}
registerChild={null}
rowGetter={({ index }) => rows[index]}
onRowClick={({ index }) => {
window.open(
getFileURL(files[index].getUid()),
'_blank'
);
}}
headerClass={headerClass}
cellClass={cellClass}
rowClassName={getRowClassName}
isNextPageLoading={isLoadingTableRows}
/>
)}
</AutoSizer>
</TableContainer>
);
};
export default FileTable;