better code: use newDialog
Massimo Melina committed
Dec 31, 2023 at 19:27 UTC
10e2bf1baa3ed31712da4685d8d3ff94791f00da
1 file changed
+30
-44
admin/src/FileForm.ts
+30
-44
@@ -2,7 +2,7 @@
2
3
import { state, useSnapState } from './state'
4
import { createElement as h, forwardRef, ReactElement, ReactNode, useEffect, useMemo, useState } from 'react'
5
-import { Alert, Box, Collapse, FormHelperText, Link, MenuItem, MenuList, Dialog, DialogTitle, DialogContent, Button } from '@mui/material'
5
+import { Alert, Box, Collapse, FormHelperText, Link, MenuItem, MenuList, useTheme } from '@mui/material'
6
import { BoolField, DisplayField, Field, FieldProps, Form, MultiSelectField, SelectField, StringField
7
} from '@hfs/mui-grid-form'
8
import { apiCall, UseApi, useApiEx } from './api'
@@ -280,32 +280,6 @@ function LinkField({ value, statusApi }: LinkFieldProps) {
280
value &&= value.indexOf(root) === 1 ? value.slice(root.length) : undefined
281
const link = prefix(data?.baseUrl || '', value)
282
const RenderLink = useMemo(() => forwardRef((props: any, ref) => h(Link, { ref, ...props, href: link, style: { height: 'auto' }, target: 'frontend' }, link)), [link])
283
-
284
-
285
- const [isQrDialogOpen, setQrDialogOpen] = useState(false);
286
-
287
- const showQrDialog = () => {
288
- setQrDialogOpen(true);
289
- };
290
-
291
- const closeDialog = () => {
292
- setQrDialogOpen(false);
293
- };
294
-
295
- const generateQRCode = async (canvas: HTMLCanvasElement, text: string) => {
296
- try {
297
- QrCreator.render({
298
- text: text,
299
- radius: 0.0, // 0.0 to 0.5
300
- ecLevel: 'H', // L, M, Q, H
301
- fill: '#536DFE', // foreground color
302
- background: null, // color or null for transparent
303
- size: 300 // in pixels
304
- }, canvas);
305
- } catch (error) {
306
- console.error('Error generating QR code:', error);
307
- }
308
- };
283
return h(Box, { display: 'flex' },
284
!urls ? 'error' : // check data is ok
285
h(DisplayField, {
@@ -320,28 +294,40 @@ function LinkField({ value, statusApi }: LinkFieldProps) {
294
disabled: !link,
295
onClick: () => navigator.clipboard.writeText(link)
296
}),
323
- h(IconBtn, {
324
- icon: QrCode2,
325
- title: "QR Code",
326
- onClick: showQrDialog
327
- }),
297
+ h(IconBtn, { icon: QrCode2, title: "QR Code", onClick: showQr }),
298
h(IconBtn, { icon: Edit, title: "Change", onClick() { changeBaseUrl().then(reload) } }),
299
)
300
}),
331
- h(Dialog, { open: isQrDialogOpen, onClose: closeDialog },
332
- h(DialogTitle, null, "QR Code"),
333
- h(DialogContent, { style: { maxWidth: '350px', margin: '0 auto' } },
334
- h('canvas', {
301
+ )
302
+
303
+ function showQr() {
304
+ newDialog({
305
+ title: "QR Code",
306
+ Content() {
307
+ const theme = useTheme()
308
+ return h('canvas', {
309
id: 'qrcode-canvas',
336
- ref: (canvas: HTMLCanvasElement) => canvas && generateQRCode(canvas, link),
310
+ ref: (canvas: HTMLCanvasElement) => canvas && generateQRCode(canvas, link, theme.palette.text.primary),
311
style: { width: '100%' },
338
- }),
339
- ),
340
- h(Box, { display: 'flex', justifyContent: 'center', marginBottom: 2 },
341
- h(Button, { onClick: closeDialog }, "Close")
342
- )
343
- )
344
- );
312
+ })
313
+ }
314
+ })
315
+ }
316
+
317
+ async function generateQRCode(canvas: HTMLCanvasElement, text: string, color: string) {
318
+ try {
319
+ QrCreator.render({
320
+ text,
321
+ radius: 0.0, // 0.0 to 0.5
322
+ ecLevel: 'H', // L, M, Q, H
323
+ fill: color, // foreground color
324
+ background: null, // color or null for transparent
325
+ size: 300 // in pixels
326
+ }, canvas);
327
+ } catch (error) {
328
+ console.error('Error generating QR code:', error);
329
+ }
330
+ }
331
}
332
333
export async function changeBaseUrl() {