blob: 47576d70063f567bd93f817ab4a69d5815555654 (
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
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
|
/** @jsx React.DOM */
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>);
}
});
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 onKeyDown={this.props.onKeyDown} tabIndex="0">{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;
}
},
selectFlowRelative: function(i){
var index;
if(!this.props.selected){
if(i > 0){
index = this.props.flows.length-1;
} else {
index = 0;
}
} else {
index = _.findIndex(this.props.flows, function(f){
return f === this.props.selected;
}.bind(this));
index = Math.min(Math.max(0, index+i), this.props.flows.length-1);
}
this.props.selectFlow(this.props.flows[index]);
},
onKeyDown: function(e){
switch(e.keyCode){
case Key.DOWN:
this.selectFlowRelative(+1);
break;
case Key.UP:
this.selectFlowRelative(-1);
break;
case Key.PAGE_DOWN:
this.selectFlowRelative(+10);
break;
case Key.PAGE_UP:
this.selectFlowRelative(-10);
break;
case Key.ESC:
this.props.selectFlow(null);
break;
default:
console.debug("keydown", e.keyCode);
return;
}
return false;
},
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}
onKeyDown={this.onKeyDown}/>
</table>
</div>
);
}
});
|
