forked from CITKParus/P8-Panels
WEBAPP: Типовые состояния и цвета для состояний в app.*.js, типовой диалог подсказки P8PHintDialog
This commit is contained in:
Mikhail Chechnev
parent
a639c6371c
commit
f4c665a74b
@ -3,10 +3,49 @@
|
||||
Типовые стили
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { STATE } from "./app.text"; //Текстовые ресурсы и константы
|
||||
import { red, green, orange, grey } from "@mui/material/colors";
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
//Цвета
|
||||
export const APP_COLORS = {
|
||||
[STATE.UNDEFINED]: {
|
||||
color: "#dcdcdca0",
|
||||
contrColor: "black"
|
||||
},
|
||||
[STATE.INFO]: {
|
||||
color: "white",
|
||||
contrColor: "black"
|
||||
},
|
||||
[STATE.OK]: {
|
||||
color: green[200],
|
||||
contrColor: green[900]
|
||||
},
|
||||
[STATE.ERR]: {
|
||||
color: red[200],
|
||||
contrColor: red[900]
|
||||
},
|
||||
[STATE.WARN]: {
|
||||
color: orange[200],
|
||||
contrColor: orange[900]
|
||||
},
|
||||
HOVER: {
|
||||
color: grey[200],
|
||||
contrColor: grey[900]
|
||||
},
|
||||
ACTIVE: {
|
||||
color: grey[400],
|
||||
contrColor: grey[900]
|
||||
}
|
||||
};
|
||||
|
||||
//Стили
|
||||
export const APP_STYLES = {
|
||||
SCROLL: {
|
||||
|
||||
12
app.text.js
12
app.text.js
@ -18,7 +18,8 @@ export const TITLES = {
|
||||
//Текст
|
||||
export const TEXTS = {
|
||||
LOADING: "Ожидайте...", //Ожидание завершения процесса
|
||||
NO_DATA_FOUND: "Данных не найдено" //Отсутствие данных
|
||||
NO_DATA_FOUND: "Данных не найдено", //Отсутствие данных
|
||||
NO_DATA_FOUND_SHORT: "Н.Д." //Отсутствие данных (кратко)
|
||||
};
|
||||
|
||||
//Текст кнопок
|
||||
@ -65,3 +66,12 @@ export const ERRORS = {
|
||||
export const ERRORS_HTTP = {
|
||||
404: "Адрес не найден"
|
||||
};
|
||||
|
||||
//Типовые статусы
|
||||
export const STATE = {
|
||||
UNDEFINED: "UNDEFINED",
|
||||
INFO: "INFORMATION",
|
||||
OK: "OK",
|
||||
ERR: "ERR",
|
||||
WARN: "WARN"
|
||||
};
|
||||
|
||||
@ -18,6 +18,8 @@ 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 { APP_COLORS } from "../../app.styles"; //Типовые стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
@ -25,9 +27,9 @@ import Box from "@mui/material/Box"; //Обёртка
|
||||
|
||||
//Варианты исполнения
|
||||
const P8P_APP_MESSAGE_VARIANT = {
|
||||
INFO: "information",
|
||||
WARN: "warning",
|
||||
ERR: "error"
|
||||
INFO: STATE.INFO,
|
||||
WARN: STATE.WARN,
|
||||
ERR: STATE.ERR
|
||||
};
|
||||
|
||||
//Стили
|
||||
@ -36,28 +38,35 @@ const STYLES = {
|
||||
wordBreak: "break-word"
|
||||
},
|
||||
INFO: {
|
||||
titleText: {},
|
||||
bodyText: {}
|
||||
titleText: {
|
||||
color: APP_COLORS[STATE.INFO].contrColor
|
||||
},
|
||||
bodyText: {
|
||||
color: APP_COLORS[STATE.INFO].contrColor
|
||||
}
|
||||
},
|
||||
WARN: {
|
||||
titleText: {
|
||||
color: "orange"
|
||||
color: APP_COLORS[STATE.WARN].contrColor
|
||||
},
|
||||
bodyText: {
|
||||
color: "orange"
|
||||
color: APP_COLORS[STATE.WARN].contrColor
|
||||
}
|
||||
},
|
||||
ERR: {
|
||||
titleText: {
|
||||
color: "red"
|
||||
color: APP_COLORS[STATE.ERR].contrColor
|
||||
},
|
||||
bodyText: {
|
||||
color: "red"
|
||||
color: APP_COLORS[STATE.ERR].contrColor
|
||||
}
|
||||
},
|
||||
INLINE_MESSAGE: {
|
||||
with: "100%",
|
||||
textAlign: "center"
|
||||
},
|
||||
FULL_ERROR_TEXT_BUTTON: {
|
||||
color: APP_COLORS[STATE.WARN].contrColor
|
||||
}
|
||||
};
|
||||
|
||||
@ -104,12 +113,7 @@ const P8PAppMessage = ({
|
||||
|
||||
//Заголовок
|
||||
let titlePart;
|
||||
if (title && titleText)
|
||||
titlePart = (
|
||||
<DialogTitle id="message-dialog-title" style={{ ...style.DEFAULT, ...style.titleText }}>
|
||||
{titleText}
|
||||
</DialogTitle>
|
||||
);
|
||||
if (title && titleText) titlePart = <DialogTitle style={{ ...style.DEFAULT, ...style.titleText }}>{titleText}</DialogTitle>;
|
||||
|
||||
//Кнопка Отмена
|
||||
let cancelBtnPart;
|
||||
@ -120,7 +124,7 @@ const P8PAppMessage = ({
|
||||
let okBtnPart;
|
||||
if (okBtn && okBtnCaption)
|
||||
okBtnPart = (
|
||||
<Button onClick={() => (onOk ? onOk() : null)} color="primary" autoFocus>
|
||||
<Button onClick={() => (onOk ? onOk() : null)} autoFocus>
|
||||
{okBtnCaption}
|
||||
</Button>
|
||||
);
|
||||
@ -129,7 +133,7 @@ const P8PAppMessage = ({
|
||||
let fullErrorTextBtn;
|
||||
if (fullErrorText && showErrMoreCaption && hideErrMoreCaption && variant === P8P_APP_MESSAGE_VARIANT.ERR)
|
||||
fullErrorTextBtn = (
|
||||
<Button onClick={() => setShowFullErrorText(!showFullErrorText)} color="warning" autoFocus>
|
||||
<Button onClick={() => setShowFullErrorText(!showFullErrorText)} sx={STYLES.FULL_ERROR_TEXT_BUTTON} autoFocus>
|
||||
{!showFullErrorText ? showErrMoreCaption : hideErrMoreCaption}
|
||||
</Button>
|
||||
);
|
||||
@ -147,17 +151,10 @@ const P8PAppMessage = ({
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Dialog
|
||||
open={open || false}
|
||||
aria-labelledby="message-dialog-title"
|
||||
aria-describedby="message-dialog-description"
|
||||
onClose={() => (onCancel ? onCancel() : null)}
|
||||
>
|
||||
<Dialog open={open || false} onClose={() => (onCancel ? onCancel() : null)}>
|
||||
{titlePart}
|
||||
<DialogContent>
|
||||
<DialogContentText id="message-dialog-description" style={style.bodyText}>
|
||||
{!showFullErrorText ? text : fullErrorText}
|
||||
</DialogContentText>
|
||||
<DialogContentText style={style.bodyText}>{!showFullErrorText ? text : fullErrorText}</DialogContentText>
|
||||
</DialogContent>
|
||||
{actionsPart}
|
||||
</Dialog>
|
||||
@ -189,13 +186,19 @@ const P8PAppInlineMessage = ({ variant, text, okBtn, onOk, okBtnCaption }) => {
|
||||
<Container style={STYLES.INLINE_MESSAGE}>
|
||||
<Box p={1}>
|
||||
<Typography
|
||||
color={variant === P8P_APP_MESSAGE_VARIANT.ERR ? "error" : variant === P8P_APP_MESSAGE_VARIANT.WARN ? "primary" : "textSecondary"}
|
||||
color={
|
||||
variant === P8P_APP_MESSAGE_VARIANT.ERR
|
||||
? APP_COLORS[STATE.ERR].contrColor
|
||||
: variant === P8P_APP_MESSAGE_VARIANT.WARN
|
||||
? APP_COLORS[STATE.WARN].contrColor
|
||||
: APP_COLORS[STATE.INFO].contrColor
|
||||
}
|
||||
>
|
||||
{text}
|
||||
</Typography>
|
||||
{okBtn && okBtnCaption ? (
|
||||
<Box pt={1}>
|
||||
<Button onClick={() => (onOk ? onOk() : null)} color="primary" autoFocus>
|
||||
<Button onClick={() => (onOk ? onOk() : null)} autoFocus>
|
||||
{okBtnCaption}
|
||||
</Button>
|
||||
</Box>
|
||||
@ -247,6 +250,28 @@ const P8PAppInlineWarn = props => buildVariantInlineMessage(props, P8P_APP_MESSA
|
||||
//Встраиваемое сообщение информации
|
||||
const P8PAppInlineInfo = props => buildVariantInlineMessage(props, P8P_APP_MESSAGE_VARIANT.INFO);
|
||||
|
||||
//Диалог подсказки
|
||||
const P8PHintDialog = ({ title, hint, onOk }) => {
|
||||
return (
|
||||
<Dialog open={true} onClose={() => (onOk ? onOk() : null)}>
|
||||
<DialogTitle>{title}</DialogTitle>
|
||||
<DialogContent>
|
||||
<div dangerouslySetInnerHTML={{ __html: hint }}></div>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => (onOk ? onOk() : null)}>{BUTTONS.OK}</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Диалог подсказки
|
||||
P8PHintDialog.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
hint: PropTypes.string.isRequired,
|
||||
onOk: PropTypes.func
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
@ -260,5 +285,6 @@ export {
|
||||
P8PAppInlineMessage,
|
||||
P8PAppInlineError,
|
||||
P8PAppInlineWarn,
|
||||
P8PAppInlineInfo
|
||||
P8PAppInlineInfo,
|
||||
P8PHintDialog
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user