fix: admin: type mismatch
Massimo Melina committed
Mar 30, 2022 at 10:16 UTC
a00856df2501ac6a7ae0f06c43ce5525c7749e43
2 files changed
+24
-12
admin/src/Form.ts
+16
-5
@@ -1,7 +1,18 @@
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
-import { createElement as h, FC, Fragment, isValidElement, ReactElement, ReactNode, useEffect, useState, useRef, Ref } from 'react'
2
import {
4
- Box, Button,
3
+ createElement as h,
4
+ FC,
5
+ Fragment,
6
+ isValidElement,
7
+ ReactElement,
8
+ ReactNode,
9
+ useEffect,
10
+ useState,
11
+ useRef,
12
+ MutableRefObject
13
+} from 'react'
14
+import {
15
+ Box, BoxProps, Button,
16
Checkbox,
17
FormControl,
18
FormControlLabel, FormGroup, FormHelperText,
@@ -30,7 +41,7 @@ export type Field<T> = FC<FieldProps<T>>
41
42
type Dict<T=any> = Record<string,T>
43
33
-export interface FormProps<Values> {
44
+export interface FormProps<Values> extends Partial<BoxProps> {
45
fields: (FieldDescriptor | ReactElement | null | undefined | false)[]
46
defaults?: (f:FieldDescriptor) => any
47
values: Values
@@ -40,7 +51,7 @@ export interface FormProps<Values> {
51
addToBar?: ReactNode[]
52
barSx?: Dict
53
onError?: (err: any) => void
43
- formRef?: Ref<HTMLFormElement>
54
+ formRef?: MutableRefObject<HTMLFormElement | undefined>
55
}
56
export function Form<Values extends Dict>({ fields, values, set, defaults, save, stickyBar, addToBar=[], barSx, formRef, onError, ...rest }: FormProps<Values>) {
57
const mounted = useRef(false)
@@ -88,7 +99,7 @@ export function Form<Values extends Dict>({ fields, values, set, defaults, save,
99
}, [pendingSubmit]) //eslint-disable-line
100
101
return h('form', {
91
- ref: formRef,
102
+ ref: formRef && (x => formRef.current = x ? x as HTMLFormElement : undefined),
103
onSubmit(ev) {
104
ev.preventDefault()
105
},
admin/src/dialog.ts
+8
-7
@@ -11,7 +11,7 @@ import {
11
} from 'react'
12
import { Check, Error as ErrorIcon, Forward, Info, Warning } from '@mui/icons-material'
13
import { newDialog, closeDialog, dialogsDefaults, DialogOptions } from '@hfs/shared/lib/dialogs'
14
-import { Form } from './Form'
14
+import { Form, FormProps } from './Form'
15
export * from '@hfs/shared/lib/dialogs'
16
17
dialogsDefaults.Container = function Container(d:DialogOptions) {
@@ -20,17 +20,18 @@ dialogsDefaults.Container = function Container(d:DialogOptions) {
20
}, [])
21
const ref = useRef<HTMLElement>()
22
d = { ...dialogsDefaults, ...d }
23
+ const { sx, ...rest } = d.dialogProps||{}
24
const p = d.padding ? 2 : 0
25
return h(MuiDialog, {
26
open: true,
27
maxWidth: 'lg',
28
+ ...rest,
29
onClose: ()=> closeDialog(),
30
},
31
d.title && h(DialogTitle, {}, d.title),
32
h(DialogContent, {
33
ref,
32
- ...d.dialogProps,
33
- sx:{ ...d.dialogProps?.sx, px: p, pb: p, display: 'flex', flexDirection: 'column', }
34
+ sx: { ...sx, px: p, pb: p, display: 'flex', flexDirection: 'column', }
35
}, h(d.Content) )
36
)
37
}
@@ -84,8 +85,8 @@ export async function confirmDialog(msg: string, { href }: ConfirmOptions={}) :
85
}
86
}
87
87
-type FormProps = Parameters<typeof Form>[0]
88
-export async function formDialog(props: FormProps) : Promise<FormProps['values']> {
88
+type FormDialog<T> = Omit<FormProps<T>, 'save' | 'set'> & Partial<Pick<FormProps<T>, 'save'>>;
89
+export async function formDialog<T>(props: FormDialog<T>) : Promise<T> {
90
return new Promise(resolve => newDialog({
91
className: 'dialog-confirm',
92
icon: '?',
@@ -112,11 +113,11 @@ export async function formDialog(props: FormProps) : Promise<FormProps['values']
113
}
114
115
export async function promptDialog(msg: string, props:any={}) : Promise<string | undefined> {
115
- return formDialog({
116
+ return formDialog<{ text: string }>({
117
...props,
118
fields: [
119
h(Box, {}, msg),
119
- { k: 'text', label: null, autoFocus: true, },
120
+ { k: 'text', label: null, autoFocus: true, ...props.field },
121
],
122
save: {
123
children: "Continue",