87 lines
2.8 KiB
JavaScript
87 lines
2.8 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редактор панелей
|
|
Элемент макета
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { IconButton, Icon, Stack } from "@mui/material"; //Интерфейсные элементы
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Стили
|
|
const STYLES = {
|
|
CONTAINER: selected => ({ zIndex: 1100, ...(selected ? { border: "2px dotted green" } : {}) }),
|
|
STACK_TOOLS: { position: "absolute", zIndex: 1200, height: "100%", backgroundColor: "#c0c0c07f" }
|
|
};
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Элемент макета
|
|
// eslint-disable-next-line react/display-name
|
|
const LayoutItem = React.forwardRef(
|
|
(
|
|
{ style, className, onMouseDown, onMouseUp, onTouchEnd, children, onSettingsClick, onDeleteClick, item, editMode = false, selected = false },
|
|
ref
|
|
) => {
|
|
//При нажатии на настройки
|
|
const handleSettingsClick = () => onSettingsClick && onSettingsClick(item.i);
|
|
|
|
//При нажатии на удаление
|
|
const handleDeleteClick = () => onDeleteClick && onDeleteClick(item.i);
|
|
|
|
//Формирование представления
|
|
return (
|
|
<div
|
|
style={{ ...style, ...STYLES.CONTAINER(selected) }}
|
|
className={`${className} layout-item__container`}
|
|
ref={ref}
|
|
onMouseDown={onMouseDown}
|
|
onMouseUp={onMouseUp}
|
|
onTouchEnd={onTouchEnd}
|
|
>
|
|
{editMode && (
|
|
<Stack direction={"column"} sx={STYLES.STACK_TOOLS}>
|
|
<IconButton onClick={handleSettingsClick}>
|
|
<Icon>settings</Icon>
|
|
</IconButton>
|
|
<IconButton onClick={handleDeleteClick}>
|
|
<Icon>delete</Icon>
|
|
</IconButton>
|
|
</Stack>
|
|
)}
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
//Контроль свойств компонента - элемент макета
|
|
LayoutItem.propTypes = {
|
|
style: PropTypes.object,
|
|
className: PropTypes.string,
|
|
onMouseDown: PropTypes.func,
|
|
onMouseUp: PropTypes.func,
|
|
onTouchEnd: PropTypes.func,
|
|
children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
|
|
onSettingsClick: PropTypes.func,
|
|
onDeleteClick: PropTypes.func,
|
|
item: PropTypes.object.isRequired,
|
|
editMode: PropTypes.bool,
|
|
selected: PropTypes.bool
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { LayoutItem };
|