admin: close button on dialogs
Massimo Melina committed
May 7, 2022 at 14:29 UTC
0cb5cc7182d95527140bef661d1f4acdd63c5997
1 file changed
+30
-22
admin/src/dialog.ts
+30
-22
@@ -7,7 +7,8 @@ import {
7
Dialog as MuiDialog,
8
DialogContent,
9
DialogProps,
10
- DialogTitle
10
+ DialogTitle,
11
+ IconButton
12
} from '@mui/material'
13
import {
14
createElement as h, Fragment,
@@ -17,7 +18,7 @@ import {
18
useRef,
19
useState
20
} from 'react'
20
-import { Check, Error as ErrorIcon, Forward, Info, Warning } from '@mui/icons-material'
21
+import { Check, Close, Error as ErrorIcon, Forward, Info, Warning } from '@mui/icons-material'
22
import { newDialog, closeDialog, dialogsDefaults, DialogOptions } from '@hfs/shared/lib/dialogs'
23
import { Form, FormProps } from './Form'
24
export * from '@hfs/shared/lib/dialogs'
@@ -54,26 +55,33 @@ const type2ico = {
55
success: Check,
56
}
57
export async function alertDialog(msg: ReactElement | string | Error, options?: AlertType | ({ type?:AlertType, icon?: ReactElement } & Partial<DialogOptions>)) {
57
- const opt = typeof options === 'string' ? { type: options } : (options ?? {})
58
- let { type='info', ...rest } = opt
59
- if (msg instanceof Error) {
60
- msg = msg.message || String(msg)
61
- type = 'error'
62
- }
63
- return new Promise(resolve => newDialog({
64
- className: 'dialog-alert-'+type,
65
- icon: '!',
66
- onClose: resolve,
67
- ...rest,
68
- Content
69
- }))
70
-
71
- function Content(){
72
- return h(Box, { display:'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
73
- opt.icon ?? h(type2ico[type], { color:type }),
74
- isValidElement(msg) ? msg : h('div', {}, String(msg))
75
- )
76
- }
58
+ return new Promise(resolve => {
59
+ const opt = typeof options === 'string' ? { type: options } : (options ?? {})
60
+ let { type='info', ...rest } = opt
61
+ if (msg instanceof Error) {
62
+ msg = msg.message || String(msg)
63
+ type = 'error'
64
+ }
65
+ const close = newDialog({
66
+ className: 'dialog-alert-' + type,
67
+ icon: '!',
68
+ onClose: resolve,
69
+ ...rest,
70
+ Content() {
71
+ return h(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1 },
72
+ h(IconButton, {
73
+ onClick() {
74
+ close()
75
+ },
76
+ size: 'small',
77
+ sx: { position: 'absolute', right: 0, top: 0, opacity: .5 }
78
+ }, h(Close)),
79
+ opt.icon ?? h(type2ico[type], { color: type, fontSize: 'large' }),
80
+ isValidElement(msg) ? msg : h(Box, { fontSize: 'large', mb: 1 }, String(msg)),
81
+ )
82
+ }
83
+ })
84
+ })
85
}
86
87
interface ConfirmOptions { href?: string }