forked from CITKParus/P8-Panels
90 lines
3.5 KiB
JavaScript
90 lines
3.5 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
|
||
Компонент панели: Закладка раздела
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Tab, IconButton, Icon, Stack } from "@mui/material"; //Интерфейсные компоненты
|
||
import { STYLES as COMMON_STYLES } from "../common"; //Общие стили и константы
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
SECTION_TAB: { minWidth: "150px" },
|
||
SECTION_TAB_LABEL: { width: "100%", height: "100%" },
|
||
SECTION_TAB_TOOLBAR_STACK: { ...COMMON_STYLES.TOOLBAR, height: "100%", width: "100%" }
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Закладка раздела
|
||
const SectionTab = ({ value = false, section, sectionDesc, onSectionEdit, onSectionDelete, ...other }) => {
|
||
//Флаг нахождения указателя мыши в закладке
|
||
const [hoveredSection, setHoveredSection] = useState(false);
|
||
|
||
//При попадании мыши на закладку раздела
|
||
const handleSectionTabMouseIn = () => setHoveredSection(true);
|
||
|
||
//При выходе мыши из закладки раздела
|
||
const handleSectionTabMouseOut = () => setHoveredSection(false);
|
||
|
||
//При редактировании раздела настройки
|
||
const handleSectionEdit = () => onSectionEdit && onSectionEdit(sectionDesc.NRN);
|
||
|
||
//При удалении раздела настройки
|
||
const handleSectionDelete = () => onSectionDelete && onSectionDelete(sectionDesc.NRN);
|
||
|
||
//Формирование представления
|
||
return (
|
||
<Tab
|
||
component={"div"}
|
||
wrapped
|
||
value={value}
|
||
onMouseEnter={handleSectionTabMouseIn}
|
||
onMouseLeave={handleSectionTabMouseOut}
|
||
sx={STYLES.SECTION_TAB}
|
||
label={
|
||
<Stack direction={"row"} alignItems={"center"} textAlign={"left"} sx={STYLES.SECTION_TAB_LABEL} title={sectionDesc.SNAME}>
|
||
{`${sectionDesc.SCODE} - ${sectionDesc.SNAME_SHORT}`}
|
||
{section === sectionDesc.NRN && hoveredSection && (
|
||
<Stack direction={"row"} alignItems={"center"} justifyContent={"right"} sx={STYLES.SECTION_TAB_TOOLBAR_STACK} p={1}>
|
||
<IconButton onClick={handleSectionEdit} title={"Редактировать раздел"}>
|
||
<Icon>edit</Icon>
|
||
</IconButton>
|
||
<IconButton disabled={sectionDesc.NDELETE_ALLOW === 0} onClick={handleSectionDelete} title={"Удалить раздел"}>
|
||
<Icon>delete</Icon>
|
||
</IconButton>
|
||
</Stack>
|
||
)}
|
||
</Stack>
|
||
}
|
||
{...other}
|
||
/>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Закладка раздела
|
||
SectionTab.propTypes = {
|
||
value: PropTypes.any,
|
||
section: PropTypes.number,
|
||
sectionDesc: PropTypes.object.isRequired,
|
||
onSectionEdit: PropTypes.func,
|
||
onSectionDelete: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { SectionTab };
|