CITKParus/P8-Panels
2
0
Fork 2
Code Issues Pull Requests 1 Projects Releases Wiki Activity

ЦИТК-1077 - Добавлен P8PHeader и подкомпоненты для создания заголовка панели

Browse Source
This commit is contained in:
Dollerino 2026-08-14 18:20:18 +03:00
parent e243a85a4a
commit a85c4154a5
45 changed files with 1895 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
app/components/p8p_dialog.js
View File

@ -9,12 +9,16 @@
import React, { useEffect, useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
import { Dialog, DialogTitle, DialogContent, DialogActions, Button, Box, Typography, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
import { BUTTONS } from "../../app.text"; //Общие текстовые ресурсы
import { P8P_INPUT, P8PInput } from "./p8p_input"; //Поле ввода
import { P8P_DIALOG_CONTENT_VARIANT } from "../theme/variants/p8p_dialog_content_variants"; //Варианты содержимого диалога
import { P8P_BUTTON_VARIANT } from "../theme/variants/p8p_button_variants"; //Варианты кнопок
import { P8P_DIALOG_TITLE_VARIANT } from "../theme/variants/p8p_dialog_title_variants"; //Варианты заголовков диалога
import { P8P_DIALOG_CONTENT_VARIANT } from "../theme/variants/p8p_dialog_content_variants"; //Варианты содержимого диалога
import { P8P_DIALOG_ACTIONS_VARIANT } from "../theme/variants/p8p_dialog_actions_variants"; //Варианты действий диалога
import { P8P_BUTTON_VARIANT } from "../theme/variants/p8p_button_variants"; //Варианты кнопок
import { P8P_TYPOGRAPHY_VARIANT } from "../theme/p8p_typography"; //Варианты шрифтов
import { P8P_ICON_BUTTON_VARIANT } from "../theme/variants/p8p_icon_button_variants"; //Варианты кнопок-иконок
import { P8P_BOX_DIALOG_TITLE } from "../theme/styles/box"; //Стили контейнеров
//---------
//Константы
@ -49,6 +53,8 @@ const P8PDialog = ({
inputs,
children,
okDisabled = false,
paddingDisabled = false,
actionsDisabled = false,
scrollContent = true,
onOk,
onCancel,
@ -89,30 +95,47 @@ const P8PDialog = ({
//Формирование представления
return (
<Dialog onClose={handleClose} open {...{ ...(width ? { maxWidth: width } : {}), ...(fullWidth === true ? { fullWidth: true } : {}) }}>
<DialogTitle variant={P8P_DIALOG_TITLE_VARIANT.PRIMARY}>{title}</DialogTitle>
<DialogContent variant={scrollContent ? P8P_DIALOG_CONTENT_VARIANT.PRIMARY : P8P_DIALOG_CONTENT_VARIANT.HIDDEN}>
<DialogTitle variant={P8P_DIALOG_TITLE_VARIANT.PRIMARY_DIVIDED}>
<Box sx={P8P_BOX_DIALOG_TITLE}>
<Box /> {/* Пустая ячейка для баланса */}
<Typography variant={P8P_TYPOGRAPHY_VARIANT.H6} textAlign="center">
{title}
</Typography>
<Box display="flex" justifyContent="flex-end">
<IconButton variant={P8P_ICON_BUTTON_VARIANT.DIALOG_CLOSE} onClick={handleClose}>
<Icon fontSize="small">close</Icon>
</IconButton>
</Box>
</Box>
</DialogTitle>
<DialogContent
variant={scrollContent ? P8P_DIALOG_CONTENT_VARIANT.PRIMARY : P8P_DIALOG_CONTENT_VARIANT.HIDDEN}
data-variant-props={{ paddingDisabled }}
>
{inputsState.map((input, i) => (
<P8PInput key={i} {...input} formValues={formValues} onChange={handleInputChange} />
))}
{children}
</DialogContent>
<DialogActions>
{onClose && (
<Button variant={P8P_BUTTON_VARIANT.OUTLINED} onClick={handleClose}>
{BUTTONS.CLOSE}
</Button>
)}
{onCancel && (
<Button variant={P8P_BUTTON_VARIANT.SECONDARY} onClick={handleCancel}>
{BUTTONS.CANCEL}
</Button>
)}
{onOk && (
<Button variant={P8P_BUTTON_VARIANT.PRIMARY} disabled={okDisabled} onClick={handleOk}>
{BUTTONS.OK}
</Button>
)}
</DialogActions>
{!actionsDisabled ? (
<DialogActions variant={P8P_DIALOG_ACTIONS_VARIANT.DIALOG}>
{onClose && (
<Button variant={P8P_BUTTON_VARIANT.OUTLINED} onClick={handleClose}>
{BUTTONS.CLOSE}
</Button>
)}
{onCancel && (
<Button variant={P8P_BUTTON_VARIANT.SECONDARY} onClick={handleCancel}>
{BUTTONS.CANCEL}
</Button>
)}
{onOk && (
<Button variant={P8P_BUTTON_VARIANT.PRIMARY} disabled={okDisabled} onClick={handleOk}>
{BUTTONS.OK}
</Button>
)}
</DialogActions>
) : null}
</Dialog>
);
};
@ -125,6 +148,8 @@ P8PDialog.propTypes = {
inputs: PropTypes.arrayOf(PropTypes.shape(P8P_INPUT)),
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
okDisabled: PropTypes.bool,
paddingDisabled: PropTypes.bool,
actionsDisabled: PropTypes.bool,
scrollContent: PropTypes.bool,
onOk: PropTypes.func,
onCancel: PropTypes.func,

34
app/components/p8p_header.js Normal file
View File

@ -0,0 +1,34 @@
/*
Парус 8 - Панели мониторинга
Компонент: Заголовок
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box } from "@mui/material"; //Интерфейсные элементы
import { P8P_BOX_HEADER } from "../theme/styles/box"; //Стили контейнеров
//-----------
//Тело модуля
//-----------
//Заголовок
const P8PHeader = ({ children, isFixed }) => {
return <Box sx={P8P_BOX_HEADER({ isFixed })}>{children}</Box>;
};
//Контроль свойств - Заголовок
P8PHeader.propTypes = {
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
isFixed: PropTypes.bool
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeader };

79
app/components/p8p_header/components/p8p_header_button_base.js Normal file
View File

@ -0,0 +1,79 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Базовая кнопка
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Icon, Typography, Stack, IconButton, Button } from "@mui/material"; //Интерфейсные элементы
import { P8P_TYPOGRAPHY_VARIANT } from "../../../theme/p8p_typography"; //Варианты шрифтов
import { P8P_TYPOGRAPHY_MAX_LINES } from "../../../theme/styles/typography"; //Стили текста
import { P8P_STACK_HEADER_WITH_CLEAR } from "../../../theme/styles/stack"; // //Стили для групповой информации
import { P8P_ICON_VARIANT } from "../../../theme/variants/p8p_icon_variants"; //Варианты иконок
import { P8P_COMPONENT_SIZE } from "../../../theme/constants"; //Общие константы стилей
import { P8P_BUTTON_VARIANT } from "../../../theme/variants/p8p_button_variants"; //Варианты кнопок
import { P8PHeaderItem } from "./p8p_header_item"; //Элемент заголовка
//-----------
//Тело модуля
//-----------
//Базовая кнопка
const P8PHeaderButtonBase = ({ icon, value, width, size = P8P_COMPONENT_SIZE.LARGE, iconSize, onClick, onClear, customButtonContent }) => {
console.log("rerender");
//При нажатии на кнопку
const handleClick = () => onClick && onClick();
//При необходимости очистки
const handleClear = () => onClear && onClear();
//Содержимое кнопки
const buttonConent = customButtonContent || (
<Stack direction="row" alignItems="center" justifyContent="center" alignContent="center" gap={1.5}>
{icon ? <Icon fontSize={iconSize ? iconSize : value ? P8P_COMPONENT_SIZE.SMALL : P8P_COMPONENT_SIZE.MEDIUM}>{icon}</Icon> : null}
{value ? (
<Typography sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines: 2 })} variant={P8P_TYPOGRAPHY_VARIANT.HEADER} title={value}>
{value}
</Typography>
) : null}
</Stack>
);
//Генерация содержимого
return (
<P8PHeaderItem width={width}>
<Stack sx={P8P_STACK_HEADER_WITH_CLEAR}>
<Button variant={P8P_BUTTON_VARIANT.HEADER} size={size} onClick={handleClick}>
{buttonConent}
</Button>
{onClear ? (
<IconButton onClick={handleClear}>
<Icon variant={P8P_ICON_VARIANT.HEADER_FILTER_DELETE}>cancel</Icon>
</IconButton>
) : null}
</Stack>
</P8PHeaderItem>
);
};
//Контроль свойств - Базовая кнопка
P8PHeaderButtonBase.propTypes = {
icon: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
iconSize: PropTypes.oneOf(Object.values(P8P_COMPONENT_SIZE)),
size: PropTypes.oneOf(Object.values(P8P_COMPONENT_SIZE)),
onClick: PropTypes.func.isRequired,
onClear: PropTypes.func,
customButtonContent: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderButtonBase };

78
app/components/p8p_header/components/p8p_header_filter_item.js Normal file
View File

@ -0,0 +1,78 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Элемент фильтра
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Icon, Stack, Typography, IconButton } from "@mui/material"; //Интерфейсные элементы
import { P8P_TYPOGRAPHY_VARIANT } from "../../../theme/p8p_typography"; //Варианты шрифтов
import { P8P_TYPOGRAPHY_MAX_LINES } from "../../../theme/styles/typography"; //Стили текста
import { P8P_STACK_HEADER_FILTER, P8P_STACK_HEADER_FILTER_CONTAINER } from "../../../theme/styles/stack"; //Стили для групповой информации
import { P8P_ICON_VARIANT } from "../../../theme/variants/p8p_icon_variants"; //Варианты иконок
//-----------
//Тело модуля
//-----------
//Элемент фильтра
const P8PHeaderFilterItem = ({ filter, onClick, onDelete }) => {
//Признак возможности нажатия
const isClickable = onDelete || onClick ? true : false;
//При нажатии на содержимое
const handleFilterClick = () => onClick && onClick(filter);
//При удалении фильтра
const handleFilterDelete = () => onDelete && onDelete(filter);
//Генерация содержимого
return (
<Stack sx={P8P_STACK_HEADER_FILTER_CONTAINER({ isClickable })}>
<Stack sx={P8P_STACK_HEADER_FILTER({ isClickable })} onClick={() => (onClick ? handleFilterClick : null)}>
<Typography
sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines: 1 })}
variant={P8P_TYPOGRAPHY_VARIANT.BODY2}
color="P8PText.secondary"
title={filter.caption}
>
{filter.caption}
</Typography>
{!React.isValidElement(filter.value) ? (
<Typography
sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines: 1 })}
variant={P8P_TYPOGRAPHY_VARIANT.BODY2}
color="P8PText.main"
title={filter.value}
>
{filter.value}
</Typography>
) : (
filter.value
)}
</Stack>
{onDelete ? (
<IconButton onClick={handleFilterDelete}>
<Icon variant={P8P_ICON_VARIANT.HEADER_FILTER_DELETE}>cancel</Icon>
</IconButton>
) : null}
</Stack>
);
};
//Контроль свойств - Элемент фильтра
P8PHeaderFilterItem.propTypes = {
filter: PropTypes.object,
onClick: PropTypes.func,
onDelete: PropTypes.func
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderFilterItem };

35
app/components/p8p_header/components/p8p_header_item.js Normal file
View File

@ -0,0 +1,35 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Элемент заголовка
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box } from "@mui/material"; //Интерфейсные элементы
import { P8P_BOX_HEADER_ITEM } from "../../../theme/styles/box"; //Стили контейнеров
//-----------
//Тело модуля
//-----------
//Элемент заголовка
const P8PHeaderItem = ({ width, children }) => {
//Генерация содержимого
return <Box sx={P8P_BOX_HEADER_ITEM({ width: width })}>{children}</Box>;
};
//Контроль свойств - Элемент заголовка
P8PHeaderItem.propTypes = {
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)])
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderItem };

39
app/components/p8p_header/p8p_header_button.js Normal file
View File

@ -0,0 +1,39 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Кнопка
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { P8P_COMPONENT_SIZE } from "../../theme/constants"; //Общие константы стилей
import { P8PHeaderButtonBase } from "./components/p8p_header_button_base"; //Базовая кнопка заголовка
//-----------
//Тело модуля
//-----------
//Кнопка
const P8PHeaderButton = ({ icon, value, width, size = P8P_COMPONENT_SIZE.LARGE, iconSize, onClick }) => {
//Генерация содержимого
return <P8PHeaderButtonBase icon={icon} value={value} width={width} size={size} iconSize={iconSize} onClick={onClick} />;
};
//Контроль свойств - Кнопка
P8PHeaderButton.propTypes = {
icon: PropTypes.string,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
iconSize: PropTypes.oneOf(Object.values(P8P_COMPONENT_SIZE)),
size: PropTypes.oneOf(Object.values(P8P_COMPONENT_SIZE)),
onClick: PropTypes.func.isRequired
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderButton };

40
app/components/p8p_header/p8p_header_constants.js Normal file
View File

@ -0,0 +1,40 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Константы
*/
//---------------------
//Подключение библиотек
//---------------------
import PropTypes from "prop-types"; //Контроль свойств компонента
import { STATE } from "../../../app.text"; //Текстовые ресурсы и константы
//-----------
//Тело модуля
//-----------
//Минимальная ширина при наличии элементов
const P8P_HEADER_MIN_FILTER_WIDTH = 125;
//Структура элемента описания фильтра
const P8P_HEADER_FILTER_SHAPE = PropTypes.shape({
name: PropTypes.string,
caption: PropTypes.string.isRequired,
value: PropTypes.any,
width: PropTypes.string
});
//Состояния индикатора
const P8P_HEADER_INDICATOR_STATE = {
UNDEFINED: STATE.UNDEFINED,
OK: STATE.OK,
WARN: STATE.WARN,
ERR: STATE.ERR
};
//----------------
//Интерфейс модуля
//----------------
export { P8P_HEADER_MIN_FILTER_WIDTH, P8P_HEADER_FILTER_SHAPE, P8P_HEADER_INDICATOR_STATE };

112
app/components/p8p_header/p8p_header_date_picker.js Normal file
View File

@ -0,0 +1,112 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Выбор даты
*/
//---------------------
//Подключение библиотек
//---------------------
import React, { useRef } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import dayjs from "dayjs"; //Работа с датами
import { TextField, Typography, Stack } from "@mui/material"; //Интерфейсные элементы
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
import { P8P_TEXT_FIELD_VARIANT } from "../../theme/variants/p8p_text_field_variants"; //Варианты полей ввода
import { P8P_TYPOGRAPHY_MAX_LINES } from "../../theme/styles/typography"; //Стили шрифтов
import { formatDateRF, formatDateTimeRF } from "../../core/utils"; //Общие вспомогательные функции приложения
import { P8P_COMPONENT_SIZE } from "../../theme/constants"; //Общие константы стилей
import { P8PHeaderButtonBase } from "./components/p8p_header_button_base"; //Базовая кнопка заголовка
//---------
//Константы
//---------
//Типы даты
const P8P_HEADER_DATE_PICKER_TYPE = {
DATE: "date",
DATETIME: "datetime-local",
MONTH: "month",
WEEK: "week",
TIME: "time"
};
//Форматирование значения даты
const P8P_HEADER_DATE_PICKER_CONVERTER = {
[P8P_HEADER_DATE_PICKER_TYPE.DATE]: date => formatDateRF(date),
[P8P_HEADER_DATE_PICKER_TYPE.DATETIME]: date => formatDateTimeRF(date),
[P8P_HEADER_DATE_PICKER_TYPE.MONTH]: date => dayjs(date).locale("ru").format("MMMM YYYY"),
[P8P_HEADER_DATE_PICKER_TYPE.WEEK]: date => {
//Определяем неделю и год
const [year, week] = date.split("-W");
//Строковый формат
return `${week} неделя ${year}`;
},
[P8P_HEADER_DATE_PICKER_TYPE.TIME]: date => date
};
//-----------
//Тело модуля
//-----------
//Выбор даты
const P8PHeaderDatePicker = ({ value, placeholder, type = "date", width, onSelect, onClear }) => {
//Ссылка на поле ввода
const inputRef = useRef(null);
//При нажатии на кнопку выбора
const handleButtonClick = () => inputRef.current.showPicker();
//При смене значения
const onChange = e => onSelect && onSelect(e.target.value);
//Собственное представление кнопки
const buttonContent = (
<Stack direction="row" alignItems="center" justifyContent="center" alignContent="center">
<TextField
inputRef={inputRef}
type={type}
variant="standard"
value={value}
onChange={onChange}
data-variant={P8P_TEXT_FIELD_VARIANT.HIDDEN}
/>
<Typography
sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines: 2 })}
alignContent="center"
variant={P8P_TYPOGRAPHY_VARIANT.HEADER}
title={value ? P8P_HEADER_DATE_PICKER_CONVERTER[type](value) : placeholder}
>
{value ? P8P_HEADER_DATE_PICKER_CONVERTER[type](value) : placeholder}
</Typography>
</Stack>
);
//Генерация содержимого
return (
<P8PHeaderButtonBase
value={value}
width={width}
size={P8P_COMPONENT_SIZE.SMALL}
onClick={handleButtonClick}
onClear={onClear}
customButtonContent={buttonContent}
/>
);
};
//Контроль свойств - Выбор даты
P8PHeaderDatePicker.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
placeholder: PropTypes.string.isRequired,
type: PropTypes.oneOf(Object.values(P8P_HEADER_DATE_PICKER_TYPE)),
width: PropTypes.string,
onSelect: PropTypes.func,
onClear: PropTypes.func
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderDatePicker, P8P_HEADER_DATE_PICKER_TYPE };

73
app/components/p8p_header/p8p_header_dictionary.js Normal file
View File

@ -0,0 +1,73 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Плавающая кнопка действия
*/
//---------------------
//Подключение библиотек
//---------------------
import React, { useContext } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { ApplicationCtx } from "../../context/application"; //Контекст приложения
import { P8P_COMPONENT_SIZE } from "../../theme/constants"; //Общие константы стилей
import { P8PHeaderButtonBase } from "./components/p8p_header_button_base"; //Общие константы стилей
//---------
//Константы
//---------
//Структура элемента входного параметра
const P8P_HEADER_DICT_INPUT_PRMS = PropTypes.shape({
name: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
});
//-----------
//Тело модуля
//-----------
//Выбор значения из словаря
const P8PHeaderDictionary = ({ value, placeholder, unitCode, showMethod = "main", inputParameters, width, onSelect, onClear }) => {
//Подключение к контексту приложения
const { pOnlineShowDictionary } = useContext(ApplicationCtx);
//При нажатии на кнопку
const handleButtonClick = () => {
pOnlineShowDictionary({
unitCode,
showMethod,
inputParameters,
callBack: res => res.success && onSelect && onSelect(res.outParameters)
});
};
//Формирование представления
return (
<P8PHeaderButtonBase
value={value || placeholder}
width={width}
size={P8P_COMPONENT_SIZE.SMALL}
onClick={handleButtonClick}
onClear={onClear}
/>
);
};
//Контроль свойств - Выбор значения из словаря
P8PHeaderDictionary.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
placeholder: PropTypes.string.isRequired,
unitCode: PropTypes.string.isRequired,
showMethod: PropTypes.string,
inputParameters: PropTypes.arrayOf(P8P_HEADER_DICT_INPUT_PRMS),
width: PropTypes.string,
onSelect: PropTypes.func,
onClear: PropTypes.func
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderDictionary };

82
app/components/p8p_header/p8p_header_field.js Normal file
View File

@ -0,0 +1,82 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Поле ввода
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { TextField, InputAdornment, Icon, FormControl, IconButton } from "@mui/material"; //Интерфейсные элементы
import { P8P_FORM_CONTROL_HEADER_FIELD } from "../../theme/styles/form_control"; //Стили контекста полей ввода
import { P8P_TEXT_FIELD_VARIANT } from "../../theme/variants/p8p_text_field_variants"; //Варианты полей ввода
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка
//---------
//Константы
//---------
//Структура элемента доп. иконки поля ввода
const P8P_HEADER_FIELD_ADORNMENT_SHAPE = PropTypes.shape({
icon: PropTypes.string.isRequired,
disabled: PropTypes.bool,
onClick: PropTypes.func
});
//-----------
//Тело модуля
//-----------
//Поле ввода
const P8PHeaderField = ({ value, placeholder, type = "text", endAdornments = [], width, onChange }) => {
//При смене значения
const handleChange = e => onChange && onChange(e.target.value);
//Генерация содержимого
return (
<P8PHeaderItem width={width}>
<FormControl variant="outlined" sx={P8P_FORM_CONTROL_HEADER_FIELD}>
<TextField
type={type}
name="header-field"
placeholder={placeholder}
value={value}
variant="standard"
data-variant={P8P_TEXT_FIELD_VARIANT.PRIMARY}
title={value || placeholder}
onChange={handleChange}
InputProps={{
endAdornment:
endAdornments.length > 0 ? (
<InputAdornment position="end">
{endAdornments.map((item, index) => (
<IconButton onClick={e => item.onClick(e)} key={index} disabled={item.disabled}>
<Icon>{item.icon}</Icon>
</IconButton>
))}
</InputAdornment>
) : null
}}
/>
</FormControl>
</P8PHeaderItem>
);
};
//Контроль свойств - Поле ввода
P8PHeaderField.propTypes = {
value: PropTypes.any,
placeholder: PropTypes.string.isRequired,
type: PropTypes.string,
endAdornments: PropTypes.arrayOf(P8P_HEADER_FIELD_ADORNMENT_SHAPE),
width: PropTypes.string,
onChange: PropTypes.func
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderField };

125
app/components/p8p_header/p8p_header_filter.js Normal file
View File

@ -0,0 +1,125 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Фильтры
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Icon, Grid, IconButton, Popover, List, ListItem } from "@mui/material"; //Интерфейсные элементы
import { P8P_GRID_VARIANT } from "../../theme/variants/p8p_grid_variants"; //Варианты сеток
import { P8P_ICON_BUTTON_VARIANT } from "../../theme/variants/p8p_icon_button_variants"; //Варианты кнопок-иконок
import { P8P_BOX_HEADER_FILTER, P8P_BOX_HEADER_FILTER_GRP } from "../../theme/styles/box"; //Стили контейнеров
import { P8P_LIST_VARIANT } from "../../theme/variants/p8p_list_variants"; //Варианты списка
import { P8P_LIST_ITEM_VARIANT } from "../../theme/variants/p8p_list_item_variants"; //Варианты элемента списка
import { P8PHeaderFilterItem } from "./components/p8p_header_filter_item"; //Элемент фильтра заголовка
import { useP8PHeaderFilter } from "./p8p_header_hooks"; //Вспомогательные хуки фильтра
import { P8P_GRID_HEADER_FILTER_ITEM } from "../../theme/styles/grid"; //Стили адаптивного контейнера
import { P8P_HEADER_FILTER_SHAPE } from "./p8p_header_constants"; //Константы заголовка
//-----------
//Тело модуля
//-----------
//Фильтры
const P8PHeaderFilter = ({ filters, width, onClick, onDelete, showEmpty = true, maxDisplay = null }) => {
//Собственное состояние - состояние фильтра
const { gridRef, anchorEl, allowedFilters, visibleCount, isOverflowed, isLessMinWidth, handleFilterMoreOpen, handleFilterMoreClose } =
useP8PHeaderFilter({ filters, maxDisplay });
//Флаг отображения выпадающего списка
const open = Boolean(anchorEl);
//Флаг органичения отображения
const isLimited = maxDisplay > 0;
//Скрытые фильтры
const hiddenFilters = filters.slice(visibleCount);
//При удалении фильтра
const handleFilterDelete = filter => onDelete && onDelete({ filter });
//При нажатии на фильтр
const handleFilterClick = filter => onClick && onClick({ filter });
//Генерация содержимого
return (
<>
{showEmpty || allowedFilters.length > 0 ? (
<Box sx={P8P_BOX_HEADER_FILTER({ width, isLimited, isLessMinWidth })}>
<Box sx={P8P_BOX_HEADER_FILTER_GRP}>
<Grid
ref={gridRef}
container
variant={P8P_GRID_VARIANT.HEADER_FILTER_CONTAINER}
spacing={3}
wrap={isLimited ? "nowrap" : "wrap"}
>
{allowedFilters.map((filter, index) => (
<Grid
item
variant={P8P_GRID_VARIANT.HEADER_FILTER_ITEM}
sx={P8P_GRID_HEADER_FILTER_ITEM({ width: filter?.width, isLimited, isLessMinWidth })}
key={index}
>
<P8PHeaderFilterItem
filter={filter}
onClick={onClick ? handleFilterClick : null}
onDelete={onDelete ? handleFilterDelete : null}
/>
</Grid>
))}
</Grid>
</Box>
{isOverflowed && (
<IconButton variant={P8P_ICON_BUTTON_VARIANT.HEADER_FILTER_MORE} onClick={handleFilterMoreOpen}>
<Icon>tune</Icon>
</IconButton>
)}
</Box>
) : null}
<Popover
open={open}
anchorEl={anchorEl}
onClose={handleFilterMoreClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "right"
}}
transformOrigin={{
vertical: "top",
horizontal: "right"
}}
>
<List variant={P8P_LIST_VARIANT.HEADER_FILTER_MORE}>
{hiddenFilters.map((filter, index) => (
<ListItem key={index} variant={P8P_LIST_ITEM_VARIANT.HEADER_FILTER_MORE}>
<P8PHeaderFilterItem
filter={filter}
onClick={onClick ? handleFilterClick : null}
onDelete={onDelete ? handleFilterDelete : null}
/>
</ListItem>
))}
</List>
</Popover>
</>
);
};
//Контроль свойств - Фильтры
P8PHeaderFilter.propTypes = {
filters: PropTypes.arrayOf(P8P_HEADER_FILTER_SHAPE),
width: PropTypes.string,
onClick: PropTypes.func,
onDelete: PropTypes.func,
showEmpty: PropTypes.bool,
maxDisplay: PropTypes.number
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderFilter };

