89 lines
2.7 KiB
JavaScript
89 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import Checkbox from '@material-ui/core/Checkbox';
|
|
import TableCell from '@material-ui/core/TableCell';
|
|
import TableHead from '@material-ui/core/TableHead';
|
|
import TableRow from '@material-ui/core/TableRow';
|
|
import TableSortLabel from '@material-ui/core/TableSortLabel';
|
|
import Tooltip from '@material-ui/core/Tooltip';
|
|
|
|
/**
|
|
* This object is used for type checking the props of the component.
|
|
*/
|
|
const propTypes = {
|
|
columnData: PropTypes.array.isRequired,
|
|
numSelected: PropTypes.number.isRequired,
|
|
onRequestSort: PropTypes.func.isRequired,
|
|
onSelectAllClick: PropTypes.func.isRequired,
|
|
order: PropTypes.string.isRequired,
|
|
orderBy: PropTypes.string.isRequired,
|
|
rowCount: PropTypes.number.isRequired,
|
|
};
|
|
|
|
/**
|
|
* This object sets default values to the optional props.
|
|
*/
|
|
const defaultProps = {
|
|
isAdmin: false,
|
|
};
|
|
|
|
/**
|
|
* Header of the table.
|
|
*/
|
|
class EnhancedTableHead extends React.Component {
|
|
createSortHandler = property => event => {
|
|
this.props.onRequestSort(event, property);
|
|
};
|
|
|
|
render() {
|
|
const { onSelectAllClick, order, orderBy, numSelected, rowCount } = this.props;
|
|
|
|
return (
|
|
<TableHead>
|
|
<TableRow>
|
|
{this.props.isAdmin &&
|
|
<TableCell padding="checkbox" style={{margin: 'auto 0', textAlign: 'center', padding: 0}}>
|
|
<Checkbox
|
|
indeterminate={numSelected > 0 && numSelected < rowCount}
|
|
checked={numSelected === rowCount}
|
|
onChange={onSelectAllClick}
|
|
/>
|
|
</TableCell>
|
|
}
|
|
{this.props.columnData.map(column => {
|
|
return (
|
|
<TableCell
|
|
key={column.id}
|
|
numeric={column.numeric}
|
|
padding={column.disablePadding ? 'none' : 'default'}
|
|
sortDirection={orderBy === column.id ? order : false}
|
|
style={{margin: 'auto 0', textAlign: 'center', padding: 0}}
|
|
>
|
|
<Tooltip
|
|
title="Sort"
|
|
placement={column.numeric ? 'bottom-end' : 'bottom-start'}
|
|
enterDelay={300}
|
|
>
|
|
<TableSortLabel
|
|
active={orderBy === column.id}
|
|
direction={order}
|
|
onClick={this.createSortHandler(column.id)}
|
|
>
|
|
{column.label}
|
|
</TableSortLabel>
|
|
</Tooltip>
|
|
</TableCell>
|
|
);
|
|
}, this)}
|
|
</TableRow>
|
|
</TableHead>
|
|
);
|
|
}
|
|
}
|
|
|
|
EnhancedTableHead.propTypes = propTypes;
|
|
EnhancedTableHead.defaultProps = defaultProps;
|
|
|
|
|
|
export default EnhancedTableHead;
|