forked from CITKParus/P8-Panels
142 lines
5.0 KiB
JavaScript
142 lines
5.0 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||
Компонент: Диалоговое окно примечания
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useEffect, useState } from "react"; //Классы React
|
||
//import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
|
||
//import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, TextField } 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]
|
||
},
|
||
DIALOG_CONTENT: { paddingTop: 0, paddingBottom: 0 }
|
||
};
|
||
|
||
//-----------------------
|
||
//Вспомогательные функции
|
||
//-----------------------
|
||
|
||
//export const NoteDialogCtx = createContext();
|
||
|
||
//---------------
|
||
//Тело компонента
|
||
//---------------
|
||
|
||
//Диалоговое окно фильтра отбора
|
||
const useNoteDialog = () => {
|
||
//Собственное состояние
|
||
const [note, setNote] = useState();
|
||
|
||
//Состояние отображения окна
|
||
const [noteDialogOpen, setNoteDialogOpen] = useState(false);
|
||
|
||
useEffect(() => {
|
||
if (noteDialogOpen) console.log(`Сейчас: ${noteDialogOpen}`);
|
||
}, [noteDialogOpen]);
|
||
|
||
const handleNoteDialogChange = (value = null) => (value ? setNoteDialogOpen(value) : setNoteDialogOpen(!noteDialogOpen));
|
||
|
||
const noteDialogRender = (onOk, onCancel) => {
|
||
//При изменении примечания
|
||
const handleNoteChange = value => setNote(value);
|
||
|
||
//При закрытии диалога с изменением фильтра
|
||
const handleOK = () => {
|
||
setNoteDialogOpen(false);
|
||
onOk(note);
|
||
setNote();
|
||
};
|
||
|
||
//При закрытии диалога без изменения фильтра
|
||
const handleCancel = () => {
|
||
setNoteDialogOpen(false);
|
||
setNote();
|
||
onCancel();
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<div>
|
||
{noteDialogOpen ? (
|
||
<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}>
|
||
<TextField
|
||
id="note"
|
||
label="Примечание"
|
||
variant="standard"
|
||
fullWidth
|
||
required
|
||
multiline
|
||
minRows={7}
|
||
maxRows={7}
|
||
value={note}
|
||
onChange={e => handleNoteChange(e.target.value)}
|
||
/>
|
||
</DialogContent>
|
||
<DialogActions sx={STYLES.DIALOG_ACTIONS}>
|
||
<Button disabled={!note} variant="text" onClick={handleOK}>
|
||
ОК
|
||
</Button>
|
||
<Button variant="text" onClick={handleCancel}>
|
||
Отмена
|
||
</Button>
|
||
</DialogActions>
|
||
</Dialog>
|
||
) : null}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
return [noteDialogRender, handleNoteDialogChange];
|
||
};
|
||
|
||
// const NoteDialog = (onOk, onCancel) => {
|
||
// //const { noteDialogRender } = useContext(NoteDialogContext);
|
||
// const noteDialogRender = useNoteDialog()[1];
|
||
|
||
// //const [noteDialog] = useState();
|
||
|
||
// // useEffect(() => {
|
||
// // setNoteDialog(noteDialogRender(onOk, onCancel));
|
||
// // }, [noteDialogRender, onCancel, onOk]);
|
||
|
||
// //const onCancel1 = () => console.log("Cancel");
|
||
|
||
// return noteDialogRender(onOk, onCancel);
|
||
// //const { Btn, handleChange } = useComp();
|
||
|
||
// //return <Btn onOk={onOk} />;
|
||
// };
|
||
|
||
// //Контроль свойств компонента - Диалоговое окно фильтра отбора
|
||
// NoteDialog.propTypes = {
|
||
// onOk: PropTypes.func,
|
||
// onCancel: PropTypes.func
|
||
// };
|
||
|
||
//--------------------
|
||
//Интерфейс компонента
|
||
//--------------------
|
||
|
||
export { useNoteDialog };
|