121
app/components/p8p_header/p8p_header_hooks.js Normal file
View File

@ -0,0 +1,121 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Хуки для заголовка
*/
//---------------------
//Подключение библиотек
//---------------------
import { useState, useEffect, useCallback, useRef, useMemo } from "react"; //Классы React
import { P8P_HEADER_MIN_FILTER_WIDTH } from "./p8p_header_constants"; //Константы заголовка
//-----------
//Тело модуля
//-----------
//Кастомный хук для определения информации об отображении
const useP8PHeaderVisibleInfo = (containerRef, maxDisplay, totalFilters) => {
//Отображаемое количество
const [visibleCount, setVisibleCount] = useState(maxDisplay > 0 ? maxDisplay : 0);
//Признак переполненности
const [isOverflowed, setIsOverflowed] = useState(false);
//Признак уменьшения меньше минимального значения
const [isLessMinWidth, setIsLessMinWidth] = useState(false);
//Пересчет количество отображаемых
const recalcVisibleCount = useCallback(container => {
//Определяем дочерние элементы
const items = container.children;
//Определяем параметры контейнера
const containerRect = container.getBoundingClientRect();
//Если блок меньше минимального значения
if (containerRect.width < P8P_HEADER_MIN_FILTER_WIDTH && items.length > 0) {
//Информируем, что невозможно показать
setVisibleCount(0);
setIsOverflowed(true);
setIsLessMinWidth(true);
return;
}
//Обнуляем счетчик видимых
let visible = 0;
//Обходим дочерние элменты
for (let i = 0; i < items.length; i++) {
//Определяем параметры элемента
const itemRect = items[i].getBoundingClientRect();
//Проверяем, полностью ли элемент виден в контейнере
if (itemRect.bottom <= containerRect.bottom) {
visible++;
} else {
//Если один элемент скрыт, то и все последующие скрыты (при row-direction)
break;
}
}
//Устанавливаем отображаемых
setVisibleCount(visible);
setIsOverflowed(visible < items.length);
setIsLessMinWidth(false);
}, []);
//При открытии страницы
useEffect(() => {
//Определяем контейнер
const container = containerRef.current;
//Если контейнер не определен или установлено максимально отображение - не отслеживаем
if (!container || maxDisplay > 0) {
setIsOverflowed(maxDisplay < totalFilters);
return;
}
//Пересчет количество отображаемых
recalcVisibleCount(container);
//Определяем отслеживание
const observer = new ResizeObserver(() => {
//Пересчет количество отображаемых
recalcVisibleCount(container);
});
//Подключаем отслеживание
observer.observe(container);
//При закрытии компонента
return () => observer.disconnect();
}, [containerRef, maxDisplay, recalcVisibleCount, totalFilters]);
//Возвращаем данные
return { visibleCount, isOverflowed, isLessMinWidth };
};
//Хук состояния фильтра
const useP8PHeaderFilter = ({ filters, maxDisplay }) => {
//Собственное состояние - контейнер элементов
const gridRef = useRef(null);
//Собственное состояние - элемент выпадающего списка
const [anchorEl, setAnchorEl] = useState(null);
//Собственное состояние - информация об отображении
const { visibleCount, isOverflowed, isLessMinWidth } = useP8PHeaderVisibleInfo(gridRef, maxDisplay, filters.length);
//Отображаемые фильтры
const allowedFilters = useMemo(() => {
if (Array.isArray(filters) && filters.length > 0) {
return filters.slice(0, maxDisplay || filters.length);
} else {
return [];
}
}, [filters, maxDisplay]);
//По нажатию на меню скрытых элементов
const handleFilterMoreOpen = event => {
setAnchorEl(event.currentTarget);
};
//При закрытии меню скрытых элементов
const handleFilterMoreClose = () => {
setAnchorEl(null);
};
return { gridRef, anchorEl, allowedFilters, visibleCount, isOverflowed, isLessMinWidth, handleFilterMoreOpen, handleFilterMoreClose };
};
//----------------
//Интерфейс модуля
//----------------
export { useP8PHeaderFilter };

