P8-Panels/app/components/p8p_app_workspace.js

/*
    Парус 8 - Панели мониторинга
    Компонент: Рабочее пространство
*/

//---------------------
//Подключение библиотек
//---------------------

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
    AppBar,
    CssBaseline,
    Icon,
    Box,
    Toolbar,
    IconButton,
    Typography,
    Drawer,
    List,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    Divider
} from "@mui/material"; //Интерфейсные компоненты
import { P8PPanelsMenuDrawer, P8P_PANELS_MENU_PANEL_SHAPE } from "./p8p_panels_menu"; //Меню
import { P8P_TYPOGRAPHY_VARIANT } from "../theme/p8p_typography"; //Варианты шрифтов
import { P8P_ICON_BUTTON_VARIANT } from "../theme/variants/p8p_icon_button_variants"; //Варианты кнопок-иконок
import { P8P_APP_BAR_VARIANT } from "../theme/variants/p8p_app_bar_variants"; //Варианты областей заголовка
import { P8P_DRAWER_VARIANT } from "../theme/variants/p8p_drawer_variants"; //Варианты выезжающих областей
import { P8P_BOX_CENTER_START, P8P_BOX_CENTER_END, P8P_BOX_FLEX, P8P_BOX_APP_WORKSPACE } from "../theme/styles/box"; //Стили контейнеров
import { P8P_MAIN_APP_WORKSPACE } from "../theme/styles/main"; //Стили содержимого страницы
import { P8P_LIST_ITEM_TEXT_VARIANT } from "../theme/variants/p8p_list_item_text_variants"; //Варианты значений списков

//---------
//Константы
//---------

//Высота главного меню
const APP_BAR_HEIGHT = "64px";

//-----------
//Тело модуля
//-----------

//Рабочее пространство
const P8PAppWorkspace = ({
    children,
    panels = [],
    selectedPanel,
    caption,
    showAppBar = true,
    showAppBarSettings = true,
    closeCaption,
    homeCaption,
    settingsCaption,
    onHomeNavigate,
    onItemNavigate,
    onSettingsDialog
} = {}) => {
    //Собственное состояния
    const [open, setOpen] = useState(false);

    //Отработка открытия бокового меню
    const handleDrawerOpen = () => {
        setOpen(true);
    };

    //Отработка закрытия бового меню
    const handleDrawerClose = () => {
        setOpen(false);
    };

    //Отработка нажатия на домашнюю страницу
    const handleHomeClick = () => (onHomeNavigate ? onHomeNavigate() : null);

    //Отработка нажатия на элемент бокового меню
    const handleItemNavigate = panel => {
        handleDrawerClose();
        onItemNavigate ? onItemNavigate(panel) : null;
    };

    //Отработка нажатия на элемент открытия параметров
    const handleSettingsDialog = (panel = null) => onSettingsDialog(panel);

    //Генерация содержимого
    return (
        <Box sx={P8P_BOX_FLEX}>
            {showAppBar && (
                <>
                    <CssBaseline />
                    <AppBar variant={P8P_APP_BAR_VARIANT.FIXED}>
                        <Toolbar>
                            <Box sx={P8P_BOX_APP_WORKSPACE}>
                                <Box sx={P8P_BOX_CENTER_START}>
                                    <IconButton
                                        color="inherit"
                                        aria-label="open drawer"
                                        onClick={open ? handleDrawerClose : handleDrawerOpen}
                                        edge="start"
                                        variant={P8P_ICON_BUTTON_VARIANT.APP_BAR_BUTTON}
                                    >
                                        <Icon>{open ? "chevron_left" : "menu"}</Icon>
                                    </IconButton>
                                    <Typography variant={P8P_TYPOGRAPHY_VARIANT.H6} noWrap component="div">
                                        {caption || selectedPanel?.caption}
                                    </Typography>
                                </Box>
                                <Box sx={P8P_BOX_CENTER_END}>
                                    {showAppBarSettings && selectedPanel.showUserSettings ? (
                                        <IconButton
                                            color="inherit"
                                            aria-label="open drawer"
                                            onClick={() => handleSettingsDialog(selectedPanel.name)}
                                            edge="end"
                                            variant={P8P_ICON_BUTTON_VARIANT.APP_BAR_BUTTON}
                                        >
                                            <Icon>settings</Icon>
                                        </IconButton>
                                    ) : null}
                                </Box>
                            </Box>
                        </Toolbar>
                    </AppBar>
                    <Drawer anchor="left" open={open} onClose={handleDrawerClose} data-variant={P8P_DRAWER_VARIANT.PRIMARY}>
                        <List>
                            <ListItemButton onClick={handleDrawerClose}>
                                <ListItemIcon>
                                    <Icon>close</Icon>
                                </ListItemIcon>
                                <ListItemText variant={P8P_LIST_ITEM_TEXT_VARIANT.PRIMARY} primary={closeCaption} />
                            </ListItemButton>
                            <ListItemButton onClick={handleHomeClick}>
                                <ListItemIcon>
                                    <Icon>home</Icon>
                                </ListItemIcon>
                                <ListItemText variant={P8P_LIST_ITEM_TEXT_VARIANT.PRIMARY} primary={homeCaption} />
                            </ListItemButton>
                            <Divider component="li" />
                            <ListItemButton onClick={() => handleSettingsDialog()}>
                                <ListItemIcon>
                                    <Icon>settings</Icon>
                                </ListItemIcon>
                                <ListItemText variant={P8P_LIST_ITEM_TEXT_VARIANT.PRIMARY} primary={settingsCaption} />
                            </ListItemButton>
                        </List>
                        <P8PPanelsMenuDrawer panels={panels} selectedPanel={selectedPanel} onItemNavigate={handleItemNavigate} />
                    </Drawer>
                </>
            )}
            <main style={P8P_MAIN_APP_WORKSPACE}>
                {showAppBar && <Toolbar />}
                {children}
            </main>
        </Box>
    );
};

//Контроль свойств - Рабочее пространство
P8PAppWorkspace.propTypes = {
    children: PropTypes.element,
    panels: PropTypes.arrayOf(P8P_PANELS_MENU_PANEL_SHAPE).isRequired,
    selectedPanel: P8P_PANELS_MENU_PANEL_SHAPE,
    caption: PropTypes.string,
    showAppBar: PropTypes.bool,
    showAppBarSettings: PropTypes.bool,
    closeCaption: PropTypes.string.isRequired,
    homeCaption: PropTypes.string.isRequired,
    settingsCaption: PropTypes.string.isRequired,
    onHomeNavigate: PropTypes.func,
    onItemNavigate: PropTypes.func,
    onSettingsDialog: PropTypes.func
};

//----------------
//Интерфейс модуля
//----------------

export { APP_BAR_HEIGHT, P8PAppWorkspace };