diff options
Diffstat (limited to 'web/src/js/components/flowtable.js')
-rw-r--r-- | web/src/js/components/flowtable.js | 72 |
1 files changed, 25 insertions, 47 deletions
diff --git a/web/src/js/components/flowtable.js b/web/src/js/components/flowtable.js index d621387c..5a0793ba 100644 --- a/web/src/js/components/flowtable.js +++ b/web/src/js/components/flowtable.js @@ -2,13 +2,13 @@ import React from "react"; import ReactDOM from "react-dom"; import {connect} from 'react-redux' import classNames from "classnames"; -import {reverseString} from "../utils.js"; import _ from "lodash"; import shallowEqual from "shallowequal"; import AutoScroll from "./helpers/AutoScroll"; import {calcVScroll} from "./helpers/VirtualScroll"; import flowtable_columns from "./flowtable-columns.js"; import Filt from "../filt/filt"; +import {setSort} from "../ducks/flows"; FlowRow.propTypes = { @@ -46,61 +46,38 @@ const FlowRowContainer = connect( }) )(FlowRow) -class FlowTableHead extends React.Component { +function FlowTableHead({setSort, columns, sort}) { + const sortColumn = sort.sortColumn; + const sortType = sort.sortDesc ? "sort-desc" : "sort-asc"; - static propTypes = { - setSortKeyFun: React.PropTypes.func.isRequired, - columns: React.PropTypes.array.isRequired, - }; - - constructor(props, context) { - super(props, context); - this.state = {sortColumn: undefined, sortDesc: false}; - } - - onClick(Column) { - const hasSort = Column.sortKeyFun; - - let sortDesc = this.state.sortDesc; - - if (Column === this.state.sortColumn) { - sortDesc = !sortDesc; - this.setState({sortDesc}); - } else { - this.setState({sortColumn: hasSort && Column, sortDesc: false}); - } - - let sortKeyFun = Column.sortKeyFun; - if (sortDesc) { - sortKeyFun = hasSort && function () { - const k = Column.sortKeyFun.apply(this, arguments); - if (_.isString(k)) { - return reverseString("" + k); - } - return -k; - }; - } - - this.props.setSortKeyFun(sortKeyFun); - } - - render() { - const sortColumn = this.state.sortColumn; - const sortType = this.state.sortDesc ? "sort-desc" : "sort-asc"; return ( <tr> - {this.props.columns.map(Column => ( + {columns.map(Column => ( <Column.Title key={Column.name} - onClick={() => this.onClick(Column)} - className={sortColumn === Column ? sortType : undefined} + onClick={() => setSort({sortColumn: Column.name, sortDesc: Column.name != sort.sortColumn ? false : !sort.sortDesc})} + className={sortColumn === Column.name ? sortType : undefined} /> ))} </tr> ); - } } +FlowTableHead.propTypes = { + setSort: React.PropTypes.func.isRequired, + sort: React.PropTypes.object.isRequired, + columns: React.PropTypes.array.isRequired +}; + +const FlowTableHeadContainer = connect( + state => ({ + sort: state.flows.sort + }), + dispatch => ({ + setSort: (sort) => dispatch(setSort(sort)), + }) +)(FlowTableHead) + class FlowTable extends React.Component { static propTypes = { @@ -186,9 +163,10 @@ class FlowTable extends React.Component { <div className="flow-table" onScroll={this.onViewportUpdate}> <table> <thead ref="head" style={{ transform }}> - <FlowTableHead + <FlowTableHeadContainer columns={flowtable_columns} setSortKeyFun={this.props.setSortKeyFun} + setSort={this.props.setSort} /> </thead> <tbody> @@ -216,7 +194,7 @@ const parseFilter = _.memoize(Filt.parse) const FlowTableContainer = connect( state => ({ - flows: state.flows.view, + flows: state.flows.view }) )(FlowTable) |