1
|
|
|
var _ = require('underscore'); |
2
|
|
|
|
3
|
|
|
var React = require("react"); |
4
|
|
|
|
5
|
|
|
/** |
6
|
|
|
* VariableTable displays variable => value pairs in a table. It also provides a button |
7
|
|
|
* to transition to the editing stage. |
8
|
|
|
* |
9
|
|
|
* @param array variables Contains the list of key=>values |
10
|
|
|
* [ |
11
|
|
|
* { variable: key1, value: val1 }, |
12
|
|
|
* { variable: key2, value: val2 }, |
13
|
|
|
* ... |
14
|
|
|
* ] |
15
|
|
|
* @param function edit Handler for triggering a transition to editing. |
16
|
|
|
* @param bool showValues Set to false to hide value column. |
17
|
|
|
* @param bool showHeading Set to false to hide the header row. |
18
|
|
|
* @param string variableHeading Set the heading for the variable column. |
19
|
|
|
* @param string valueHeading Set the heading for the value column. |
20
|
|
|
*/ |
21
|
|
|
var VariableTable = React.createClass({ |
22
|
|
|
|
23
|
|
|
getDefaultProps: function() { |
24
|
|
|
return { |
25
|
|
|
showValues: true, |
26
|
|
|
showHeading: true, |
27
|
|
|
variableHeading: "Variable <small>(string)</small>", |
28
|
|
|
valueHeading: "Value <small>(string)</small>" |
29
|
|
|
}; |
30
|
|
|
}, |
31
|
|
|
|
32
|
|
|
render: function() { |
33
|
|
|
var self = this; |
34
|
|
|
|
35
|
|
|
var showStatusColumn = false; |
36
|
|
|
if (this.props.readonlyVariables && !_.isEmpty(this.props.readonlyVariables)) { |
37
|
|
|
showStatusColumn = true; |
38
|
|
|
} |
39
|
|
|
|
40
|
|
|
var readonlyRows = _.map(this.props.readonlyVariables, function(item) { |
41
|
|
|
return ( |
42
|
|
|
<VariableReadonlyTableRow |
43
|
|
|
key={item.variable + '_' + item.value} |
44
|
|
|
variable={item.variable} |
45
|
|
|
value={item.value} |
46
|
|
|
showValues={self.props.showValues} |
47
|
|
|
/> |
48
|
|
|
); |
49
|
|
|
}); |
50
|
|
|
|
51
|
|
|
var rows = _.map(this.props.variables, function(item) { |
52
|
|
|
return ( |
53
|
|
|
<VariableTableRow |
54
|
|
|
key={item.variable + '_' + item.value} |
55
|
|
|
variable={item.variable} |
56
|
|
|
value={item.value} |
57
|
|
|
showValues={self.props.showValues} |
58
|
|
|
showStatusColumn={showStatusColumn} |
59
|
|
|
/> |
60
|
|
|
); |
61
|
|
|
}); |
62
|
|
|
|
63
|
|
|
var valueHeading = null; |
64
|
|
|
if (this.props.showValues) { |
65
|
|
|
valueHeading = ( |
66
|
|
|
<th |
67
|
|
|
className="value" |
68
|
|
|
dangerouslySetInnerHTML={{__html:this.props.valueHeading}} |
|
|
|
|
69
|
|
|
/> |
70
|
|
|
); |
71
|
|
|
} |
72
|
|
|
|
73
|
|
|
var statusHeading = null; |
74
|
|
|
if (showStatusColumn === true) { |
75
|
|
|
statusHeading = <th className="status"></th>; |
76
|
|
|
} |
77
|
|
|
|
78
|
|
|
var heading = null; |
79
|
|
|
if (this.props.showHeading) { |
80
|
|
|
heading = ( |
81
|
|
|
<thead> |
82
|
|
|
<tr> |
83
|
|
|
<th |
84
|
|
|
className="variable" |
85
|
|
|
dangerouslySetInnerHTML={{__html:this.props.variableHeading}} |
|
|
|
|
86
|
|
|
/> |
87
|
|
|
{valueHeading} |
88
|
|
|
{statusHeading} |
89
|
|
|
</tr> |
90
|
|
|
</thead> |
91
|
|
|
); |
92
|
|
|
} |
93
|
|
|
|
94
|
|
|
return ( |
95
|
|
|
<div className="variables"> |
96
|
|
|
<div className="variables-actions variable-table-actions"> |
97
|
|
|
<button |
98
|
|
|
type="button" |
99
|
|
|
className="btn btn-primary" |
100
|
|
|
onClick={this.props.edit} |
101
|
|
|
> |
102
|
|
|
Edit |
103
|
|
|
</button> |
104
|
|
|
</div> |
105
|
|
|
<table className="variable-table table"> |
106
|
|
|
{heading} |
107
|
|
|
<tbody> |
108
|
|
|
{readonlyRows} |
109
|
|
|
{rows} |
110
|
|
|
</tbody> |
111
|
|
|
</table> |
112
|
|
|
</div> |
113
|
|
|
); |
114
|
|
|
} |
115
|
|
|
}); |
116
|
|
|
|
117
|
|
|
function VariableTableRow(props) { |
118
|
|
|
|
119
|
|
|
var value = null; |
120
|
|
|
if (props.showValues) { |
121
|
|
|
value = <td className="value">{props.value}</td>; |
122
|
|
|
} |
123
|
|
|
|
124
|
|
|
var status = null; |
125
|
|
|
if (props.showStatusColumn) { |
126
|
|
|
status = <td className="status text-center"></td>; |
127
|
|
|
} |
128
|
|
|
|
129
|
|
|
return ( |
130
|
|
|
<tr> |
131
|
|
|
<td className="variable">{props.variable}</td> |
132
|
|
|
{value} |
133
|
|
|
{status} |
134
|
|
|
</tr> |
135
|
|
|
); |
136
|
|
|
} |
137
|
|
|
|
138
|
|
|
module.exports = VariableTable; |
139
|
|
|
|
140
|
|
|
function VariableReadonlyTableRow(props) { |
141
|
|
|
var value = null; |
142
|
|
|
if (props.showValues) { |
143
|
|
|
value = <td className="value">{props.value}</td>; |
144
|
|
|
} |
145
|
|
|
|
146
|
|
|
return ( |
147
|
|
|
<tr> |
148
|
|
|
<td className="variable">{props.variable}</td> |
149
|
|
|
{value} |
150
|
|
|
<td className="status text-center"><i className="fa fa-lock"></i> |
151
|
|
|
</td> |
152
|
|
|
</tr> |
153
|
|
|
); |
154
|
|
|
} |
155
|
|
|
|