140 lines
4.7 KiB
JavaScript
140 lines
4.7 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||
Компонент: Диалоговое окно примечания
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import {
|
||
Dialog,
|
||
DialogTitle,
|
||
IconButton,
|
||
Icon,
|
||
DialogContent,
|
||
DialogActions,
|
||
Button,
|
||
TextField,
|
||
FormControl,
|
||
InputLabel,
|
||
Select,
|
||
MenuItem
|
||
} from "@mui/material"; //Интерфейсные компоненты
|
||
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили
|
||
import { arrayFormer } from "../hooks"; //Формировщик массива
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" },
|
||
CLOSE_BUTTON: {
|
||
position: "absolute",
|
||
right: 8,
|
||
top: 8,
|
||
color: theme => theme.palette.grey[500]
|
||
},
|
||
DIALOG_CONTENT: { paddingTop: 0, paddingBottom: 0 },
|
||
TEXT_FIELD: {
|
||
overflowY: "auto",
|
||
...APP_STYLES.SCROLL
|
||
}
|
||
};
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
const NoteDialog = ({ noteTypes, onOk, onCancel }) => {
|
||
//Собственное состояние
|
||
const [note, setNote] = useState({ headerV: 0, text: "" });
|
||
|
||
//При изменении примечания
|
||
const handleNoteChange = value => setNote(pv => ({ ...pv, text: value }));
|
||
|
||
//При изменении заголовка примечания
|
||
const handleNoteHeaderChange = h => {
|
||
setNote(pv => ({ ...pv, headerV: h }));
|
||
};
|
||
|
||
//При закрытии диалога с изменением фильтра
|
||
const handleOK = () => {
|
||
//setNoteDialogOpen(false);
|
||
onOk({ header: noteTypes[note.headerV], text: note.text });
|
||
onCancel();
|
||
};
|
||
|
||
//При закрытии диалога без изменения фильтра
|
||
const handleCancel = () => {
|
||
onCancel();
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<Dialog open onClose={handleCancel} fullWidth maxWidth="sm">
|
||
<DialogTitle>Примечание</DialogTitle>
|
||
<IconButton aria-label="close" onClick={handleCancel} sx={STYLES.CLOSE_BUTTON}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
<DialogContent sx={STYLES.DIALOG_CONTENT}>
|
||
<FormControl fullWidth variant="standard">
|
||
<InputLabel htmlFor="noteHeader">Заголовок примечания</InputLabel>
|
||
<Select
|
||
id="noteHeader"
|
||
name="noteHeader"
|
||
value={note.headerV}
|
||
aria-describedby="noteHeader-helper-text"
|
||
label="Заголовок примечания"
|
||
margin="dense"
|
||
onChange={e => handleNoteHeaderChange(e.target.value)}
|
||
>
|
||
{noteTypes
|
||
? arrayFormer(noteTypes).map((item, i) => (
|
||
<MenuItem key={i} value={i}>
|
||
{item}
|
||
</MenuItem>
|
||
))
|
||
: null}
|
||
</Select>
|
||
</FormControl>
|
||
<TextField
|
||
id="note"
|
||
label="Описание"
|
||
variant="standard"
|
||
fullWidth
|
||
required
|
||
multiline
|
||
minRows={7}
|
||
maxRows={7}
|
||
value={note.text}
|
||
margin="normal"
|
||
inputProps={{ sx: STYLES.TEXT_FIELD }}
|
||
onChange={e => handleNoteChange(e.target.value)}
|
||
/>
|
||
</DialogContent>
|
||
<DialogActions sx={STYLES.DIALOG_ACTIONS}>
|
||
<Button disabled={!note.text} variant="text" onClick={handleOK}>
|
||
ОК
|
||
</Button>
|
||
<Button variant="text" onClick={handleCancel}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалоговое окно примечания
|
||
NoteDialog.propTypes = {
|
||
noteTypes: PropTypes.array,
|
||
onOk: PropTypes.func.isRequired,
|
||
onCancel: PropTypes.func.isRequired
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { NoteDialog };
|