forked from microsoft/pxt
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdebuggerTable.tsx
More file actions
55 lines (48 loc) · 1.97 KB
/
debuggerTable.tsx
File metadata and controls
55 lines (48 loc) · 1.97 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
import * as React from "react";
export interface DebuggerTableProps {
header: string;
frozen?: boolean;
}
export class DebuggerTable extends React.Component<DebuggerTableProps> {
render() {
return <div className="ui varExplorer">
<div className="ui variableTableHeader">
{this.props.header}
</div>
<div className={`ui segment debugvariables ${this.props.frozen ? "frozen" : ""} ui collapsing basic striped table`}>
{this.props.children}
</div>
</div>
}
}
export interface DebuggerTableRowProps {
leftText: string;
rightText: string;
refID?: string | number;
icon?: string;
rightTitle?: string
rightClass?: string;
leftTitle?: string;
leftClass?: string;
depth?: number;
rowClass?: string;
onClick?: (e: React.SyntheticEvent<HTMLDivElement>, component: DebuggerTableRow) => void;
}
export class DebuggerTableRow extends React.Component<DebuggerTableRowProps> {
render() {
return <div role="listitem" className={`item ${this.props.rowClass || ""}`} onClick={this.props.onClick ? this.clickHandler : undefined}>
<div className="variableAndValue">
<div className={`variable varname ${this.props.leftClass || ""}`} title={this.props.leftTitle} style={this.props.depth ? { marginLeft: (this.props.depth * 0.75) + "em" } : undefined}>
{ <i className={`ui icon small ${this.props.icon || "invisible"}`} /> }
<span>{this.props.leftText}</span>
</div>
<div className="variable detail" style={{ padding: 0.2 }} title={this.props.rightTitle}>
<span className={`varval ${this.props.rightClass || ""}`}>{this.props.rightText}</span>
</div>
</div>
</div>
}
protected clickHandler = (e: React.SyntheticEvent<HTMLDivElement>) => {
if (this.props.onClick) this.props.onClick(e, this);
}
}