dev: setTitleSide(fullWidth)
Massimo Melina committed
Nov 5, 2024 at 16:11 UTC
49b1dd25a7d6afb0ba048dae681e7cae431a0cb2
1 file changed
+17
-7
admin/src/App.ts
+17
-7
@@ -3,7 +3,7 @@
3
import { createElement as h, Fragment, ReactNode, useCallback, useEffect, useState } from 'react'
4
import { HashRouter, Routes, Route, useLocation, useNavigate } from 'react-router-dom'
5
import MainMenu, { getMenuLabel, mainMenu } from './MainMenu'
6
-import { AppBar, Box, Drawer, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
6
+import { AppBar, Box, BoxProps, Drawer, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
7
import { anyDialogOpen, Dialogs } from './dialog'
8
import { useMyTheme } from './theme'
9
import { Flex, useBreakpoint } from './mui'
@@ -18,7 +18,7 @@ import { AriaOnly, isMac, xlate } from './misc'
18
import { getLocale } from './locale'
19
20
// always use useMemo with setTitleSide
21
-export interface PageProps { setTitleSide: (content: ReactNode) => void }
21
+export interface PageProps { setTitleSide: (content: ReactNode, fullWidth?: boolean) => void }
22
23
function App() {
24
return h(ThemeProvider, { theme: useMyTheme() },
@@ -66,10 +66,14 @@ function Routed() {
66
navigate(path || '/')
67
})
68
const [titleSide, setTitleSide] = useState()
69
+ const [titleSideFullWidth, setTitleSideFullWidth] = useState(false)
70
titleSideSet = null
70
- const set = useCallback((x: any) => {
71
+ const set = useCallback((x: any, fullWidth=false) => {
72
titleSideSet = x
72
- setTimeout(() => setTitleSide(() => x))
73
+ setTimeout(() => {
74
+ setTitleSide(() => x)
75
+ setTitleSideFullWidth(() => fullWidth)
76
+ })
77
}, [])
78
useEffect(() => {
79
if (!titleSideSet)
@@ -77,7 +81,12 @@ function Routed() {
81
})
82
return h(Fragment, {},
83
h(AriaOnly, {}, h('h1', {}, "Admin-panel")),
80
- !sideMenu && h(StickyBar, { title, titleSide, openMenu: () => setOpen(true) }),
84
+ !sideMenu && h(StickyBar, {
85
+ title,
86
+ titleSide,
87
+ openMenu: () => setOpen(true),
88
+ ...titleSideFullWidth as any && { props: { flex: 1 } }
89
+ }),
90
!sideMenu && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
91
h(MainMenu, {
92
onSelect: () => setOpen(false),
@@ -103,7 +112,7 @@ function Routed() {
112
title && sideMenu && h(Flex, { gap: 4, '& .MuiAlert-root': { p: 0, backgroundColor: 'unset' } },
113
h(Typography, { variant:'h2', mb:2, whiteSpace: 'nowrap' }, title),
114
// @ts-ignore
106
- titleSide,
115
+ h(Flex, { ...titleSideFullWidth as any && { width: '100%' } }, titleSide),
116
),
117
h(Routes, {},
118
mainMenu.map((it,idx) =>
@@ -120,7 +129,7 @@ function itemTitle(idx: number) {
129
return idx < 10 ? `${isMac ? 'CTRL' : 'ALT'} + ${(idx+1) % 10}` : ''
130
}
131
123
-function StickyBar({ title, titleSide, openMenu }: { titleSide?: ReactNode, title?: string, openMenu: ()=>void }) {
132
+function StickyBar({ title, titleSide, openMenu, props }: { props?: BoxProps, titleSide?: ReactNode, title?: string, openMenu: ()=>void }) {
133
return h(AppBar, { position: 'sticky', sx: { mb: 1 } },
134
h(Toolbar, {},
135
h(IconButton, {
@@ -133,6 +142,7 @@ function StickyBar({ title, titleSide, openMenu }: { titleSide?: ReactNode, titl
142
}, h(Menu)),
143
h(Flex, {
144
gap: 4,
145
+ props,
146
'& .MuiAlert-root': {
147
p: 0,
148
backgroundColor: 'unset',