removed deprecated @mui/styles
Massimo Melina committed
Aug 4, 2022 at 17:12 UTC
b3190aa2ea30969087f3e84e115bcb2ade6b53cc
4 files changed
+31
-50
admin/package.json
+5
-6
@@ -10,14 +10,13 @@
10
"eject": "react-scripts eject"
11
},
12
"dependencies": {
13
- "@emotion/react": "^11.7.1",
13
+ "@emotion/react": "^11.10.0",
14
"@hfs/mui-grid-form": "*",
15
"@hfs/shared": "*",
16
- "@emotion/styled": "^11.6.0",
17
- "@mui/icons-material": "^5.6.2",
18
- "@mui/lab": "^5.0.0-alpha.81",
19
- "@mui/material": "^5.8.1",
20
- "@mui/styles": "^5.8.0",
16
+ "@emotion/styled": "^11.10.0",
17
+ "@mui/icons-material": "^5.8.4",
18
+ "@mui/lab": "^5.0.0-alpha.93",
19
+ "@mui/material": "^5.9.3",
20
"@mui/x-data-grid": "^5.12.0",
21
"js-sha512": "^0.8.0",
22
"react": "^17.0.2",
admin/src/AccountsPage.ts
+9
-13
@@ -7,20 +7,9 @@ import { Delete, Group, MilitaryTech, Person, PersonAdd, Refresh } from '@mui/ic
7
import { alertDialog, confirmDialog } from './dialog'
8
import { iconTooltip, onlyTruthy } from './misc'
9
import { TreeItem, TreeView } from '@mui/lab'
10
-import { makeStyles } from '@mui/styles'
10
import MenuButton from './MenuButton'
11
import AccountForm from './AccountForm'
12
14
-const useStyles = makeStyles({
15
- label: {
16
- display: 'flex',
17
- flexWrap: 'wrap',
18
- padding: '.2em 0',
19
- gap: '.5em',
20
- alignItems: 'center',
21
- }
22
-})
23
-
13
export interface Account {
14
username: string
15
hasPassword?: boolean
@@ -34,7 +23,6 @@ export default function AccountsPage() {
23
const { data, reload, element } = useApiEx('get_accounts')
24
const [sel, setSel] = useState<string[] | 'new-group' | 'new-user'>([])
25
const selectionMode = Array.isArray(sel)
37
- const styles = useStyles()
26
useEffect(() => { // if accounts are reloaded, review the selection to remove elements that don't exist anymore
27
if (Array.isArray(data?.list) && selectionMode)
28
setSel( sel.filter(u => data.list.find((e:any) => e?.username === u)) ) // remove elements that don't exist anymore
@@ -95,7 +83,15 @@ export default function AccountsPage() {
83
h(TreeItem, {
84
key: ac.username,
85
nodeId: ac.username,
98
- label: h('div', { className: styles.label },
86
+ label: h(Box, {
87
+ sx: {
88
+ display: 'flex',
89
+ flexWrap: 'wrap',
90
+ padding: '.2em 0',
91
+ gap: '.5em',
92
+ alignItems: 'center',
93
+ }
94
+ },
95
account2icon(ac),
96
ac.adminActualAccess && iconTooltip(MilitaryTech, "Can login into Admin"),
97
ac.username,
admin/src/VfsTree.ts
+10
-16
@@ -1,6 +1,5 @@
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 { makeStyles } from '@mui/styles'
3
import { state, useSnapState } from './state'
4
import { createElement as h, ReactElement, useState } from 'react'
5
import { TreeItem, TreeView } from '@mui/lab'
@@ -15,29 +14,17 @@ import {
14
RemoveRedEye,
15
Web
16
} from '@mui/icons-material'
17
+import { Box } from '@mui/material'
18
import { VfsNode, Who } from './VfsPage'
19
import { iconTooltip, isWindowsDrive, onlyTruthy } from './misc'
20
21
export const FolderIcon = Folder
22
export const FileIcon = InsertDriveFileOutlined
23
24
-const useStyles = makeStyles({
25
- label: {
26
- display: 'flex',
27
- gap: '.5em',
28
- lineHeight: '2em',
29
- alignItems: 'center',
30
- },
31
- path: {
32
- opacity: .4,
33
- }
34
-})
35
-
24
export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
25
const { vfs, selectedFiles } = useSnapState()
26
const [selected, setSelected] = useState<string[]>(selectedFiles.map(x => x.id)) // try to restore selection after reload
27
const [expanded, setExpanded] = useState(Array.from(id2node.keys()))
40
- const styles = useStyles()
28
if (!vfs)
29
return null
30
return h(TreeView, {
@@ -63,7 +50,14 @@ export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
50
if (folder && !isWindowsDrive(source) && source === name) // we need a way to show that the name we are displaying is a source in this ambiguous case, so we add a redundant ./
51
source = './' + source
52
return h(TreeItem, {
66
- label: h('div', { className: styles.label },
53
+ label: h(Box, {
54
+ sx: {
55
+ display: 'flex',
56
+ gap: '.5em',
57
+ lineHeight: '2em',
58
+ alignItems: 'center',
59
+ }
60
+ },
61
!name ? iconTooltip(Home, "home, or root if you like")
62
: folder ? iconTooltip(FolderIcon, "Folder")
63
: iconTooltip(FileIcon, "File"),
@@ -74,7 +68,7 @@ export default function VfsTree({ id2node }:{ id2node: Map<string, VfsNode> }) {
68
isRoot ? "Home"
69
// special rendering if the whole source is not too long, and the name was not customized
70
: source?.length! < 45 && source?.endsWith(name) ? h('span', {},
77
- h('span', { className:styles.path }, source.slice(0,-name.length)),
71
+ h('span', { style: { opacity: .4 } }, source.slice(0,-name.length)),
72
h('span', {}, source.slice(-name.length)),
73
)
74
: name
mui-grid-form/src/StringStringField.ts
+7
-15
@@ -1,29 +1,21 @@
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 { makeStyles } from '@mui/styles'
3
import { createElement as h, ReactElement, useRef } from 'react'
4
import { Grid, IconButton } from '@mui/material'
5
import { Add, Delete } from '@mui/icons-material'
6
import { FieldProps, StringField } from './Form'
7
9
-const useStyles = makeStyles({
10
- tableHeader: {
11
- padding: '.5em 1em',
12
- fontWeight: 'bold',
13
- },
14
- actions: {
15
- display: 'flex',
16
- }
17
-})
18
-
8
export function StringStringField({ value, onChange, keyLabel='key', valueLabel='value', keyWidth=5, valueWidth=5, actionsWidth=1 }: FieldProps<Record<string,string>> & { keyLabel:string }) {
9
const refNew = useRef()
10
const justEntered = useRef<any>()
22
- const styles = useStyles()
11
+ const tableHeader = {
12
+ padding: '.5em 1em',
13
+ fontWeight: 'bold',
14
+ }
15
return h(Grid, { container: true },
16
// header
25
- h(Grid, { item: true, xs:keyWidth, className: styles.tableHeader }, keyLabel),
26
- h(Grid, { item: true, xs:valueWidth, className: styles.tableHeader }, valueLabel),
17
+ h(Grid, { item: true, xs:keyWidth, sx: tableHeader }, keyLabel),
18
+ h(Grid, { item: true, xs:valueWidth, sx: tableHeader }, valueLabel),
19
h(Grid, { item: true, xs:actionsWidth },
20
h(IconButton, {
21
onClick() { // @ts-ignore
@@ -61,7 +53,7 @@ export function StringStringField({ value, onChange, keyLabel='key', valueLabel=
53
onChange(copy, { was:value, ...rest })
54
}
55
})),
64
- h(Grid, { key:'actions', item: true, xs: actionsWidth, className: styles.actions },
56
+ h(Grid, { key:'actions', item: true, xs: actionsWidth, sx: { display: 'flex' } },
57
h(IconButton, {
58
onClick(event){
59
const copy = { ...value }