diff options
Diffstat (limited to 'web/src/js/components/flowtable.jsx.js')
-rw-r--r-- | web/src/js/components/flowtable.jsx.js | 56 |
1 files changed, 29 insertions, 27 deletions
diff --git a/web/src/js/components/flowtable.jsx.js b/web/src/js/components/flowtable.jsx.js index 2baf728f..6b56e512 100644 --- a/web/src/js/components/flowtable.jsx.js +++ b/web/src/js/components/flowtable.jsx.js @@ -1,11 +1,11 @@ var FlowRow = React.createClass({ - render: function(){ + render: function () { var flow = this.props.flow; - var columns = this.props.columns.map(function(Column){ + var columns = this.props.columns.map(function (Column) { return <Column key={Column.displayName} flow={flow}/>; }.bind(this)); var className = ""; - if(this.props.selected){ + if (this.props.selected) { className += "selected"; } return ( @@ -13,35 +13,37 @@ var FlowRow = React.createClass({ {columns} </tr>); }, - shouldComponentUpdate: function(nextProps){ + shouldComponentUpdate: function (nextProps) { var isEqual = ( - this.props.columns.length === nextProps.columns.length && - this.props.selected === nextProps.selected && - this.props.flow.response === nextProps.flow.response); + 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){ + render: function () { + var columns = this.props.columns.map(function (column) { return column.renderTitle(); }.bind(this)); - return <thead><tr>{columns}</tr></thead>; + return <thead> + <tr>{columns}</tr> + </thead>; } }); var FlowTableBody = React.createClass({ - render: function(){ - var rows = this.props.flows.map(function(flow){ + 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} - />; + ref={flow.id} + flow={flow} + columns={this.props.columns} + selected={selected} + selectFlow={this.props.selectFlow} + />; }.bind(this)); return <tbody>{rows}</tbody>; } @@ -55,7 +57,7 @@ var FlowTable = React.createClass({ columns: all_columns }; }, - scrollIntoView: function(flow){ + 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(); @@ -68,9 +70,9 @@ var FlowTable = React.createClass({ // -thead_height pixel earlier. flowNode_top -= this.refs.body.getDOMNode().offsetTop; - if(flowNode_top < viewport_top){ + if (flowNode_top < viewport_top) { viewport.scrollTop = flowNode_top; - } else if(flowNode_bottom > viewport_bottom) { + } else if (flowNode_bottom > viewport_bottom) { viewport.scrollTop = flowNode_bottom - viewport.offsetHeight; } }, @@ -79,14 +81,14 @@ var FlowTable = React.createClass({ <div className="flow-table" onScroll={this.adjustHead}> <table> <FlowTableHead ref="head" - columns={this.state.columns}/> + columns={this.state.columns}/> <FlowTableBody ref="body" - flows={this.props.flows} - selected={this.props.selected} - selectFlow={this.props.selectFlow} - columns={this.state.columns}/> + flows={this.props.flows} + selected={this.props.selected} + selectFlow={this.props.selectFlow} + columns={this.state.columns}/> </table> </div> - ); + ); } }); |