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
|
import React from 'react'
import { formatName } from 'app/utils'
const __HR__ = '__HR__'
export function TableObject({ tag, object, order, summary }) {
if (!object) return null
if (object === 'loading') {
return <div className='tableObject loading'>{tag}{': Loading'}</div>
}
if (object.err) {
return <div className='tableObject error'>{tag}{' Error: '}{object.err}</div>
}
let objects = Object.keys(object)
if (order) {
const grouped = objects.reduce((a, b) => {
const index = order.indexOf(b)
if (index !== -1) {
a.order.push([index, b])
} else {
a.alpha.push(b)
}
return a
}, { order: [], alpha: [] })
objects = grouped.order
.sort((a, b) => a[0] - b[0])
.map(([i, s]) => s)
if (!summary) {
objects = objects
// .concat([__HR__])
.concat(grouped.alpha.sort())
}
} else {
objects = objects.sort()
}
return (
<div>
{tag && <h3 className='tt'>{tag}</h3>}
<table className={'tableObject ' + tag}>
<tbody>
{objects.map((key, i) => (
<TableRow key={key + '_' + i} name={key} value={object[key]} />
))}
</tbody>
</table>
</div>
)
}
export function TableArray({ tag, list }) {
if (!list) return null
return (
<div>
{tag && <h3>{tag}</h3>}
<table className={'tableArray ' + tag}>
<tbody>
{list.map((value, i) => (
<tr key={tag + '_' + i}>
<TableCell value={value} />
</tr>
))}
</tbody>
</table>
</div>
)
}
export function TableTuples({ tag, list }) {
if (!list) return null
return (
<div>
{tag && <h3>{tag}</h3>}
<table className={'tableTuples ' + tag}>
<tbody>
{list.map(([key, ...values], i) => (
<tr key={tag + '_' + i}>
<th>{formatName(key)}</th>
{values.map((value, j) => (
<TableCell key={i + '_' + j} value={value} />
))}
</tr>
))}
</tbody>
</table>
</div>
)
}
export function TableRow({ name, value }) {
if (name === __HR__) {
return (
<tr>
<th className='tr'>
<hr />
</th>
</tr>
)
}
return (
<tr>
<th>{formatName(name)}</th>
<TableCell name={name} value={value} />
</tr>
)
}
export function TableCell({ value }) {
if (value && typeof value === 'object') {
if (value._raw) {
value = value.value
} else if (value.length) {
value = <TableArray nested tag={''} list={value} />
} else {
value = <TableObject nested tag={''} object={value} />
}
}
if (typeof value === 'boolean') {
return <td>{value ? <Pill type='yes' /> : <Pill type='no' />}</td>
}
return (
<td>{value}</td>
)
}
export const Pill = ({ color, type }) => (
<div className={'pill ' + type} style={{ backgroundColor: color }}>{type}</div>
)
|
