forked from CITKParus/P8-Panels
78 lines
3.1 KiB
JavaScript
78 lines
3.1 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Циклограмма
|
|
Компонент: Задача
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Box, Typography } from "@mui/material"; //Интерфейсные компоненты
|
|
import { hasValue } from "../../core/utils"; //Вспомогательный функции
|
|
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
|
|
import { P8P_BOX_CYCLOGRAM_TASK } from "../../theme/styles/box"; //Стили контейнеров
|
|
import { NDEFAULT_HEADER_HEIGHT } from "./p8p_cyclogram_constants"; //Константы циклограммы
|
|
import { P8P_TYPOGRAPHY_CG_TASK } from "../../theme/styles/typography"; //Стили текста
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Задача
|
|
const P8PCyclogramTask = ({ task, indexGrp, shift, lineHeight, openTaskEditor, taskRenderer }) => {
|
|
//Рассчитываем ширину задачи
|
|
const width = task.end !== 0 ? (task.end - task.start) * shift : 0;
|
|
//Формируем собственное отображение, если требуется
|
|
const customView = taskRenderer ? taskRenderer({ task, taskHeight: lineHeight, taskWidth: width }) || {} : {};
|
|
//Определение количества доступных строк
|
|
const availableLines = Math.floor(lineHeight / 18);
|
|
return (
|
|
<foreignObject
|
|
x={task.start !== 0 ? task.start * shift : 0}
|
|
y={NDEFAULT_HEADER_HEIGHT + task.lineNumb * lineHeight}
|
|
width={width}
|
|
height={lineHeight}
|
|
>
|
|
<Box
|
|
className={hasValue(indexGrp) ? `TaskGrp${indexGrp}` : null}
|
|
sx={{
|
|
...P8P_BOX_CYCLOGRAM_TASK({ lineHeight, bgColor: task.bgColor, textColor: task.textColor, highlightColor: task.highlightColor }),
|
|
...customView.taskStyle
|
|
}}
|
|
{...customView.taskProps}
|
|
onClick={() => openTaskEditor(task)}
|
|
>
|
|
{customView.data ? (
|
|
customView.data
|
|
) : (
|
|
<Typography
|
|
sx={P8P_TYPOGRAPHY_CG_TASK({ maxHeight: lineHeight, availableLines })}
|
|
variant={P8P_TYPOGRAPHY_VARIANT.BODY2_LIGHT}
|
|
title={task.name}
|
|
>
|
|
{task.name}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
</foreignObject>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств - Задача
|
|
P8PCyclogramTask.propTypes = {
|
|
task: PropTypes.object.isRequired,
|
|
indexGrp: PropTypes.number,
|
|
shift: PropTypes.number.isRequired,
|
|
lineHeight: PropTypes.number.isRequired,
|
|
openTaskEditor: PropTypes.func.isRequired,
|
|
taskRenderer: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PCyclogramTask };
|