P8-Panels/app/components/p8p_header/p8p_header_text.js

64 lines
2.5 KiB
JavaScript

/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Текст
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Typography, Stack } from "@mui/material"; //Интерфейсные элементы
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
import { P8P_TYPOGRAPHY_MAX_LINES } from "../../theme/styles/typography"; //Стили текста
import { P8P_STACK_HEADER_TEXT } from "../../theme/styles/stack"; //Стили продвинутого контейнера
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка
//-----------
//Тело модуля
//-----------
//Текст
const P8PHeaderText = ({ title, subTitle, width, onClick, children }) => {
//При нажатии на текст
const handleClick = () => onClick && onClick({ title, subTitle });
//Определение максимального количества доступных строк
const maxLines = subTitle ? 1 : 2;
//Отображение по умолчанию
const defaultView = (
<Stack sx={P8P_STACK_HEADER_TEXT({ isClickable: onClick ? true : false })} onClick={handleClick}>
<Typography sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines })} variant={P8P_TYPOGRAPHY_VARIANT.H7} title={title} align="center">
{title}
</Typography>
{subTitle ? (
<Typography sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines })} variant={P8P_TYPOGRAPHY_VARIANT.SUBTITLE1} title={subTitle} align="center">
{subTitle}
</Typography>
) : null}
</Stack>
);
//Содержимое компонента
const content = children || defaultView;
//Генерация содержимого
return <P8PHeaderItem width={width}>{content}</P8PHeaderItem>;
};
//Контроль свойств - Текст
P8PHeaderText.propTypes = {
title: PropTypes.string,
subTitle: PropTypes.string,
width: PropTypes.string,
onClick: PropTypes.func,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderText };