77 lines
2.9 KiB
JavaScript
77 lines
2.9 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
|
||
Компонент панели: Форма
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useEffect, useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
|
||
import { BUTTONS } from "../../../../app.text"; //Общие текстовые ресурсы
|
||
import { FORM_FILED, FormField } from "./form_field"; //Элемент формы
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Форма
|
||
const Form = ({ title, fields = [], children, onOk, onCancel, onClose }) => {
|
||
//Состояние формы
|
||
const [state, setState] = useState({});
|
||
|
||
//При изменении элемента формы
|
||
const handleFieldChange = (name, value) => setState(pv => ({ ...pv, [name]: value }));
|
||
|
||
//При нажатии на "ОК" формы
|
||
const handleOk = () => onOk && onOk(state);
|
||
|
||
//При нажатии на "Отмена" формы
|
||
const handleCancel = () => onCancel && onCancel();
|
||
|
||
//При нажатии на "Закрыть" формы
|
||
const handleClose = () => (onClose ? onClose() : onCancel ? onCancel() : null);
|
||
|
||
//При подключении к старнице
|
||
useEffect(() => {
|
||
setState(fields.reduce((res, f) => ({ ...res, [f.elementCode]: f.elementValue == undefined ? null : f.elementValue }), {}));
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
//Формирование представления
|
||
return (
|
||
<Dialog onClose={handleClose} open>
|
||
<DialogTitle>{title}</DialogTitle>
|
||
<DialogContent>
|
||
{fields.map((f, i) => (
|
||
<FormField key={i} {...f} elementValue={state[f.elementCode]} formValues={state} onChange={handleFieldChange} />
|
||
))}
|
||
{children}
|
||
</DialogContent>
|
||
<DialogActions>
|
||
{onOk && <Button onClick={handleOk}>{BUTTONS.OK}</Button>}
|
||
{onCancel && <Button onClick={handleCancel}>{BUTTONS.CANCEL}</Button>}
|
||
{onClose && <Button onClick={handleClose}>{BUTTONS.CLOSE}</Button>}
|
||
</DialogActions>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Форма
|
||
Form.propTypes = {
|
||
title: PropTypes.string.isRequired,
|
||
fields: PropTypes.arrayOf(PropTypes.shape(FORM_FILED)),
|
||
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
||
onOk: PropTypes.func,
|
||
onCancel: PropTypes.func,
|
||
onClose: PropTypes.func
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { Form };
|