Alexey Safronov
f3afd79a3f
# Conflicts: # packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js # packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js # packages/asc-web-common/components/FilterInput/sub-components/SortComboBox.js # packages/asc-web-common/components/PageLayout/index.js # packages/asc-web-common/store/SettingsStore.js # packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js # packages/asc-web-components/combobox/index.js # packages/asc-web-components/context-menu/styled-context-menu.js # packages/asc-web-components/drop-down/index.js # packages/asc-web-components/link-with-dropdown/index.js # packages/asc-web-components/row/index.js # packages/asc-web-components/table-container/StyledTableContainer.js # packages/asc-web-components/table-container/TableHeaderCell.js # packages/asc-web-components/themes/dark.js # products/ASC.Files/Client/public/images/files.menu.svg # products/ASC.Files/Client/src/components/Article/Body/TreeFolders.js # products/ASC.Files/Client/src/components/Badges.js # products/ASC.Files/Client/src/components/QuickButtons.js # products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js # products/ASC.Files/Client/src/components/panels/OperationsPanel/index.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/AsideView.js # products/ASC.Files/Client/src/components/panels/SelectFileDialog/ModalView.js # products/ASC.Files/Client/src/components/panels/SharingPanel/index.js # products/ASC.Files/Client/src/components/panels/StyledPanels.js # products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js # products/ASC.Files/Client/src/components/panels/UploadPanel/index.js # products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js # products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js # products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js # products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js # products/ASC.Files/Client/src/pages/Home/Section/Header/index.js # products/ASC.Files/Client/src/pages/Home/index.js # products/ASC.Files/Client/src/pages/VersionHistory/Section/Body/VersionRow.js # products/ASC.Files/Client/src/store/UploadDataStore.js # products/ASC.People/Client/public/images/people.menu.svg # products/ASC.People/Client/src/components/GroupSelector/index.js # products/ASC.People/Client/src/components/PeopleSelector/index.js # products/ASC.People/Client/src/pages/Home/Section/Body/RowView/userContent.js # products/ASC.People/Client/src/pages/Home/index.js # products/ASC.People/Client/src/pages/Profile/Section/Body/index.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/header-nav.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/nav-item.js # web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-menu.js # web/ASC.Web.Client/src/components/pages/Home/index.js
86 lines
2.2 KiB
JavaScript
86 lines
2.2 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
import Text from "../text";
|
|
import IconButton from "../icon-button";
|
|
import globalColors from "../utils/globalColors";
|
|
import { StyledTableHeaderCell } from "./StyledTableContainer";
|
|
|
|
const TableHeaderCell = ({
|
|
column,
|
|
index,
|
|
onMouseDown,
|
|
resizable,
|
|
sortBy,
|
|
sorted,
|
|
defaultSize,
|
|
sortingVisible,
|
|
}) => {
|
|
const { title, enable, active, minWidth } = column;
|
|
|
|
const isActive = (sortBy && column.sortBy === sortBy) || active;
|
|
|
|
const onClick = (e) => {
|
|
if (!sortingVisible) return;
|
|
column.onClick && column.onClick(column.sortBy, e);
|
|
};
|
|
|
|
const onIconClick = (e) => {
|
|
if (!sortingVisible) return;
|
|
column.onIconClick();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
return (
|
|
<StyledTableHeaderCell
|
|
sorted={sorted}
|
|
isActive={isActive}
|
|
showIcon={column.onClick}
|
|
className="table-container_header-cell"
|
|
id={`column_${index}`}
|
|
data-enable={enable}
|
|
data-min-width={minWidth}
|
|
data-default-size={defaultSize}
|
|
onClick={onClick}
|
|
sortingVisible={sortingVisible}
|
|
>
|
|
<div className="table-container_header-item">
|
|
<div className="header-container-text-wrapper">
|
|
<Text fontWeight={600} className="header-container-text">
|
|
{enable ? title : ""}
|
|
</Text>
|
|
|
|
{sortingVisible && (
|
|
<IconButton
|
|
onClick={column.onIconClick ? onIconClick : onClick}
|
|
iconName="/static/images/sort.desc.react.svg"
|
|
className="header-container-text-icon"
|
|
size="small"
|
|
color={isActive ? globalColors.grayMain : globalColors.gray}
|
|
/>
|
|
)}
|
|
</div>
|
|
{resizable && (
|
|
<div
|
|
data-column={`${index}`}
|
|
className="resize-handle not-selectable"
|
|
onMouseDown={onMouseDown}
|
|
/>
|
|
)}
|
|
</div>
|
|
</StyledTableHeaderCell>
|
|
);
|
|
};
|
|
|
|
TableHeaderCell.propTypes = {
|
|
column: PropTypes.object,
|
|
index: PropTypes.number,
|
|
onMouseDown: PropTypes.func,
|
|
resizable: PropTypes.bool,
|
|
sorted: PropTypes.bool,
|
|
sortBy: PropTypes.string,
|
|
defaultSize: PropTypes.number,
|
|
sortingVisible: PropTypes.bool,
|
|
};
|
|
|
|
export default TableHeaderCell;
|