94 lines
3.4 KiB
JavaScript
94 lines
3.4 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - УДП - Доски задач
|
|
Компонент: Выпадающий список выбора заливки событий
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React, { useEffect, useState } from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { FormControl, InputLabel, Select, MenuItem } from "@mui/material"; //Интерфейсные компоненты
|
|
import { useColorRules } from "../hooks.js"; //Вспомогательные хуки
|
|
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Стили
|
|
const STYLES = {
|
|
SELECT_MENU: w => {
|
|
return { overflowY: "auto", ...APP_STYLES.SCROLL, width: w ? w : null };
|
|
}
|
|
};
|
|
|
|
//---------------
|
|
//Тело компонента
|
|
//---------------
|
|
|
|
//Выпадающий список выбора заливки событий
|
|
const RulesSelect = ({ initRule, handleChange, ...other }) => {
|
|
//Состояние пользовательских настроек заливки событий
|
|
const [colorRules] = useColorRules();
|
|
|
|
//Собственное состояние
|
|
const [curRule, setCurRule] = useState(initRule > -1 ? "" : initRule);
|
|
|
|
//При получении нового значения заливки из вне
|
|
useEffect(() => {
|
|
if (
|
|
(colorRules.loaded && initRule > -1 && curRule === "") ||
|
|
(Number.isInteger(initRule) && Number.isInteger(curRule) && initRule !== curRule)
|
|
)
|
|
setCurRule(initRule);
|
|
}, [colorRules, curRule, initRule]);
|
|
|
|
//При изменении заливки событий
|
|
const handleRuleChange = e => {
|
|
let id = e.target.value;
|
|
setCurRule(id);
|
|
handleChange(id > -1 ? colorRules.rules[id] : {});
|
|
};
|
|
|
|
//Генерация содержимого
|
|
return colorRules ? (
|
|
<FormControl size="small" variant="standard" {...other}>
|
|
<InputLabel htmlFor="clrRules">Заливка событий</InputLabel>
|
|
<Select
|
|
id="clrRules"
|
|
name="clrRules"
|
|
value={curRule}
|
|
aria-describedby="clrRules-helper-text"
|
|
label="Заливка событий"
|
|
MenuProps={{ slotProps: { paper: { sx: STYLES.SELECT_MENU(document.getElementById("clrRules")?.parentElement.clientWidth) } } }}
|
|
onChange={handleRuleChange}
|
|
>
|
|
<MenuItem key={-1} value={-1}>
|
|
{"-"}
|
|
</MenuItem>
|
|
{colorRules.rules
|
|
? colorRules.rules.map((item, i) => (
|
|
<MenuItem key={i} value={item.id}>
|
|
{item.propName}
|
|
</MenuItem>
|
|
))
|
|
: null}
|
|
</Select>
|
|
</FormControl>
|
|
) : null;
|
|
};
|
|
|
|
//Контроль свойств - Выпадающий список выбора заливки событий
|
|
RulesSelect.propTypes = {
|
|
initRule: PropTypes.number.isRequired,
|
|
handleChange: PropTypes.func.isRequired
|
|
};
|
|
|
|
//--------------------
|
|
//Интерфейс компонента
|
|
//--------------------
|
|
|
|
export { RulesSelect };
|