forked from CITKParus/P8-Panels
57 lines
2.1 KiB
JavaScript
57 lines
2.1 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Циклограмма
|
|
Компонент: Колонка
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Typography } from "@mui/material"; //Интерфейсные компоненты
|
|
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
|
|
import { NDEFAULT_HEADER_HEIGHT } from "./p8p_cyclogram_constants"; //Константы циклограммы
|
|
import { P8P_TYPOGRAPHY_CG_HEADER } from "../../theme/styles/typography"; //Стили текста
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Колонка
|
|
const P8PCyclogramHeaderColumn = ({ column, start, shift, columnRenderer }) => {
|
|
//Рассчитываем ширину колонки
|
|
const columnWidth = column.end - column.start;
|
|
//Формируем собственное отображение, если требуется
|
|
const customView = columnRenderer ? columnRenderer({ column }) : null;
|
|
return (
|
|
<>
|
|
<foreignObject x={start} y="0" width={columnWidth * shift} height={NDEFAULT_HEADER_HEIGHT}>
|
|
{customView ? (
|
|
customView
|
|
) : (
|
|
<Typography variant={P8P_TYPOGRAPHY_VARIANT.COLUMN} sx={P8P_TYPOGRAPHY_CG_HEADER} title={column.name} component={"p"}>
|
|
{column.name}
|
|
</Typography>
|
|
)}
|
|
</foreignObject>
|
|
</>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств - Колонка
|
|
P8PCyclogramHeaderColumn.propTypes = {
|
|
column: PropTypes.object.isRequired,
|
|
start: PropTypes.number.isRequired,
|
|
shift: PropTypes.number.isRequired,
|
|
maxHeight: PropTypes.number.isRequired,
|
|
lastElement: PropTypes.bool,
|
|
columnRenderer: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PCyclogramHeaderColumn };
|