@bigfishtv/cockpit/src/components/table/cell/FixedDataTableHeaderCellSort.js

import React, { Component } from 'react'
import { Cell } from 'fixed-data-table'

import * as SortTypes from '../../../constants/SortTypes'
import { reverseSortDirection } from '../../../utils/tableUtils'
import Icon from '../../Icon'

/**
 * Table header cell used for orderable columns
 */
export default class FixedDataTableHeaderCellSort extends Component {
	onSortChange = e => {
		e.preventDefault()
		if (this.props.onSortChange) {
			this.props.onSortChange(
				this.props.columnKey,
				this.props.sortDir ? reverseSortDirection(this.props.sortDir) : SortTypes.ASC
			)
		}
	}

	render() {
		var { sortDir, children, ...props } = this.props
		return (
			<Cell {...props}>
				<a onClick={this.onSortChange}>
					{children}
					{sortDir && <Icon name={'chevron-' + (sortDir === SortTypes.DESC ? 'down' : 'up')} size={16} />}
				</a>
			</Cell>
		)
	}
}