blob: 2baf728fabf152e3cc9d76fec45262e13c4c92d0 (
plain)
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
|
var FlowRow = React.createClass({
render: function(){
var flow = this.props.flow;
var columns = this.props.columns.map(function(Column){
return <Column key={Column.displayName} flow={flow}/>;
}.bind(this));
var className = "";
if(this.props.selected){
className += "selected";
}
return (
<tr className={className} onClick={this.props.selectFlow.bind(null, flow)}>
{columns}
</tr>);
},
shouldComponentUpdate: function(nextProps){
var isEqual = (
this.props.columns.length === nextProps.columns.length &&
this.props.selected === nextProps.selected &&
this.props.flow.response === nextProps.flow.response);
return !isEqual;
}
});
var FlowTableHead = React.createClass({
render: function(){
var columns = this.props.columns.map(function(column){
return column.renderTitle();
}.bind(this));
return <thead><tr>{columns}</tr></thead>;
}
});
var FlowTableBody = React.createClass({
render: function(){
var rows = this.props.flows.map(function(flow){
var selected = (flow == this.props.selected);
return <FlowRow key={flow.id}
ref={flow.id}
flow={flow}
columns={this.props.columns}
selected={selected}
selectFlow={this.props.selectFlow}
/>;
}.bind(this));
return <tbody>{rows}</tbody>;
}
});
var FlowTable = React.createClass({
mixins: [StickyHeadMixin, AutoScrollMixin],
getInitialState: function () {
return {
columns: all_columns
};
},
scrollIntoView: function(flow){
// Now comes the fun part: Scroll the flow into the view.
var viewport = this.getDOMNode();
var flowNode = this.refs.body.refs[flow.id].getDOMNode();
var viewport_top = viewport.scrollTop;
var viewport_bottom = viewport_top + viewport.offsetHeight;
var flowNode_top = flowNode.offsetTop;
var flowNode_bottom = flowNode_top + flowNode.offsetHeight;
// Account for pinned thead by pretending that the flowNode starts
// -thead_height pixel earlier.
flowNode_top -= this.refs.body.getDOMNode().offsetTop;
if(flowNode_top < viewport_top){
viewport.scrollTop = flowNode_top;
} else if(flowNode_bottom > viewport_bottom) {
viewport.scrollTop = flowNode_bottom - viewport.offsetHeight;
}
},
render: function () {
return (
<div className="flow-table" onScroll={this.adjustHead}>
<table>
<FlowTableHead ref="head"
columns={this.state.columns}/>
<FlowTableBody ref="body"
flows={this.props.flows}
selected={this.props.selected}
selectFlow={this.props.selectFlow}
columns={this.state.columns}/>
</table>
</div>
);
}
});
|
