90 lines
3.2 KiB
JavaScript
90 lines
3.2 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редактор запросов
|
|
Компоненты: Аргумент запроса
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Stack, ListItem, IconButton, Icon, ListItemButton, ListItemText, Typography, ListItemIcon, Chip } from "@mui/material"; //Компоненты UI
|
|
import { STYLES as COMMON_STYLES } from "../../../../components/editors/p8p_editors_common"; //Общие ресурсы редаторов
|
|
import { DATA_TYPE, DATA_TYPE_ICON } from "../../common"; //Общие ресурсы и константы редактора запросов
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Варианты представления
|
|
const ARGUMENT_VARIANT = {
|
|
LIST_ITEM: "LIST_ITEM",
|
|
CHIP: "CHIP"
|
|
};
|
|
|
|
//Структура аргумента
|
|
const ARGUMENT_SHAPE = PropTypes.shape({
|
|
name: PropTypes.string.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
dataType: PropTypes.oneOf(Object.values(DATA_TYPE)),
|
|
mandatory: PropTypes.oneOf([0, 1]).isRequired
|
|
});
|
|
|
|
//Иконки
|
|
const ICONS = { ...DATA_TYPE_ICON, DEFAULT: "category" };
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Аргумент запроса
|
|
const Argument = ({ arg, variant, onClick = null, onDelete = null }) => {
|
|
//Заголовок аргумента
|
|
const title = `${arg.mandatory == 1 ? "*" : ""}${arg.title}`;
|
|
|
|
//Иконка аргумента
|
|
const icon = ICONS[arg.dataType] || ICONS.DEFAULT;
|
|
|
|
//Формирование представления
|
|
return variant == ARGUMENT_VARIANT.LIST_ITEM ? (
|
|
<ListItem disablePadding>
|
|
<ListItemButton onClick={() => onClick && onClick(arg)} dense>
|
|
<ListItemIcon>
|
|
<Icon>{icon}</Icon>
|
|
</ListItemIcon>
|
|
<ListItemText
|
|
primary={title}
|
|
secondaryTypographyProps={{ component: "div" }}
|
|
secondary={
|
|
<Stack direction={"column"}>
|
|
<Typography variant={"caption"}>{arg.name}</Typography>
|
|
</Stack>
|
|
}
|
|
/>
|
|
<Stack direction={"row"}>
|
|
<IconButton onClick={e => onDelete && onDelete(e, arg)} title={"Удалить"}>
|
|
<Icon>delete</Icon>
|
|
</IconButton>
|
|
</Stack>
|
|
</ListItemButton>
|
|
</ListItem>
|
|
) : variant == ARGUMENT_VARIANT.CHIP ? (
|
|
<Chip icon={<Icon>{icon}</Icon>} label={title} variant={"outlined"} sx={COMMON_STYLES.CHIP(true)} />
|
|
) : null;
|
|
};
|
|
|
|
//Контроль свойств компонента - Аргумент запроса
|
|
Argument.propTypes = {
|
|
arg: ARGUMENT_SHAPE,
|
|
variant: PropTypes.oneOf(Object.values(ARGUMENT_VARIANT)).isRequired,
|
|
onClick: PropTypes.func,
|
|
onDelete: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { Argument, ARGUMENT_VARIANT, ARGUMENT_SHAPE };
|