admin: compact array-fields on mobile
Massimo Melina committed
Nov 3, 2024 at 22:23 UTC
326c3137adff3c6d963f0c4a59babf1108c34f0d
2 files changed
+4
-3
admin/src/ArrayField.ts
+2
-1
@@ -9,7 +9,7 @@ import { BoolField, FieldDescriptor, FieldProps, labelFromKey } from '@hfs/mui-g
9
import { Box, FormHelperText, FormLabel } from '@mui/material'
10
import { DateTimeField } from './DateTimeField'
11
import _ from 'lodash'
12
-import { Center, IconBtn } from './mui'
12
+import { Center, IconBtn, useBreakpoint } from './mui'
13
import { DataTable } from './DataTable'
14
15
type ArrayFieldProps<T> = FieldProps<T[]> & { fields: FieldDescriptor[], height?: number, reorder?: boolean, prepend?: boolean, autoRowHeight?: boolean }
@@ -31,6 +31,7 @@ export function ArrayField<T extends object>({ label, helperText, fields, value,
31
h(DataTable, {
32
rows,
33
...autoRowHeight && { getRowHeight: () => 'auto' as const },
34
+ ...!useBreakpoint('sm') && { compact: true },
35
sx: {
36
'.MuiDataGrid-virtualScroller': { minHeight: '3em' },
37
...autoRowHeight && { '.MuiDataGrid-cell': { minHeight: '52px !important' } }
admin/src/DataTable.ts
+2
-2
@@ -54,7 +54,7 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
54
label: "(not) " + (localeText['filterOperator' + _.upperFirst(op.value)] || op.value)
55
} satisfies typeof op
56
])
57
- if (!col.mergeRender)
57
+ if (!col.mergeRender && !col.sx)
58
return col
59
return {
60
...col,
@@ -63,7 +63,7 @@ export function DataTable({ columns, initialState={}, actions, actionsProps, ini
63
const { columns } = params.api.store.getSnapshot()
64
return h(Box, { maxHeight: '100%', sx: { textWrap: 'wrap', ...callable(sx as any, params) } }, // wrap if necessary, but stay within the row
65
col.renderCell ? col.renderCell(params) : params.formattedValue,
66
- h(Flex, { fontSize: 'smaller', flexWrap: 'wrap', mt: '2px', ...col.mergeRenderSx }, // wrap, normally causing overflow/hiding, if it doesn't fit
66
+ col.mergeRender && h(Flex, { fontSize: 'smaller', flexWrap: 'wrap', mt: '2px', ...col.mergeRenderSx }, // wrap, normally causing overflow/hiding, if it doesn't fit
67
...onlyTruthy(_.map(col.mergeRender, (props, other) => {
68
if (!props || columns.columnVisibilityModel[other] !== false) return null
69
const rendered = renderCell({ ...columns.lookup[other], ...props.override }, params.row)