100 lines
3.7 KiB
JavaScript
100 lines
3.7 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||
Компонент: Диалог примечания
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, TextField } from "@mui/material"; //Интерфейсные компоненты
|
||
import { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
|
||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
DIALOG_CONTENT: { paddingTop: 0, paddingBottom: 0 }
|
||
};
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
//Диалог примечания
|
||
const NoteDialog = ({ noteTypes, onCallback, onClose }) => {
|
||
//Собственное состояние
|
||
const [note, setNote] = useState({ noteTypeIndex: 0, text: "" });
|
||
|
||
//При изменении примечания
|
||
const handleNoteChange = value => setNote(pv => ({ ...pv, text: value }));
|
||
|
||
//При изменении заголовка примечания
|
||
const handleNoteHeaderChange = (name, value) => {
|
||
setNote(pv => ({ ...pv, noteTypeIndex: value }));
|
||
};
|
||
|
||
//При закрытии диалога с изменением примечания
|
||
const handleDialogOk = () => {
|
||
//Передаем информацию о примечание в callback
|
||
onCallback({ header: noteTypes[note.noteTypeIndex], text: note.text });
|
||
onClose();
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<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 sx={STYLES.DIALOG_CONTENT}>
|
||
<CustomInputField
|
||
elementCode="noteHeader"
|
||
elementValue={note.noteTypeIndex}
|
||
labelText="Заголовок примечания"
|
||
items={noteTypes.reduce((prev, cur) => [...prev, { id: prev.length, caption: cur }], [])}
|
||
onChange={handleNoteHeaderChange}
|
||
margin="dense"
|
||
/>
|
||
<TextField
|
||
id="note"
|
||
label="Описание"
|
||
variant="standard"
|
||
fullWidth
|
||
required
|
||
multiline
|
||
minRows={7}
|
||
maxRows={7}
|
||
value={note.text}
|
||
margin="normal"
|
||
inputProps={{ sx: COMMON_STYLES.SCROLL }}
|
||
onChange={e => handleNoteChange(e.target.value)}
|
||
/>
|
||
</DialogContent>
|
||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||
<Button disabled={!note.text} variant="text" onClick={handleDialogOk}>
|
||
ОК
|
||
</Button>
|
||
<Button variant="text" onClick={onClose}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалог примечания
|
||
NoteDialog.propTypes = {
|
||
noteTypes: PropTypes.array,
|
||
onCallback: PropTypes.func.isRequired,
|
||
onClose: PropTypes.func.isRequired
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { NoteDialog };
|