63
app/components/p8p_header/p8p_header_indicator.js Normal file
View File

@ -0,0 +1,63 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Индикатор
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Stack, Typography } from "@mui/material"; //Интерфейсные элементы
import { P8P_STACK_HEADER_INDICATOR } from "../../theme/styles/stack"; //Стили для групповой информации
import { TEXTS } from "../../../app.text"; //Текстовые ресурсы и константы
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
import { P8P_HEADER_INDICATOR_STATE } from "./p8p_header_constants"; //Константы заголовка
import { P8P_TYPOGRAPY_HDR_INDICATOR } from "../../theme/styles/typography"; //Стили текста
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка
//-----------
//Тело модуля
//-----------
//Индикатор
const P8PHeaderIndicator = ({ caption, value, state = P8P_HEADER_INDICATOR_STATE.UNDEFINED, disableCaptionColor = false, width, color, onClick }) => {
//При нажатии на текст
const handleClick = () => onClick && onClick({ caption, value });
//Генерация содержимого
return (
<P8PHeaderItem width={width}>
<Stack sx={P8P_STACK_HEADER_INDICATOR({ isClickable: onClick ? true : false })} onClick={handleClick}>
<Typography
variant={P8P_TYPOGRAPHY_VARIANT.BODY2}
sx={P8P_TYPOGRAPY_HDR_INDICATOR({ maxLines: 1, state, isDefaultColor: disableCaptionColor, color })}
title={caption}
>
{caption}
</Typography>
<Typography variant={P8P_TYPOGRAPHY_VARIANT.BODY2} sx={P8P_TYPOGRAPY_HDR_INDICATOR({ maxLines: 1, state, color })} title={value}>
{[undefined, null, ""].includes(value) ? TEXTS.NO_DATA_FOUND_SHORT : value}
</Typography>
</Stack>
</P8PHeaderItem>
);
};
//Контроль свойств - Индикатор
P8PHeaderIndicator.propTypes = {
caption: PropTypes.string.isRequired,
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
state: PropTypes.oneOf(Object.values(P8P_HEADER_INDICATOR_STATE)),
disableCaptionColor: PropTypes.bool,
width: PropTypes.string,
color: PropTypes.string,
onClick: PropTypes.func
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderIndicator };

