2021-07-29 17:21:26 +00:00
|
|
|
import React from "react";
|
2021-07-20 10:29:39 +00:00
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import Text from "../text";
|
2021-07-29 17:21:26 +00:00
|
|
|
import IconButton from "../icon-button";
|
2021-07-20 10:29:39 +00:00
|
|
|
import globalColors from "../utils/globalColors";
|
|
|
|
import { StyledTableHeaderCell } from "./StyledTableContainer";
|
|
|
|
|
2021-07-28 14:22:50 +00:00
|
|
|
const TableHeaderCell = ({
|
|
|
|
column,
|
|
|
|
index,
|
|
|
|
onMouseDown,
|
|
|
|
resizable,
|
|
|
|
sortBy,
|
|
|
|
sorted,
|
2021-09-30 07:47:23 +00:00
|
|
|
defaultSize,
|
2022-02-16 10:57:59 +00:00
|
|
|
sortingVisible,
|
2021-07-28 14:22:50 +00:00
|
|
|
}) => {
|
2021-09-03 09:53:03 +00:00
|
|
|
const { title, enable, active, minWidth } = column;
|
2021-07-22 13:55:26 +00:00
|
|
|
|
2021-10-18 11:30:49 +00:00
|
|
|
const isActive = (sortBy && column.sortBy === sortBy) || active;
|
2021-07-27 12:22:51 +00:00
|
|
|
|
2021-07-20 10:29:39 +00:00
|
|
|
const onClick = (e) => {
|
2022-02-16 10:57:59 +00:00
|
|
|
if (!sortingVisible) return;
|
2021-09-03 09:53:03 +00:00
|
|
|
column.onClick && column.onClick(column.sortBy, e);
|
|
|
|
};
|
|
|
|
|
|
|
|
const onIconClick = (e) => {
|
2022-02-16 10:57:59 +00:00
|
|
|
if (!sortingVisible) return;
|
2021-09-03 09:53:03 +00:00
|
|
|
column.onIconClick();
|
|
|
|
e.stopPropagation();
|
2021-07-20 10:29:39 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledTableHeaderCell
|
|
|
|
sorted={sorted}
|
2021-07-27 12:22:51 +00:00
|
|
|
isActive={isActive}
|
2021-09-03 09:53:03 +00:00
|
|
|
showIcon={column.onClick}
|
2021-07-20 10:29:39 +00:00
|
|
|
className="table-container_header-cell"
|
2021-10-18 09:22:33 +00:00
|
|
|
id={`column_${index}`}
|
2021-07-22 13:55:26 +00:00
|
|
|
data-enable={enable}
|
2021-07-30 11:51:40 +00:00
|
|
|
data-min-width={minWidth}
|
2021-09-30 07:47:23 +00:00
|
|
|
data-default-size={defaultSize}
|
2021-09-03 09:53:03 +00:00
|
|
|
onClick={onClick}
|
2022-02-16 10:57:59 +00:00
|
|
|
sortingVisible={sortingVisible}
|
2021-07-20 10:29:39 +00:00
|
|
|
>
|
|
|
|
<div className="table-container_header-item">
|
2021-09-03 09:53:03 +00:00
|
|
|
<div className="header-container-text-wrapper">
|
2021-07-20 10:29:39 +00:00
|
|
|
<Text
|
|
|
|
fontWeight={600}
|
2021-10-18 09:22:33 +00:00
|
|
|
color={isActive ? globalColors.grayMain : globalColors.gray}
|
2021-07-20 10:29:39 +00:00
|
|
|
className="header-container-text"
|
|
|
|
>
|
2021-07-27 10:51:56 +00:00
|
|
|
{enable ? title : ""}
|
2021-07-20 10:29:39 +00:00
|
|
|
</Text>
|
2021-09-03 09:53:03 +00:00
|
|
|
|
2022-02-16 10:57:59 +00:00
|
|
|
{sortingVisible && (
|
|
|
|
<IconButton
|
|
|
|
onClick={column.onIconClick ? onIconClick : onClick}
|
2022-02-22 13:00:26 +00:00
|
|
|
iconName="/static/images/sort.desc.react.svg"
|
2022-02-16 10:57:59 +00:00
|
|
|
className="header-container-text-icon"
|
|
|
|
size="small"
|
|
|
|
hoverColor="#657077"
|
2022-02-21 19:22:38 +00:00
|
|
|
color={isActive ? globalColors.grayMain : globalColors.gray}
|
2022-02-16 10:57:59 +00:00
|
|
|
/>
|
|
|
|
)}
|
2021-09-03 09:53:03 +00:00
|
|
|
</div>
|
2021-07-22 13:55:26 +00:00
|
|
|
{resizable && (
|
2021-07-20 10:29:39 +00:00
|
|
|
<div
|
2021-10-18 09:22:33 +00:00
|
|
|
data-column={`${index}`}
|
2021-07-20 10:29:39 +00:00
|
|
|
className="resize-handle not-selectable"
|
|
|
|
onMouseDown={onMouseDown}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</StyledTableHeaderCell>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
TableHeaderCell.propTypes = {
|
|
|
|
column: PropTypes.object,
|
|
|
|
index: PropTypes.number,
|
|
|
|
onMouseDown: PropTypes.func,
|
2021-07-22 13:55:26 +00:00
|
|
|
resizable: PropTypes.bool,
|
2021-07-28 14:22:50 +00:00
|
|
|
sorted: PropTypes.bool,
|
2021-07-27 12:22:51 +00:00
|
|
|
sortBy: PropTypes.string,
|
2021-09-30 07:47:23 +00:00
|
|
|
defaultSize: PropTypes.number,
|
2022-02-16 10:57:59 +00:00
|
|
|
sortingVisible: PropTypes.bool,
|
2021-07-20 10:29:39 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export default TableHeaderCell;
|