2022-02-11 14:30:07 +00:00
|
|
|
import React from "react";
|
2022-03-03 10:43:43 +00:00
|
|
|
import PropTypes from "prop-types";
|
2021-07-15 13:55:24 +00:00
|
|
|
import Checkbox from "../checkbox";
|
2022-03-24 14:57:36 +00:00
|
|
|
import {
|
|
|
|
StyledTableGroupMenu,
|
|
|
|
StyledScrollbar,
|
|
|
|
StyledInfoPanelToggleWrapper,
|
|
|
|
} from "./StyledTableContainer";
|
2021-07-20 10:29:39 +00:00
|
|
|
import ComboBox from "../combobox";
|
2021-10-14 15:18:08 +00:00
|
|
|
import GroupMenuItem from "./GroupMenuItem";
|
2022-03-03 10:43:43 +00:00
|
|
|
import { useTranslation } from "react-i18next";
|
2022-03-24 14:57:36 +00:00
|
|
|
import IconButton from "../icon-button";
|
2021-07-15 13:55:24 +00:00
|
|
|
|
|
|
|
const TableGroupMenu = (props) => {
|
2021-07-19 11:09:09 +00:00
|
|
|
const {
|
|
|
|
isChecked,
|
|
|
|
isIndeterminate,
|
|
|
|
headerMenu,
|
|
|
|
onChange,
|
2021-07-20 10:29:39 +00:00
|
|
|
checkboxOptions,
|
2021-08-02 15:16:15 +00:00
|
|
|
checkboxMargin,
|
2022-03-24 14:57:36 +00:00
|
|
|
isInfoPanelVisible,
|
|
|
|
toggleInfoPanel,
|
2021-08-02 10:17:34 +00:00
|
|
|
...rest
|
2021-07-19 11:09:09 +00:00
|
|
|
} = props;
|
2021-07-15 13:55:24 +00:00
|
|
|
const onCheckboxChange = (e) => {
|
|
|
|
onChange && onChange(e.target && e.target.checked);
|
|
|
|
};
|
2022-01-21 08:49:16 +00:00
|
|
|
const { t } = useTranslation("Common");
|
2021-07-15 13:55:24 +00:00
|
|
|
return (
|
2021-07-20 13:01:54 +00:00
|
|
|
<>
|
|
|
|
<StyledTableGroupMenu
|
|
|
|
className="table-container_group-menu"
|
2021-08-02 15:16:15 +00:00
|
|
|
checkboxMargin={checkboxMargin}
|
2021-08-02 10:17:34 +00:00
|
|
|
{...rest}
|
2021-07-20 13:01:54 +00:00
|
|
|
>
|
|
|
|
<Checkbox
|
|
|
|
className="table-container_group-menu-checkbox"
|
|
|
|
onChange={onCheckboxChange}
|
|
|
|
isChecked={isChecked}
|
|
|
|
isIndeterminate={isIndeterminate}
|
2022-01-21 08:49:16 +00:00
|
|
|
title={t("Common:MainHeaderSelectAll")}
|
2021-07-20 13:01:54 +00:00
|
|
|
/>
|
|
|
|
<ComboBox
|
2021-10-13 14:44:40 +00:00
|
|
|
comboIcon="/static/images/triangle.navigation.down.react.svg"
|
|
|
|
noBorder
|
2021-07-20 13:01:54 +00:00
|
|
|
advancedOptions={checkboxOptions}
|
|
|
|
className="table-container_group-menu-combobox not-selectable"
|
|
|
|
options={[]}
|
|
|
|
selectedOption={{}}
|
2021-10-20 11:27:21 +00:00
|
|
|
manualY="42px"
|
|
|
|
manualX="-32px"
|
2022-01-21 08:49:16 +00:00
|
|
|
title={t("Common:TitleSelectFile")}
|
2021-07-20 13:01:54 +00:00
|
|
|
/>
|
|
|
|
<div className="table-container_group-menu-separator" />
|
2021-10-15 11:33:48 +00:00
|
|
|
<StyledScrollbar>
|
|
|
|
{headerMenu.map((item, index) => (
|
|
|
|
<GroupMenuItem key={index} item={item} />
|
|
|
|
))}
|
|
|
|
</StyledScrollbar>
|
2022-03-24 14:57:36 +00:00
|
|
|
<StyledInfoPanelToggleWrapper isInfoPanelVisible={isInfoPanelVisible}>
|
|
|
|
<div className="info-panel-toggle-bg">
|
|
|
|
<IconButton
|
|
|
|
className="info-panel-toggle"
|
2022-04-11 08:11:44 +00:00
|
|
|
iconName="images/panel.react.svg"
|
2022-03-25 09:10:23 +00:00
|
|
|
size="16"
|
2022-03-24 14:57:36 +00:00
|
|
|
isFill={true}
|
|
|
|
onClick={toggleInfoPanel}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</StyledInfoPanelToggleWrapper>
|
2021-07-20 13:01:54 +00:00
|
|
|
</StyledTableGroupMenu>
|
|
|
|
</>
|
2021-07-15 13:55:24 +00:00
|
|
|
);
|
|
|
|
};
|
|
|
|
TableGroupMenu.propTypes = {
|
|
|
|
isChecked: PropTypes.bool,
|
|
|
|
isIndeterminate: PropTypes.bool,
|
2021-10-13 13:04:49 +00:00
|
|
|
headerMenu: PropTypes.arrayOf(PropTypes.object).isRequired,
|
2021-07-29 17:21:26 +00:00
|
|
|
checkboxOptions: PropTypes.any.isRequired,
|
2021-07-15 13:55:24 +00:00
|
|
|
onClick: PropTypes.func,
|
|
|
|
onChange: PropTypes.func,
|
2021-08-02 15:16:15 +00:00
|
|
|
checkboxMargin: PropTypes.string,
|
2021-07-15 13:55:24 +00:00
|
|
|
};
|
2022-03-03 11:25:10 +00:00
|
|
|
export default TableGroupMenu;
|