forked from CITKParus/P8-Panels
64 lines
2.7 KiB
JavaScript
64 lines
2.7 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Заголовок
|
|
Компонент: Индикатор
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Stack, Typography } from "@mui/material"; //Интерфейсные элементы
|
|
import { P8P_STACK_HEADER_INDICATOR } from "../../theme/styles/stack"; //Стили для групповой информации
|
|
import { TEXTS } from "../../../app.text"; //Текстовые ресурсы и константы
|
|
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
|
|
import { P8P_HEADER_INDICATOR_STATE } from "./p8p_header_constants"; //Константы заголовка
|
|
import { P8P_TYPOGRAPY_HDR_INDICATOR } from "../../theme/styles/typography"; //Стили текста
|
|
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Индикатор
|
|
const P8PHeaderIndicator = ({ caption, value, state = P8P_HEADER_INDICATOR_STATE.UNDEFINED, disableCaptionColor = false, width, color, onClick }) => {
|
|
//При нажатии на текст
|
|
const handleClick = () => onClick && onClick({ caption, value });
|
|
|
|
//Генерация содержимого
|
|
return (
|
|
<P8PHeaderItem width={width}>
|
|
<Stack sx={P8P_STACK_HEADER_INDICATOR({ isClickable: onClick ? true : false })} onClick={handleClick}>
|
|
<Typography
|
|
variant={P8P_TYPOGRAPHY_VARIANT.BODY2}
|
|
sx={P8P_TYPOGRAPY_HDR_INDICATOR({ maxLines: 1, state, isDefaultColor: disableCaptionColor, color })}
|
|
title={caption}
|
|
>
|
|
{caption}
|
|
</Typography>
|
|
<Typography variant={P8P_TYPOGRAPHY_VARIANT.BODY2} sx={P8P_TYPOGRAPY_HDR_INDICATOR({ maxLines: 1, state, color })} title={value}>
|
|
{[undefined, null, ""].includes(value) ? TEXTS.NO_DATA_FOUND_SHORT : value}
|
|
</Typography>
|
|
</Stack>
|
|
</P8PHeaderItem>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств - Индикатор
|
|
P8PHeaderIndicator.propTypes = {
|
|
caption: PropTypes.string.isRequired,
|
|
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
state: PropTypes.oneOf(Object.values(P8P_HEADER_INDICATOR_STATE)),
|
|
disableCaptionColor: PropTypes.bool,
|
|
width: PropTypes.string,
|
|
color: PropTypes.string,
|
|
onClick: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PHeaderIndicator };
|