WEBAPP: Типовые состояния и цвета для состояний в app.*.js, типовой диалог подсказки P8PHintDialog

app.styles.js

@@ -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: {

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"
+};

app/components/p8p_app_message.js

@@ -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",
+    INFO: STATE.INFO,
-    WARN: "warning",
+    WARN: STATE.WARN,
-    ERR: "error"
+    ERR: STATE.ERR
 };
 
 //Стили
@@ -36,28 +38,35 @@ const STYLES = {
         wordBreak: "break-word"
     },
     INFO: {
-        titleText: {},
+        titleText: {
-        bodyText: {}
+            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)
+    if (title && titleText) titlePart = <DialogTitle style={{ ...style.DEFAULT, ...style.titleText }}>{titleText}</DialogTitle>;
-        titlePart = (
-            <DialogTitle id="message-dialog-title" 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
+        <Dialog open={open || false} onClose={() => (onCancel ? onCancel() : null)}>
-            open={open || false}
-            aria-labelledby="message-dialog-title"
-            aria-describedby="message-dialog-description"
-            onClose={() => (onCancel ? onCancel() : null)}
-        >
             {titlePart}
             <DialogContent>
-                <DialogContentText id="message-dialog-description" style={style.bodyText}>
+                <DialogContentText style={style.bodyText}>{!showFullErrorText ? text : fullErrorText}</DialogContentText>
-                    {!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
 };