forked from CITKParus/P8-Panels
278 lines
10 KiB
JavaScript
278 lines
10 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга
|
||
Компонент: Сообщение
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import Dialog from "@mui/material/Dialog"; //базовый класс диалога Material UI
|
||
import DialogTitle from "@mui/material/DialogTitle"; //Заголовок диалога
|
||
import DialogContent from "@mui/material/DialogContent"; //Содержимое диалога
|
||
import DialogContentText from "@mui/material/DialogContentText"; //Текст содержимого диалога
|
||
import DialogActions from "@mui/material/DialogActions"; //Область действий диалога
|
||
import Typography from "@mui/material/Typography"; //Текст
|
||
import Button from "@mui/material/Button"; //Кнопки
|
||
import Container from "@mui/material/Container"; //Контейнер
|
||
import Box from "@mui/material/Box"; //Обёртка
|
||
import { BUTTONS, STATE } from "../../app.text"; //Типовые текстовые ресурсы и константы
|
||
import { useTheme } from "@mui/material"; //Тема
|
||
import { P8P_TYPOGRAPHY_VARIANT } from "../theme/p8p_typography"; //Варианты шрифтов
|
||
import { P8P_DIALOG_TITLE_VARIANT } from "../theme/variants/p8p_dialog_title_variants"; //Варианты заголовков диалога
|
||
import { P8P_BUTTON_VARIANT } from "../theme/variants/p8p_button_variants"; //Варианты кнопок
|
||
import { P8P_CONTAINER_VARIANT } from "../theme/variants/p8p_container_variants"; //Варианты контейнеров
|
||
import { P8P_DIALOG_CONTENT_VARIANT } from "../theme/variants/p8p_dialog_content_variants"; //Варианты содержимого диалогов
|
||
import { P8P_DIALOG_CONTENT_TEXT_VARIANT } from "../theme/variants/p8p_dialog_content_text_variants"; //Варианты текста содержимого диалога
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Варианты исполнения
|
||
const P8P_APP_MESSAGE_VARIANT = {
|
||
INFO: STATE.INFO,
|
||
WARN: STATE.WARN,
|
||
ERR: STATE.ERR
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Сообщение
|
||
const P8PAppMessage = ({
|
||
variant,
|
||
title,
|
||
titleText,
|
||
cancelBtn,
|
||
onCancel,
|
||
cancelBtnCaption,
|
||
okBtn,
|
||
onOk,
|
||
okBtnCaption,
|
||
open,
|
||
text,
|
||
fullErrorText,
|
||
showErrMoreCaption,
|
||
hideErrMoreCaption
|
||
}) => {
|
||
//Состояние подробной информации об ошибке
|
||
const [showFullErrorText, setShowFullErrorText] = useState(false);
|
||
|
||
//Определяем вариант стилизации
|
||
let titleVariant = P8P_DIALOG_TITLE_VARIANT.INFO;
|
||
let contentVariant = P8P_DIALOG_CONTENT_TEXT_VARIANT.INFO;
|
||
switch (variant) {
|
||
case P8P_APP_MESSAGE_VARIANT.INFO: {
|
||
titleVariant = P8P_DIALOG_TITLE_VARIANT.INFO;
|
||
contentVariant = P8P_DIALOG_CONTENT_TEXT_VARIANT.INFO;
|
||
break;
|
||
}
|
||
case P8P_APP_MESSAGE_VARIANT.WARN: {
|
||
titleVariant = P8P_DIALOG_TITLE_VARIANT.WARN;
|
||
contentVariant = P8P_DIALOG_CONTENT_TEXT_VARIANT.WARN;
|
||
break;
|
||
}
|
||
case P8P_APP_MESSAGE_VARIANT.ERR: {
|
||
titleVariant = P8P_DIALOG_TITLE_VARIANT.ERROR;
|
||
contentVariant = P8P_DIALOG_CONTENT_TEXT_VARIANT.ERROR;
|
||
break;
|
||
}
|
||
}
|
||
|
||
//Заголовок
|
||
let titlePart;
|
||
if (title && titleText)
|
||
titlePart = (
|
||
<DialogTitle variant={titleVariant}>
|
||
<Typography variant={P8P_TYPOGRAPHY_VARIANT.H7}>{titleText}</Typography>
|
||
</DialogTitle>
|
||
);
|
||
|
||
//Кнопка Отмена
|
||
let cancelBtnPart;
|
||
if (cancelBtn && cancelBtnCaption && variant === P8P_APP_MESSAGE_VARIANT.WARN)
|
||
cancelBtnPart = (
|
||
<Button variant={P8P_BUTTON_VARIANT.TEXT} onClick={() => (onCancel ? onCancel() : null)}>
|
||
{cancelBtnCaption}
|
||
</Button>
|
||
);
|
||
|
||
//Кнопка OK
|
||
let okBtnPart;
|
||
if (okBtn && okBtnCaption)
|
||
okBtnPart = (
|
||
<Button variant={P8P_BUTTON_VARIANT.TEXT} onClick={() => (onOk ? onOk() : null)} autoFocus>
|
||
{okBtnCaption}
|
||
</Button>
|
||
);
|
||
|
||
//Кнопка Подробнее
|
||
let fullErrorTextBtn;
|
||
if (fullErrorText && showErrMoreCaption && hideErrMoreCaption && variant === P8P_APP_MESSAGE_VARIANT.ERR)
|
||
fullErrorTextBtn = (
|
||
<Button variant={P8P_BUTTON_VARIANT.TEXT} color="P8PWarning" onClick={() => setShowFullErrorText(!showFullErrorText)} autoFocus>
|
||
{!showFullErrorText ? showErrMoreCaption : hideErrMoreCaption}
|
||
</Button>
|
||
);
|
||
|
||
//Все действия
|
||
let actionsPart;
|
||
if (cancelBtnPart || okBtnPart)
|
||
actionsPart = (
|
||
<DialogActions>
|
||
{fullErrorTextBtn}
|
||
{okBtnPart}
|
||
{cancelBtnPart}
|
||
</DialogActions>
|
||
);
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<Dialog open={open || false} onClose={() => (onCancel ? onCancel() : null)}>
|
||
{titlePart}
|
||
<DialogContent>
|
||
<DialogContentText variant={contentVariant}>{!showFullErrorText ? text : fullErrorText}</DialogContentText>
|
||
</DialogContent>
|
||
{actionsPart}
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Сообщение
|
||
P8PAppMessage.propTypes = {
|
||
variant: PropTypes.string.isRequired,
|
||
title: PropTypes.bool,
|
||
titleText: PropTypes.string,
|
||
cancelBtn: PropTypes.bool,
|
||
onCancel: PropTypes.func,
|
||
cancelBtnCaption: PropTypes.string,
|
||
okBtn: PropTypes.bool,
|
||
onOk: PropTypes.func,
|
||
okBtnCaption: PropTypes.string,
|
||
open: PropTypes.bool,
|
||
text: PropTypes.string,
|
||
fullErrorText: PropTypes.string,
|
||
showErrMoreCaption: PropTypes.string,
|
||
hideErrMoreCaption: PropTypes.string
|
||
};
|
||
|
||
//Встроенное сообщение
|
||
const P8PAppInlineMessage = ({ variant, text, okBtn, onOk, okBtnCaption }) => {
|
||
//Определяем тему
|
||
const theme = useTheme();
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<Container variant={P8P_CONTAINER_VARIANT.INLINE_MSG}>
|
||
<Box p={1}>
|
||
<Typography
|
||
variant={P8P_TYPOGRAPHY_VARIANT.BODY1}
|
||
color={
|
||
variant === P8P_APP_MESSAGE_VARIANT.ERR
|
||
? theme.palette.P8PError.main
|
||
: variant === P8P_APP_MESSAGE_VARIANT.WARN
|
||
? theme.palette.P8PWarning.main
|
||
: theme.palette.P8PText.primary
|
||
}
|
||
>
|
||
{text}
|
||
</Typography>
|
||
{okBtn && okBtnCaption ? (
|
||
<Box pt={1}>
|
||
<Button variant={P8P_BUTTON_VARIANT.TEXT} onClick={() => (onOk ? onOk() : null)} autoFocus>
|
||
{okBtnCaption}
|
||
</Button>
|
||
</Box>
|
||
) : null}
|
||
</Box>
|
||
</Container>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Встроенное сообщение
|
||
P8PAppInlineMessage.propTypes = {
|
||
variant: PropTypes.string.isRequired,
|
||
text: PropTypes.string.isRequired,
|
||
okBtn: PropTypes.bool,
|
||
onOk: PropTypes.func,
|
||
okBtnCaption: PropTypes.string
|
||
};
|
||
|
||
//Формирование типового сообщения
|
||
const buildVariantMessage = (props, variant) => {
|
||
//Извлекаем необходимые свойства
|
||
let { open, titleText } = props;
|
||
|
||
//Генерация содержимого
|
||
return <P8PAppMessage {...props} variant={variant} open={open === undefined ? true : open} title={titleText ? true : false} okBtn={true} />;
|
||
};
|
||
|
||
//Формирование типового встроенного сообщения
|
||
const buildVariantInlineMessage = (props, variant) => {
|
||
//Генерация содержимого
|
||
return <P8PAppInlineMessage {...props} variant={variant} />;
|
||
};
|
||
|
||
//Сообщение об ошибке
|
||
const P8PAppMessageErr = props => buildVariantMessage(props, P8P_APP_MESSAGE_VARIANT.ERR);
|
||
|
||
//Сообщение предупреждения
|
||
const P8PAppMessageWarn = props => buildVariantMessage(props, P8P_APP_MESSAGE_VARIANT.WARN);
|
||
|
||
//Сообщение информации
|
||
const P8PAppMessageInfo = props => buildVariantMessage(props, P8P_APP_MESSAGE_VARIANT.INFO);
|
||
|
||
//Встраиваемое сообщение об ошибке
|
||
const P8PAppInlineError = props => buildVariantInlineMessage(props, P8P_APP_MESSAGE_VARIANT.ERR);
|
||
|
||
//Встраиваемое cообщение предупреждения
|
||
const P8PAppInlineWarn = props => buildVariantInlineMessage(props, P8P_APP_MESSAGE_VARIANT.WARN);
|
||
|
||
//Встраиваемое сообщение информации
|
||
const P8PAppInlineInfo = props => buildVariantInlineMessage(props, P8P_APP_MESSAGE_VARIANT.INFO);
|
||
|
||
//Диалог подсказки
|
||
const P8PHintDialog = ({ title, hint, onOk }) => {
|
||
return (
|
||
<Dialog open={true} onClose={e => (onOk ? onOk(e) : null)}>
|
||
<DialogTitle variant={P8P_DIALOG_TITLE_VARIANT.PRIMARY}>{title}</DialogTitle>
|
||
<DialogContent variant={P8P_DIALOG_CONTENT_VARIANT.HINT}>
|
||
<div dangerouslySetInnerHTML={{ __html: hint }}></div>
|
||
</DialogContent>
|
||
<DialogActions>
|
||
<Button variant={P8P_BUTTON_VARIANT.SECONDARY} onClick={e => (onOk ? onOk(e) : null)}>
|
||
{BUTTONS.OK}
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалог подсказки
|
||
P8PHintDialog.propTypes = {
|
||
title: PropTypes.string.isRequired,
|
||
hint: PropTypes.string.isRequired,
|
||
onOk: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export {
|
||
P8P_APP_MESSAGE_VARIANT,
|
||
P8PAppMessage,
|
||
P8PAppMessageErr,
|
||
P8PAppMessageWarn,
|
||
P8PAppMessageInfo,
|
||
P8PAppInlineMessage,
|
||
P8PAppInlineError,
|
||
P8PAppInlineWarn,
|
||
P8PAppInlineInfo,
|
||
P8PHintDialog
|
||
};
|