forked from CITKParus/P8-Panels
105 lines
3.7 KiB
JavaScript
105 lines
3.7 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - Редактор запросов
|
||
Компоненты: Атрибут сущности
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Handle, Position, useStore } from "reactflow"; //Библиотека редактора диаграмм
|
||
import { Box, Stack, Icon, Typography } from "@mui/material"; //Компоненты UI
|
||
import { DATA_TYPE } from "../../common"; //Общие ресурсы и константы редактора
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Типовые цвета точек привязки
|
||
const HANDLE_BORDER_COLOR = "#69db7c";
|
||
const HANDLE_BORDER_COLOR_DISABLED = "#adb5bd";
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
CONTAINER: { display: "flex", width: "100%", height: "100%" },
|
||
HANDLE_SOURCE: isConnecting => ({
|
||
width: 14,
|
||
height: 14,
|
||
right: -10,
|
||
border: `2px solid ${isConnecting ? HANDLE_BORDER_COLOR_DISABLED : HANDLE_BORDER_COLOR}`,
|
||
borderRadius: 7,
|
||
background: "white"
|
||
}),
|
||
HANDLE_TARGET: isConnecting => ({
|
||
width: isConnecting ? 14 : 0,
|
||
height: 14,
|
||
left: isConnecting ? -7 : 0,
|
||
border: `2px solid ${HANDLE_BORDER_COLOR}`,
|
||
borderRadius: 7,
|
||
background: "white",
|
||
visibility: isConnecting ? "visible" : "hidden"
|
||
}),
|
||
CONTENT_STACK: { width: "100%" },
|
||
TITLE_NAME_STACK: { width: "100%", containerType: "inline-size" }
|
||
};
|
||
|
||
//Иконки
|
||
const ICONS = {
|
||
[DATA_TYPE.STR]: "format_align_left",
|
||
[DATA_TYPE.NUMB]: "pin",
|
||
[DATA_TYPE.DATE]: "calendar_month",
|
||
DEFAULT: "category"
|
||
};
|
||
|
||
//Структура данных об атрибуте сущности
|
||
const ATTRIBUTE_DATA_SHAPE = PropTypes.shape({
|
||
name: PropTypes.string.isRequired,
|
||
title: PropTypes.string.isRequired,
|
||
dataType: PropTypes.number.isRequired
|
||
});
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Атрибут сущности
|
||
const Attribute = ({ data }) => {
|
||
//Поиск идентификатора соединяемого элемента
|
||
const connectionNodeId = useStore(state => state.connectionNodeId);
|
||
|
||
//Флаг выполнения соединения сущностей
|
||
const isConnecting = Boolean(connectionNodeId);
|
||
|
||
//Формирование представления
|
||
return (
|
||
<Box p={1} sx={STYLES.CONTAINER}>
|
||
<Handle type={"source"} position={Position.Right} style={STYLES.HANDLE_SOURCE(isConnecting)} />
|
||
<Handle type={"target"} position={Position.Left} isConnectableStart={false} style={STYLES.HANDLE_TARGET(isConnecting)} />
|
||
<Stack direction={"row"} alignItems={"center"} spacing={1} sx={STYLES.CONTENT_STACK}>
|
||
<Icon color={"action"}>{ICONS[data.dataType] || ICONS.DEFAULT}</Icon>
|
||
<Stack direction={"column"} alignItems={"left"} sx={STYLES.TITLE_NAME_STACK}>
|
||
<Typography variant={"body2"} noWrap title={data.title}>
|
||
{data.title}
|
||
</Typography>
|
||
<Typography variant={"caption"} color={"text.secondary"} noWrap title={data.name}>
|
||
{data.name}
|
||
</Typography>
|
||
</Stack>
|
||
</Stack>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств компонента - Атрибут сущности
|
||
Attribute.propTypes = {
|
||
data: ATTRIBUTE_DATA_SHAPE
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { Attribute, ATTRIBUTE_DATA_SHAPE };
|