-
Notifications
You must be signed in to change notification settings - Fork 119
/
DetailsTable.jsx
111 lines (103 loc) · 2.52 KB
/
DetailsTable.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import { useState } from "react";
import { classNames, ButtonIcon } from "pi-ui";
import styles from "./DetailsTable.module.css";
import { TruncatedText, ExternalLink, ExternalButton } from "shared";
import { CopyToClipboardButton } from "buttons";
const ValueField = ({ data }) => {
const { value, copyable, truncate, href } = data;
const text = truncate ? (
<TruncatedText
text={value}
max={truncate}
showTooltip
tooltipClassName={styles.tooltipClassName}
/>
) : (
value
);
return (
<div
className={classNames(
styles.value,
copyable && styles.copyable,
href && styles.href
)}>
{copyable ? (
<>
<div className={styles.copyableText}>{text}</div>
<CopyToClipboardButton textToCopy={value} />
</>
) : href ? (
<>
<ExternalLink href={href} className={styles.link}>
{text}
</ExternalLink>
<ExternalButton
type="searchBlock"
className={styles.linkButton}
href={href}
ButtonComponent={ButtonIcon}
/>
</>
) : (
text
)}
</div>
);
};
const SubTable = ({ data }) => (
<>
<label>{data.label}:</label>
<div className={styles.secondaryGrid}>
{data.value.map((node, subIndex) => (
<Row key={subIndex + Math.random()} data={node} />
))}
</div>
</>
);
const Row = ({ data }) =>
!Array.isArray(data.value) ? (
<>
<label>{data.label}:</label>
<ValueField data={data} />
</>
) : (
<SubTable data={data} />
);
const DetailsTable = ({
data,
title,
expandable,
className,
headerClassName,
gridClassName
}) => {
const [showDetails, setShowDetails] = useState(!expandable);
const toggleDetailsVisibility = () => expandable && setShowDetails((b) => !b);
return (
<div className={className}>
<div
onClick={toggleDetailsVisibility}
className={classNames(
styles.header,
headerClassName,
showDetails && styles.active,
expandable && styles.expandable
)}>
{title}
{expandable && <div className={styles.arrow} />}
</div>
{showDetails && (
<div className={classNames(styles.grid, gridClassName)}>
{data?.map((node, index) => (
<Row key={index + Math.random()} data={node} />
))}
</div>
)}
</div>
);
};
DetailsTable.defaultProps = {
expandable: false
};
export default DetailsTable;