forked from CITKParus/P8-Panels
67 lines
2.3 KiB
JavaScript
67 lines
2.3 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга
|
|
Вспомогательные стили Paper
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import { useTheme } from "@mui/material/styles"; //Хук темы приложения
|
|
import { STATE } from "../../../app.text"; //Типовые текстовые ресурсы и константы
|
|
import { P8P_COLOR_STATE, P8P_COLOR_STATE_BG } from "../colors/common"; //Дополнительные цвета - общие
|
|
import { P8P_COMPONENT_WIDTH, P8P_COMPONENT_HEIGHT } from "./common"; //Стили - общие
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Цвета заливки индикатора
|
|
const P8P_INDICATOR_BG_COLOR = {
|
|
[STATE.OK]: P8P_COLOR_STATE_BG[STATE.OK],
|
|
[STATE.ERR]: P8P_COLOR_STATE_BG[STATE.ERR],
|
|
[STATE.WARN]: P8P_COLOR_STATE_BG[STATE.WARN]
|
|
};
|
|
|
|
//Цвета текста и иконок индикатора
|
|
const P8P_INDICATOR_COLOR = {
|
|
[STATE.OK]: P8P_COLOR_STATE[STATE.OK],
|
|
[STATE.ERR]: P8P_COLOR_STATE[STATE.ERR],
|
|
[STATE.WARN]: P8P_COLOR_STATE[STATE.WARN]
|
|
};
|
|
|
|
//-----------------------
|
|
//Вспомогательные функции
|
|
//-----------------------
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
//Стиль для контейнера индикатора
|
|
export const P8P_PAPER_INDICATOR = ({ state, color, backgroundColor, clickable }) => {
|
|
//Определение темы приложения
|
|
const theme = useTheme();
|
|
//Возвращаем стиль
|
|
return {
|
|
padding: "10px",
|
|
...P8P_COMPONENT_WIDTH({ width: "100%" }),
|
|
...P8P_COMPONENT_HEIGHT({ height: "100%" }),
|
|
//width: "100%",
|
|
//height: "100%",
|
|
overflow: "hidden",
|
|
backgroundColor: backgroundColor || P8P_INDICATOR_BG_COLOR[state],
|
|
color: color || P8P_INDICATOR_COLOR[state],
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
...(clickable
|
|
? {
|
|
cursor: "pointer",
|
|
"&:hover": { filter: "brightness(0.92) !important" },
|
|
"&:active": { backgroundColor: theme.palette.P8PAction.active }
|
|
}
|
|
: {})
|
|
};
|
|
};
|