forked from CITKParus/P8-Panels
89 lines
3.2 KiB
JavaScript
89 lines
3.2 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редакторы панелей
|
|
Компонент: Список элементов
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { Chip, Typography, Stack, Icon } from "@mui/material"; //Интерфейсные элементы
|
|
import { STYLES as COMMON_STYLES } from "./p8p_editors_common"; //Общие ресурсы редакторов
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Стили
|
|
const STYLES = {
|
|
CHIP_ITEM: { ...COMMON_STYLES.CHIP(true, false) },
|
|
STACK_ITEM: { alignItems: "center" },
|
|
TYPOGRAPHY_INFO: { overflow: "hidden" }
|
|
};
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Список элементов
|
|
const P8PChipList = ({ items, labelRender, onClick, onDelete }) => {
|
|
//При нажатии на элемент
|
|
const handleClick = index => onClick && onClick(index);
|
|
|
|
//При удалении элемента
|
|
const handleDelete = index => onDelete && onDelete(index);
|
|
|
|
//Формирование представления
|
|
return (
|
|
<>
|
|
{Array.isArray(items) &&
|
|
items.length > 0 &&
|
|
items.map((item, i) => (
|
|
<Chip
|
|
key={i}
|
|
label={
|
|
labelRender ? (
|
|
labelRender(item)
|
|
) : (
|
|
<Stack direction="row" spacing={1} sx={STYLES.STACK_ITEM}>
|
|
{item.icon ? (
|
|
<>
|
|
<Icon sx={{ color: "grey" }} title={item?.iconTitle}>
|
|
{item.icon}
|
|
</Icon>
|
|
<Typography variant="body2">-</Typography>
|
|
</>
|
|
) : null}
|
|
<Typography variant="body2" title={item?.title} sx={STYLES.TYPOGRAPHY_INFO}>
|
|
{item.text}
|
|
</Typography>
|
|
</Stack>
|
|
)
|
|
}
|
|
variant={"outlined"}
|
|
onClick={onClick && !item.disableClick ? () => handleClick(i) : null}
|
|
onDelete={onDelete && !item.disableDelete ? () => handleDelete(i) : null}
|
|
deleteIcon={item.deleteIcon ? <Icon>{item.deleteIcon}</Icon> : null}
|
|
sx={STYLES.CHIP_ITEM}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств - список элементов
|
|
P8PChipList.propTypes = {
|
|
items: PropTypes.array,
|
|
labelRender: PropTypes.func,
|
|
onClick: PropTypes.func,
|
|
onDelete: PropTypes.func
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PChipList };
|