dialog.title as component

Massimo Melina committed Feb 20, 2023 at 09:41 UTC c7f355e5a3d8276a838534109bd054344f820059
2 files changed +9 -5
admin/src/dialog.ts
+2 -2
@@ -19,7 +19,7 @@ import {
19 useState
20 } from 'react'
21 import { Check, Close, Error as ErrorIcon, Forward, Info, Warning } from '@mui/icons-material'
22 -import { newDialog, closeDialog, dialogsDefaults, DialogOptions } from '@hfs/shared'
22 +import { newDialog, closeDialog, dialogsDefaults, DialogOptions, componentOrNode } from '@hfs/shared'
23 import { Form, FormProps } from '@hfs/mui-grid-form'
24 import { IconBtn } from './misc'
25 import { Flex } from '@hfs/frontend/src/components'
@@ -61,7 +61,7 @@ dialogsDefaults.Container = function Container(d:DialogOptions) {
61 ...useDialogBarColors()
62 }
63 },
64 - h(Box, { flex:1, minWidth: 40 }, d.title),
64 + h(Box, { flex:1, minWidth: 40 }, componentOrNode(d.title)),
65 h(IconBtn, { icon: Close, tooltip: "close", onClick: () => closeDialog() }),
66 ),
67 h(DialogContent, {
shared/dialogs.ts
+7 -3
@@ -12,7 +12,7 @@ export interface DialogOptions {
12 closableContent?: string | ReactNode,
13 reserveClosing?: true
14 noFrame?: boolean
15 - title?: string
15 + title?: ReactNode | FunctionComponent
16 padding?: boolean
17 dialogProps?: Record<string, any>,
18
@@ -63,13 +63,17 @@ function Dialog(d:DialogOptions) {
63 onClick() { closeDialog() }
64 }, d.closableContent),
65 d.icon && h('div', { className: 'dialog-icon dialog-type' },
66 - typeof d.icon === 'function' ? h(d.icon) : d.icon),
67 - h('div', { className: 'dialog-title' }, d.title),
66 + componentOrNode(d.icon)),
67 + h('div', { className: 'dialog-title' }, componentOrNode(d.title)),
68 h('div', { className: 'dialog-content' }, h(d.Content || 'div'))
69 )
70 )
71 }
72
73 +export function componentOrNode(x: ReactNode | FunctionComponent) {
74 + return typeof x === 'function' ? h(x) : x
75 +}
76 +
77 function onKeyDown(ev:any) {
78 if (ev.key === 'Escape') {
79 closeDialog()