fix: console errors on ArrayField
Massimo Melina committed
Jul 2, 2023 at 21:54 UTC
42ef8c74fe71643e5e5b3559df8825455834aab1
1 file changed
+11
-5
admin/src/ArrayField.ts
+11
-5
@@ -8,10 +8,14 @@ import { DataGrid, GridAlignment } from '@mui/x-data-grid'
8
import { FieldDescriptor, FieldProps, labelFromKey } from '@hfs/mui-grid-form'
9
import { Box, FormHelperText, FormLabel } from '@mui/material'
10
11
-export function ArrayField<T extends object>({ label, helperText, fields, value, onChange, onError, getApi, ...rest }: FieldProps<T[]> & { fields: FieldDescriptor[], height?: number }) {
11
+type ArrayFieldProps<T> = FieldProps<T[]> & { fields: FieldDescriptor[], height?: number }
12
+export function ArrayField<T extends object>({ label, helperText, fields, value, onChange, onError, getApi, ...rest }: ArrayFieldProps<T>) {
13
const rows = useMemo(() => (value||[]).map((x,$idx) =>
14
setHidden({ ...x } as any, 'id' in x ? { $idx } : { id: $idx })),
15
[JSON.stringify(value)]) //eslint-disable-line
16
+ const form = {
17
+ fields: fields.map(({ $width, $column, ...rest }) => rest)
18
+ }
19
const columns = useMemo(() => {
20
return [
21
...fields.map(f => ({
@@ -29,22 +33,24 @@ export function ArrayField<T extends object>({ label, helperText, fields, value,
33
align: 'center' as GridAlignment,
34
headerAlign: 'center' as GridAlignment,
35
renderHeader(){
36
+ const title = "Add"
37
return h(IconBtn, {
38
icon: Add,
34
- title: "Add",
39
+ title,
40
onClick: (event:any) =>
36
- formDialog({ form: { fields } }).then(o => // @ts-ignore
41
+ formDialog({ form, title }).then(o => // @ts-ignore
42
o && onChange([...value||[], o], { was: value, event }))
43
})
44
},
45
renderCell({ row }: any) {
46
const { $idx=row.id } = row
47
+ const title = "Modify"
48
return h('div', {},
49
h(IconBtn, {
50
icon: Edit,
45
- title: "Modify",
51
+ title,
52
onClick: (event:any) =>
47
- formDialog<T>({ values: row, form: { fields } }).then(newRec => {
53
+ formDialog<T>({ values: row, form, title }).then(newRec => {
54
if (!newRec) return
55
const newValue = value!.map((oldRec, i) => i === $idx ? newRec : oldRec)
56
onChange(newValue, { was: value, event })