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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
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) {
return true;
// Further optimization could be done here
// by calling forceUpdate on flow updates, selection changes and column changes.
//return (
//(this.props.columns.length !== nextProps.columns.length) ||
//(this.props.selected !== nextProps.selected)
//);
}
});
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 ROW_HEIGHT = 32;
var FlowTable = React.createClass({
mixins: [StickyHeadMixin, AutoScrollMixin],
getInitialState: function () {
return {
columns: all_columns,
start: 0,
stop: 0
};
},
componentWillMount: function () {
if (this.props.view) {
this.props.view.addListener("add update remove recalculate", this.onChange);
}
},
componentWillReceiveProps: function (nextProps) {
if (nextProps.view !== this.props.view) {
if (this.props.view) {
this.props.view.removeListener("add update remove recalculate");
}
nextProps.view.addListener("add update remove recalculate", this.onChange);
}
},
componentDidMount: function () {
this.onScroll();
},
onScroll: function () {
this.adjustHead();
var viewport = this.getDOMNode();
var top = viewport.scrollTop;
var height = viewport.offsetHeight;
var start = Math.floor(top / ROW_HEIGHT);
var stop = start + Math.ceil(height / ROW_HEIGHT);
this.setState({
start: start,
stop: stop
});
},
onChange: function () {
console.log("onChange");
this.forceUpdate();
},
scrollIntoView: function (flow) {
// Now comes the fun part: Scroll the flow into the view.
var viewport = this.getDOMNode();
var thead_height = this.refs.body.getDOMNode().offsetTop;
var flow_top = (this.props.view.index(flow) * ROW_HEIGHT) + thead_height;
var viewport_top = viewport.scrollTop;
var viewport_bottom = viewport_top + viewport.offsetHeight;
var flow_bottom = flow_top + ROW_HEIGHT;
// Account for pinned thead
console.log("scrollInto", flow_top, flow_bottom, viewport_top, viewport_bottom, thead_height);
if (flow_top - thead_height < viewport_top) {
viewport.scrollTop = flow_top - thead_height;
} else if (flow_bottom > viewport_bottom) {
viewport.scrollTop = flow_bottom - viewport.offsetHeight;
}
},
render: function () {
var space_top = 0, space_bottom = 0, fix_nth_row = null;
var rows = [];
if (this.props.view) {
var flows = this.props.view.flows;
var max = Math.min(flows.length, this.state.stop);
console.log("render", this.props.view.flows.length, this.state.start, max - this.state.start, flows.length - this.state.stop);
for (var i = this.state.start; i < max; i++) {
var flow = flows[i];
var selected = (flow === this.props.selected);
rows.push(
<FlowRow key={flow.id}
ref={flow.id}
flow={flow}
columns={this.state.columns}
selected={selected}
selectFlow={this.props.selectFlow}
/>
);
}
space_top = this.state.start * ROW_HEIGHT;
space_bottom = Math.max(0, flows.length - this.state.stop) * ROW_HEIGHT;
if(this.state.start % 2 === 1){
fix_nth_row = <tr></tr>;
}
}
return (
<div className="flow-table" onScroll={this.onScroll}>
<table>
<FlowTableHead ref="head"
columns={this.state.columns}/>
<tbody ref="body">
<tr style={{height: space_top}}></tr>
{ fix_nth_row }
{rows}
<tr style={{height: space_bottom}}></tr>
</tbody>
</table>
</div>
);
}
});
|
