1import React from 'react' 2import PropTypes from 'prop-types' 3import {connect} from 'react-redux' 4import classnames from 'classnames' 5import {columns, defaultColumnNames} from './FlowColumns' 6 7import {setSort} from '../../ducks/flows' 8 9FlowTableHead.propTypes = { 10 setSort: PropTypes.func.isRequired, 11 sortDesc: PropTypes.bool.isRequired, 12 sortColumn: PropTypes.string, 13 displayColumnNames: PropTypes.array, 14} 15 16export function getDisplayColumns(displayColumnNames) { 17 if (typeof displayColumnNames == "undefined") { 18 return Object.values(columns) 19 } 20 return displayColumnNames.map(x => columns[x]).concat([columns.quickactions]); 21} 22 23export function FlowTableHead({sortColumn, sortDesc, setSort, displayColumnNames}) { 24 const sortType = sortDesc ? 'sort-desc' : 'sort-asc' 25 26 const displayColumns = getDisplayColumns(displayColumnNames) 27 28 return ( 29 <tr> 30 {displayColumns.map(Column => ( 31 <th className={classnames(Column.headerClass, sortColumn === Column.name && sortType)} 32 key={Column.name} 33 onClick={() => setSort(Column.name, Column.name !== sortColumn ? false : !sortDesc)}> 34 {Column.headerName} 35 </th> 36 ))} 37 </tr> 38 ) 39} 40 41export default connect( 42 state => ({ 43 sortDesc: state.flows.sort.desc, 44 sortColumn: state.flows.sort.column, 45 displayColumnNames: state.options["web_columns"] ? state.options["web_columns"].value : defaultColumnNames, 46 }), 47 { 48 setSort 49 } 50)(FlowTableHead) 51