mui/Hidden has been deprecated
Massimo Melina committed
May 15, 2022 at 15:46 UTC
e1b236b2c769dd6ec30d5d7025832ffff8908b64
4 files changed
+26
-22
admin/src/App.ts
+10
-10
@@ -3,9 +3,10 @@
3
import { createElement as h, Fragment, useState } from 'react'
4
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom'
5
import MainMenu, { getMenuLabel, mainMenu } from './MainMenu'
6
-import { AppBar, Box, Drawer, Hidden, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
6
+import { AppBar, Box, Drawer, IconButton, ThemeProvider, Toolbar, Typography } from '@mui/material'
7
import { Dialogs } from './dialog'
8
import { useMyTheme } from './theme'
9
+import { useBreakpoint} from './misc'
10
import { LoginRequired } from './LoginRequired'
11
import { Menu } from '@mui/icons-material'
12
@@ -32,16 +33,15 @@ function Routed() {
33
const current = mainMenu.find(x => x.path === loc)
34
const title = current && (current.title || getMenuLabel(current))
35
const [open, setOpen] = useState(false)
36
+ const large = useBreakpoint('lg')
37
return h(Fragment, {},
36
- h(Hidden, { mdUp: true },
37
- h(StickyBar, { title, openMenu: () => setOpen(true) }),
38
- h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
39
- h(MainMenu, {
40
- onSelect: () => setOpen(false)
41
- }))
42
- ),
38
+ !large && h(StickyBar, { title, openMenu: () => setOpen(true) }),
39
+ !large && h(Drawer, { anchor:'left', open, onClose(){ setOpen(false) } },
40
+ h(MainMenu, {
41
+ onSelect: () => setOpen(false)
42
+ })),
43
h(Box, { display: 'flex', flex: 1, }, // horizontal layout for menu-content
44
- h(Hidden, { mdDown: true }, h(MainMenu) ),
44
+ large && h(MainMenu),
45
h(Box, {
46
component: 'main',
47
sx: {
@@ -55,7 +55,7 @@ function Routed() {
55
width: '100%',
56
}
57
},
58
- title && h(Hidden, { mdDown: true }, h(Typography, { variant:'h2', mb:2 }, title) ),
58
+ title && large && h(Typography, { variant:'h2', mb:2 }, title),
59
h(Routes, {}, mainMenu.map((it,idx) =>
60
h(Route, { key: idx, path: it.path, element: h(it.comp) })) )
61
),
admin/src/MonitorPage.ts
+4
-5
@@ -4,10 +4,10 @@ import _ from "lodash"
4
import { isValidElement, createElement as h, useMemo, Fragment, useState } from "react"
5
import { apiCall, useApiComp, useApiList } from "./api"
6
import { PauseCircle, PlayCircle, Delete, Lock, Block } from '@mui/icons-material'
7
-import { Box, Chip, Hidden } from '@mui/material'
7
+import { Box, Chip } from '@mui/material'
8
import { DataGrid } from "@mui/x-data-grid"
9
import { Alert } from '@mui/material'
10
-import { formatBytes, IconBtn, iconTooltip, manipulateConfig } from "./misc"
10
+import { formatBytes, IconBtn, iconTooltip, manipulateConfig, useBreakpoint } from "./misc"
11
import { Field, SelectField } from './Form'
12
import { GridColumns } from '@mui/x-data-grid/models/colDef/gridColDef'
13
@@ -22,14 +22,13 @@ const isoDateRe = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/
22
23
function MoreInfo() {
24
const [res] = useApiComp('get_status')
25
- return h(Hidden, { smDown: true },
26
- isValidElement(res) ? res :
25
+ return !useBreakpoint('md') ? null
26
+ : isValidElement(res) ? res :
27
h(Box, { display: 'flex', flexWrap: 'wrap', gap: '1em', mb: 2 },
28
pair('started'),
29
pair('http', "HTTP", port),
30
pair('https', "HTTPS", port),
31
)
32
- )
32
33
type Color = Parameters<typeof Chip>[0]['color']
34
type Render = (v:any) => [string, Color?]
admin/src/VfsMenuBar.ts
+7
-6
@@ -2,13 +2,14 @@
2
3
import { state, useSnapState } from './state'
4
import { createElement as h } from 'react'
5
-import { Box, Button, Hidden } from '@mui/material'
5
+import { Box, Button } from '@mui/material'
6
import { Add, Delete, Refresh } from '@mui/icons-material'
7
import { alertDialog, confirmDialog } from './dialog'
8
import { apiCall } from './api'
9
import { reloadVfs } from './VfsPage'
10
import addFiles, { addVirtual } from './addFiles'
11
import MenuButton from './MenuButton'
12
+import { IconBtn } from './misc'
13
14
export default function VfsMenuBar() {
15
const { selectedFiles } = useSnapState()
@@ -28,12 +29,12 @@ export default function VfsMenuBar() {
29
variant: 'contained',
30
startIcon: h(Add),
31
items: [
31
- { children: 'from disk', onClick: addFiles },
32
- { children: 'virtual folder', onClick: addVirtual }
32
+ { children: "from disk", onClick: addFiles },
33
+ { children: "virtual folder", onClick: addVirtual }
34
]
34
- }, 'Add'),
35
- h(Button, { onClick: removeFiles, disabled: !selectedFiles.length, startIcon: h(Delete) }, 'Remove'),
36
- h(Button, { onClick(){ reloadVfs() }, startIcon: h(Refresh) }, h(Hidden, { smDown:true }, 'Reload')),
35
+ }, "Add"),
36
+ h(Button, { onClick: removeFiles, disabled: !selectedFiles.length, startIcon: h(Delete) }, "Remove"),
37
+ h(IconBtn, { icon: Refresh, title: "Reload", onClick(){ reloadVfs() } }),
38
)
39
}
40
admin/src/misc.ts
+5
-1
@@ -1,7 +1,7 @@
1
// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
2
3
import { createElement as h, FC, ReactNode } from 'react'
4
-import { Box, CircularProgress, IconButton, Link, Tooltip } from '@mui/material'
4
+import { Box, Breakpoint, CircularProgress, IconButton, Link, Tooltip, useMediaQuery } from '@mui/material'
5
import { Link as RouterLink } from 'react-router-dom'
6
import { SxProps } from '@mui/system'
7
import { SvgIconComponent } from '@mui/icons-material'
@@ -122,3 +122,7 @@ export function findFirst<I=any, O=any>(a: I[], cb:(v:I)=>O): any {
122
export function xlate(input: any, table: Record<string, any>) {
123
return table[input] ?? input
124
}
125
+
126
+export function useBreakpoint(name: Breakpoint) {
127
+ return useMediaQuery((theme: any) => theme.breakpoints.up(name), { noSsr:true }) // without noSsr, first execution always returns false
128
+}