ArrayField: $column and $width
Massimo Melina committed
Dec 26, 2022 at 17:06 UTC
57932e8768e6b144263971920e4f5c332425fae0
4 files changed
+16
-5
admin/src/ArrayField.ts
+3
-2
@@ -6,7 +6,7 @@ import { DataGrid, GridAlignment } from '@mui/x-data-grid'
6
import { FieldDescriptor, FieldProps, labelFromKey } from '@hfs/mui-grid-form'
7
import { Box, FormHelperText, FormLabel } from '@mui/material'
8
9
-export function ArrayField<T=any>({ label, helperText, fields, value, onChange, onError, ...rest }: FieldProps<T[]> & { fields: FieldDescriptor[], height?: number }) {
9
+export function ArrayField<T=any>({ label, helperText, fields, value, onChange, onError, getApi, ...rest }: FieldProps<T[]> & { fields: FieldDescriptor[], height?: number }) {
10
const rows = useMemo(() => (value||[]).map((x,$idx) =>
11
setHidden({ ...x } as any, 'id' in x ? { $idx } : { id: $idx })),
12
[JSON.stringify(value)]) //eslint-disable-line
@@ -16,7 +16,8 @@ export function ArrayField<T=any>({ label, helperText, fields, value, onChange,
16
field: f.k,
17
headerName: f.headerName ?? (typeof f.label === 'string' ? f.label : labelFromKey(f.k)),
18
disableColumnMenu: true,
19
- flex: .1,
19
+ ...f.$width >= 8 ? { width: f.$width } : { flex: f.$width || 1 },
20
+ ...f.$column,
21
})),
22
{
23
field: '',
admin/src/InstalledPlugins.ts
+1
-1
@@ -106,7 +106,7 @@ function makeFields(config: any) {
106
return Object.entries(config).map(([k,o]: [string,any]) => {
107
if (!_.isPlainObject(o))
108
return o
109
- let { type, defaultValue, fields, ...rest } = o
109
+ let { type, defaultValue, fields, $column, $width, ...rest } = o
110
const comp = (type2comp as any)[type] as Field<any> | undefined
111
if (comp === ArrayField)
112
fields = makeFields(fields)
dev-plugins.md
+11
-1
@@ -72,7 +72,7 @@ All the following properties are essentially optional.
72
### FieldDescriptor
73
74
Currently, these properties are supported:
75
-- `type: 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'real_path'` . Default is `string`.
75
+- `type: 'string' | 'number' | 'boolean' | 'select' | 'multiselect' | 'real_path' | 'array'` . Default is `string`.
76
- `label: string` what name to display next to the field. Default is based on `key`.
77
- `defaultValue: any` value to be used when nothing is set.
78
- `helperText: string` extra text printed next to the field.
@@ -86,6 +86,14 @@ Based on `type`, other properties are supported:
86
- `select`
87
- `options: { [label]: AnyJsonValue }`
88
- `multiselect` it's like `select` but its result is an array of values.
89
+- `array` list of objects
90
+ - `fields`: an object of `FieldDescriptor`s, i.e. same format as `config`.
91
+ This field will be use for both the configuration of the grid's column, and the form's field.
92
+ Other than properties of `FieldDescriptor` you get these extra properties:
93
+ - `$column`: where you can put all the properties you want specifically to be set on the [grid's column](https://mui.com/x/api/data-grid/grid-col-def/).
94
+ - `$width`: a shortcut property that can substitute `$column: { width }` or `$column: { flex }`.
95
+ By default, a column gets flex:1 unless you specify $width. A value of 8 and higher is considered width's pixels,
96
+ while lower are flex-values.
97
- `real_path` path to server disk
98
- `files: boolean` allow to select a file. Default is `true`.
99
- `folders: boolean` allow to select a folder. Default is `false`.
@@ -171,6 +179,8 @@ HFS will scan through them in alphabetical order searching for a compatible one.
179
180
## API version history
181
182
+- 4.1 (v0.23.4)
183
+ - config.type:array added $width, $column and fixed height
184
- 4 (v0.23.0)
185
- config.type:real_path
186
- api.subscribeConfig
src/const.ts
+1
-1
@@ -17,7 +17,7 @@ export const VERSION = pkg.version
17
export const DAY = 86_400_000
18
export const SESSION_DURATION = DAY
19
20
-export const API_VERSION = 4 // introduced type:real_path and api.subscribeConfig/setConfig/getHfsConfig
20
+export const API_VERSION = 4.1 // array.$width
21
export const COMPATIBLE_API_VERSION = 1 // while changes in the api are not breaking, this number stays the same, otherwise is made equal to API_VERSION
22
23
export const SPECIAL_URI = '/~/'