forked from CITKParus/P8-Panels
110 lines
4.2 KiB
JavaScript
110 lines
4.2 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||
Компонент: Диалог настройки карточки статуса
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, Box, MenuItem, Typography } from "@mui/material"; //Интерфейсные компоненты
|
||
import { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
|
||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
BCKG_COLOR: backgroundColor => ({ backgroundColor: backgroundColor })
|
||
};
|
||
|
||
//--------------------------------
|
||
//Вспомогательные классы и функции
|
||
//--------------------------------
|
||
|
||
//Генерация элемента меню
|
||
const menuItemRender = ({ item, key }) => {
|
||
//Генерация содержимого
|
||
return (
|
||
<MenuItem key={key} value={item.id} sx={STYLES.BCKG_COLOR(item.caption)}>
|
||
<Typography variant="inherit" noWrap title={item.caption} component="div">
|
||
{item.caption}
|
||
</Typography>
|
||
</MenuItem>
|
||
);
|
||
};
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
//Диалог настройки карточки статуса
|
||
const StatusCardSettings = ({ statusColor, availableColors, onClose, onColorChange }) => {
|
||
//Состояние индекса текущего цвета
|
||
const [colorIndex, setColorIndex] = useState(availableColors.indexOf(statusColor));
|
||
|
||
//При закрытии диалога с применением настройки статуса
|
||
const handleDialogOk = () => {
|
||
//Изменяем цвет статуса
|
||
onColorChange(availableColors[colorIndex]);
|
||
//Закрываем диалог
|
||
onClose();
|
||
};
|
||
|
||
//При изменении значения элемента
|
||
const handleSettingsItemChange = (item, value) => {
|
||
setColorIndex(value);
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div>
|
||
<Dialog open onClose={onClose} fullWidth maxWidth="sm">
|
||
<DialogTitle>Настройки</DialogTitle>
|
||
<IconButton aria-label="close" onClick={onClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
<DialogContent>
|
||
<Box component="section" p={1}>
|
||
<CustomInputField
|
||
elementCode="color"
|
||
elementValue={colorIndex}
|
||
labelText="Цвет"
|
||
items={availableColors.reduce((prev, cur) => [...prev, { id: prev.length, caption: cur }], [])}
|
||
onChange={handleSettingsItemChange}
|
||
sx={STYLES.BCKG_COLOR(availableColors[colorIndex])}
|
||
menuItemRender={menuItemRender}
|
||
/>
|
||
</Box>
|
||
</DialogContent>
|
||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||
<Button variant="text" onClick={handleDialogOk}>
|
||
Применить
|
||
</Button>
|
||
<Button variant="text" onClick={onClose}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалог настройки карточки статуса
|
||
StatusCardSettings.propTypes = {
|
||
statusColor: PropTypes.string.isRequired,
|
||
availableColors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||
onClose: PropTypes.func.isRequired,
|
||
onColorChange: PropTypes.func.isRequired
|
||
};
|
||
|
||
//--------------------
|
||
//Интерфейс компонента
|
||
//--------------------
|
||
|
||
export { StatusCardSettings };
|