63 lines
2.2 KiB
JavaScript
63 lines
2.2 KiB
JavaScript
/*
|
|
Парус 8 - Панели мониторинга - Редакторы панелей
|
|
Компонент: Панель инструментов редактора
|
|
*/
|
|
|
|
//---------------------
|
|
//Подключение библиотек
|
|
//---------------------
|
|
|
|
import React from "react"; //Классы React
|
|
import PropTypes from "prop-types"; //Контроль свойств компонента
|
|
import { IconButton, Icon, Stack, Grid } from "@mui/material"; //Интерфейсные компоненты MUI
|
|
|
|
//---------
|
|
//Константы
|
|
//---------
|
|
|
|
//Структура элемента панели инструментов редактора
|
|
const P8P_EDITOR_TOOL_BAR_ITEM_SHAPE = PropTypes.shape({
|
|
icon: PropTypes.string.isRequired,
|
|
title: PropTypes.string.isRequired,
|
|
disabled: PropTypes.bool,
|
|
onClick: PropTypes.func.isRequired,
|
|
customRenderer: PropTypes.func
|
|
});
|
|
|
|
//-----------
|
|
//Тело модуля
|
|
//-----------
|
|
|
|
//Панель инструментов редактора
|
|
const P8PEditorToolBar = ({ items = [] }) => {
|
|
//Формирование представления
|
|
return (
|
|
<Stack direction={"row"} p={1}>
|
|
<Grid container columns={items.length}>
|
|
{items.map((item, i) => (
|
|
<Grid item size={{ xs: 2, sm: 4, md: 4 }} key={i}>
|
|
{item.customRenderer ? (
|
|
item.customRenderer({ icon: item.icon, title: item.title, disabled: item?.disabled === true, onClick: item.onClick })
|
|
) : (
|
|
<IconButton onClick={item.onClick} title={item.title} disabled={item?.disabled === true}>
|
|
<Icon>{item.icon}</Icon>
|
|
</IconButton>
|
|
)}
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
//Контроль свойств компонента - Панель инструментов редактора
|
|
P8PEditorToolBar.propTypes = {
|
|
items: PropTypes.arrayOf(P8P_EDITOR_TOOL_BAR_ITEM_SHAPE)
|
|
};
|
|
|
|
//----------------
|
|
//Интерфейс модуля
|
|
//----------------
|
|
|
|
export { P8PEditorToolBar };
|