112 lines
2.9 KiB
JavaScript
112 lines
2.9 KiB
JavaScript
import {
|
|
Checkbox,
|
|
TableCell,
|
|
TableHead,
|
|
TableRow,
|
|
TableSortLabel
|
|
} from "@material-ui/core";
|
|
import PropTypes from "prop-types";
|
|
import React, { useState } from "react";
|
|
|
|
const HeaderSortable = (props) => {
|
|
const [selectAll, setSelectAll] = useState(false);
|
|
const {
|
|
classes,
|
|
order,
|
|
orderBy,
|
|
onSortRequest,
|
|
columnData,
|
|
multiSelect,
|
|
onSelectAll,
|
|
selectCount,
|
|
rowCount,
|
|
selectAllForAllPages,
|
|
} = props;
|
|
|
|
const sortHandler = (property) => (event) => {
|
|
if (!onSortRequest) return;
|
|
onSortRequest(event, property);
|
|
};
|
|
|
|
const selectAllHandler = (event) => {
|
|
setSelectAll(selectAll => !selectAll);
|
|
if (!onSelectAll) return;
|
|
onSelectAll(event);
|
|
};
|
|
|
|
const getOrder = (value) =>
|
|
value === "desc" ? "sorted descending" : "sorted ascending";
|
|
|
|
const ColumnLabel = (column) => {
|
|
if (column.no_sort) {
|
|
return column.label
|
|
}
|
|
if (column.id) {
|
|
return (
|
|
<TableSortLabel
|
|
active={orderBy === column.id}
|
|
direction={orderBy === column.id ? order : "asc"}
|
|
onClick={sortHandler(column.id)}
|
|
>
|
|
{column.label}
|
|
{orderBy === column.id && (
|
|
<span className={classes.hiddenSortSpan}>{getOrder(order)}</span>
|
|
)}
|
|
</TableSortLabel>
|
|
);
|
|
}
|
|
|
|
return column.label;
|
|
};
|
|
|
|
if (multiSelect) {
|
|
const errors = [];
|
|
if (onSelectAll === undefined) errors.push("onSelectAll required");
|
|
if (selectCount === undefined) errors.push("selectCount required");
|
|
if (rowCount === undefined) errors.push("rowCount required");
|
|
if (errors.length > 0) {
|
|
throw new Error(errors.join(". "));
|
|
}
|
|
}
|
|
return (
|
|
<TableHead>
|
|
<TableRow>
|
|
{multiSelect && (
|
|
<TableCell padding="checkbox">
|
|
<Checkbox
|
|
indeterminate={!selectAllForAllPages && selectCount > 0 && selectCount < rowCount}
|
|
checked={selectAllForAllPages ? selectAll : rowCount > 0 && selectCount === rowCount}
|
|
onChange={selectAllHandler}
|
|
inputProps={{ "aria-label": "select all items" }}
|
|
/>
|
|
</TableCell>
|
|
)}
|
|
{columnData.map((column, index) => (
|
|
<TableCell
|
|
key={index}
|
|
align={column.numeric ? "right" : "center"}
|
|
padding={column.disablePadding ? "none" : "normal"}
|
|
sortDirection={orderBy === column.id ? order : false}
|
|
>
|
|
{ColumnLabel(column)}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
</TableHead>
|
|
);
|
|
};
|
|
|
|
HeaderSortable.propTypes = {
|
|
classes: PropTypes.object.isRequired,
|
|
onSortRequest: PropTypes.func.isRequired,
|
|
order: PropTypes.oneOf(["asc", "desc"]).isRequired,
|
|
orderBy: PropTypes.string.isRequired,
|
|
columnData: PropTypes.array.isRequired,
|
|
multiSelect: PropTypes.bool,
|
|
selectCount: PropTypes.number,
|
|
totalRows: PropTypes.number,
|
|
onSelectAll: PropTypes.func,
|
|
};
|
|
|
|
export default HeaderSortable;
|