103
app/components/p8p_header/p8p_header_selector.js Normal file
View File

@ -0,0 +1,103 @@
/*
Парус 8 - Панели мониторинга - Заголовок
Компонент: Выбор из выпадающего списка
*/
//---------------------
//Подключение библиотек
//---------------------
import React, { useMemo } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { FormControl, Select, MenuItem, Stack, Checkbox } from "@mui/material"; //Интерфейсные элементы
import { P8P_SELECT_VARIANT } from "../../theme/variants/p8p_select_variants"; //Варианты полей выбора (Select)
import { P8P_MENU_ITEM_VARIANT } from "../../theme/variants/p8p_menu_item_variants"; //Варианты элементов меню
import { P8P_FORM_CONTROL_HEADER_SELECTOR } from "../../theme/styles/form_control"; //Стили контекста полей ввода
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка
//---------
//Константы
//---------
//Структура элемента выпадающего списка
const P8P_HEADER_SELECTOR_OPTION = PropTypes.shape({
value: PropTypes.any.isRequired,
title: PropTypes.string.isRequired
});
//-----------
//Тело модуля
//-----------
//Выбор из выпадающего списка
const P8PHeaderSelector = ({ value, placeholder, options = [], multiple = false, width, onSelect }) => {
//При нажатии на текст
const handleChange = e => onSelect && onSelect(e.target.value);
//Отображаемое значение
const displayValue = useMemo(() => {
//Если это множественный выбор
if (multiple) {
//Нет значения
if (!value || value.length === 0) return placeholder;
//Собираем выбранные значения
return options
.filter(option => value.includes(option.value))
.map(option => option.title)
.join(", ");
} else {
//Нет значения
if (!value) return placeholder;
//Определяем отображаемое
const option = options.find(option => option.value === value);
return option ? option.title : placeholder;
}
}, [value, placeholder, options, multiple]);
//Генерация содержимого
return (
<P8PHeaderItem width={width}>
<FormControl variant="outlined" sx={P8P_FORM_CONTROL_HEADER_SELECTOR}>
<Select
name={"header-selector"}
value={value}
displayEmpty
multiple={multiple}
onChange={handleChange}
title={displayValue}
data-variant={P8P_SELECT_VARIANT.HEADER}
renderValue={() => displayValue}
>
{options.map((option, index) => (
<MenuItem value={option.value} key={index} variant={P8P_MENU_ITEM_VARIANT.HEADER}>
{multiple ? (
<Stack direction={"row"} alignItems={"center"}>
<Checkbox checked={value && value.indexOf(option.value) > -1} />
{option.title}
</Stack>
) : (
option.title
)}
</MenuItem>
))}
</Select>
</FormControl>
</P8PHeaderItem>
);
};
//Контроль свойств - Выбор из выпадающего списка
P8PHeaderSelector.propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
placeholder: PropTypes.string.isRequired,
options: PropTypes.arrayOf(P8P_HEADER_SELECTOR_OPTION).isRequired,
multiple: PropTypes.bool,
width: PropTypes.string,
onSelect: PropTypes.func
};
//----------------
//Интерфейс модуля
//----------------
export { P8PHeaderSelector };

63
app/components/p8p_header/p8p_header_text.js Normal file
View File

@ -0,0 +1,63 @@
/*
Парус 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 };

200
app/components/p8p_header/p8p_header_utils.js Normal file
View File

@ -0,0 +1,200 @@
import React, { useState } from "react";
import { hasValue } from "../../core/utils";
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Stack, Chip, Typography, Box } from "@mui/material"; //Интерфейсные компоненты
import { P8P_DATA_TYPES } from "../../core/data_types";
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper";
import { P8P_BOX_HEADER_FILTER_CUSTOM } from "../../theme/styles/box";
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography";
import { P8P_TYPOGRAPHY_MAX_LINES } from "../../theme/styles/typography";
import { P8P_STACK_HEADER_FILTER } from "../../theme/styles/stack";
import { P8PTableColumnFilterDialog } from "../p8p_table/p8p_table_column_filter_dialog";
const FilterComponent = ({ filter, columnDef, valueFromCaption, valueToCaption, valueFormatter, onFilterChanged }) => {
//Собственное состояние - фильтруемая колонка
const [filterColumn, setFilterColumn] = useState(null);
const isClickable = false;
//Значения фильтра фильтруемой колонки
const [filterColumnFrom, filterColumnTo] = filterColumn
? (() => {
return filter ? [filter.from == null ? "" : filter.from, filter.to == null ? "" : filter.to] : ["", ""];
})()
: ["", ""];
//Отработка ввода значения фильтра колонки
const handleFilterOk = (columnName, from, to) => {
if (onFilterChanged) onFilterChanged({ columnName, from: from === "" ? null : from, to: to === "" ? null : to });
setFilterColumn(null);
};
//Отработка очистки значения фильтра колонки
const handleFilterClear = columnName => {
if (onFilterChanged) onFilterChanged({ columnName, from: null, to: null });
setFilterColumn(null);
};
//Отработка отмены ввода значения фильтра колонки
const handleFilterCancel = () => {
setFilterColumn(null);
};
return (
<>
<Stack sx={P8P_STACK_HEADER_FILTER({ isClickable })}>
<Typography
sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines: 1 })}
variant={P8P_TYPOGRAPHY_VARIANT.BODY2}
color="P8PText.secondary"
title={columnDef.name}
noWrap
>
{columnDef.name}
</Typography>
<Box typography={"P8PBody2"} sx={P8P_BOX_HEADER_FILTER_CUSTOM} onClick={() => setFilterColumn(columnDef.name)}>
<Typography variant={P8P_TYPOGRAPHY_VARIANT.BODY2}>
{hasValue(filter.from) && !columnDef.values && columnDef.dataType != P8P_DATA_TYPES.STR
? `${valueFromCaption.toLowerCase()} `
: null}
{hasValue(filter.from) ? (valueFormatter ? valueFormatter({ value: filter.from, columnDef }) : filter.from) : null}
{hasValue(filter.to) && !columnDef.values && columnDef.dataType != P8P_DATA_TYPES.STR
? ` ${valueToCaption.toLowerCase()} `
: null}
{hasValue(filter.to) ? (valueFormatter ? valueFormatter({ value: filter.to, columnDef }) : filter.to) : null}
</Typography>
</Box>
</Stack>
{filterColumn ? (
<P8PTableColumnFilterDialog
columnDef={columnDef}
from={filterColumnFrom}
to={filterColumnTo}
valueCaption={P8P_DATA_GRID_CONFIG_PROPS.valueFilterCaption}
valueFromCaption={P8P_DATA_GRID_CONFIG_PROPS.valueFromFilterCaption}
valueToCaption={P8P_DATA_GRID_CONFIG_PROPS.valueToFilterCaption}
okBtnCaption={P8P_DATA_GRID_CONFIG_PROPS.okFilterBtnCaption}
clearBtnCaption={P8P_DATA_GRID_CONFIG_PROPS.clearFilterBtnCaption}
cancelBtnCaption={P8P_DATA_GRID_CONFIG_PROPS.cancelFilterBtnCaption}
valueFormatter={valueFormatter}
onOk={handleFilterOk}
onClear={handleFilterClear}
onCancel={handleFilterCancel}
/>
) : null}
</>
);
};
//Контроль свойств - Текст
FilterComponent.propTypes = {
filter: PropTypes.object,
columnDef: PropTypes.object,
valueFromCaption: PropTypes.string,
valueToCaption: PropTypes.string,
valueFormatter: PropTypes.func,
onFilterChanged: PropTypes.func
};
//Форматирование фильтра таблицы
const formatFilterDataGrid = ({
filters,
columnsDef,
valueFromCaption = P8P_DATA_GRID_CONFIG_PROPS.valueFromCaption,
valueToCaption = P8P_DATA_GRID_CONFIG_PROPS.valueToCaption,
valueFormatter,
onClick,
onFilterChanged,
objectsCopier
}) => {
//Форматируем фильтры под заголовок
const formattedFilters = filters.map(filter => {
//Определяем колонку
const columnDef = columnsDef.find(columnDef => columnDef.name == filter.name);
//Формирование содержимого фильтра
const buildFilterContent = () => {
//Инициализируем части
const parts = [];
//Если есть "Значение с"
if (hasValue(filter.from)) {
//Если необходимо добавить префикс
if (!columnDef.values && columnDef.dataType != P8P_DATA_TYPES.STR) {
parts.push(`${valueFromCaption.toLowerCase()} `);
}
//Добавляем "Значение с"
parts.push(valueFormatter ? valueFormatter({ value: filter.from, columnDef }) : filter.from);
}
//Если есть "Значение по"
if (hasValue(filter.to)) {
//Если необходимо добавить префикс
if (!columnDef.values && columnDef.dataType != P8P_DATA_TYPES.STR) {
parts.push(` ${valueToCaption.toLowerCase()} `);
}
//Добавляем "Значение по"
parts.push(valueFormatter ? valueFormatter({ value: filter.to, columnDef }) : filter.to);
}
//Возвращаем массив элементов
return parts;
};
//При изменении состояния фильтра
const handleFilterChanged = ({ columnName, from, to }) => {
let newFilters = objectsCopier(filters);
let curFilter = newFilters.find(f => f.name == columnName);
if (from == null && to == null && curFilter) newFilters.splice(newFilters.indexOf(curFilter), 1);
if ((from != null || to != null) && !curFilter) newFilters.push({ name: columnName, from, to });
if ((from != null || to != null) && curFilter) {
curFilter.from = from;
curFilter.to = to;
}
if (onFilterChanged) onFilterChanged({ filters: newFilters });
};
//Инициализируем содержмое значения
const content = buildFilterContent();
//Возвращаем результат
return {
caption: columnDef.caption,
// from: valueFormatter ? (
// <Box typography={"P8PBody2"} sx={P8P_BOX_HEADER_FILTER_CUSTOM}>
// {React.Children.toArray(content)}
// </Box>
// ) : (
// content.join("")
// ),
from: (
<FilterComponent
filter={filter}
columnDef={columnDef}
valueFromCaption={valueFromCaption}
valueToCaption={valueToCaption}
valueFormatter={valueFormatter}
/>
),
customView: (
<FilterComponent
filter={filter}
columnDef={columnDef}
valueFromCaption={valueFromCaption}
valueToCaption={valueToCaption}
valueFormatter={valueFormatter}
onFilterChanged={handleFilterChanged}
/>
),
onClick: () => onClick && onClick(columnDef.name)
};
});
return formattedFilters;
};
export const P8P_HEADER_FILTER_FORMAT = {
DATA_GRID: ({
filters,
columnsDef,
valueFromCaption = P8P_DATA_GRID_CONFIG_PROPS.valueFromCaption,
valueToCaption = P8P_DATA_GRID_CONFIG_PROPS.valueToCaption,
valueFormatter,
onClick,
onFilterChanged,
objectsCopier
}) => formatFilterDataGrid({ filters, columnsDef, valueFromCaption, valueToCaption, valueFormatter, onClick, onFilterChanged, objectsCopier })
};

15
app/theme/constants.js Normal file
View File

@ -0,0 +1,15 @@
/*
Парус 8 - Панели мониторинга
Общие константы стилей
*/
//----------------
//Интерфейс модуля
//----------------
//Размеры компонента
export const P8P_COMPONENT_SIZE = {
SMALL: "small",
MEDIUM: "medium",
LARGE: "large"
};

