forked from CITKParus/P8-Panels
72 lines
2.8 KiB
JavaScript
72 lines
2.8 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редактор панелей
|
|
Представление компонента панели
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Box, Typography } from "@mui/material"; //Интерфейсные элементы
|
|
import { useComponentModule } from "./components/components_hooks"; //Хуки компонентов
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Представление компонента панели
|
|
const ComponentView = ({ id, path, settings = {}, values = {}, onValuesChange = null } = {}) => {
|
|
//Подгрузка модуля представления компонента (lazy здесь постоянно обновлялся при смене props, поэтому на хуке, от props независимого)
|
|
const [ComponentView, init] = useComponentModule({ path, module: "view" });
|
|
|
|
//При смене значений
|
|
const handleValuesChange = values => onValuesChange && onValuesChange(id, values);
|
|
|
|
//Расчёт флага наличия компонента
|
|
const haveComponent = path ? true : false;
|
|
|
|
//Формирование представления
|
|
return (
|
|
<Box className={"component-view__wrap"}>
|
|
{haveComponent && init && <ComponentView.default id={id} {...settings} values={values} onValuesChange={handleValuesChange} />}
|
|
{!haveComponent && <Typography align={"center"}>Компонент не определён</Typography>}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств компонента - компонент панели
|
|
ComponentView.propTypes = {
|
|
id: PropTypes.string.isRequired,
|
|
path: PropTypes.string.isRequired,
|
|
settings: PropTypes.object,
|
|
values: PropTypes.object,
|
|
onValuesChange: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { ComponentView };
|
|
|
|
//--------------------------
|
|
//ВАЖНО: Можно на React.lazy
|
|
//--------------------------
|
|
|
|
//ПРИМЕР:
|
|
/*
|
|
import React, { Suspense, lazy } from "react"; //Классы React
|
|
const ComponentView = ({ path = null, props = {} } = {}) => {
|
|
const haveComponent = path ? true : false;
|
|
const ComponentView = haveComponent ? lazy(() => import(`./components/${path}/view`)) : null;
|
|
return (
|
|
<Paper sx={STYLES.CONTAINER}>
|
|
{haveComponent && (<Suspense fallback={null}><ComponentView {...props}/></Suspense>)}
|
|
{!haveComponent && <Typography align={"center"}>Компонент не определён</Typography>}
|
|
</Paper>
|
|
);
|
|
};
|
|
*/
|