admin: nicer waitDialog
Massimo Melina committed
Aug 17, 2023 at 19:23 UTC
6c8a30ad04d17b574556ccb5fd88ef9eadecc8e4
2 files changed
+9
-7
admin/src/dialog.ts
+6
-3
@@ -7,7 +7,8 @@ import {
7
Dialog as MuiDialog,
8
DialogContent,
9
DialogTitle,
10
- IconButton
10
+ IconButton,
11
+ Modal
12
} from '@mui/material'
13
import {
14
createElement as h, Dispatch, Fragment,
@@ -20,7 +21,7 @@ import {
21
import { Check, Close, Error as ErrorIcon, Forward, Info, Warning } from '@mui/icons-material'
22
import { newDialog, closeDialog, dialogsDefaults, DialogOptions, componentOrNode, pendingPromise } from '@hfs/shared'
23
import { Form, FormProps } from '@hfs/mui-grid-form'
23
-import { IconBtn, Flex } from './misc'
24
+import { IconBtn, Flex, Center } from './misc'
25
import { useDark } from './theme'
26
import { useWindowSize } from 'usehooks-ts'
27
export * from '@hfs/shared/dialogs'
@@ -44,6 +45,8 @@ dialogsDefaults.Container = function Container(d:DialogOptions) {
45
const titleSx = useDialogBarColors() // don't move this hook inside the return. When closing+showing at once it throws about rendering with fewer hooks.
46
d = { ...dialogsDefaults, ...d }
47
const { sx, root, ...rest } = d.dialogProps||{}
48
+ if (d.noFrame)
49
+ return h(Modal, { open: true, children: h(Center, {}, h(d.Content)) })
50
return h(MuiDialog, {
51
open: true,
52
maxWidth: 'lg',
@@ -209,7 +212,7 @@ export async function promptDialog(msg: ReactNode, { value, field, save, addToBa
212
}
213
214
export function waitDialog() {
212
- return newDialog({ Content: CircularProgress, closable: false }).close
215
+ return newDialog({ Content: () => h(CircularProgress, { size: '20vw'}), noFrame: true, closable: false }).close
216
}
217
218
export function toast(msg: string | ReactElement, type: AlertType | ReactElement='info') {
admin/src/misc.ts
+3
-4
@@ -2,7 +2,7 @@
2
3
import { createElement as h, FC, Fragment, ReactNode, KeyboardEvent, forwardRef } from 'react'
4
import {
5
- Box,
5
+ Box, BoxProps,
6
Breakpoint,
7
ButtonProps,
8
CircularProgress,
@@ -130,9 +130,8 @@ export function InLink(props:any) {
130
return h(Link, { component: RouterLink, ...props })
131
}
132
133
-export function Center(props: any) {
134
- return h(Box, { display:'flex', height:'100%', width:'100%', justifyContent:'center', alignItems:'center', flexDirection: 'column', ...props })
135
-}
133
+export const Center = forwardRef((props: BoxProps, ref) =>
134
+ h(Box, { ref, display:'flex', height:'100%', width:'100%', justifyContent:'center', alignItems:'center', flexDirection: 'column', ...props }))
135
136
export async function manipulateConfig(k: string, work:(data:any) => any) {
137
const cfg = await apiCall('get_config', { only: [k] })