8
app/theme/p8p_components.js
View File

@ -18,10 +18,12 @@ import { P8P_ICON_OVERRIDES } from "./variants/p8p_icon_variants"; //Расши
import { P8P_ICON_BUTTON_OVERRIDES } from "./variants/p8p_icon_button_variants"; //Расширение IconButton
import { P8P_TEXT_FIELD_OVERRIDES } from "./variants/p8p_text_field_variants"; //Расширение TextField
import { P8P_LIST_OVERRIDES } from "./variants/p8p_list_variants"; //Расширение List
import { P8P_LIST_ITEM_OVERRIDES } from "./variants/p8p_list_item_variants"; //Расширение ListItem
import { P8P_LIST_ITEM_TEXT_OVERRIDES } from "./variants/p8p_list_item_text_variants"; //Расширение ListItemText
import { P8P_DIALOG_TITLE_OVERRIDES } from "./variants/p8p_dialog_title_variants"; //Расширение DialogTitle
import { P8P_DIALOG_CONTENT_OVERRIDES } from "./variants/p8p_dialog_content_variants"; //Расширение DialogContent
import { P8P_DIALOG_CONTENT_TEXT_OVERRIDES } from "./variants/p8p_dialog_content_text_variants"; //Расширение DialogContentText
import { P8P_DIALOG_ACTIONS_OVERRIDES } from "./variants/p8p_dialog_actions_variants"; //Расширение DialogActions
import { P8P_DRAWER_OVERRIDES } from "./variants/p8p_drawer_variants"; //Расширение Drawer
import { P8P_APP_BAR_OVERRIDES } from "./variants/p8p_app_bar_variants"; //Расширение AppBar
import { P8P_GRID_OVERRIDES } from "./variants/p8p_grid_variants"; //Расширение Grid
@ -32,6 +34,7 @@ import { P8P_INPUT_OVERRIDES } from "./variants/p8p_input_variants"; //Расш
import { P8P_INPUT_LABEL_OVERRIDES } from "./variants/p8p_input_label_variants"; //Расширение InputLable
import { P8P_MENU_ITEM_OVERRIDES } from "./variants/p8p_menu_item_variants"; //Расширение MenuItem
import { P8P_AUTOCOMPLETE_OVERRIDES } from "./variants/p8p_autocomplete_variants"; //Расширение Autocomplete
import { P8P_FAB_OVERRIDES } from "./variants/p8p_fab_variants"; //Расширение Fab
//----------------
//Интерфейс модуля
@ -52,7 +55,9 @@ export const P8P_COMPONENTS = {
MuiDialogTitle: P8P_DIALOG_TITLE_OVERRIDES,
MuiDialogContent: P8P_DIALOG_CONTENT_OVERRIDES,
MuiDialogContentText: P8P_DIALOG_CONTENT_TEXT_OVERRIDES,
MuiDialogActions: P8P_DIALOG_ACTIONS_OVERRIDES,
MuiList: P8P_LIST_OVERRIDES,
MuiListItem: P8P_LIST_ITEM_OVERRIDES,
MuiListItemText: P8P_LIST_ITEM_TEXT_OVERRIDES,
MuiDrawer: P8P_DRAWER_OVERRIDES,
MuiAppBar: P8P_APP_BAR_OVERRIDES,
@ -63,5 +68,6 @@ export const P8P_COMPONENTS = {
MuiInputLabel: P8P_INPUT_LABEL_OVERRIDES,
MuiInput: P8P_INPUT_OVERRIDES,
MuiMenuItem: P8P_MENU_ITEM_OVERRIDES,
MuiAutocomplete: P8P_AUTOCOMPLETE_OVERRIDES
MuiAutocomplete: P8P_AUTOCOMPLETE_OVERRIDES,
MuiFab: P8P_FAB_OVERRIDES
};

12
app/theme/p8p_palette.js
View File

@ -57,6 +57,11 @@ export const P8P_PALETTE = {
secondary: "#F8FAFD",
tableHeader: "#E6EAF3"
},
P8PScroll: {
track: "#EBEBEB",
thumb: "#b4b4b4",
hover: "#808080"
},
P8PAction: {
active: "#0000008a"
},
@ -68,5 +73,12 @@ export const P8P_PALETTE = {
main: "#1976d2",
hover: "#c3e1ff"
},
P8PHeader: {
text: "#37474F",
textLink: "#0F71BD",
link: "#005EA6",
border: "#AFB9CB",
background: "#F5F7F7"
},
P8PPurple: "#5e35b1"
};

8
app/theme/p8p_typography.js
View File

@ -176,6 +176,13 @@ export const P8P_TYPOGRAPHY = {
lineHeight: "140%",
letterSpacing: "0.1px"
},
P8PHeader: {
...P8PFontMontserrat,
fontWeight: "600",
fontSize: "15px",
lineHeight: "140%",
letterSpacing: "-0.02em"
},
P8PDesktopGroup: {
fontFamily: "tahoma, arial, verdana, sans-serif!important",
fontSize: "13px !important",
@ -212,6 +219,7 @@ export const P8P_TYPOGRAPHY_VARIANT = {
INPUT_LABEL: "P8PInputLabel",
BODY2_BOLD: "P8PBody2Bold",
TITLE: "P8PTitle",
HEADER: "P8PHeader",
DESKTOP_GROUP: "P8PDesktopGroup",
DESKTOP_CAPTION: "P8PDesktopCaption"
};

118
app/theme/styles/box.js
View File

@ -7,7 +7,8 @@
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_WIDTH, P8P_COMPONENT_HEIGHT, P8P_SCROLL_AUTO } from "./common"; //Стили - общие
import { hasValue } from "../../core/utils";
import { P8P_SCROLL_AUTO } from "./common"; //Стили - общие
import { useTheme } from "@mui/material/styles"; //Хук темы приложения
//---------
@ -41,21 +42,40 @@ export const P8P_BOX_CENTER_BETWEEN = {
//Контейнер плавающий, элементы по центру
export const P8P_BOX_CENTER = { display: "flex", alignItems: "center", justifyContent: "center" };
//Контейнер с возможностью нажатия
export const P8P_BOX_CLICKABLE = {
cursor: "pointer",
"&:hover": {
opacity: 0.8
}
};
//Контейнер для заголовка диалога
export const P8P_BOX_DIALOG_TITLE = {
display: "grid",
gridTemplateColumns: "1fr auto 1fr",
alignItems: "center",
gap: "16px"
};
//---------
//Стили приложения
//---------
//Контейнер рабочего пространства
export const P8P_BOX_APP_WORKSPACE = {
...P8P_COMPONENT_WIDTH({ width: "100vw" }),
//width: "100vw",
...P8P_BOX_CENTER_BETWEEN
width: "100vw",
display: "flex",
alignItems: "center",
justifyContent: "space-between"
};
//Меню панелей - контейнер грида
export const P8P_BOX_PANELS_MENU_CONTAINER = {
...P8P_BOX_CENTER_START,
...P8P_COMPONENT_HEIGHT({ minHeight: "100vh" })
minHeight: "100vh",
display: "flex",
alignItems: "center",
justifyContent: "flex-start"
};
//---------
@ -64,16 +84,16 @@ export const P8P_BOX_PANELS_MENU_CONTAINER = {
//Список настроек панели
export const P8P_BOX_SETTINGS_LIST = {
...P8P_COMPONENT_WIDTH({ width: "520px" }),
...P8P_COMPONENT_HEIGHT({ height: "500px" }),
...P8P_SCROLL_AUTO
...P8P_SCROLL_AUTO,
width: "520px",
height: "500px"
};
//Список панелей настроек панелей
export const P8P_BOX_SETTINGS_PANELS = {
...P8P_COMPONENT_WIDTH({ width: "300px" }),
...P8P_COMPONENT_HEIGHT({ height: "500px" }),
...P8P_SCROLL_AUTO
...P8P_SCROLL_AUTO,
width: "300px",
height: "500px"
};
//Контейнер настроек панелей
@ -89,8 +109,7 @@ export const P8P_BOX_SETTINGS_CONTAINER = {
//Контейнер диаграмы Ганта
export const P8P_BOX_GANTT = ({ noData, zoomBarHeight, titleHeight }) => ({
...P8P_COMPONENT_HEIGHT({ height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})` }),
//height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
display: noData ? "none" : ""
});
@ -100,11 +119,10 @@ export const P8P_BOX_GANTT = ({ noData, zoomBarHeight, titleHeight }) => ({
//Контейнер циклограммы
export const P8P_BOX_CYCLOGRAM = ({ noData, zoomBarHeight, titleHeight }) => ({
height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
position: "relative",
overflow: "auto",
padding: "0px 8px",
...P8P_COMPONENT_HEIGHT({ height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})` }),
//height: `calc(100% - ${zoomBarHeight ? zoomBarHeight : "0px"} - ${titleHeight ? titleHeight : "0px"})`,
display: noData ? "none" : ""
});
@ -124,9 +142,11 @@ export const P8P_BOX_CYCLOGRAM_GROUP = ({ height }) => {
const theme = useTheme();
//Возвращаем стиль
return {
display: "flex",
alignItems: "center",
justifyContent: "center",
border: "1px solid",
backgroundColor: theme.palette.P8PCyclogram.group,
...P8P_BOX_CENTER,
height
};
};
@ -150,3 +170,67 @@ export const P8P_BOX_CYCLOGRAM_TASK = ({ lineHeight, bgColor, textColor, highlig
}
};
};
//---------
//Стили заголовка
//---------
//Контейнер заголовка
export const P8P_BOX_HEADER = ({ isFixed }) => ({
display: "flex",
flexDirection: "row",
alignItems: "flex-start",
padding: "0px",
width: "100vw",
height: "64px",
background: "P8PHeader.background",
boxShadow: "0px 6px 6px rgba(182, 189, 201, 0.17), 0px 1px 3px rgba(182, 189, 201, 0.2)",
position: isFixed ? "fixed" : "relative",
overflow: "hidden"
});
//Контейнер элемента заголовка
export const P8P_BOX_HEADER_ITEM = ({ width, minWidth, isClickable }) => ({
height: "100%",
width,
minWidth,
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
borderRight: "1px solid",
borderColor: "P8PHeader.border",
...(!hasValue(width) ? { flex: 1 } : {}),
...(isClickable ? { ...P8P_BOX_CLICKABLE } : {})
});
//Контейнер фильтров
export const P8P_BOX_HEADER_FILTER = ({ width, isLimited, isLessMinWidth }) => ({
...P8P_BOX_HEADER_ITEM({ width }),
minWidth: isLimited ? "max-content" : isLessMinWidth ? "73px" : null,
display: "flex",
alignItems: "center",
justifyContent: "flex-start",
flexDirection: "row",
overflow: "hidden",
padding: "0px 16px"
});
//Контейнер списка фильтров
export const P8P_BOX_HEADER_FILTER_GRP = {
minWidth: "0px",
height: "100%",
alignContent: "center",
flex: "1 1 0",
whiteSpace: "nowrap",
textOverflow: "ellipsis"
};
//Контейнер для кастомного фильтра
export const P8P_BOX_HEADER_FILTER_CUSTOM = {
display: "-webkit-box",
overflow: "hidden",
WebkitBoxOrient: "vertical",
WebkitLineClamp: 1,
color: "P8PText.primary"
};

