107 lines
4.2 KiB
JavaScript
107 lines
4.2 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Таблица
|
|
Компонент: Меню столбца
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React, { useState } from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { IconButton, Icon, Menu, MenuItem, Divider, Typography } from "@mui/material"; //Интерфейсные компоненты
|
|
import { P8P_TABLE_COLUMN_MENU_ACTIONS } from "./p8p_table_constants"; //Действия меню столбца
|
|
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
|
|
import { P8P_ICON_VARIANT } from "../../theme/variants/p8p_icon_variants"; //Варианты иконок
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Меню столбца
|
|
const P8PTableColumnMenu = ({ columnDef, orderAscItemCaption, orderDescItemCaption, filterItemCaption, onItemClick }) => {
|
|
//Собственное состояние
|
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
|
|
//Флаг отображения
|
|
const open = Boolean(anchorEl);
|
|
|
|
//По нажатию на открытие меню
|
|
const handleMenuButtonClick = event => {
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
//По нажатию на пункт меню
|
|
const handleMenuItemClick = (event, index, action, columnName) => {
|
|
if (onItemClick) onItemClick(action, columnName);
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
//При закрытии меню
|
|
const handleMenuClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
//Формирование списка элементов меню в зависимости от описания колонки таблицы
|
|
const menuItems = [];
|
|
if (columnDef.order === true) {
|
|
menuItems.push(
|
|
<MenuItem
|
|
key={"orderAsc"}
|
|
onClick={(event, index) => handleMenuItemClick(event, index, P8P_TABLE_COLUMN_MENU_ACTIONS.ORDER_ASC, columnDef.name)}
|
|
>
|
|
<Icon variant={P8P_ICON_VARIANT.TABLE_COLUMN_MENU}>arrow_upward</Icon>
|
|
<Typography variant={P8P_TYPOGRAPHY_VARIANT.BODY1}>{orderAscItemCaption}</Typography>
|
|
</MenuItem>
|
|
);
|
|
menuItems.push(
|
|
<MenuItem
|
|
key={"orderDesc"}
|
|
onClick={(event, index) => handleMenuItemClick(event, index, P8P_TABLE_COLUMN_MENU_ACTIONS.ORDER_DESC, columnDef.name)}
|
|
>
|
|
<Icon variant={P8P_ICON_VARIANT.TABLE_COLUMN_MENU}>arrow_downward</Icon>
|
|
<Typography variant={P8P_TYPOGRAPHY_VARIANT.BODY1}>{orderDescItemCaption}</Typography>
|
|
</MenuItem>
|
|
);
|
|
}
|
|
if (columnDef.filter === true) {
|
|
if (menuItems.length > 0) menuItems.push(<Divider key={"divider"} sx={{ my: 0.5 }} />);
|
|
menuItems.push(
|
|
<MenuItem
|
|
key={"filter"}
|
|
onClick={(event, index) => handleMenuItemClick(event, index, P8P_TABLE_COLUMN_MENU_ACTIONS.FILTER, columnDef.name)}
|
|
>
|
|
<Icon variant={P8P_ICON_VARIANT.TABLE_COLUMN_MENU}>filter_alt</Icon>
|
|
<Typography variant={P8P_TYPOGRAPHY_VARIANT.BODY1}>{filterItemCaption}</Typography>
|
|
</MenuItem>
|
|
);
|
|
}
|
|
|
|
//Генерация содержимого
|
|
return menuItems.length > 0 ? (
|
|
<>
|
|
<IconButton id={`${columnDef.name}_menu_button`} aria-haspopup="true" onClick={handleMenuButtonClick}>
|
|
<Icon>more_vert</Icon>
|
|
</IconButton>
|
|
<Menu id={`${columnDef.name}_menu`} anchorEl={anchorEl} open={open} onClose={handleMenuClose}>
|
|
{menuItems}
|
|
</Menu>
|
|
</>
|
|
) : null;
|
|
};
|
|
|
|
//Контроль свойств - Меню столбца
|
|
P8PTableColumnMenu.propTypes = {
|
|
columnDef: PropTypes.object.isRequired,
|
|
orderAscItemCaption: PropTypes.string.isRequired,
|
|
orderDescItemCaption: PropTypes.string.isRequired,
|
|
filterItemCaption: PropTypes.string.isRequired,
|
|
onItemClick: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PTableColumnMenu };
|