WEBAPP: Функция сокрытия заголовка приложения ("ApplicationCtx.appBarShow")

This commit is contained in:
Mim 2026-04-02 17:45:41 +03:00
parent a5f46513ca
commit e441d940ba
4 changed files with 61 additions and 37 deletions

View File

@ -102,6 +102,7 @@ const Workspace = ({ panels = [], selectedPanel, children } = {}) => {
panels={panels} panels={panels}
selectedPanel={selectedPanel} selectedPanel={selectedPanel}
caption={appState.appBarTitle} caption={appState.appBarTitle}
showAppBar={appState.appBarShow}
onHomeNavigate={handleHomeNavigate} onHomeNavigate={handleHomeNavigate}
onItemNavigate={handleItemNavigate} onItemNavigate={handleItemNavigate}
> >

View File

@ -47,7 +47,17 @@ const STYLES = {
//----------- //-----------
//Рабочее пространство //Рабочее пространство
const P8PAppWorkspace = ({ children, panels = [], selectedPanel, caption, closeCaption, homeCaption, onHomeNavigate, onItemNavigate } = {}) => { const P8PAppWorkspace = ({
children,
panels = [],
selectedPanel,
caption,
showAppBar = true,
closeCaption,
homeCaption,
onHomeNavigate,
onItemNavigate
} = {}) => {
//Собственное состояния //Собственное состояния
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
@ -73,42 +83,46 @@ const P8PAppWorkspace = ({ children, panels = [], selectedPanel, caption, closeC
//Генерация содержимого //Генерация содержимого
return ( return (
<Box sx={STYLES.ROOT_BOX}> <Box sx={STYLES.ROOT_BOX}>
<CssBaseline /> {showAppBar && (
<AppBar sx={STYLES.APP_BAR}> <>
<Toolbar> <CssBaseline />
<IconButton <AppBar sx={STYLES.APP_BAR}>
color="inherit" <Toolbar>
aria-label="open drawer" <IconButton
onClick={open ? handleDrawerClose : handleDrawerOpen} color="inherit"
edge="start" aria-label="open drawer"
sx={STYLES.APP_BAR_BUTTON} onClick={open ? handleDrawerClose : handleDrawerOpen}
> edge="start"
<Icon>{open ? "chevron_left" : "menu"}</Icon> sx={STYLES.APP_BAR_BUTTON}
</IconButton> >
<Typography variant="h6" noWrap component="div"> <Icon>{open ? "chevron_left" : "menu"}</Icon>
{caption || selectedPanel?.caption} </IconButton>
</Typography> <Typography variant="h6" noWrap component="div">
</Toolbar> {caption || selectedPanel?.caption}
</AppBar> </Typography>
<Drawer anchor="left" open={open} onClose={handleDrawerClose} sx={STYLES.DRAWER}> </Toolbar>
<List> </AppBar>
<ListItemButton onClick={handleDrawerClose}> <Drawer anchor="left" open={open} onClose={handleDrawerClose} sx={STYLES.DRAWER}>
<ListItemIcon> <List>
<Icon>close</Icon> <ListItemButton onClick={handleDrawerClose}>
</ListItemIcon> <ListItemIcon>
<ListItemText primary={closeCaption} /> <Icon>close</Icon>
</ListItemButton> </ListItemIcon>
<ListItemButton onClick={handleHomeClick}> <ListItemText primary={closeCaption} />
<ListItemIcon> </ListItemButton>
<Icon>home</Icon> <ListItemButton onClick={handleHomeClick}>
</ListItemIcon> <ListItemIcon>
<ListItemText primary={homeCaption} /> <Icon>home</Icon>
</ListItemButton> </ListItemIcon>
</List> <ListItemText primary={homeCaption} />
<P8PPanelsMenuDrawer panels={panels} selectedPanel={selectedPanel} onItemNavigate={handleItemNavigate} /> </ListItemButton>
</Drawer> </List>
<P8PPanelsMenuDrawer panels={panels} selectedPanel={selectedPanel} onItemNavigate={handleItemNavigate} />
</Drawer>
</>
)}
<main style={STYLES.MAIN}> <main style={STYLES.MAIN}>
<Toolbar /> {showAppBar && <Toolbar />}
{children} {children}
</main> </main>
</Box> </Box>
@ -121,6 +135,7 @@ P8PAppWorkspace.propTypes = {
panels: PropTypes.arrayOf(P8P_PANELS_MENU_PANEL_SHAPE).isRequired, panels: PropTypes.arrayOf(P8P_PANELS_MENU_PANEL_SHAPE).isRequired,
selectedPanel: P8P_PANELS_MENU_PANEL_SHAPE, selectedPanel: P8P_PANELS_MENU_PANEL_SHAPE,
caption: PropTypes.string, caption: PropTypes.string,
showAppBar: PropTypes.bool,
closeCaption: PropTypes.string.isRequired, closeCaption: PropTypes.string.isRequired,
homeCaption: PropTypes.string.isRequired, homeCaption: PropTypes.string.isRequired,
onHomeNavigate: PropTypes.func, onHomeNavigate: PropTypes.func,

View File

@ -59,6 +59,9 @@ export const ApplicationContext = ({ errors, displaySizeGetter, guidGenerator, c
//Установка заголовка в шапке приложения //Установка заголовка в шапке приложения
const setAppBarTitle = useCallback(appBarTitle => dispatch({ type: APP_AT.SET_APP_BAR_TITLE, payload: appBarTitle }), []); const setAppBarTitle = useCallback(appBarTitle => dispatch({ type: APP_AT.SET_APP_BAR_TITLE, payload: appBarTitle }), []);
//Установка флага отображения шапки приложения
const setAppBarShow = useCallback(appBarShow => dispatch({ type: APP_AT.SET_APP_BAR_SHOW, payload: appBarShow }), []);
//Поиск раздела по имени //Поиск раздела по имени
const findPanelByName = name => state.panels.find(panel => panel.name == name); const findPanelByName = name => state.panels.find(panel => panel.name == name);
@ -173,6 +176,7 @@ export const ApplicationContext = ({ errors, displaySizeGetter, guidGenerator, c
<ApplicationCtx.Provider <ApplicationCtx.Provider
value={{ value={{
setAppBarTitle, setAppBarTitle,
setAppBarShow,
findPanelByName, findPanelByName,
pOnlineShowTab, pOnlineShowTab,
pOnlineShowUnit, pOnlineShowUnit,

View File

@ -13,13 +13,15 @@ const APP_AT = {
LOAD_PANELS: "LOAD_PANELS", //Загрузка списка панелей LOAD_PANELS: "LOAD_PANELS", //Загрузка списка панелей
SET_INITIALIZED: "SET_INITIALIZED", //Установка флага инициализированности приложения SET_INITIALIZED: "SET_INITIALIZED", //Установка флага инициализированности приложения
SET_DISPLAY_SIZE: "SET_DISPLAY_SIZE", //Установка текущего типового размера экрана SET_DISPLAY_SIZE: "SET_DISPLAY_SIZE", //Установка текущего типового размера экрана
SET_APP_BAR_TITLE: "SET_APP_BAR_TITLE" //Установка заголовка в шапке приложения SET_APP_BAR_TITLE: "SET_APP_BAR_TITLE", //Установка заголовка в шапке приложения
SET_APP_BAR_SHOW: "SET_APP_BAR_SHOW" //Установка флага отображения шапки приложения
}; };
//Состояние приложения по умолчанию //Состояние приложения по умолчанию
const INITIAL_STATE = displaySizeGetter => ({ const INITIAL_STATE = displaySizeGetter => ({
displaySize: displaySizeGetter(), displaySize: displaySizeGetter(),
appBarTitle: "", appBarTitle: "",
appBarShow: true,
urlBase: "", urlBase: "",
panels: [], panels: [],
panelsLoaded: false, panelsLoaded: false,
@ -50,6 +52,8 @@ const handlers = {
[APP_AT.SET_DISPLAY_SIZE]: (state, { payload }) => ({ ...state, displaySize: payload }), [APP_AT.SET_DISPLAY_SIZE]: (state, { payload }) => ({ ...state, displaySize: payload }),
//Установка заголовка в шапке приложения //Установка заголовка в шапке приложения
[APP_AT.SET_APP_BAR_TITLE]: (state, { payload }) => ({ ...state, appBarTitle: payload }), [APP_AT.SET_APP_BAR_TITLE]: (state, { payload }) => ({ ...state, appBarTitle: payload }),
//Установка флага отображения шапки приложения
[APP_AT.SET_APP_BAR_SHOW]: (state, { payload }) => ({ ...state, appBarShow: payload }),
//Обработчик по умолчанию //Обработчик по умолчанию
DEFAULT: state => state DEFAULT: state => state
}; };