32
app/theme/styles/common.js
View File

@ -3,12 +3,6 @@
Вспомогательные стили - общие
*/
//---------------------
//Подключение библиотек
//---------------------
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
//----------------
//Интерфейс модуля
//----------------
@ -27,10 +21,10 @@ export const P8P_COMPONENT_HEIGHT = ({ height, minHeight, maxHeight }) => ({
...(maxHeight ? { maxHeight } : {})
});
//Отображаемый скролл
export const P8P_SCROLL_AUTO = {
overflow: "auto",
...APP_STYLES.SCROLL
//Полная ширина и высота
export const P8P_COMPONENT_FULL_SIZE = {
height: "100%",
width: "100%"
};
//Отсутствие отступов
@ -38,6 +32,12 @@ export const P8P_COMPONENT_ZERO_PADDING = {
padding: "0px"
};
//Блок с возможностью нажатия
export const P8P_COMPONENT_CLICKABLE_OPACITY = {
cursor: "pointer",
"&:hover": { backgroundColor: "inherit", opacity: "0.8" }
};
//Стили
export const P8P_SCROLL = {
"&::-webkit-scrollbar": {
@ -46,13 +46,19 @@ export const P8P_SCROLL = {
},
"&::-webkit-scrollbar-track": {
borderRadius: "8px",
backgroundColor: "#EBEBEB"
backgroundColor: "P8PScroll.track"
},
"&::-webkit-scrollbar-thumb": {
borderRadius: "8px",
backgroundColor: "#b4b4b4"
backgroundColor: "P8PScroll.thumb"
},
"&::-webkit-scrollbar-thumb:hover": {
backgroundColor: "#808080"
backgroundColor: "P8PScroll.hover"
}
};
//Отображаемый скролл
export const P8P_SCROLL_AUTO = {
overflow: "auto",
...P8P_SCROLL
};

30
app/theme/styles/form_control.js Normal file
View File

@ -0,0 +1,30 @@
/*
Парус 8 - Панели мониторинга
Вспомогательные стили FormControl
*/
//----------------
//Интерфейс модуля
//----------------
//---------
//Стили заголовка
//---------
//Поле ввода заголовка
export const P8P_FORM_CONTROL_HEADER_FIELD = {
height: "100%",
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
margin: "0px",
padding: "0px 16px"
};
//Поле выбора заголовка
export const P8P_FORM_CONTROL_HEADER_SELECTOR = {
height: "100%",
width: "100%",
padding: "0px 8px"
};

19
app/theme/styles/grid.js Normal file
View File

@ -0,0 +1,19 @@
/*
Парус 8 - Панели мониторинга
Вспомогательные стили Grid
*/
//----------------
//Интерфейс модуля
//----------------
//---------
//Стили заголовка
//---------
//Элемент списка фильтров заголовка
export const P8P_GRID_HEADER_FILTER_ITEM = ({ width, isLimited, isLessMinWidth }) => ({
width: width || "auto",
flexShrink: isLimited ? 0 : 1,
visibility: isLessMinWidth ? "hidden" : "visible"
});

7
app/theme/styles/paper.js
View File

@ -10,7 +10,6 @@
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"; //Стили - общие
//---------
//Константы
@ -44,11 +43,9 @@ export const P8P_PAPER_INDICATOR = ({ state, color, backgroundColor, clickable }
const theme = useTheme();
//Возвращаем стиль
return {
height: "100%",
width: "100%",
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],

70
app/theme/styles/stack.js
View File

@ -3,11 +3,7 @@
Вспомогательные стили Stack
*/
//---------------------
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_WIDTH } from "./common"; //Стили - общие
import { P8P_COMPONENT_CLICKABLE_OPACITY } from "./common";
//----------------
//Интерфейс модуля
@ -15,8 +11,68 @@ import { P8P_COMPONENT_WIDTH } from "./common"; //Стили - общие
//Адаптивный с сокрытием
export const P8P_STACK_INLINE_HIDDEN = {
...P8P_COMPONENT_WIDTH({ width: "100%" }),
width: "100%",
containerType: "inline-size",
//width: "100%",
overflow: "hidden"
};
//---------
//Стили заголовка
//---------
//Контейнер текста заголовка
export const P8P_STACK_HEADER_TEXT = ({ isClickable }) => ({
height: "100%",
width: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "0px 8px",
color: isClickable ? "P8PHeader.textLink" : "P8PHeader.text",
...(isClickable ? { ...P8P_COMPONENT_CLICKABLE_OPACITY } : {})
});
//Контейнер фильтра заголовка
export const P8P_STACK_HEADER_FILTER = ({ isClickable = false }) => ({
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
alignContent: "flex-start",
cursor: isClickable ? "pointer" : "default",
overflow: "hidden"
});
//Контейнер фильтра заголовка
export const P8P_STACK_HEADER_FILTER_CONTAINER = ({ isClickable = false }) => ({
height: "100%",
width: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center",
gap: "4px",
paddingRight: "4px",
"&:hover": isClickable ? { opacity: 0.8 } : {}
});
//Контейнер кнопки с очисткой
export const P8P_STACK_HEADER_WITH_CLEAR = {
height: "100%",
width: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center"
};
//Контейнер значений индикатора
export const P8P_STACK_HEADER_INDICATOR = ({ isClickable }) => ({
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "start",
justifyContent: "center",
padding: "0px 8px",
overflow: "hidden",
...(isClickable ? { ...P8P_COMPONENT_CLICKABLE_OPACITY } : {})
});

58
app/theme/styles/typography.js
View File

@ -7,7 +7,20 @@
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_WIDTH, P8P_COMPONENT_HEIGHT } from "./common"; //Стили - общие
import { P8P_COLOR_STATE } from "../colors/common"; //Дополнительные цвета - общие
import { STATE } from "../../../app.text"; //Типовые текстовые ресурсы и константы
//---------
//Константы
//---------
//Цвета текста индикатора заголовка
const P8P_HEADER_INDICATOR_COLOR = {
[STATE.OK]: P8P_COLOR_STATE[STATE.OK],
[STATE.ERR]: P8P_COLOR_STATE[STATE.ERR],
[STATE.WARN]: P8P_COLOR_STATE[STATE.WARN],
DEFAULT: "P8PHeader.text"
};
//----------------
//Интерфейс модуля
@ -30,8 +43,25 @@ export const P8P_TYPOGRAPHY_DIALOG_TITLE = {
//Заголовок
export const P8P_TYPOGRAPHY_TITLE = {
...P8P_COMPONENT_HEIGHT({ height: "44px" })
//height: "44px"
height: "44px"
};
//Максимальное количество строк
export const P8P_TYPOGRAPHY_MAX_LINES = ({ maxLines }) => ({
width: "100%",
whiteSpace: "wrap",
display: "-webkit-box",
overflow: "hidden",
WebkitBoxOrient: "vertical",
WebkitLineClamp: maxLines
});
//Сокрытие лишнего текста
export const P8P_TYPOGRAPHY_HIDDEN = {
textTransform: "none",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap"
};
//---------
@ -40,12 +70,11 @@ export const P8P_TYPOGRAPHY_TITLE = {
//Описание панели на рабочем столе
export const P8P_TYPOGRAPHY_PANEL_DESK = {
maxWidth: "140px",
display: "-webkit-box",
overflow: "hidden",
WebkitBoxOrient: "vertical",
WebkitLineClamp: 2,
...P8P_COMPONENT_WIDTH({ maxWidth: "140px" })
//maxWidth: "140px"
WebkitLineClamp: 2
};
//---------
@ -72,9 +101,8 @@ export const P8P_TYPOGRAPHY_CG_GROUP = ({ maxWidth, maxHeight }) => ({
//Задача циклограммы
export const P8P_TYPOGRAPHY_CG_TASK = ({ maxHeight, availableLines }) => ({
width: "100%",
maxHeight,
...P8P_COMPONENT_WIDTH({ width: "100%" }),
//width: "100%",
padding: "0px 5px",
overflowWrap: "break-word",
wordBreak: "break-all",
@ -84,3 +112,17 @@ export const P8P_TYPOGRAPHY_CG_TASK = ({ maxHeight, availableLines }) => ({
WebkitBoxOrient: "vertical",
WebkitLineClamp: availableLines < 1 ? 1 : availableLines
});
//---------
//Стили заголовка
//---------
//Индикатор заголовка
export const P8P_TYPOGRAPY_HDR_INDICATOR = ({ maxLines, state, isDefaultColor = false, color }) => ({
...P8P_TYPOGRAPHY_MAX_LINES({ maxLines }),
color: isDefaultColor
? P8P_HEADER_INDICATOR_COLOR.DEFAULT
: color
? color
: P8P_HEADER_INDICATOR_COLOR[state] || P8P_HEADER_INDICATOR_COLOR.DEFAULT
});

2
app/theme/utils.js
View File

@ -19,7 +19,7 @@ export const getButtonColorStyles = (color, theme, isOutlined = false) => {
//Возвращаем результат
return {
backgroundColor: !isOutlined ? colorObj.main : null,
color: !isOutlined ? colorObj.contrastText || "#FFF" : colorObj.main,
color: !isOutlined ? colorObj.contrastText || theme.palette.P8PBackground.primary : colorObj.main,
...(isOutlined ? { border: `1px solid ${colorObj.main}` } : {}),
"&:hover": {
textDecoration: "none",

37
app/theme/variants/p8p_button_variants.js
View File

@ -7,24 +7,31 @@
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_SIZE } from "../constants"; //Общие константы стилей
import { getButtonColorStyles } from "../utils"; //Дополнительные функции стилизации
import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
//---------
//Константы
//---------
//Отступы кнопки заголовка
const P8P_BUTTON_HDR_SIZE = {
[P8P_COMPONENT_SIZE.SMALL]: "0px 8px",
[P8P_COMPONENT_SIZE.MEDIUM]: "0px 16px",
[P8P_COMPONENT_SIZE.LARGE]: "0px 24px"
};
//Размеры кнопок
const P8P_BUTTON_SIZE = {
small: {
[P8P_COMPONENT_SIZE.SMALL]: {
fontSize: "13px",
padding: "4px 22px"
},
medium: {
[P8P_COMPONENT_SIZE.MEDIUM]: {
fontSize: "14px",
padding: "6px 22px"
},
large: {
[P8P_COMPONENT_SIZE.LARGE]: {
fontSize: "15px",
padding: "8px 22px"
},
@ -66,16 +73,27 @@ export const P8P_BUTTONS = ({ theme, color, size }) => ({
border: "none"
},
P8PDesktopPanel: {
width: "150px",
height: "90px",
fontSize: "12px",
textTransform: "none",
...P8P_COMPONENT_WIDTH({ width: "150px" }),
...P8P_COMPONENT_HEIGHT({ width: "90px" }),
// width: "150px",
// height: "90px",
flexDirection: "column",
justifyContent: "flex-start",
color: theme.palette.P8PDesktop.main,
"&:hover": { backgroundColor: theme.palette.P8PDesktop.hover }
},
P8PHeader: {
height: "100%",
width: "100%",
borderRadius: "0px",
borderColor: theme.palette.P8PHeader.border,
boxShadow: "none",
textTransform: "none",
color: theme.palette.P8PHeader.link,
backgroundColor: "transparent",
padding: P8P_BUTTON_HDR_SIZE[size] || P8P_BUTTON_HDR_SIZE[P8P_COMPONENT_SIZE.LARGE],
overflow: "hidden",
"&:hover": { backgroundColor: "inherit", opacity: "0.8" }
}
});
@ -85,7 +103,8 @@ export const P8P_BUTTON_VARIANT = {
SECONDARY: "P8PSecondary",
OUTLINED: "P8POutlined",
TEXT: "P8PText",
DESKTOP_PANEL: "P8PDesktopPanel"
DESKTOP_PANEL: "P8PDesktopPanel",
HEADER: "P8PHeader"
};
//Кастомная стилистика компонента

12
app/theme/variants/p8p_card_variants.js
View File

@ -3,12 +3,6 @@
Расширение стилистики Card
*/
//---------------------
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
//----------------
//Интерфейс модуля
//----------------
@ -17,10 +11,8 @@ import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //
export const P8P_CARDS = {
primary: {},
P8PPanelInfo: {
...P8P_COMPONENT_WIDTH({ maxWidth: 400 }),
...P8P_COMPONENT_HEIGHT({ height: "100%" }),
//maxWidth: 400,
//height: "100%",
maxWidth: "400px",
height: "100%",
flexDirection: "column",
display: "flex"
}

12
app/theme/variants/p8p_container_variants.js
View File

@ -3,12 +3,6 @@
Расширение стилистики Container
*/
//---------------------
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
//----------------
//Интерфейс модуля
//----------------
@ -17,14 +11,12 @@ import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общи
export const P8P_CONTAINERS = {
primary: {},
P8PTableMoreButton: {
...P8P_COMPONENT_WIDTH({ width: "100%" }),
//width: "100%",
width: "100%",
textAlign: "center",
padding: "5px"
},
P8PInlineMessage: {
...P8P_COMPONENT_WIDTH({ width: "100%" }),
//width: "100%",
width: "100%",
textAlign: "center"
}
};

31
app/theme/variants/p8p_dialog_actions_variants.js Normal file
View File

@ -0,0 +1,31 @@
/*
Парус 8 - Панели мониторинга
Расширение стилистики DialogActions
*/
//----------------
//Интерфейс модуля
//----------------
//Кастомные диалоги (действия)
export const P8P_DIALOG_ACTIONS = {
primary: {},
P8PDialog: { padding: "8px 24px 16px 24px" }
};
//Наименование кастомных диалогов (действия)
export const P8P_DIALOG_ACTIONS_VARIANT = {
DIALOG: "P8PDialog"
};
//Кастомная стилистика компонента
export const P8P_DIALOG_ACTIONS_OVERRIDES = {
styleOverrides: {
root: ({ ownerState }) => {
//Определяем вариант
const variant = ownerState["variant"] || "primary";
//Возвращаем стили варианта
return P8P_DIALOG_ACTIONS[variant];
}
}
};

37
app/theme/variants/p8p_dialog_content_variants.js
View File

@ -7,24 +7,39 @@
//Подключение библиотек
//---------------------
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
import { P8P_SCROLL, P8P_SCROLL_AUTO } from "../styles/common"; //Стили - общие
//---------
//Константы
//---------
//Общие стили
const defaultStyles = paddingDisabled => ({
...(paddingDisabled ? { padding: "0px" } : {})
});
//----------------
//Интерфейс модуля
//----------------
//Кастомные диалоги (содержимое)
export const P8P_DIALOG_CONTENTS = theme => ({
export const P8P_DIALOG_CONTENTS = (theme, paddingDisabled) => ({
primary: {},
P8PPrimary: { overflow: "auto", ...APP_STYLES.SCROLL },
P8PPrimary: { ...theme.typography.P8PBody3, ...P8P_SCROLL_AUTO, ...defaultStyles(paddingDisabled) },
P8PTask: {
...P8P_COMPONENT_WIDTH({ minWidth: 400 }),
//minWidth: 400,
overflowX: "auto"
minWidth: "400px",
overflowX: "auto",
...P8P_SCROLL,
...defaultStyles(paddingDisabled)
},
P8PHint: { ...theme.typography.P8PBody4, color: theme.palette.P8PText.primary },
P8PHidden: { display: "flex", flexDirection: "column", overflow: "hidden" }
P8PHint: { ...theme.typography.P8PBody4, color: theme.palette.P8PText.primary, ...defaultStyles(paddingDisabled) },
P8PHidden: {
...theme.typography.P8PBody3,
display: "flex",
flexDirection: "column",
overflow: "hidden",
...defaultStyles(paddingDisabled)
}
});
//Наименование кастомных диалогов (содержимое)
@ -41,8 +56,10 @@ export const P8P_DIALOG_CONTENT_OVERRIDES = {
root: ({ ownerState, theme }) => {
//Определяем вариант
const variant = ownerState["variant"] || "primary";
//Определяем доп. параметры
const { paddingDisabled } = ownerState["data-variant-props"] || {};
//Возвращаем стили варианта
return P8P_DIALOG_CONTENTS(theme)[variant];
return P8P_DIALOG_CONTENTS(theme, paddingDisabled)[variant];
}
}
};

10
app/theme/variants/p8p_dialog_title_variants.js
View File

@ -10,10 +10,11 @@
//Кастомные диалоги (заголовок)
export const P8P_DIALOG_TITLES = theme => ({
primary: {},
P8PPrimary: { ...theme.typography.P8PH6, color: theme.palette.P8PText.primary },
P8PInfo: { ...theme.typography.P8PH6, color: theme.palette.P8PText.primary },
P8PPrimary: { ...theme.typography.P8PH6, color: theme.palette.P8PSecondary.main },
P8PInfo: { ...theme.typography.P8PH6, color: theme.palette.P8PSecondary.main },
P8PWarn: { ...theme.typography.P8PH6, color: theme.palette.P8PWarning.main },
P8PError: { ...theme.typography.P8PH6, color: theme.palette.P8PError.main }
P8PError: { ...theme.typography.P8PH6, color: theme.palette.P8PError.main },
P8PPrimaryDivided: { ...theme.typography.P8PH6, color: theme.palette.P8PSecondary.main, borderBottom: "1px solid rgba(42, 48, 57, 0.12)" }
});
//Наименование кастомных диалогов (заголовок)
@ -21,7 +22,8 @@ export const P8P_DIALOG_TITLE_VARIANT = {
PRIMARY: "P8PPrimary",
INFO: "P8PInfo",
WARN: "P8PWarn",
ERROR: "P8PError"
ERROR: "P8PError",
PRIMARY_DIVIDED: "P8PPrimaryDivided"
};
//Кастомная стилистика компонента

8
app/theme/variants/p8p_drawer_variants.js
View File

@ -7,7 +7,7 @@
//Подключение библиотек
//---------------------
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
import { P8P_SCROLL } from "../styles/common"; //Стили - общие
//----------------
//Интерфейс модуля
@ -16,7 +16,11 @@ import { APP_STYLES } from "../../../app.styles"; //Типовые стили
//Кастомные выезжающие области
export const P8P_DRAWERS = {
primary: {},
P8PPrimary: { [`& .MuiDrawer-paper`]: { ...APP_STYLES.SCROLL } }
P8PPrimary: {
[`& .MuiDrawer-paper`]: {
...P8P_SCROLL
}
}
};
//Наименование кастомных выезжающих областей

42
app/theme/variants/p8p_fab_variants.js Normal file
View File

@ -0,0 +1,42 @@
/*
Парус 8 - Панели мониторинга
Расширение стилистики Fab
*/
//----------------
//Интерфейс модуля
//----------------
//Кастомные плавающие кнопки действия
export const P8P_FABS = theme => ({
primary: {},
P8PHeader: {
height: "100%",
width: "100%",
borderRadius: "0px",
borderColor: theme.palette.P8PHeader.border,
backgroundColor: "transparent",
boxShadow: "none",
textTransform: "none",
color: theme.palette.P8PHeader.link,
overflow: "hidden",
"&:hover": { backgroundColor: "inherit", opacity: "0.8" }
}
});
//Наименование кастомных плавающих кнопок действий
export const P8P_FAB_VARIANT = {
HEADER: "P8PHeader"
};
//Кастомная стилистика компонента
export const P8P_FAB_OVERRIDES = {
styleOverrides: {
root: ({ ownerState, theme }) => {
//Определяем вариант
const variant = ownerState["variant"] || "primary";
//Возвращаем стили варианта
return P8P_FABS(theme)[variant];
}
}
};

35
app/theme/variants/p8p_grid_variants.js
View File

@ -3,12 +3,6 @@
Расширение стилистики Grid
*/
//---------------------
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
//----------------
//Интерфейс модуля
//----------------
@ -18,17 +12,30 @@ export const P8P_GRIDS = {
primary: {},
P8PPrimary: {},
P8PSvgContainer: {
...P8P_COMPONENT_WIDTH({ width: "100%" }),
...P8P_COMPONENT_HEIGHT({ height: "100%" })
//width: "100%",
//height: "100%"
width: "100%",
height: "100%"
},
P8PPanelsMenu: {
...P8P_COMPONENT_WIDTH({ maxWidth: 1200 }),
//maxWidth: 1200,
maxWidth: "1200px",
direction: "row",
justifyContent: "left",
alignItems: "stretch"
},
P8PHeaderFilterContainer: {
height: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center",
position: "relative",
marginTop: "0px",
"& .MuiGrid-item": {
paddingTop: "0 !important"
}
},
P8PHeaderFilterItem: {
minWidth: "125px",
height: "100%",
alignContent: "center"
}
};
@ -36,7 +43,9 @@ export const P8P_GRIDS = {
export const P8P_GRID_VARIANT = {
PRIMARY: "P8PPrimary",
SVG_CONTAINER: "P8PSvgContainer",
PANELS_MENU: "P8PPanelsMenu"
PANELS_MENU: "P8PPanelsMenu",
HEADER_FILTER_CONTAINER: "P8PHeaderFilterContainer",
HEADER_FILTER_ITEM: "P8PHeaderFilterItem"
};
//Кастомная стилистика компонента

24
app/theme/variants/p8p_icon_button_variants.js
View File

@ -8,26 +8,40 @@
//----------------
//Кастомные кнопки-иконки
export const P8P_ICON_BUTTONS = {
export const P8P_ICON_BUTTONS = ({ theme }) => ({
primary: {},
P8PAppBarButton: {
marginRight: "16px"
},
P8PHeaderFilterMore: {
flexShrink: 0,
width: "40px",
alignContent: "center",
color: theme.palette.P8PHeader.link
},
P8PDialogClose: {
color: "#005EA6",
border: `1px solid #005EA6`,
padding: "0px",
borderRadius: "0%"
}
};
});
//Наименования кастомных кнопок-иконкок
export const P8P_ICON_BUTTON_VARIANT = {
APP_BAR_BUTTON: "P8PAppBarButton"
APP_BAR_BUTTON: "P8PAppBarButton",
HEADER_FILTER_MORE: "P8PHeaderFilterMore",
DIALOG_CLOSE: "P8PDialogClose"
};
//Кастомная стилистика компонента
export const P8P_ICON_BUTTON_OVERRIDES = {
styleOverrides: {
root: ({ ownerState }) => {
root: ({ ownerState, theme }) => {
//Определяем вариант
const variant = ownerState?.variant || "primary";
//Возвращаем стили варианта
return P8P_ICON_BUTTONS[variant];
return P8P_ICON_BUTTONS({ theme })[variant];
}
}
};

36
app/theme/variants/p8p_icon_variants.js
View File

@ -3,49 +3,41 @@
Расширение стилистики Icon
*/
//---------------------
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
//----------------
//Интерфейс модуля
//----------------
//Кастомные иконки
export const P8P_ICONS = {
export const P8P_ICONS = ({ theme }) => ({
primary: {},
P8PTableColumnMenu: {
marginRight: "10px"
},
P8PPanelMenuTitle: {
paddingTop: "4px"
},
P8PTableColumnMenu: { marginRight: "10px" },
P8PPanelMenuTitle: { paddingTop: "4px" },
P8PDesktopPanel: {
...P8P_COMPONENT_WIDTH({ width: "48px" }),
...P8P_COMPONENT_HEIGHT({ height: "48px" }),
// width: "48px",
// height: "48px",
width: "48px",
height: "48px",
fontSize: "48px"
}
};
},
P8PHeader: { margin: "0px", fontSize: "24px", color: theme.palette.P8PHeader.link },
P8PHeaderFilterDelete: { fontSize: "22px" }
});
//Наименование кастомных иконок
export const P8P_ICON_VARIANT = {
TABLE_COLUMN_MENU: "P8PTableColumnMenu",
PANEL_MENU_TITLE: "P8PPanelMenuTitle",
DESKTOP_PANEL: "P8PDesktopPanel"
DESKTOP_PANEL: "P8PDesktopPanel",
HEADER: "P8PHeader",
HEADER_FILTER_DELETE: "P8PHeaderFilterDelete"
};
//Кастомная стилистика компонента
export const P8P_ICON_OVERRIDES = {
styleOverrides: {
root: ({ ownerState }) => {
root: ({ ownerState, theme }) => {
//Определяем вариант
const variant = ownerState?.variant || "primary";
//Возвращаем стили варианта
return P8P_ICONS[variant];
return P8P_ICONS({ theme })[variant];
}
}
};

37
app/theme/variants/p8p_list_item_variants.js Normal file
View File

@ -0,0 +1,37 @@
/*
Парус 8 - Панели мониторинга
Расширение стилистики ListItem
*/
//----------------
//Интерфейс модуля
//----------------
//Кастомные списки
export const P8P_LIST_ITEMS = {
primary: {},
P8PHeaderFilterMore: {
flexDirection: "column",
alignItems: "flex-start",
borderBottom: "1px solid",
borderColor: "rgba(0, 0, 0, 0.12)",
"&:last-child": { borderBottom: "none" }
}
};
//Наименование кастомных списков
export const P8P_LIST_ITEM_VARIANT = {
HEADER_FILTER_MORE: "P8PHeaderFilterMore"
};
//Кастомная стилистика компонента
export const P8P_LIST_ITEM_OVERRIDES = {
styleOverrides: {
root: ({ ownerState }) => {
//Определяем вариант
const variant = ownerState["variant"] || "primary";
//Возвращаем стили варианта
return P8P_LIST_ITEMS[variant];
}
}
};

20
app/theme/variants/p8p_list_variants.js
View File

@ -7,7 +7,7 @@
//Подключение библиотек
//---------------------
import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие
import { P8P_SCROLL_AUTO } from "../styles/common"; //Стили - общие
//----------------
//Интерфейс модуля
@ -17,20 +17,28 @@ import { P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общи
export const P8P_LISTS = {
primary: {},
P8PGanttTask: {
...P8P_COMPONENT_WIDTH({ width: "100%", minWidth: 300, maxWidth: 700 })
//width: "100%", minWidth: 300, maxWidth: 700
width: "100%",
minWidth: "300px",
maxWidth: "700px"
},
P8PSettings: {
...P8P_COMPONENT_WIDTH({ width: "510px" }),
//width: "510px",
width: "510px",
overflowY: "auto"
},
P8PHeaderFilterMore: {
...P8P_SCROLL_AUTO,
minWidth: "250px",
maxWidth: "400px",
maxHeight: "60vh",
padding: "8px"
}
};
//Наименование кастомных списков
export const P8P_LIST_VARIANT = {
GANTT_TASK: "P8PGanttTask",
SETTINGS: "P8PSettings"
SETTINGS: "P8PSettings",
HEADER_FILTER_MORE: "P8PHeaderFilterMore"
};
//Кастомная стилистика компонента

6
app/theme/variants/p8p_menu_item_variants.js
View File

@ -10,12 +10,14 @@
//Кастомные элементы меню
export const P8P_MENU_ITEMS = theme => ({
primary: {},
P8PPrimary: { ...theme.typography.P8PBody1 }
P8PPrimary: { ...theme.typography.P8PBody1 },
P8PHeader: { ...theme.typography.P8PHeader, color: theme.palette.P8PHeader.link }
});
//Наименование кастомных элементов меню
export const P8P_MENU_ITEM_VARIANT = {
PRIMARY: "P8PPrimary"
PRIMARY: "P8PPrimary",
HEADER: "P8PHeader"
};
//Кастомная стилистика компонента

11
app/theme/variants/p8p_select_variants.js
View File

@ -17,12 +17,21 @@ export const P8P_SELECTS = theme => ({
}
},
"& .MuiSelect-select": { ...theme.typography.P8PBody1 }
},
P8PHeader: {
...theme.typography.P8PHeader,
height: "100%",
color: theme.palette.P8PHeader.link,
"& .MuiOutlinedInput-notchedOutline": {
border: "none"
}
}
});
//Наименование кастомных полей выбора
export const P8P_SELECT_VARIANT = {
PRIMARY: "P8PPrimary"
PRIMARY: "P8PPrimary",
HEADER: "P8PHeader"
};
//Кастомная стилистика компонента

6
app/theme/variants/p8p_table_head_variants.js
View File

@ -10,11 +10,7 @@
//Кастомные заголовки таблицы
export const P8P_TABLE_HEADS = {
primary: {},
P8PSticky: {
position: "sticky",
top: 0,
zIndex: 1000
}
P8PSticky: { position: "sticky", top: 0, zIndex: 1000 }
};
//Наименование кастомных заголовков таблиц

11
app/theme/variants/p8p_text_field_variants.js
View File

@ -22,6 +22,13 @@ export const P8P_TEXT_FIELDS = theme => ({
"& .MuiInputBase-input": {
...theme.typography.P8PBody1
}
},
P8PHidden: {
width: "100%",
height: "0px",
opacity: 0,
position: "absolute",
pointerEvents: "none"
}
});
@ -33,7 +40,8 @@ export const P8P_TEXT_FIELD_OPTIONS = theme => ({
//Наименование кастомных полей ввода
export const P8P_TEXT_FIELD_VARIANT = {
PRIMARY: "P8PPrimary"
PRIMARY: "P8PPrimary",
HIDDEN: "P8PHidden"
};
//Кастомная стилистика компонента
@ -48,7 +56,6 @@ export const P8P_TEXT_FIELD_OVERRIDES = {
option: ({ ownerState, theme }) => {
//Определяем вариант
const variant = ownerState["data-variant"] || "primary";
console.log({ option: P8P_TEXT_FIELD_OPTIONS(theme)[variant] });
//Возвращаем стили варианта
return P8P_TEXT_FIELD_OPTIONS(theme)[variant];
}