124 lines
4.4 KiB
JavaScript
124 lines
4.4 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||
Компонент: Диалог настройки карточки событий
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import {
|
||
Dialog,
|
||
DialogTitle,
|
||
IconButton,
|
||
Icon,
|
||
DialogContent,
|
||
DialogActions,
|
||
Button,
|
||
Box,
|
||
FormControl,
|
||
InputLabel,
|
||
Select,
|
||
MenuItem
|
||
} from "@mui/material"; //Интерфейсные компоненты
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" },
|
||
CLOSE_BUTTON: {
|
||
position: "absolute",
|
||
right: 8,
|
||
top: 8,
|
||
color: theme => theme.palette.grey[500]
|
||
},
|
||
BCKG_COLOR: backgroundColor => ({ backgroundColor: backgroundColor })
|
||
};
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
//Диалог настройки карточки событий
|
||
const TaskCardSettings = ({ initial, availableClrs, onCancel, onOk }) => {
|
||
//Собственное состояние
|
||
const [settings, setSettings] = useState({ ...initial });
|
||
|
||
//При закрытии диалога без изменений
|
||
const handleCancel = () => (onCancel ? onCancel() : null);
|
||
|
||
//При закрытии диалога с изменениями
|
||
const handleOK = () => (onOk ? onOk(settings) : null);
|
||
|
||
//При изменении значения элемента
|
||
const handleSettingsItemChange = e => {
|
||
setSettings(pv => ({ ...pv, color: e.target.value }));
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div>
|
||
<Dialog open onClose={handleCancel} fullWidth maxWidth="sm">
|
||
<DialogTitle>Настройки</DialogTitle>
|
||
<IconButton aria-label="close" onClick={handleCancel} sx={STYLES.CLOSE_BUTTON}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
<DialogContent>
|
||
<Box component="section" p={1}>
|
||
<FormControl fullWidth>
|
||
<InputLabel id="color-label">Цвет</InputLabel>
|
||
<Select
|
||
defaultValue={initial.color}
|
||
labelId="color-label"
|
||
id="color"
|
||
label="Цвет"
|
||
variant="standard"
|
||
sx={STYLES.BCKG_COLOR(settings.color)}
|
||
onChange={handleSettingsItemChange}
|
||
>
|
||
<MenuItem key={0} value={initial.color} sx={STYLES.BCKG_COLOR(initial.color)}>
|
||
{initial.color}
|
||
</MenuItem>
|
||
{availableClrs.map((clr, i) => {
|
||
return (
|
||
<MenuItem key={i + 1} value={clr} sx={STYLES.BCKG_COLOR(clr)}>
|
||
{clr}
|
||
</MenuItem>
|
||
);
|
||
})}
|
||
</Select>
|
||
</FormControl>
|
||
</Box>
|
||
</DialogContent>
|
||
<DialogActions sx={STYLES.DIALOG_ACTIONS}>
|
||
<Button variant="text" onClick={handleOK}>
|
||
Применить
|
||
</Button>
|
||
<Button variant="text" onClick={handleCancel}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Диалог настройки карточки событий
|
||
TaskCardSettings.propTypes = {
|
||
initial: PropTypes.object.isRequired,
|
||
availableClrs: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||
onOk: PropTypes.func,
|
||
onCancel: PropTypes.func
|
||
};
|
||
|
||
//--------------------
|
||
//Интерфейс компонента
|
||
//--------------------
|
||
|
||
export { TaskCardSettings };
|