74 lines
3.5 KiB
JavaScript
74 lines
3.5 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редактор панелей
|
|
Компоненты: График (редактор настроек)
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React, { useEffect, useState } from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { P8PEditorBox } from "../../../../components/editors/p8p_editor_box"; //Контейнер редактора
|
|
import { P8PEditorSubHeader } from "../../../../components/editors/p8p_editor_sub_header"; //Заголовок раздела редактора
|
|
import { P8P_DATA_SOURCE_SHAPE } from "../../../../components/editors/p8p_data_source_common"; //Общие ресурсы источника данных
|
|
import { P8PDataSource } from "../../../../components/editors/p8p_data_source"; //Источник данных
|
|
import { P8P_CA_SHAPE, P8P_CAS_INITIAL } from "../../../../components/editors/p8p_component_action/common"; //Общие ресурсы действий
|
|
import { P8P_CA_CHART_VALUE_TYPES, P8P_CA_CHART_ACTION_AREAS } from "./action"; //Общие ресурсы действий графика
|
|
import { P8PActions } from "../../../../components/editors/p8p_actions"; //Действия
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//График (редактор настроек)
|
|
const ChartEditor = ({ id, dataSource = null, valueProviders = {}, actions = P8P_CAS_INITIAL, onSettingsChange = null } = {}) => {
|
|
//Собственное состояние - текущие настройки
|
|
const [settings, setSettings] = useState(null);
|
|
|
|
//При сохранении изменений элемента
|
|
const handleDataSourceChange = dataSource => setSettings(pv => ({ ...pv, dataSource: { ...dataSource } }));
|
|
|
|
//При изменении действий
|
|
const handleActionsChange = actions => setSettings(pv => ({ ...pv, actions }));
|
|
|
|
//При сохранении настроек
|
|
const handleSave = (closeEditor = false) => onSettingsChange && onSettingsChange({ id, settings, closeEditor });
|
|
|
|
//При изменении компонента
|
|
useEffect(() => {
|
|
settings?.id != id && setSettings({ id, dataSource, actions });
|
|
}, [settings, id, dataSource, actions]);
|
|
|
|
//Формирование представления
|
|
return (
|
|
<P8PEditorBox title={"Параметры графика"} onSave={handleSave}>
|
|
<P8PEditorSubHeader title={"Источник данных"} />
|
|
<P8PDataSource dataSource={settings?.dataSource} valueProviders={valueProviders} onChange={handleDataSourceChange} />
|
|
<P8PEditorSubHeader title={"Действия"} />
|
|
<P8PActions
|
|
actions={settings?.actions}
|
|
valueProviders={valueProviders}
|
|
areas={P8P_CA_CHART_ACTION_AREAS}
|
|
valueTypes={P8P_CA_CHART_VALUE_TYPES}
|
|
onChange={handleActionsChange}
|
|
/>
|
|
</P8PEditorBox>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств компонента - График (редактор настроек)
|
|
ChartEditor.propTypes = {
|
|
id: PropTypes.string.isRequired,
|
|
dataSource: P8P_DATA_SOURCE_SHAPE,
|
|
valueProviders: PropTypes.object,
|
|
actions: PropTypes.arrayOf(P8P_CA_SHAPE),
|
|
onSettingsChange: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export default ChartEditor;
|